Working with Section Templates in Smart Builder

Follow

Smart Builder provides you with pre-designed sections templates 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.

Working with Section Templates

Each pre-designed, modular section template can be mixed & matched on your landing page.

The available sections are as follows: Header, Hero, Benefit, Features, Customer testimonials, Pricing, Call to Action, Footer, or Forms:
different-section-templates

Adding a New Section

  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:
    add-a-section
  4. From the window that appears, choose your designed section layout from the list available.
    choose-a-section-template-to-add-onto-landing-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 Tree

Customizing your Section Template

Once you’ve added a new section, you can edit its properties:

  1. Click on the section you’d like to update.
  2. Icons will appear at the bottom of the section to edit the section properties:
    section-formatting-options

Change the Layout

Update the template of a current section by clicking the Change Layout icon. A window will appear at the bottom of the page, with different section templates to flip through.

Update Section Padding

Section Padding allows you to add extra space, or padding, inside your section. Here is an example:
add-section-padding

Edit the Background Settings

Click the pen icon to edit a section's Background Settings, such as adding a background color or image to that section only.
background-formatting-options-for-section

Move a Section Up or Down, or Delete a Section

Click the ellipsis to see More formatting options for your section, such as moving the section up or down or deleting it.
more-section-formatting-options

 

To edit written copy or content within your sections, check out our documentation on editing text in Smart Builder.

Grid Positioning

No more guessing if your page elements are equal distance from one another. Use the grid positioning feature to align your page content in a more structured way, by snapping items to the grid:

  1. Click an element within your page section to highlight it.
  2. Use the drag icons (box icons on either side of the element) to reposition the element:
    smart-builder-grid
  3. Snap the elements to the grid as you resize it.

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

Related Articles

Editing Text in Smart Builder

Editing the Mobile Version of your Page in Smart Builder

Unbounce made it easy for me to find the information I need.
Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply