Refining Layouts, Sizing, and Spacing in Smart Builder

Smart Builder pages are composed of compartments: elements, groups, and sections. If you're looking to adjust the spacing and layouts between your elements, groups, and sections pixel by pixel, you can utilize the Sizing & Spacing properties and the Alignment Settings .

This article will explain the following:

1. Adjusting Sizing & Spacing for Elements,
2. Adjusting Sizing & Spacing for Groups,
3. Adjusting Sizing & Spacing for Sections,
4. Rearranging Content using Alignment Settings, and
5. Stacking Elements in Mobile and Tablet Versions,
   • Glossary

Adjusting Sizing & Spacing for Elements

Adjust the sizing and spacing in Smart Builder by changing padding and margins. 

Padding refers to the space around an element, whereas margins are the space between other elements. See the glossary at the end of this article to learn more. 

For example, imagine a cardboard box:

• the element (e.g., a snippet of text, a heading, a button) is the contents of a box,
• padding is the packing paper or bubble wrap surrounding the contents of the box, and lastly,
• the margins are the space between one box and another. 

To adjust the padding and margins of an element in Smart Builder, 

1. Single-click the element, in this example, a button:
2. Click the Sizing & Spacing icon. The Sizing & Spacing properties will appear on the right-hand side:
   
   

The Width property adjusts the width of the element (by a percentage %) relative to the group it's in:

Adjust the Padding to add more space inside the button:

Adjust the Margins to add more space between the button and neighboring elements:

Adjusting Sizing & Spacing for Groups 

Just like how you can adjust the sizing and spacing for individual elements on your page, you can do the same for entire groups or sections.

For example, let's make the size of the heading, paragraph, and button in the above example wider than the image (all these elements are nested in a group). 

1. Single-click the group.
2. Click the Sizing & Spacing icon.

In this example, increasing the width property will mean this group takes up more of the section:

Just like with elements, you can adjust the padding and margins for a group. For example, adding padding the group adds it to the heading, paragraph, and button:

Adjust the Margins to add more space between the group and neighboring elements or other groups:

Adjusting Sizing & Spacing for Sections

Want to add more space between sections or increase the white space to the left or right of your section? You can adjust the padding for each section on your landing page. 

There are no margin options when editing the Sizing & Spacing settings for entire sections. 

1. Single-click the bottom of the section, and click the Sizing & Spacing icon.
2. Adjust the padding as needed:
   

Be sure to Save and Republish your page. 

Rearranging Content using Alignment Settings

You can use the handy Alignment Settings feature to rearrange the layout of groups or sections.

1. Click the Alignment Settings at the bottom of your group or section.
2. The Alignment Settings will appear on the right-hand side of Smart Builder:
   
   
   • For a glossary of the different Alignment Settings, see the end of this article.
3. Click arrows within the Stacking option or to change the flow of how content stacks on the page: 
   

In the above example, the elements now stack from left to right, versus before, which was top to bottom.

Horizontal and Vertical Alignment Options

Update the Horizontal Alignment to align the contents within the left, center, or right of the group.

The Horizontal Alignment feature works best when elements are stacked top to bottom .

Here's an example:

Update the Vertical Alignment to align the contents within the top, middle, or bottom of the section. The Vertical Alignment alignment feature works best when elements are stacked left to right .

Here's an example:

Be sure to Save and Republish your page. 

Stacking Elements in Tablet and Mobile Versions

Any changes you make to the Sizing & Spacing settings or the Alignment Settings in the desktop version will not affect the mobile or tablet version, and vice versa.

In the following example, I've changed the horizontal alignment settings so the text is in the middle and added 40 pixels of padding to the top & bottom:

When navigating back to the desktop version, the padding and alignment remained the same:

As always, be sure to Save and Republish your page. 

Glossary

Element: Another word for your content on the page; a button, a paragraph, a heading, or an image are all examples of elements.

Groups: A group is a cluster of elements nested within one container. 

Section: Entire layouts on your Smart Builder page. A section can include multiple groups and or elements within it. 

Padding: the space around an element; increasing the padding creates more space around the element, essentially increasing its size. 

Margins: the space between one element and another. To add more space between one element, group, or section, increase the margins.

Stacking: Changes the flow of how content stacks on the page.

Horizontal Alignment: Align items along the horizontal axis (left, center, right).

Vertical Alignment: Align items along the vertical axis (top, center, bottom).