Essentials Designer
Design and preview page layout layers using column, section, and web part mockup layers.
Configuration Guide
- Add the Essentials Designer web part to the page.
- Choose a layout mode or mockup preset.
- Configure column and section layers.
- Add or edit web part layer previews using the available layer controls.
- Adjust visual styling, spacing, and layout options for each mockup layer.
Key Features Configuration
| Feature | Description | Configuration |
|---|---|---|
| Column layer preview | Visualise column-based layout mockups | Configure column-based layout mockups |
| Section layer preview | Arrange section-level layout blocks | Arrange section-level blocks |
| Web part layer preview | Show web part placeholder frames | Show web part placeholders and layout frames |
| Mockup presets | Apply predefined design structures | Choose and apply predefined design structures |
Property Pane Options
| Option | Type | Description |
|---|---|---|
| Layer mode | Dropdown / Radio | Select the current mockup layer mode |
| Column layer | Toggle / selector | Enable or preview column layers |
| Section layer | Toggle / selector | Enable or preview section layers |
| Web part layer | Toggle / selector | Enable or preview web part placeholders |
Illustration
