Adding Sections in Smart Builder



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. 

  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:
    Plus button in Smart Builder (to add a new section).
  4. From the window that appears, choose your designed section layout from the list available.
    Gif demo of a user sifting through templates and applying it onto the page.
  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:
    The 'Add' tab on the left-hand side of Smart Builder.
  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:
    Gif demo of a user dragging and dropping an element onto the page.

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:
Annotated image of section editing properties.

Design Settings

Click the pen icon to edit a section's Design Settings:
Change background Design Settings for a section.

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:
Gif demo adding padding to a section.

More (Move a Section Up or Down)

Click the ellipsis to see More formatting options to move sections up or down:
More properties in Smart Builder that move sections up or down.

Delete a Section

Click the trashcan to Delete a section from your page: Delete a section from your page in Smart Builder.

Remember to Save & Publish your page to finalize these changes.

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

Do you agree or disagree with this statement: This article helped me find the information I needed quickly and easily.

Select an option and leave us some feedback in the comments:

Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply