Layout Elements are drag and drop items that can be used to create column layouts on your page.
Content Elements nest within Layouts, so at least one layout needs to be added on the page before content can be placed.
Layouts can be stacked on top of one another to create the styling of your page. They can additionally be nested within each other to create more complex and layered layouts.
Several customization options are available: apply a background color, set a background image, adjust the roundness of the corners using the border radius setting, and precisely control the spacing around the block by configuring its margins.
To add a Layout to your page just click and hold it, drag it onto the page and release.
All Drag & Drop Elements can be moved, duplicated, or deleted by using the black bar that appears above them when they are selected.
There are seven available Layout Elements:
1. One Column
The One Column layout creates a page-wide editing space that content can be dragged into. This type of column will be shown on the page by a dotted line that shows the boundaries of where content can be added.
All content added will appear on the left side by default, unless that type of content has its own styling available that centers or right aligns the content on the page.
2. Two Column
The Two Column layout creates a page wide editing space split in half that content can be dragged into. This type of column will be shown on the page by a dotted line that shows the boundaries of where content can be added.
All Content added will appear on the left side of each section by default, unless that type of content has its own styling available that centers or right aligns the content on the page.
3. Three Column
The Three Column layout creates a page wide editing space split into three equal parts that content can be dragged into. This type of column will be shown on the page by a dotted line that shows the boundaries of where content can be added.
All Content added will appear on the left side of each section by default, unless that type of content has its own styling available that centers or right aligns the content on the page.
4. Four Column
The Four Column layout creates a page wide editing space split into four equal parts that content can be dragged into. This type of column will be shown on the page by a dotted line that shows the boundaries of where content can be added.
All Content added will appear on the left side of each section by default, unless that type of content has its own styling available that centers or right aligns the content on the page.
5. Left Side Bar
The Left Side Bar layout creates a page wide editing space split in two sections, the smaller section on the left taking up 25% of the width of the page, and a larger section on the right taking up 75%, both of which can have Content dragged into them. This type of column will be shown on the page by a dotted line that shows the boundaries of where content can be added.
All Content added will appear on the left side of each section by default, unless that type of content has its own styling available that centers or right aligns the content on the page.
6. Right Side Bar
The Right Side Bar layout creates a page wide editing space split in two sections, the largest section on the left taking up 75% of the width of the page, with a right side bar taking up 25%, both can be dragged into. This type of column will be shown on the page by a dotted line that shows the boundaries of where content can be added.
All Content added will appear on the left side of each section by default, unless that type of content has its own styling available that centers or right aligns the content on the page.
7. Full Width
The Full Width layout creates a page wide editing space similar to One Column that places your content on the edges of the page. This layout is commonly used to create header banners, and include full width code on pages. This type of column will be shown on the page by a dotted line that shows the boundaries of where content can be added.
All Content added will appear on the left side by default, unless that type of content has its own styling available that centers or right aligns the content on the page.