Creating a Page With Smart Builder (Beta)

Follow

When it comes to creating landing pages, manual, technical design, and guesswork is a thing of the past!

Smart Builder provides a build-to-convert workflow, with pre-designed page sections & mobile-responsive design to help you do your best work. 

To get started, our Design Assistant helps you create a landing page effortlessly, by recommending high-converting components & page layouts specific to your industry, audience, page purpose, and goals.

Creating a Page with Smart Builder

  1. Log into the Unbounce app, and click the Create New button on the top-right corner to create a new landing page. 
  2. Choose the option to create a page with Smart Builder:
    “create-a-page-with-smart-builder”

Note:

Smart Builder is available on all current pricing plans. If your current plan is a legacy plan, such as Essential, Premium, Starter, and so on, you will need to upgrade to access Smart Builder.

  1. The next page to appear is the start of the Design Assistant, a two-step process that curates high-converting page components & layouts based on your landing page's purpose. 

Step 1: Setup

  1. Within the Setup page, fill in all required fields that correspond to your landing page's purpose and industry type, such as:  
    • Your company/project name
    • The industry of your company/project
    • The purpose of this landing page
    • Whether you’d like to include a form
    • Your page name:
      “smart-builder-step-1-setup”

The Design Assistant will curate page layouts and sections tailored to your specific needs and business goals based on the information in the Setup step.

  1. Head over to the next step by clicking the blue Next: Style this page button.

Step 2: Design

Next, choose different themes and layouts from the Design page. Each recommendation is carefully crafted and based on the information of your page as shared in Step 1, to best fit your landing page's purpose.

  1. From the Page Style Guide, choose either a Suggested or Custom layout to apply onto your landing page: 

The Suggested layouts are based on the industry, page purpose, and additional page details selected during the Setup step:
“suggested-template”

 

Or, you can also create your own custom page style and layout by clicking the Custom tab:
“custom-template”

Custom layouts allow you to update the typography, font family, and color for your page Headings & Paragraphs, change the background color of your page, edit button styles, and so on.

Adding or Updating Sections

Follow these steps to add pre-designed section templates onto your landing page: 

  1. Once you’ve chosen your Suggested or Custom layout, navigate to the Page Sections tab  within the Page Style Guide:
    “add-a-new-page-section”
  2. To edit the layout of current page sections, click the drop-down arrow to see details about the section, and click through available layouts:
    choose-a-section-layout
  3. Click the Add Section button to add a new section to your landing page:
    add-a-new-page-section

You can always add sections later when you’re editing your landing page. Learn more about page sections in the Smart Builder within our documentation here: Working with Section Templates

  1. Click the Edit Site button at the top-right-hand corner of the Smart Builder to save these Design changes and begin editing your page. 

Do note: you can update the page typography (fonts, font family, text size), page sections, and background colors in later steps when editing your page, but the chosen industry and purpose will remain. 

Now that you've created your landing page with Smart Builder, you can start editing your page! See our documentation for an Overview of Smart Builder to get started.

Glossary

Design Assistant: Provides you with recommended layouts and page sections based on your industry, audience, page purpose, and goals to maximize more conversions.

Related Articles

Overview of Smart Builder

Styling your Page in Smart Builder

Working with Section Templates

Editing Text in Smart Builder