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. Click the + Add Section button that appears:
   
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.

Click the Add tab on the left-hand side of Smart Builder and drag different elements, such as Texts, Headlines, Images, and so on, into a section. 

To learn more about drag and drop, see our documentation: Using Drag and Drop in Smart Builder.

Creating Reusable Sections for your Smart Builder Pages

Reusable sections allow you to seamlessly add a section to multiple other landing pages.

1. Click the globe  icon titled Create a Section Template button:
   
2. From the window that appears, enter the details for your reusable section:
   
   
   • Content Name: The title of your reusable section.
   • Category: From the drop-down, select the type of page component/section. When adding a new section to your page, select it from this template option. See below to learn more.
3. Click Save as Section Template. 
4. Save your page. 

Now, when you navigate to another Smart Builder page within your account, you can add this reusable section to your page!

See this article to learn more about how to apply a reusable section to another page.

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