Understanding Smart Builder's Controls & Tools

Follow

This article will provide an introductory overview of the Smart Builder interface.

The main components to keep in mind when building your page in Smart Builder are items within the header and additional page settings & properties on the right-hand side of Smart Builder.

top-header-of-smart-builder-with-multiple-page-property-icons

Header

overview-of-smart-builder-header-icons

The header provides you with the tools and components needed to design and customize your landing page. This header includes the following tabs from left to right:

Content Tree, Style Guide, Page Settings, Conversions, Unbounce Apps, and Copy Insights.

Each tab serves a vital purpose when editing, improving, or optimizing your landing page in Smart Builder.

Content Tree

The Content Tree provides you with a hierarchical layout of all components and sections on your landing page, including the option to hide or display elements - this comes in handy when you're editing the mobile or desktop version of your landing page.

See our documentation for more details on hiding and displaying elements with the Content Tree

Style Guide

Use the Style Guide to make changes to the design of your landing page, such as updating the typography, link styling, & buttons.

You can update your page design and branding globally using the Style Guide, or edit the styles within individual sections without affecting other sections.

Check out our documentation for more on styling your page in Smart Builder.

Page Settings

Strengthen your SEO rankings by updating your page metadata within the Page Settings tab. More details about the Page Settings tab within our documentation: Updating Page Settings & Metadata in Smart Builder.

Conversions

The Conversions tab allows you to set which actions on your page you'd like to track as conversions, such as button clicks, link clicks, or form submissions. Learn more about setting conversion goals within our documentation: Setting Conversion Goals in Smart Builder

Apps

Access a variety of built-in tools directly in the Unbounce Apps tab. With Unbounce Apps, you can extend the functionality and value of landing pages by adding their favorite tools or features in just a few clicks, with no coding required!

Our team's built several Apps to help you get started. See the list of articles to learn more: Unbounce Apps

Copy Insights

Apply AI-powered copy optimization to Hero sections on your landing page.

Copy Insights uses AI-powered insights to provide you with high-converting recommendations of copy that can boost your conversions. See updating your page with Copy Insights to learn more.

Not seeing the Copy Insights icon within Smart Builder's header? It may be because you've applied copy recommendations from the Copy Assistant to your landing page during page setup.

At this time, you can apply either Copy Insights or Copy Assistant onto your landing page, not both.  

Toggle Page Preview, or View the Tablet or Mobile Version of your Page

slider-button-of-preview-mode-and-mobile-icon

Toggle the Preview mode radio button to switch between versions of your landing page.

Click the arrow button to toggle between the different versions of your landing page, based on screen size: desktop, tablet, and mobile versions.

For more details about editing the different versions of your landing page, see our documentation: Editing the Mobile, Desktop, or Tablet Version of your Page in Smart Builder

Save & Publish your Landing Page

blue-save-button-and-grey-published-button

Save and publish your page directly within the Smart Builder. The Save button will be highlighted in blue if you have not saved the most recent changes to your landing page, so be sure to save your page often!

Redo or Undo Changes

one-arrow-pointing-left-for-undo-and-an-arrow-pointing-right-for-redo

Undo or redo edits on your landing page.

The button on the left will undo the action, while the right button will redo the action.

Contact Support

question-mark-in-a-circle

Need some assistance editing your page in Smart Builder? Chat with our friendly Support team directly within the Smart builder by clicking the question mark icon and following the prompts to start a live chat. To learn more about reaching out to Support, see How Do I Contact the Support Team? 

Visit Editing Your Page with Smart Builder for more articles relating to editing your Page in Smart Builder.