Instructions
Quote Sections
Use the “Quote” block. It is pre-formatted with a gray full-width background. You can change the color under “Color Settings” in the sidebar.
“This is a quote. Lorem ipsum dolor sit amet.”
Blue Background Section
Add a “Group” block, which is pre-formatted with a full-width blue background with white text. Then add your content or other blocks, such as columns, inside this group. See below for an example.
This is a group block. It is pre-formatted with a full-width blue background. You can add any blocks inside this group, such as columns or paragraphs.
Columns Example
This is an example of a two-column column block. First, you add the column block to set the layout. Then, you add your content blocks into the column, in this case a “paragraph” block.
This is an example of a two-column column block. First, you add the column block to set the layout. Then, you add your content blocks into the column, in this case a “paragraph” block.
To add more content to a section, just click the Plus icon. You can reorder blocks by clicking the up and down arrows that appear when you hover over a block (or drag and drop).
Overlapping Photo
To make the above photo overlap the section above it, select the image block, then click the “Advanced” tab and add the class “overlap” to the Additional CSS Class field. Then, click the section above the image, and add the same “overlap” class to that block, too.
Make sure you’re applying the class to the parent block (i.e. when in a Group, add the class to the Group block itself, not to a block inside the Group.)
Icon Sections
Add a “Media + Text” block to display an image or icon on the left, with content on the right.
Add the “Media + Text” block to display an image or icon on the left, with content on the right.
To add another, you can also click the first block, then click the “3 dots” button that appears and click “Duplicate”. To change the icon, click the “pencil” icon and select a new image.
To add columned icon callouts, add the “Media + Text” block inside of a “Column” block. Or, you can also use a pre-formatted layout under “Reusable Blocks”. Below, I have added the “Icons – 2 columns” reusable block template. Once added, select the block, click the “3-dots” button that appears at the top, and select “Covert to Regular Block”. Now you may edit the content as you see fit.
To change the icon, click the icon and then click the “pencil” to edit.
To add more icons to a column, just select the “Media + Text” block above, click the “3 dots” button that appears, and then click “duplicate block”. Then change the content and icon.
To change the icon, click the icon and then click the “pencil” to edit it.
When working with nested blocks like this, pay attention to which block you are selecting. The label will appear when you click on the block, so you know you are duplicating the correct block.
(NOTE: After adding a Reusable Block, if you forget to select “Convert to Regular Block” you will be editing the template. If you edit the template, it will apply this content to all other pages also that use this template. So make sure you always convert to a regular block before editing, unless you want to re-use the same content on multiple pages.)