21.1 Building Pages with Sections

AIUNIFY Leads Website Builder creates Website Pages from individual Sections. Each section represents a defined part of the page and uses a supported Theme Section configuration.

Examples of section roles can include structural areas such as Header and Footer as well as other content sections made available by the active website theme.

The sections available to a user are determined by the application's active Theme Section configuration rather than by arbitrary HTML section names.

21.2 Confirm the Builder Context First

Before adding a section, verify all three parts of the current Website Builder context:

1. The correct Website.
2. The correct Website Page.
3. The correct Website Language.

Important: Website Builder sections are associated with a specific Website, Page, and Language. Confirm all three before creating content.

21.3 Add Section Permission

The Add Section control is shown when the signed-in user has:

1. website_builder_create, or
2. administrative access.

If the Add Section control is not visible, your assigned role may not include section-creation permission.

21.4 Adding a Section

To add a section:

1. Open Website Builder.
2. Select the correct Website.
3. Select the Website Page.
4. Select the Website Language.
5. Select Add Section.
6. Choose an available section type.
7. Configure the required Section Layout.
8. Complete the supported content fields.
9. Save the section.

21.5 Active Theme Sections

When a section is created, the application looks for an active Theme Section whose Section Key matches the requested section.

The Theme Section provides the schema, defaults, and supported structure that Website Builder uses to construct the section.

This keeps Builder content aligned with layouts supported by the active theme system.

21.6 Duplicate Section Protection

AIUNIFY Leads checks whether the selected Section Key already exists for the same Website, Website Page, and Website Language.

If the section has already been added in that exact context, the confirmed message is:

This section has already been added for this page and language.

When this occurs, edit the existing section instead of creating another copy of the same Section Key.

21.7 Section Layout Is Required

In the confirmed Section Editor, Section Layout is a required configuration.

The selected layout determines which supported layout variation is used when the section is rendered.

21.8 Current Layout Preview

The Section Editor displays the current layout through a live preview card.

Selecting the preview area opens the Section Layout selection interface so another supported layout can be reviewed and selected.

21.9 Section Layout Selection Modal

The layout-selection interface presents supported layouts as visual cards.

Confirmed functions include:

Function	Purpose
Layout Cards	Display available layout choices for the selected Section Key.
Selected Indicator	Shows which layout is currently selected.
Search	Filters the available layout choices.
Desktop Preview	Displays a desktop-oriented preview of the layout card.
Mobile Preview	Displays a mobile-oriented preview of the same layout card.

21.10 Desktop and Mobile Layout Preview

Each layout card includes a preview-mode toggle that can switch between Desktop and Mobile representations.

This lets you compare the general responsive presentation before choosing the layout.

The Builder's administrative layout preview is intentionally forced into a consistent light-mode preview environment. That preview behavior should not be confused with changing the website's actual stored Theme Mode.

21.11 Selecting a Layout

To change a section layout:

1. Select the current Section Layout preview.
2. Review the available layout cards.
3. Use Search when many layouts are available.
4. Compare Desktop and Mobile previews as needed.
5. Select the preferred layout.
6. Review the Section Editor after the choice is applied.
7. Save or Update the section.

21.12 Section List

After sections are added, Website Builder displays them in the section list.

Each section can be selected from the list to open its content in the editor.

The list also supplies the drag controls used for changing section order, which is covered in Chapter 22.

21.13 Choosing Sections Strategically

Before adding every available section, determine what the page is intended to accomplish.

1. Use only sections relevant to the visitor's intended journey.
2. Place the most important information in a logical reading order.
3. Review both desktop and mobile presentation.
4. Avoid recreating a section that already exists for the same page and language.
5. Preview the public page after layout changes.

21.14 Recommended Section Creation Workflow

1. Confirm Website, Page, and Language.
2. Review sections already on the page.
3. Select Add Section.
4. Choose the intended section type.
5. Compare available Section Layouts.
6. Review Desktop and Mobile previews.
7. Select the layout.
8. Complete the section's content fields.
9. Save the section.
10. Preview the resulting Website Page.