Sections, Rows, and Columns create the structure of your design.
By adjusting the color, background image, width, and height of these pieces, you can create dynamic and appealing designs.
First, we'll show you how to add Sections, Rows, and Columns, and then how to edit them.
You can have multiple Sections on a page.
Your design will default to having one Section. To add more Sections to your design, hover over Section in the content builder and drag the Blank Section to where you'd like it on the page.
In order to add Elements into your design, each Section needs to have at least one row, which is why when you add a Section, it will default to including one Row.
Adding Rows (and Columns)
When adding Rows, you're able to choose the number of Columns you'd like in that row as well as the width of each Column. Combining different row varieties will help you create dynamic layouts.
To add a row, hover over Rows, and drag the Row/Column combination of your choice into a Section of a page.
Although you can choose from a variety of column widths, you can edit the width of the columns by dragging the column separator.
Editing Sections, Rows, and Columns
To edit an aspect of your design, click on it and the appropriate editor will open up on the left.
When you click on a row, you'll be able to edit both the row and the individual columns within that row.
For Sections, you're able to edit the Width, set a Max Width, select for the Section to take up the Full Height, edit the Background Color or choose an Image, and edit the Margin, Padding, and Border.
For Rows, you can edit the Background, Max Width, Margin, Padding, and Border.
For Columns, you can edit the Background and Padding.
Enabling Full Height (Sections)
You have the option to enable Sections to take up the entire height of a page. To enable Full Height, click the checkbox to select.
Editing the Width (Sections)
To edit the Width, use the up and down arrows or enter the width in pixels. You can set different widths for different Sections.
Adding a Background Image (Sections)
You can add images to the background of your Sections to create beautiful designs. To add an image to your background, click Choose Image.
Select an image from your Image Library, or click Upload a File to select an image from your computer.
Once an image is selected, click Save Selection.
From here you're able to adjust the following image settings:
Size: Choose whether you'd like the image to be its default size (Auto), make the image as large as possible to cover the entirety of the background (Cover), or scale the image to the largest size so that both its width and its height can fit inside the content area (Contain).
Repeat: Choose whether you'd like the image to repeat both horizontally and vertically (On), just horizontally (Horizontal), just vertically (Vertical), or not at all (Off).
Horizontal Position: Choose whether you'd like the image horizontally aligned to the Left, Center, or Right.
Vertical Position: Choose if you'd like the image vertically aligned to the Top, Center, or Right.
Note: As a reminder, Rows are laid on top of Sections. If you'd like your background image to peek out underneath your Rows, you'll want to ensure your Rows don't have a background color selected (like our example above).
Editing the Background (Sections, Rows, and Columns)
To edit the Background Color, select a color from the drop-down menu, or enter a specific hex code.
Editing Max Width (Sections and Rows)
To edit the Max Width, use the up and down arrows or enter the width in pixels.
Editing the Margin, Padding, and Border
The Margin is the outer space of an element, while Padding is the inner space of an element. Margin is the space outside the Border of an Element, while Padding is the space that is inside the Border.
If you've set a Background Color of a row, expanding the Margin will not expand the Background Color, because it is outside the Border of your Row. Expanding the Padding will expand the Background Color because it is within the Border of your Row.
To toggle between editing the Margin, Padding, or Border, click the one you'd like to edit.
Editing the Margin (Sections and Rows)
To edit the Margin, use the up and down arrows, or enter the desired top and bottom Margin in pixels.
Editing the Padding (Sections, Rows, and Columns)
To edit the Padding, first select if you'd like the same Padding on the top, bottom, left, and right by selecting Same All Sides.
Edit the Padding by using the up and down arrows, or by entering the Padding in pixels.
Editing the Border (Sections and Rows)
To edit the Border, first select if you'd like the same size Border on the top, bottom, left, and right by selecting Same All Sides.
Add the size of the Border by using the up and down arrows, or by entering the size in pixels.
Choose the Border color by selecting from the drop-down menu, or by entering a specific hex code. Click Choose to set your Border.
Now that you know how to use Sections, Rows, and Columns, you're ready to build out the content of your design using content elements.