Section Grids is a handy feature in the Unbounce Builder that helps you precisely align elements within a section on your landing page. By displaying a customizable grid and snapping your elements to that grid, you can achieve a cleaner, more consistent layout throughout your page.
Why Use Section Grids?
- Easy Alignment: Eliminate guesswork by snapping elements into place for consistent positioning.
- Streamlined Layout: The grid keeps everything neatly organized, saving time and reducing design mistakes or misaligned elements.
Locating Section Grid
You’ll find the Grid settings in the Section tab in the Builder, on the right side of your screen when you select a section. Here’s a quick overview of what you’ll see:
- Show Grid Toggle: Turn the grid display on or off.
- Padding: Adjust the space above, below, and on either side of the grid within the selected section.
- Grid Settings: Enable or disable the snap-to-grid functionality, and customize the grid’s dimensions and spacing.
Step-by-Step Setup
Follow these steps to set up and customize Snap to Grid:
1. Select a Section
- In the Unbounce Builder, click on the section you’d like to modify.
- On the right-hand side, you’ll see the Section tab appear
2. Show or Hide the Grid
- Within the Section tab, look for the Show Grid toggle.
- The grid is enabled by default on new pages. Disable it if you want to hide the grid on your page.
3. Adjust Section Padding
- In the Padding area, you can set the Top, Bottom, Left, and Right padding for the section (0-200 pixels).
- These values determine how much space surrounds the grid within your selected section, helping you create neat spacing around your elements and consistent margins and vertical section padding on your page.
4. Configure Grid Settings
- Scroll down to the Grid Settings area.
- Snap to Grid Checkbox: Enable this to automatically align elements to the grid as you move them around.
- Columns: Specify how many columns the grid should have (1-50).
- Row Height (px): Determine the vertical size of each row within the grid (1-10,000).
- Horizontal Gap (px) & Vertical Gap (px): Set the spacing between columns and rows (0-100). The grid squares will adjust accordingly, offering you even spacing in all directions.
5. Position Your Elements
- Once snap-to-grid is enabled, drag and drop any element (like text or images) onto your page.
- Watch as each element “snaps” neatly into place along the grid lines, ensuring a clean layout.
Recommended Layouts
To help you get started, we've provided some examples below of grid layouts you can use, depending on your needs.
Default
The default layout when you start with a blank template is a 24-column layout on desktop with a row height of 24 pixels and horizontal and vertical gaps of 12 pixels. For mobile, the columns are reduced to 6 while maintaining the same row height and gaps. This starting layout should fit most use cases. Here's what it looks like:
Desktop
Mobile
12 Column
If you prefer working in a 12-column layout, you'll want to use these settings as a starting point. For 12-column on desktop, we set the number of columns to 12 with a row height of 8 pixels and a vertical gap of 8 pixels. We set the horizontal gap to 36 pixels for consistent horizontal spacing throughout the page.
Mobile
8 Pixel Grid
For situations where you're looking for more precision, the 8-pixel grid is a great place to start. This grid utilizes more columns, a smaller row height, and removes the horizontal and vertical gaps between grid squares to help with precise placement for elements on your page.
Desktop
Mobile
These are just a few of the ways you can set up your grids to help you easily build the high-performing pages of your dreams—but the customization options are endless, so find one that works for you.
Tips for Best Results
Start Simple: Begin with fewer columns and moderate row heights, then tweak the numbers to see what works best for your design.
Consistent Spacing: Use uniform Horizontal and Vertical Gaps to keep your page looking polished and balanced.
Experiment: Feel free to toggle Snap to Grid on and off to see which layout style you prefer.
Next Steps & Resources
Preview Your Page: Once you’ve set your grid preferences, click Preview to see how the page looks before publishing.
Explore More Layout Options: Consider using multiple sections with different grid settings to create unique designs.
Visit Our Documentation: For additional tips on designing sections and advanced styling options, check out our Designing in Unbounce articles.
That’s it! With Snap to Grid, you can precisely align elements for a cleaner, more consistent landing page design. If you have any questions or run into any issues, reach out to our Support team or consult the additional resources in our Help Center.
FAQs
What is the difference between ‘Show Grid’ and ‘Snap to Grid’?
The Show Grid toggle controls whether your grid lines are visible or hidden at the page level. The Snap to Grid checkbox controls whether your page elements will snap to your grid lines at the section level (irrespective of whether Show Grid is on or off).
Do I need to reconfigure my grid settings every time I add a new section?
The grid settings from your most recently added section will be applied to a new section when you add it.
In what parts of the builder are Section Grids available?
Section Grids are available for Pages, Form Confirmation Dialogs and Lightboxes. They are not currently available for Pop-ups and Sticky Bars.
How do Section settings relate between Desktop and Mobile breakpoints?
Section Padding along with the Grid Settings for number of Columns, Row Height, Horizontal Gaps and Vertical Gaps are separately configurable for Desktop and Mobile breakpoints.
Enabling or disabling Snap to Grid from the Desktop breakpoint will initially control whether Snap to Grid is enabled or disabled on your Mobile breakpoint for that section until you change it from the Mobile view. Once changed from the Mobile view the link to Desktop for this setting is broken and you can enable or disable it as desired based on the breakpoint you are on for that section.