1. Documentation
  2. Working in Smart Builder
  3. Designing your Smart Builder Page

Using Drag and Drop in Smart Builder

Follow
Avatar
Tas Kurtu
Last Updated

Building customizable landing pages just got easier with Smart Builder's drag and drop feature!

You can now customize the layout of your landing page or create custom sections by dragging and dropping elements or apps directly into Smart Builder. 

Add text, headlines, images, and button elements, or installed Unbounce apps to any section* on your landing page.

*All sections in Smart Builder are drag and drop-friendly; however, if you've created a page before March 2023, in other words, before the lease of this drag and drop feature, it will not work on your page. Please take a look at the end of this article to learn more. 

 

Using Drag and Drop

Now, you can drag and drop elements into this section. 

  1. Click the Add tab on the left-hand side of Smart Builder. You can choose to add a Text, Headline, Image, Button, Group, Form, Section, or Video element:
    The 'Add' tab on the left-hand side of Smart Builder.
  2. Click and drag the element onto your page. When the area within the section highlights a green color, you can drop the element into that spot:
    Gif demo of a user dragging and dropping an element onto the page.

Continue to drag and drop different elements into sections.

Be sure to Save and Publish your landing page.

Building Customizable Sections

Customizable sections allow you to build your own custom section by dragging and dropping elements.

  1. Hover your cursor over an existing section (or near where you'd like to add your new section).
  2. Click the + Add Section button that appears:
    Add a section button in Smart Builder.
  3. On the Add Layout page, scroll down and select Blank Section:
    Customizable section template.
  4. The blank section will appear in Smart Builder:
    Blank customizable section templates in Smart Builder.
  5. Click the Add an Element button.
  6. The Add tab will appear in Smart Builder on the left-hand side. 
  7. Click and drag the element onto your page. When the area within the section highlights a green color, you can drop the element into that spot:
    Gif demo of a user dragging different elements into the Customizable section.
  8. Continue to add elements using the Add tab and build your section to your preference.

Be sure to Save and Publish your landing page. 

Legacy Section Templates and Drag and Drop

Any new page you create in Smart Builder will contain drag-and-drop-friendly sections and templates! 

However, if you've created and designed a page with sections in Smart Builder, before the release of drag and drag (March 2023), you can keep these sections as-is. 

For example, this section containing a form existed on my landing page before the release of drag and drop:
Legacy section in Smart Builder, or a non-drag & drop section.

If I attempt to drag and drop an element into this section, it won't work since I added this section to my landing page before the release of drag and drop:
Gif demo of a user attempting to drag an element into a non-drag & drop section.

However, if I add a new section to my page, I can drag and drop elements into that section:

Gif demo adding an element into a drag & drop section.

Here are some suggestions to work around this:

  • Keep legacy sections as-is (i.e., sections you added to Smart Builder before the release of drag and drop.
  • Recreate the legacy section with a new one that is compatible with drag and drop. See this article on how to create sections in Smart Builder. 

Related articles