The Advanced Page Builder allows you to fully customize the appearance and layout of your community’s homepage before sign-in (the ability to customize more pages is coming soon). This article walks through where to access the builder, how the interface works, and how to structure and design your page using sections, groups, and customizable elements.
Accessing the Advanced Builder
To begin customizing, navigate to Customization → Pages, then click on the Homepage (Before Sign-In). On the right-hand side of the page by the edit button, you’ll see an Advanced option that opens the page builder.
If you do not see this option in your dashboard, contact [email protected] to discuss getting this enabled for your community.
Understanding the Page Builder
When you open the builder, you’ll see an editable preview of your homepage in the middle along with tools for layout, structure, and design.
Along the top, you can switch between desktop and mobile previews to see how the page will appear on different devices. You’ll also find the options to preview before publishing (must log out for homepage before sign-in), publish, and revert back to your default homepage if needed. Your homepage will not be visible to the public until you choose to publish it. Drafts can be saved at any time.
The page builder is setup using two side panels:
On the left, you’ll see a list of all available elements as well as a full outline of the page. Selecting any section or element from the outline brings you directly to it in the preview.
On the right, you’ll see the settings for whichever section or element is selected. This is where you control styling options such as background, spacing, fonts, colors, and layout settings.
Structuring Your Homepage
Your homepage starts with a default layout that includes a hero section, community events, and content. These can be rearranged, modified, or removed based on your goals.
Page structure is created using Vertical Sections and Element Groups. Vertical sections allow you to stack elements on top of each other, which is helpful for full-width sections or clearly separated content blocks. Element groups allow you to place elements side by side. Learn more about vertical sections and element groups below.
Any section can be duplicated using the copy option, making it easy to reuse layouts you like. If you need to remove something, the trash can icon is available for all sections, groups, and elements. Selecting a section opens its settings, where you can adjust padding, spacing, and background styles as well.
Adding Elements to the Page
Once your structure is in place, you can begin adding elements. Drag elements from the left panel into the sections or groups you’ve created. Selecting an individual element opens its settings on the right, where you can adjust styling, text content, colors, spacing, and other options. If you’ve already customized an element and want another version, the copy feature lets you duplicate it quickly without starting from scratch.
Elements Overview
Elements fall into several categories, each designed to support different types of content.
Layout Elements
Layout elements define the overall structure of your homepage. These elements determine how content is arranged before you add any text, images, or community feeds.
Vertical Section
A vertical section creates a full-width block where elements can be stacked on top of each other. After adding a section, you can adjust its background, padding, and spacing in the settings panel on the right.
Element Group
Element groups allow you to place items side by side. You can choose the number of columns in the settings panel. If you add more items than the selected column count, additional rows will be created automatically. This is useful for grids, icon rows, or multi-column text.
If you add more items than the selected column count, additional rows will be created automatically. This is useful for grids, icon rows, or multi-column text.
Divider
A divider adds a visual break between sections. Dividers can be styled in the settings panel to match the spacing and theme of the page.
Community Elements
Community elements pull dynamic content from your Gradual community:
Events displays a feed of upcoming events.
Content displays published community content and includes filtering options as well as list or grid views.
Hero banners appear at the top of the page and can be fully customized. You can adjust banner style, background, button styles, and text. Multiple hero banners are supported in the Advanced Builder.
For more about hero banners, visit the article here.
Additional Elements
Additional elements help you add supporting content—such as text, calls-to-action, and FAQ's throughout the page. After dragging any element onto the page, selecting it will open its settings in the right-hand panel.
Text
The text element is used for headings, descriptions, and content blocks. You can edit the text directly in the preview, and adjust styling in the settings panel, including font size and weight, color, alignment, spacing, and links.
Button
Buttons allow you to add clear calls-to-action. In the settings panel, you can choose whether the button links to a URL or opens the sign-in flow, and customize the button’s shape, padding, color, and alignment.
Social Sharing
The social sharing element adds platform icons to the page. These currently provide simple linking functionality, with additional options coming soon.
Page customization is currently in phase 1, more functionality will be coming soon. If you have questions about customizing your homepage or want to get started, reach out to [email protected]!