top of page

Working With the Editor Gridlines



Gridlines are the dotted lines inside the Editor that can help you ensure visitors can see your content on every screen size. Place all of your elements between the gridlines to prevent viewing issues on smaller devices (e.g., elements getting cropped).


The gridlines are only visible inside the Editor, but you can always disable them if you prefer it.


How do the gridlines work?


Visitors don't see the gridlines on your live site. They are there as a guide to help you map and design your site better.


It's important to place all of your content inside the vertical gridlines to ensure it's visible across different browsers and devices. Elements that are placed outside the vertical gridlines might be cut off on tablets and smaller screens.


Full-Width elements


You can place full-width elements like Strips and Galleries on your page, even if it seems they don't fit between the gridlines. Having said that, make sure that important content (e.g., text, buttons, etc.) is still placed inside the vertical gridlines.

 

Enabling or disabling the Editor gridlines


You can enable or disable gridlines as you please, directly from the top bar of the Editor. Simply select or deselect the checkbox in the Tools drop-down menu.


To enable or disable the Editor gridlines:

  1. Click Tools at the top of the Editor.

  2. Select or deselect the Gridlines checkbox.

 

Gridlines in Columns


Columns have gridlines that are separate from the Editor gridlines. As in the Editor gridlines, you should place your content within the column's vertical gridlines to ensure that it appears correctly across devices and browsers.


The column gridlines override the Editor gridlines. This means you can place elements outside the Editor's vertical gridlines, as long as they are inside the column's gridlines.


bottom of page