This article will provide an introductory overview of the Smart Builder interface.
The main components to remember 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.
Header
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:
Add (Drag & Drop), 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.
Add (Drag & Drop)
With Smart Builder, you can drag and drop elements directly onto your page, helping you better customize existing templates and sections.
See our documentation for more details about drag & drop, including how to build customizable sections from scratch.
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.
Toggle Page Preview, or View the Tablet or Mobile Version of your Page
Toggle the Preview button to view how the live version of your landing page will appear as.
Click the arrow button next to the desktop icon 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
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!
You can also Publish or Republish your page directly in Smart Builder. See Publishing a Page in Unbounce to learn more.
Redo or Undo Changes
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
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. See How Do I Contact the Support Team? to learn more.