The Page Grid feature enables a customizable grid on the layout to help you design pixel-perfect pages following a standard set of rules.
Quick intro to Page Grids:
Page Grids are most commonly used to help designers build pages with more precision and accuracy. Think of it as guides/ruler layered on the top of the page to align your content correctly throughout the site.
Getting the most value out of Page Grids:
Here are some different ways you can use Page Grids to design better pages:
- Properly align your widgets and elements
- Keep your content organized
- Quickly know where to place or position elements on the page
- Enhance the visual hierarchy of your pages
How to enable the Page Grid:
- Edit a Post / Page / Theme Builder Section with Elementor.
- Go to User Preferences (from the Hamburger menu in the top left of the editor), navigate to the Style tab and you’ll see and you’ll find the Grid switch in the Page Grid section. Turn on the switch and the page grid will appear.
To get the most out of the Page Grid feature and build better UI, refer to this article on Smashing Magazine.
Page Grid options:
- Max width: The maximum width of the Page grid.
- Offset: The spacing from both the horizontal ends of the grid.
- Columns: The number of columns you want in the grid.
- Gutter: The spacing between the columns.
- Grid color: The color of the grid columns. You can use the alpha slider to make the grid page more translucent.
All the grid fine-tuning options are responsive, i.e. you can set a different setting as per device breakpoints to build clean and better UI on every device.
Note:
- The grid ruler is not shown on the final page. It’s only for design purposes in the editor.
- The grid styles are saved automatically throughout the site as you enable and modify its settings.
- Page Grid supports both px and em unit values.