Understanding the Classic Builder Interface

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.

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

1. Widget Panel,
2. Properties, Page Properties, and Goals Tabs,
3. Toggle Desktop & Mobile Versions, the
4. Javascript, Stylesheet, and Contents Panel, the
5. Classic Builder Toolbar
6. Version Control, Saving, Publishing, or Republishing Your Pages, 

The Widget Panel

The Widget panel contains multiple drag-and-drop elements to apply to your landing page.

To add any element to your content, drag it onto your page from the Widget panel (found to the left of the Classic Builder:

	Page Section
	Box
	Text
	Image
	Button
	Lightbox
	Form
	Video
	Custom HTML

 

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

View these articles to learn more about these features in the Widgets panel:

• Adding Page Sections
• Using Boxes in the Classic Builder
• Adding and Editing Text in the Classic Builder
• Adding Images in Classic Builder
• Adding and Editing Buttons in the Classic Builder
• Adding a Lightbox
• Adding and Editing Forms in the Classic Builder
• Adding Videos to the Classic Builder
• How Do I Embed Custom HTML or Widgets onto my Landing Page?

Properties, Page Properties, & Goals tab

The functionality within these tabs provides the building blocks for 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:

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:

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: 

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

Toggle Desktop & Mobile Versions

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

See our doc for more info on creating responsive landing pages: How Do I Edit In Mobile View Without Changing the Desktop View in the Classic Builder? 

The Javascript, Stylesheet, and Contents Panel

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. 

Classic Builder Toolbar

Within the toolbar, you can: 

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

Version Control, Saving, Publishing, or Republishing Your Pages

Be sure to click the Save button each time you edit your landing page to avoid losing any changes:

Previewing your page is a great way to view how it will appear once it's live. To preview your page, click the Preview  button.

You can also republish your pages directly in the Classic Builder, by clicking the Republish button:

To publish your page for the first time, you must publish from the Page Overview. 

You can restore to an older version of your landing page using Version Control. 

1. Click the Last saved button next to the Save button.
2. A pop-up will appear with the different versions of your landing page saved:
   
3. Click the blue Restore button to edit that version. 

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

Working in the Classic Unbounce Builder