Once a new Page has been added, you can use the Drag & Drop Page Builder to customise the content and layout of your page. Whether you're editing a template or building your own, the options are the same, giving you control over the items in the page and how they are presented.
Click on the headings below to find out more about each key feature in your Page Builder
Page Builder
The Page Builder is split into two core areas, the Preview and the Properties & Navigation Panel.
On the Left of the screen is the Preview of your Page, allowing you to view the page as the end user would. You can also interact and update widgets and sections directly.
On the Right of the screen is the Builder & Page Navigation Panel. This is where you can control the elements that are added to the page and where you can create your Drag & Drop navigation. To read more about the Navigation Panel click here.
Name & Save your Page
At the top of your page you'll find prompts to Name the Page and where you can Save it.
You can only click the Save button if changes have been made. Once you Save the page, your changes will automatically be available to any users who can View the page.
Page Properties
The Page itself can have properties applied to it, allowing you to add a background color, image and alter the padding and spacing.
You can select the page by using the navigation arrows and click Up, or by clicking on the Page container (indicated by the arrow below). You can then alter your Page Properties and apply styling options in the Builder Panel.
Sections
Sections allow you to construct the general page layout by grouping content together and is where you add widgets to feature your content. Pre-configured Sections are available when creating with a Page Template.
Aspects of Sections that can be customised include the Padding, Spacing, Background Color & Images. Additionally, users can also select if a section's content appears Vertically or Horizontally.
Widgets
These are used to feature content and inform the user viewing your page about a specific item or asset. Widgets can only be added to a section and there are a number of widgets to choose from.
To add a new widget, select the desired option in the Builder Panel and drag it into a section.
Color Palette Widget
The Color Palette Widget can be used to highlight the colors that are essential to your Brand. Simply select a color to feature, add a Name and the color along with the corresponding Hex, RGB & CMYK codes will be automatically added to the widget.
You can also customize the Background of this widget by changing the:
- Background Color
- Padding
- Ratio (space the widget takes up in the section)
Text Widget
The Text Widget is used to communicate key pieces of information and can also be used to highlight the Typography of your Brand.
Unlike other widgets, the majority of the customisation for this widget occurs on the Page Preview - just click on the relevant Text Widget. You can then add or update the text and applying styling via the text toolbar. The fonts available reflect what appears in your Admin area.
You can also customize the Background of this widget by changing the:
- Background Color (in Text Editor)
- Background Image (In Side Panel)
- Padding (in Side Panel)
- Ratio (space the widget takes up in the Section in Side Panel)
Image Widget
The Image Widget allows you to feature images to aid with visual story telling or to highlight key assets for your Brand or Company.
There are two ways to add assets, either via URL or via the Resources Select button. Images added via the DAM select button are subject to the same permissions that the user would view in the folder. The asset will also remain linked to the folder version, ensuring that if updated, those changes are automatically reflected on the Page. You can read more about both of these options here.
Once the asset has been selected, you are able to resize and reposition the image, ensuring it's located in the correct location. You can also choose to Hide the download icon which will remove that action for the user when they're viewing the page.
Video Widget
The Video Widget can be added to feature an important video or how-to guide for your company.
Like the image widget, you can add Video files via URL or selecting a video from the DAM (Resources module). You can also hide the Download icon if required.
For video files specifically, you can choose if the video is autoplayed when the page loads or not. Note that this won't apply on the Page Builder.
To note, direct CDN links are supported only when the file type suffix (“.mov”, “.mp4”) are added at the end of the URL.
You can also customize the Background of this widget by changing:
- Background Color
- Padding
- Ratio (space the widget takes up in the Section in Side Panel)
Button Widget
Add a Button Widget to enable navigation to other areas of the platform, other pages or as a prompt to download assets.
You can customise a number of items for the button itself:
- Add Button Name
- Customise the Button's font and font size
- Enter a URL link
- Customise Button Color and Button Name Color
- Change Button alignment
- The padding within the Button (around the text)
You can also customize the Widget's background, changing:
- Background Color
- Background Image
- Padding (around the Button widget)
- Ratio (space the widget takes up in the Section in Side Panel)
Spacer Widget
The Spacer Widgets can be used as a way to add empty space between elements, breaking up the page and providing additional padding when required.
You can also customize this widget by changing:
- Color
- Padding
- Ratio (space the widget takes up in the Section in Side Panel)
Change Device Size
At the top of the page, you cab access different preview modes to ensure your page looks consistent on Desktop, Tablet, and Mobile devices. You will notice differences in the layouts between Desktop and other options, as the layouts are optimized for smaller screens.
To preview Drag & Drop Page in different device modes, follow these steps:
- In Page Builder, navigate to the top bar.
- Click the Device icon (as highlighted on the Right below) and enter Desktop preview mode by default.
- Click on the Tablet or Mobile icons to switch to those modes as required.
- To exit preview mode and return to edit mode, click on Exit button.
You can read more about this feature here.
If you're interested in learning more about Drag & Drop Pages please click here or on the suggestions below.
You can view the full list of related pages here or view suggested articles below.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article