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, 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).
- Click the + Add Section button that appears:
- 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 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.
- Click the globe icon titled Create a Section Template button:
- 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.
- Click Save as Section Template.
- 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:
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.
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:
It is not possible to customize an element ID in Smart Builder at this time.