Drag & Drop Builder (9 Tips for Creating Stunning Landing Pages)

We launched our drag-and-drop builder nearly two years ago—and it’s evolved a lot since then. So, we decided to take it for a “joy ride” and create a launch page for a photography course. (Totally hypothetical but also totally a course we’d be keen to take.)

Our builder deep dive was a great opportunity for us to rediscover some of our favorite features and tips that were never possible in our legacy “standard” builder. And we wanted to share them with you.

Whether you’re brand new to the Leadpages builder, or you’re an old pro, we’re hopeful the tips below will help you learn something new. (Or at the very least, provide some inspiration for creating your own sweet landing pages.)

Tip #1: Cozy up to section settings to create bold designs

The first two sections of our Photography Fundamentals page are relatively basic—each one only has two or three widgets. Some bold typography and colors give us a great start to a strong design.

(For those just getting started, widgets are building blocks of customizable content inside the builder—like text and images.)

With some quick adjustments in the layout settings, we can create an even more compelling experience that draws visitors into the page.

To recreate this look on your landing page, here’s what to do:

  1. Open the section style settings for the first section, and add an arrow border. Make sure the minimum height is set to Auto.
    Animation of arrow section setting changes
  2. Add a background image to the next section—depending on the photo, you might also want to add a color overlay.

     
  3. Set the minimum height of the photo section to “Full” so it takes up space and creates a big statement.
  4. Add and adjust a few widgets to guide visitors into your page. In this case, we’ve used a call to action button and some text—both link to detailed sections further down the page.

And that’s pretty much it. Now we have a call to action just below the fold that begs to be clicked. Here’s what the whole (slightly sped up) process looks like:

 

< /br>
By the way, if you don’t have background photos to use, Unsplash is a great resource for finding high-quality, free-to-use images. We’ve even curated some for you to check out.

And those calls to action bring us to…

Tip #2: Let your visitors jump around

Some pages just need a bit more content. If you are selling something at a higher price point, are launching a big product, or just need more stuff on your page to drive conversions, it helps to link sections internally for easy navigation.

The good news is that you can turn any headline, text snippet, button, or image into a section link. Just click the link icon and choose “Link to Section,” then select the name of the section you want to link to.

Those old school HTML anchor tags you vaguely remember? They’re already added to your page automatically. Pro Tip: This is when clearly naming your sections comes in handy.

Tip #3: Create automated urgency

We recently shared how effective countdown timers can be for driving conversions. When you combine multiple timers with hidden sections, you can create an entirely automated “flash sale” experience.

In our example page, two timers work in tandem to create a limited registration window for the course. The end result is that each visitor has 5 days to register, and then a 2-day wait period before registration reopens.

Here’s how to set it up:

  1. Create one section with an evergreen countdown timer and some supporting text.
  2. Add another section called “Closed Offer”. You can add whatever you’d like to the section to start—we recommend a form that allows visitors to sign up for updates.
  3. Drag a countdown timer to the “Closed Offer” section and give it an evergreen setting of a couple days or so. (This timer counts down to when registration re-opens.)
  4. Set the first timer to hide your page’s registration section (and the timer itself) and show the “Registration Closed” section when time runs out. Then, set the second timer to do the opposite: When the timer runs out, show a timeless registration section and hide the “Registration Closed” section.

The power of countdown timers makes it relatively trivial to set up automatic flash sales on any drag-and-drop page—whether they’re evergreen (ones that automatically reset) or tied to a specific date.

Tip #4: Use Leadboxes to provide extra info on the same page

Good landing page design keeps your visitors on the page. But what if you want to provide more information about something you’re selling without cluttering things up?

In our drag-and-drop builder, you can add multiple Leadboxes to your page, and they don’t have to include a form. For the Photography Fundamentals page, we used Leadboxes to display demo videos for each course module.

Visitors can get a better understanding of the course content without leaving the page—and by putting the videos in Leadboxes, they don’t disrupt the design.

To set it up, just link a button, image, or text to a Leadbox. Delete the default form and add content back as needed. Voilà, you’ve got a fancy lightbox to show off features, testimonials, and other cool content.

Notice that you can style a Leadbox just like a page: adjust background image or color, change padding, manipulate columns and rows, and more.

 

Tip #5: Duplicate rows to build out complex designs

Being able to duplicate rows means you can easily build complex page designs in a matter of minutes. Once you get one row designed how you’d like, just copy it and edit the content.

You can also reorder columns within a row (or rows within a section) to create visually interesting designs. (Zigzags, anyone?)

We used this strategy to create the “module details” section of our page.

 

You can use the same steps with any of our drag-and-drop templates. It becomes a snap to add another testimonial, feature, or section to your pages.

Tip #6: Use Checkouts for easy payments

Checkouts come with all of our Pro plans and above, and they’re just about as easy to use as any old form. Plus, Checkouts have all the features that forms do, so you can deliver a lead magnet and send opt-in data to multiple sources (once a payment has been received via the built-in Stripe integration).

You can also customize any Checkout’s form and button colors to ensure your everything matches your brand.

For the Photography Fundamentals course, we created a pretty straightforward Checkout in a Leadbox so visitors can register for the course without ever leaving the page.

But there are plenty of other things you can do with Checkouts on your page:

  • Set up a Checkout with your webinar service to offer paid webinars from any landing page or Leadbox
  • Add a Checkout to a new subscriber confirmation page to create a quick special offer
  • Add a Checkout to a purchase thank you page to create a one-click upsell
  • Connect a lead magnet to a Checkout for easy digital fulfillment
  • Combine a Checkout with a countdown timer to create a disappearing cart (much like the countdown tip above)

You can learn more about how to use Checkouts in our help center.

Tip #7: Promote your page on Facebook

OK, you’ve published a dazzling landing page that’s sure to get plenty of opt-ins. Now what?

Luckily, you don’t have to just sit and wait for visitors to come by with our drag-and-drop builder.

Our built-in Facebook Ads integration makes it dead simple to launch promotions on Facebook and Instagram in just a few clicks—without ever leaving the builder. When you create an ad, lots of work is done up front so you can just customize and start your promotion right away.

That includes placing your Facebook pixel in exactly the right spot without you having to touch it.

It’s the easiest way to get your landing pages directly in front of your target audience on the largest social media platform this side of the Mississippi (or anywhere, actually).

Tip #8: Optimize for mobile

Between our builder’s grid-based layout system and our thoughtful template designs, you never have to worry about your pages being mobile-responsive. That’s the always-on default.

Yet there are always opportunities to further optimize for visitors on mobile (and tablet) devices. Fortunately, it’s easy to do in the drag-and-drop builder.

While you’re designing your page, go into preview mode and switch between devices to get an idea of what things will look like on screens of different sizes. From there, you can use layout settings to adjust content height, padding, and more.

For full control, duplicate any section and adjust its “device specific display” settings to create separate experiences for users on different devices. For example, our module details section is pretty complicated for mobile, so we created a simple version for those visitors.

Tip #9: Make sharing a snap

Ahhh, the sweet, sweet feeling of when customers share your page on their social networks. Who doesn’t love a bit of word-of-mouth marketing? That’s what we thought.

There are lots of ways you can encourage folks to share your stuff, but two really simple ways are built right into Leadpages.

First is the ability to tweak your page’s Open Graph settings. (Open Graph tags basically allow you to control how a webpage link appears on social networks.)

That way, your page preview will look stellar when shared on Facebook, Twitter, or other networks. Just head to Analytics → Facebook to customize your page’s metadata (or, check out our full guide here.)

Second, you can also add a social share widget anywhere on a drag-and-drop page. These buttons can share the page they’re viewing, or any other valid URL.

Sharing your awesome work on Facebook, LinkedIn, Twitter, and Google+ is just a click or tap away for your visitors.

Plus, all the other cool stuff

Those are just nine ways you can make a beautiful, sophisticated page with conversion booby traps all over it. Of course, there’s more than we can cover in one blog post. Just take some of the widgets we didn’t end up using on the page we created:

We’d love to hear what you’re doing with the builder. Whether you have a fave feature or want to show off one of your pages, drop a note in the comments below. And if you haven’t yet used the drag-and-drop builder, let us know what’s been holding you back!