Building customizable landing pages just got easier with Smart Builder's drag & drop feature! You can now customize the layout of your landing page or create custom sections by dragging and dropping elements directly into Smart Builder.
Add text, headlines, images, and button elements to any section* on your landing page.
Note:
If you do not have access to this feature yet, hang tight! Our teams are still working on releasing this feature to our customers.
Adding a Section to Smart Builder
- Navigate to your landing page in the Smart Builder.
- Hover your cursor over an existing section (or near where you'd like to add your new section).
- Locate the plus
icon that appears beneath the existing section:
- On the Add Layout page, choose your pre-designed section layout from the list available:
- Once you've selected a layout, the section will appear in Smart Builder:
- Note: You can move the section up or down to where you want it on the page.
Using Drag & Drop
Now, you can drag and drop elements into this section.
- Click the Add
tab on the left-hand side of Smart Builder. You can choose to add a Text, Headline, Image, Button, or a Group element:
- 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:
Continue to drag and drop different elements into sections.
Be sure to Save and Publish your landing page.
Note:
If you're working with an Unbounce App that adds a section onto your page, such as this testimonial app, for example, these sections are fixed, meaning drag and drop will not work in these sections.
Building Customizable Sections
Customizable sections allow you to build your own custom section by dragging and dropping elements.
- Hover your cursor over an existing section (or near where you'd like to add your new section).
- Locate the plus icon that appears beneath the existing section:
- On the Add Layout page, scroll down and select Customizable Section:
- The blank section will appear in Smart Builder:
- Click the Add an Element button.
- The Add tab will appear in Smart Builder on the left-hand side.
- 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:
- 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 & 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 & 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 & drop:
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 & drag:
However, if I add a new section to my page, I can drag and drop elements into that 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 & drop.
- If you have the time, try and recreate the legacy section with a new section that is compatible with drag & drop.
