• Before purchasing:
    Please review the product description and compatibility requirements before placing your order. Contact us with any questions to confirm the product meets your needs. Refunds are not available once the product has been downloaded. By purchasing, you agree to our License Agreement.
  • Save More with Paid Membership

    Access over 150 add-ons from Basic and Premium pack for less than buying them individually.

    See membership levels
[XB] Page Builder: Visual Constructor for Custom & Landing Page

[XB] Page Builder: Visual Constructor for Custom & Landing Page 1.0.1 1

You must log in or register to purchase ($55.00)
Version: Current
Documentation home

Open a page title in Communication > Page builder.

Rows, columns and blocks​


  1. Click Add row to create a section with its first column.
  2. Use Add column in that row when you need additional columns.
  3. Open the column's Add block menu and choose a content type.
  4. Complete the block form and save.

The builder represents structure and ordering. Use View to inspect the actual frontend rendering.

layout-overview.webp


Rows contain columns, and columns contain selectable content blocks.

Ordering​


Use the drag handles to reorder rows, move columns within or between rows, and move blocks within or between columns on the current page. Layout ordering saves automatically after a successful move. Text and settings forms still need their own Save action.

Reload the builder after a move if you need to confirm the saved structure.

Column widths​


The grid has 12 units:

ArrangementDesktop widthsNarrow-screen widths
One content column12/1212/12
Two equal columns6/12 + 6/1212/12 + 12/12
Text and smaller media8/12 + 4/1212/12 + 12/12
Three feature cards4/12 + 4/12 + 4/1212/12 each

Auto provides flexible equal-width columns. Narrow-screen width is a separate setting and defaults to full width. Configure it deliberately when you want columns to remain side by side.

layout-column-widths.webp


A half-width desktop column can occupy the full width on phones.

Row settings​


SettingEffect
Vertical alignmentStretch, top, center or bottom alignment of columns
Row layoutBoxed or full-width section background
StyleNone, Content, Page or Hero
SpacingNone, Small, Medium or Large vertical spacing
Divide columnsAdds separation between columns
AnchorA fragment target for direct links
CSS classesCustom classes for this row
Enabled and scheduleAvailability of the entire row

For a full landing page, consider both the page layout and row layout. See Appearance.

layout-row-settings.webp


Row settings control alignment, section appearance and availability.

Anchors​


Use an anchor such as getting-started, then link to custom-pages/community-guide/#getting-started. Enter the anchor without the hash. Start with a letter and use letters, numbers, hyphens or underscores. Give sections and blocks distinct anchors on a page.

Copying and removing structure​


Rows and blocks have duplicate actions. A row copy includes its columns and blocks. Copies receive unique anchors. A copied global placement still uses its shared source; use Detach when you need independent content.

Deleting a row removes its columns and blocks. Deleting a column removes its blocks. Check the containing structure before confirming deletion.

Check narrow screens​


Open the public page at approximately 390 px wide and then at desktop width. Check reading order, wrapped headings, buttons, dividers and embedded content. Widget templates and custom HTML can need their own layout adjustments.
Was this document helpful?
Back
Top