Precision layout sections offer more creative freedom than Standard sections. They feature a flexible grid system that allows you to layer content, resize elements, and position widgets freely. These are ideal for eye-catching hero banners, overlapping designs, and artistic layouts.
To add a precision layout section:
- Press Add content in the top navigation bar.
- Press Add content again from the dropdown menu.
- Select a highlighted placement area on your website where you want to add the section.
4. In the layouts panel that opens, select Precision at the top left to browse available layouts.
5. Select the layout that best suits your needs to add it to your website.
Working with the Precision grid
Precision sections use a visible grid to help you align content. Widgets snap to the grid, but you have full control over the design.
Select and drag a widget’s resize handles to adjust its size.
Overlap elements, such as placing text over images or shapes behind objects. Use the forward/backward controls to manage the order.
Drag widgets to any position on the grid.
Edit, add, or remove widgets just as you would in a Standard section.
Edit the mobile layout independently
You can edit the mobile version of a Precision section independently of the desktop view. This allows you to optimize readability and spacing for smaller screens without changing your desktop design.
To edit your mobile layout:
- Press Edit mobile layout in the section settings toolbar.
2. Adjust the widget positioning specifically for mobile devices.
3. Once you’re happy with your design, press Publish.