Sections
Sections are fundamental elements for structuring content. They act as logical groupings for related elements, enhancing readability, accessibility, and maintainability of your code. Using appropriate container elements is crucial for building well-structured and scalable web pages.
Overview of Layout Sections
Layout sections are the foundational building blocks for creating structured and visually appealing page layouts. They control how content is arranged, spaced, and styled. This guide covers the common configuration options shared across all layout sections, as well as the specific settings for each type.
The primary layout sections include:
- Column Section: Arranges content into multiple, evenly-spaced columns.
- Grid Section: Creates complex, masonry-style layouts on a 12-column grid.
- Split Section: A two-column layout, typically for an image and text side-by-side.
- Inline Section: Displays a series of items horizontally in a row.
- Tab Section: Organizes content into interactive tabs.
Common Configuration Options
These settings are available on most or all layout sections and provide global control over the section's appearance and structure.
General Settings
| Option Name | Purpose | Best Use Case |
|---|---|---|
| Section title | Sets the main heading for the section. | Use for the primary title of the section, displayed prominently at the top. |
| Link Title / Link | Creates a call-to-action link or button for the section. | Use when you want to direct users to another page or resource from the section header. |
| Section Width | Controls the maximum width of the section's content (e.g., "Full" or "Limit"). | Choose "Full" for hero sections that span the viewport, and "Limit" for standard content to maintain readability. |
Styling & Background
| Option Name | Purpose | Best Use Case |
|---|---|---|
| Text Color | Sets the default text color for all content within the section. | Ensure high contrast between the text color and background for readability. |
| Use Gradient | Applies a pre-defined gradient as the section background. | Use gradients to add visual depth. This overrides the solid background color option. |
| Background Color | Sets a solid background color for the section. | Use when a simple, solid color background is needed. This is ignored if "Use Gradient" is checked. |
| Gradient Color | Selects from a list of pre-defined gradients if "Use Gradient" is checked. | Choose a gradient that complements your brand and does not interfere with text readability. |
Spacing
| Option Name | Purpose | Best Use Case |
|---|---|---|
| Margin Top / Margin Bottom | Adds vertical spacing above or below the section. | Adjust margins to create vertical rhythm and separate the section from adjacent content. |
| Add Padding | Adds horizontal and vertical padding inside the section container. | Use padding to create space between the section's content and its outer edges. |
Section-Specific Configurations
The following sections detail the unique configuration options for each layout type.
Column Section
Ideal for creating balanced layouts for text, images, and other widgets in multiple columns.
| Option Name | Purpose | Best Use Case |
|---|---|---|
| Set Gap | Defines the space between columns (Standard, Medium, Large, Extra Large, None). | Use "Standard" for most layouts. Use larger gaps to create more separation between content blocks. |
| Match Content Heights | Forces all columns to have the same height, aligning content vertically. | Enable this when you have cards or content blocks that should appear visually aligned. |
| Background Image / Layout | Applies a background image to the entire section with layout options (Cover, Repeat, Parallax). | Use a subtle image to add texture. "Cover" is best for most cases. |
Grid Section
For complex, masonry-style layouts. Widgets are placed onto a flexible 12-column grid.
| Option Name | Purpose | Best Use Case |
|---|---|---|
| Grid Item Array | Defines the layout of each widget in [col-span, row-span] format. | Example: [8,1], [4,2], [8,1] creates a grid with three items of varying sizes. |
| Set Gap | Defines the space between grid items (Standard, Large, None). | "None" can be used to create seamless, mosaic-like image grids. |
| Background Image / Layout | Applies a background image to the entire section with layout options (Cover, Repeat, Parallax). | Choose a subtle background image that doesn't clash with the grid items. |
Note: The number of widgets added to the section must match the number of items defined in the Grid Item Array.
Split Section
Creates a two-column layout, perfect for feature highlights with an image and text.
| Option Name | Purpose | Best Use Case |
|---|---|---|
| Layout | Determines the position of the image: "Image Left" or "Image Right". | Alternate the layout down a page to create a dynamic, zig-zag pattern. |
| Proportions | Sets the width ratio between the two columns (e.g., 50/50, 66/33, 25/75). | Use 50/50 for a balanced look, or other ratios when one side has more content. |
| Widget Image | Selects the primary image to display in the media column of the split. | Choose a visually compelling image that complements the text content. |
Inline Section
Displays a series of items horizontally. Perfect for logos, icons, or badges.
| Option Name | Purpose | Best Use Case |
|---|---|---|
| Number of Items | Sets the number of columns for the inline items (from one to twelve). | Choose a number that allows each item to be displayed clearly without being too cramped. |
| Set Gap | Defines the horizontal space between each item (Narrow, Standard, Large, None). | Use "Standard" or "Large" to ensure there is enough breathing room between items. |
Tab Section
Organizes content into a set of interactive tabs to save space.
| Option Name | Purpose | Best Use Case |
|---|---|---|
| Tab 1-10 Header | Defines the text label for each tab. Up to 10 tabs can be created. | Use short, descriptive titles (e.g., "Overview," "Specifications"). |
Tip: To add a new tab, fill in its header text. To remove a tab, clear its header text. For each tab created, a corresponding widget zone will appear for its content.
Best Practices
Content Guidelines
- Be Consistent: Use similar types of content (e.g., all feature cards, all text blocks) within a section for a cohesive design.
- Keep It Concise: For complex layouts like Split or Tab sections, keep text clear and to the point to avoid overwhelming the user.
Design Recommendations
- Prioritize Readability: Always ensure text is legible against your chosen background colors, gradients, or images.
- Use Space Wisely: Use margins, padding, and gaps to create a balanced and uncluttered layout. Avoid placing too much content in a small space.
- Check Responsiveness: Always preview your layouts on different screen sizes to ensure they adapt correctly and provide a good user experience on mobile devices.
One Column
1 Column
Two Column
2 Column
2 Column
2 Column Left Weighted
2 Column
2 Column
2 Column Right Weighted
Three Column
3 Column
3 Column
3 Column
3 Column Left Weighted
3 Column
3 Column
3 Column
3 Column Center Weighted
3 Column
3 Column
3 Column
3 Column Right Weighted
Four Section
4 Column
4 Column
4 Column
4 Column
4 Column Left
4 Column
4 Column
4 Column
4 Column
4 Column Left Center
4 Column
4 Column
4 Column
4 Column
4 Column Right Center
4 Column
4 Column
4 Column
4 Column
4 Column Right
Inline Section
Item 1
Item 2
Additional Items up to 12 total
Split Section
1 Column B
Grid Section
1 Cell
1 Cell
1 Cell
Accordion Section