Note:
New updates to Smart Builder!
Did you know that Smart Builder now has drag & drop sections? You might already have access to drag & drop sections on your Smart Builder pages! Check out this article to learn more: Drag & Drop Elements in Smart Builder.
Smart Builder provides you with pre-designed sections you can easily switch out or onto your page.
Each section is thoughtfully designed based on landing page best practices, with the intent to help you unlock more conversions.
This article will explain how to work with sections in Smart Builder.
Adding a New Section
Though your Smart Builder page includes pre-designed templates, you can still customize your page by adding new sections.
- Navigate to your landing page in the Smart Builder.
- Hover your cursor over an existing section (or near where you’d like to add your new section).
- Locate the plus
icon that appears beneath the existing section:
- From the window that appears, choose your designed section layout from the list available.
- Your section will appear on the page for you to further customize & update!
To view all existing section templates on your landing page and a hierarchal list of your page elements, navigate to the Content 
tab in Smart Builder.
Drag & Drop Elements into a Section
Now, you can drag and drop elements into this section.
- Click the Add
tab on the left-hand side of Smart Builder. You can choose to add a Text, Headline, Image, Button, or a Group element:
- Click and drag the element onto your page. When the area within the section highlights a green color, you can drop the element into that spot:
Continue to drag and drop different elements into sections.
Be sure to Save and Publish your landing page.
See our documentation to learn more about how to Drag & Drop Elements in Smart Builder.
Customizing, Repositioning, or Deleting a Section Template
You can also edit a section's properties with a few controls.
Single-click on the section you’d like to update, and icons will appear at the bottom to edit the section properties:
Design Settings 
Click the pen icon to edit a section's Design Settings:
Within the Design Settings, you have options to
- Change the Background Color and opacity of your section. This is a good opportunity to select colors from your brand library!
- Add a Background Image.
- Adjust the Background Size with the following properties:
- Original: The original image is added to the section's background.
- Fill Section: Scales the image so it appears fully in the section's background.
- Custom: Allows you to scale the image to your preferred custom dimensions.
- Add a Border Style and adjust the Border Color, Border Width, and Border Radius.
Alignment Settings 
Realign and restructure the layout of elements or your groups in Smart Builder. For a more detailed understanding of how the Alignment Settings work, see Rearranging Content using Alignment Settings.
Update Section Padding 
Section Padding allows you to add extra space, or padding, inside your section. Here is an example:
More (Move a Section Up or Down) 
Click the ellipsis to see More formatting options to move sections up or down:
Delete a Section 
Click the trashcan to Delete a section from your page: 
Remember to Save & Publish your page to finalize these changes.
Related Articles
Drag & Drop Elements in Smart Builder
