Understanding the Classic Builder Interface

Follow

This article will provide a high-level overview of the components, properties, and sections of the Classic Builder! The drag-and-drop Classic builder means you can quickly create awesome on-brand experiences without a developer.

To learn more about our Smart Builder (Beta), check out the following articles: Getting Started with Smart Builder.  

The main components to keep in mind when building your page in the Classic Builder are as follows: 

classic-builder-interface.png

The Widget Panel

The Widget Panel consists of multiple drag-and-drop elements to apply to your landing page: 

Page Section
Box
Text
Image
Button

Lightbox

Form

Video
Custom HTML

 

For example, drag the Form widget anywhere onto your landing page. A new dialog box will appear with options to begin creating your custom form. 

Properties, Page Properties, & Goals tab

The functionality within these tabs provides the building blocks to customizing your landing page, updating page settings and metadata, and setting conversion goals. 

Properties Tab 

The Properties tab provides you with editing options for different elements on your landing page:

properties-tab-right-hand-side-of-builder

Highlight an element on your page, and navigate to the Properties tab. Here you can apply custom formatting options such as font styles, font sizes, text colors, line spacing, and more to elements on your page.  

Page Properties Tab 

Navigate to the Page Properties tab to update page-level styles, such as page background colors or page width. You can also update your page's metadata, title, and description within the Page Properties tab:

page-properties-panel-right-hand-side-of-builder

See our documentation for info on Managing your Page Properties

Goals Tab

Set conversion goals for particular actions on your landing page within the Goals tab: 

conversions-tab-right-hand-side-of-builder

See our documentation for info and best practices when setting conversion goals. 

Toggle Desktop & Mobile Versions

toggle-desktop-mobile-versions-bottom-right-hand-corner-of-builder

Switch between the desktop and mobile versions of your landing page by clicking Desktop or Mobile buttons at the bottom right-hand corner of the Classic Builder. 

See Working with Mobile-Responsive Content and Editing the Mobile View without changing the Desktop view for more info into creating responsive landing pages. 

The Javascript, Stylesheet, and Contents Panel

contents-js-stylesheeting-panels.png-bottom-left-hand-corner-of-builder

Use the Contents Panel to view all elements on your landing page or hide/display different elements from the mobile or desktop versions. Learn more here: Using the Contents Panel & Hiding/Displaying Objects

Add custom scripts or CSS onto your page by navigating to the Javascripts or Stylesheets button. See Using Custom JavaScript and CSS on Your Landing Page for more information. 

Toolbar & Additional Editing Options

toolbar.png

Save, preview or republish your page directly within the Classic Builder. Be sure to click the blue Save button once you've made changes to your landing page.

Within the toolbar, you can: 

  • Undo/ redo edits
  • Move elements up or down on the page
  • Bring elements forward or background (if they're stacked on top of one another)
  • Copy/paste
  • Duplicate elements or sections
  • Delete elements or sections

And that's a general overview of the Classic Builder! Check out the following resources to learn more on building your page: 

Working in the Classic Unbounce Builder