Using precision layout content

Precision layout sections give you more creative freedom when designing your website.

Unlike Standard sections, Precision layout sections include a flexible grid system that allows you to position and arrange widgets more freely. You can layer content, resize elements, move widgets around the grid, and create more unique layouts.

Precision sections are ideal for creating eye-catching hero banners, overlapping designs, artistic layouts, and more advanced page sections.

Add a Precision Layout section

1. While in the site builder, click Add content in the top bar.
2. From the dropdown menu, select Add content again.
3. Highlighted placement areas will appear throughout your website.
4. Click one of the highlighted placement areas to choose where you would like to add your new section.

This will open the section layouts panel.

Select a Precision layout

At the top left of the layouts panel, you will see two options:

• Standard
• Precision

Click Precision to browse the available Precision layout sections.

Choose the layout that best suits your needs and add it to your website.

Understanding the Precision grid

Precision sections use a visible grid system to help you position content.

Widgets snap into place along the grid, making it easier to align and organise your design while still allowing for more creative layouts than Standard sections.

Inside a Precision section, you can:

• Move widgets around the grid
• Layer elements on top of each other
• Resize widgets manually
• Bring elements forward or backward
• Show or hide widgets on desktop or mobile
• Edit widgets normally as you would in Standard sections

Edit and customise widgets

Once your Precision section has been added, you can fully customise the content inside it.

You can:

• Edit text widgets
• Replace images
• Add or remove widgets
• Change colours and styles
• Move widgets to different positions on the grid

Resize elements

Precision sections allow you to resize widgets manually.

Click on a widget, such as an image, and drag the resize handles to adjust its size within the grid.

This makes it easier to create more dynamic and visually interesting layouts.

Layer content

One of the main advantages of Precision Layout sections is the ability to overlap elements.

For example, you can:

• Place text over images
• Layer decorative shapes behind objects
• Position images partially over backgrounds
• Create more artistic hero sections

You can also arrange the order of elements by bringing widgets forward or sending them backwards.

Edit the mobile layout independently

Precision sections also allow you to edit the mobile layout separately from the desktop version.

Click Edit mobile layout to adjust widget positioning specifically for mobile devices.

This allows you to improve readability and spacing on smaller screens without affecting the desktop layout.

Publish your changes

Once you are happy with your design, do not forget to publish your website to make your changes visible online.