Adding Sections 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, 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. 

1. Navigate to your landing page in the Smart Builder.
2. Hover your cursor over an existing section (or near where you’d like to add your new section).
3. Locate the plus icon that appears beneath the existing section:
   
4. From the window that appears, choose your designed section layout from the list available.
   
5. 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. 

1. 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:
   
2. 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.

Locating Element IDs

Every element added to a Smart Builder page is automatically assigned an element ID. Select any element on your landing page to view the element ID:

Related Articles

Drag & Drop Elements in Smart Builder 

Refining Layouts, Sizing, and Spacing in Smart Builder

Editing Text in Smart Builder

Editing the Mobile Version of your Page in Smart Builder