13 Tips for Creating Stunning Landing Pages with Drag-and-Drop Builder

There are a handful of ways to make a beautiful, sophisticated page with abundant conversion points. Follow the following tips and you’ll be on your way to saving time and energy (especially if this area doesn’t come naturally) and crafting a conversion vehicle to grow leads and sales.

We launched our drag-and-drop builder four years ago—and since then, it’s evolved leaps and bounds.

Drag-and-drop builder IRL

In this post, we thought we’d revisit the magic the drag-and-drop builder can bring into your lives.

So, we’re going to take you on a “joy ride” and walk you through how to use our drag-and-drop builder with ease. Our landing page builder deep dive will allow you to rediscover some of our favorite features and tips to help shorten your learning curve so you can launch a successful page in a fraction of time. (And, even encourage you to avoid the standard, non-customizable page!)

Whether you’re brand new to Leadpages, or you’re a vet, we’re hopeful the tips below will help you learn something new when it comes to using our drag-and-drop builder. (Or at the very least, provide some inspiration for creating your own killer landing pages.)

Design Tips

Cozy up to section settings to create bold designs

Want to make your landing page design go from drab to fab?

Using widgets, the building blocks of customizable content inside of our landing page builder, allows you to easily add text and images to amplify your design. With some quick adjustments in the layout settings, you can create a visually compelling experience that draws visitors into the page.

We’ve got widgets to suit everyone. Here’s a list of some of them you could potentially integrate on your landing page to boost user engagement and visual splendor.

• The button widget
• The form widget
• The image widget
• Checkouts overview
• The Calendly embed widget
• Checkouts

• The OpenTable embed widget
• The space widget
• The icon widget
• The date widget
• The countdown widget
• The line widget

• The progress bar widget
• The social widget
• The text widget
• The video widget
• Comments
• Facebook “Like”
• Progress bar

Bonus Tip:The HTML widget - Embed anything from a Google map or calendar, or an image gallery with the HTML widget. Simply copy and paste the code and you’ve got yourself an even snazzier page. Here’s an example of the Google map integration:

So, no matter your industry, there are customizable widgets to easily drop into your landing page design to maximize your page’s performance.

Here’s an example of how to integrate widgets to any of your leadpages content:

1. Open the section style settings for the first section, and add an arrow border. Make sure the minimum height is set to Auto.
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.

Save time with section templates

With section templates, it’s easy to skip dozens of design steps and fast-forward to a well-crafted page that you can publish in half the time. Best of all, sections can be fully customized and are code-free, so you’re never locked into a standard template or stuck waiting for a web developer to lend a hand.

Here’s how it works:

1. Open the Sections gallery inside the Leadpages Builder
2. Select from seven content categories or browse All
3. Drag and drop the section template where you would like it to appear on your page

Duplicate rows to build out complex designs without endlessly coding

The ability to duplicate rows means you can create complex page designs in just minutes using our drag-and-drop builder. 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.

We used this strategy to create the “Schedule” page of this site.

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.

Enhance the visual splendor of your page with images

A simple landing page design is good, to a point. But, you need to balance simplicity with stimulating visual interest from visitors. This means, finding the perfect image is paramount. Most small business owners don’t have a library of images at their fingertips, so a challenge is presented, right?

Well, using our Shutterstock (available for purchase in-app) integration, you can browse from thousands of images via Shutterstock that work for your brand. Professional photography can cost hundreds of dollars per image normally! But with our Shutterstock integration, you have an exclusive gallery of Shutterstock premium images at a discounted price.

Here’s a before and after of a website leveraging the power of Shutterstock.

Save time with copy/paste sections

Consider this scenario…Let's say that you're working with your website and you've got a contact page inside of the website template. Maybe you already made adjustments to the page, but upon further review, you decide you want to spice up this page. As you review other pages, you notice there are some sections that have already been pre-made by Leadpages designers and you want to bring them into your website.

For example, you are in a particular template that's really designed for real estate agents (and you’re not one) and you really like how the social buttons and contact information look, as well as the branding of the footer.

How to implement:

1. Go to the dots and click on “Copy” and this is going to copy this entire section.
2. Then, go back to the page that you’re working with and “Paste” above or below. After you paste the section, you can delete sections you don’t want. Now, you can remove the particular sections you don't need, replace the default images, and modify the text for each of these individual sections.

Copy and paste works between landing pages, website pages, and even pop-ups.

Preload branded colors

When you load a default template, it comes preloaded with a color scheme. While you can always come into a section or an element and change the color by choosing from an individual color palette, there’s a faster option.

If you want to save time, work with a color palette that uses pre-built brand colors. It gives you access to the color palette settings for your account. Simply click on the plus in the upper-left navigation and choose whatever on-brand colors you may want. This saves tons of time for the not-so design-savvy business owners out there.

User Experience Tips

Link sections for easy navigation

Some landing pages need more content than others. Why? Many times products or services are complex, if you’re selling a high-ticket item, or are launching something new, so your landing page needs that extra “oomph” to explain your business’ value to readers and prompt them to take action.

So, what’s the solution? Link sections internally for easy navigation.

With our drag-and-drop builder, 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.

Use pop-ups to supplement information during a landing page visit

A well-executed landing page design keeps your visitors engaged on your 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 pop-up forms to your landing page, and they don’t necessarily have to include a form.

Visitors can get a better understanding of a separate offer or content without leaving the page—and by putting the content in a pop-up form, so they don’t disrupt the design or flow.

Here’s how to set up pop-up forms on your landing page, (in two, easy-peasy steps):

1. Link a button, image, or text to a pop-up form.
2. Delete the default form and add content back as needed.
3. Voilà, you’ve got a fancy lightbox to show off features, virtual events, extra videos, customer testimonials, and other cool content.

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

Conversion Tips

Creating urgency with countdown timers and set up clever automated campaigns

Countdown timers are clutch for driving conversions (pun intended). But when you combine multiple timers with hidden sections, you can create an entirely automated “flash sale” experience for visitors, prompting clicks and action galore.

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

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 of 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.

Duplicate your button, and duplicate your sales

You already know that a high-converting landing page is created to point your web visitors to a single call of action—that next step you hope they take after engaging with your page. But the most effective marketers do two things:

• Include a call-to-action button above the fold (the scroll point)
• Repeat the same button at multiple points on the page (beyond the scroll point)

Think of your page structure as a process of simultaneously educating and persuading your audience. Not every web visitor will require the same amount of convincing before they are ready to take action: some people will click immediately, while others will do some scrolling before they click.

By keeping the call-to-action button present at multiple points on the page, you can easily capture the web visitors who need a little more convincing, without forcing them to scroll back up to the top.

Cha-ching! Use checkouts for easy payments

Want to seal the deal with customers on your landing page? Consider adding a checkout area. With checkout areas, you can easily and securely take customer payments for anything from virtual events to products.

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

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

Here are some real-life ways you could implement checkouts:

• Setting up one with your webinar service to offer paid webinars from any landing page or pop-up
• Adding it to a new subscriber confirmation page to create a quick special offer
• Adding it purchase thank you page to create a one-click upsell
• Connecting it to a lead magnet for easy digital fulfillment
• Combining it with a countdown timer to create a disappearing cart (much like the countdown tip above)

Learn more about how to use Checkouts in our help center.

Here’s an example using a checkout.

Capture all hearts and minds by optimizing for mobile devices

Between our grid-based layout system and our thoughtful template designs, you never have to worry about mobile-responsiveness when using Leadpages. That’s an always-on default.

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

How it works:

1. While designing your landing page, go into preview mode.
2. Then, switch between devices to get an idea of what things will look like on screens of different sizes.
3. 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.

Make sharing a breeze

Ahhh, the sweet feeling of when customers share your page on 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 socially share your content.

1. The ability to tweak your page’s Open Graph settings. Open Graph tags allow you to control how a 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.)
   
2. 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 content on Facebook, LinkedIn, Twitter, and Google+ is just a click or tap away for your visitors.

Discover, all-new templated sections

Our data tells us that the more changes you make to a template, the less likely it is to convert, yet we also found that customers are forced to change the layout, column, and background to furnish the vision of their pages. So, we recently enhanced our templated sections to meet your needs.

With our new templated sections, you can shorten the time from creation to publishing with pre-built sections you can select and use on your website or landing page.

Here’s how it works:

1. Select from pre-built sections (drag-and-drop onto your page) or create a new saved section from 'blank' templates.
2. Place a saved template on a page (landing page or website), scroll over other sections in your saved section gallery and preview them instantly.

As a recap, let’s end with the benefits of landing pages…

With our drag-and-drop-builder, you can edit and publish high-converting landing pages. You can customize landing and webpages to suit your needs, without knowing a lick of code.

More specifically, you can:

• Easily add new elements to any section of your page
• Move individual elements and entire sections to adjust information flow
• Be sure that no matter what you change, your page will be mobile-responsive and look great on every device
• Enjoy the intuitive and easy use.

… all without the help of a professional designer or programmer. (That’s coin back in your pockets, people!)

Wait, there’s so much other cool stuff to make your landing page kick-butt

Those are just a handful of ways you can make a beautiful, sophisticated page with conversion booby traps all over it. Follow the tips above, and you’ll be on your way to creating a stunning and high-converting landing page for your business.

We’d love to hear what you’re doing with the builder. Whether you have a favorite 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!

And, if you’re not already a Leadpages user, consider becoming one! Try us out for 14 days, free.