Welcome to Day 10 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


Creating an effective landing page isn’t easy, and in order to pull it off, you need to get lots of elements just right. The design needs to be eye-catching, the layout needs to emphasize the product or service you’re trying to sell, and the copy needs to be just right in order to convince people to trust you with their hard-earned money. Even if you do manage to pull all of this off, doing it effectively and managing to keep a high rate of conversions is another matter entirely.

While the copy is entirely up to you, we can help you out when it comes to the design and the layout – or more specifically, the Divi theme can. With our flagship theme, you’ll be able to create beautiful landing pages using the Divi Builder, and optimize them for conversion using the Divi Leads tool for A/B testing.

In this post, we’ll take a look at five landing pages built with Divi that we think tick all the right boxes when it comes to obtaining high conversion rates. Let’s get started!

5 High Conversion Landing Pages Rebuilt Using Divi

The following entries are landing pages rebuilt using the Divi theme, and they each highlight different aspects of what makes a fantastic landing site.

Sadly, we weren’t able to obtain specific conversion numbers for these pages, since that information isn’t public. However, with quality like this, we don’t have a single doubt that these pages get the job done as far as conversions go.

So, without any further ado, let’s take a look at number one.

1. ConversionLab

A screenshot of the Conversion Lab homepage.

You might already be familiar with ConversionLab, since it’s one of the sites featured in the Elegant Themes Customer Showcase. That, plus having the word “conversion” within its name, naturally made it all but a foregone choice to include it in our list of Divi landing page examples. As if that wasn’t meta enough, ConversionLab’s field of expertise is landing page conversions, and as you would expect, their experience shines through.

This landing page begins with a concise navigational bar with sections such as Why and How, plus an eye-catching call to action in the corner. Below is a now commonplace full-width header, which includes a nice handwritten section on its background image – a small detail that adds a personal touch to the proceedings.

The navigational sidebar is also a fantastic addition, considering how overly long landing pages tend to get. It provides visitors with an easy method (a dot) to make their way up and down the page without wearing out their keyboard. Moving on, the blurb module is used to great effect here, with colorful icons and concise descriptions.

Next, we see the testimonial module being put to use with one single strong quote, surrounded on both sides with full-width sections – including nice percentage counters, which serve to make the site look a little more interactive.

Perhaps our favorite part of the entire page is the contact form, which appears after clicking one of the many calls to action. It’s a slim sidebar that slides out from the right, and enables you to continue browsing the site as you fill it out – so customers never have to leave the landing page in order to make an inquiry. Not only that, it includes an option to sign up for the newsletter, so it also serves to collect leads!

2. Devine Wellness

A screenshot of the Devine Wellness homepage.

Let’s kick this off with Devine Wellness – a nice, ‘certified organic’ example. Devine Wellness is both the name of the site and the product, which happens to be a probiotic superfood. I’m not exactly sure what that means since I’m more of an I’ll eat whatever is in front of me type, but it sounds impressive.

Since you’re not on the Elegant Themes blog to receive advice about your diet, let’s just focus on the design aspect. Devine Wellness was built using Divi, and it’s a fantastic example of a well made landing page. It immediately grabs your attention with its use of contrasting colors, and gets you interested in the product with a full-width parallax header. It then moves onto a strong call to action, with more information in case you haven’t made your mind yet.

The homepage also makes great use of both the Blurbs and Testimonial modules, with the first using custom icons, and the second including a few solid personal stories. When it comes to testimonials, we feel that providing a few strong examples on your landing page can have a better impact than drowning visitors in them.

Moving on, the page also features a concise list of product ingredients. This is highlighted by an accordion module covering more related questions, so that the entire section doesn’t feel bloated (as is often the case with landing pages) from the get-go.

To wrap things up, the site includes a gallery of the product built using Divi, and a simple contact form, perfect for collecting further leads or answering customer questions.

3. Boxit

A screenshot of the Boxit homepage.

Boxit is the epitome of a succinct (yet effective) landing page. It doesn’t waste time with flowery descriptions, instead providing you only with information regarding the tool’s key features. Sure, it helps that the product is pretty easy to understand if you’re at all familiar with WordPress and Dropbox. However, it’s still a bold choice, considering how filled with information landing pages usually tend to be – especially those geared for sales, such as Boxit.

The page features a fixed navigational bar with a simple Boxit logo, then follows with a full-width header, which manages to sum up the entire product using three simple icons.

The key features section is a blurb module with custom icons, and it’s followed up by a demo section (using a simple contact form in order to connect you to the service), before going in for the kill with a call to action to purchase the product.

As if the lack of repetitive descriptions weren’t enough to make you appreciate the folks over at Boxit, they wrap things up with an instructional video to guide you through the process of installing their app.

4. Pierce Bivens

A screenshot of the Pierce Bivens homepage.

Unlike the other entries on our list, Pierce Bivens isn’t a business, service, or product. He’s a twelve-year-old musical prodigy from Kauai, and his site just happens to be a nice example of a good landing page (plus, the kid isn’t half bad on the ears).

The site makes use of a nice green and orange color palette (matching Pierce’s album design) and the album itself is the centerpiece of a full-width header, which includes a very concise call to action.

Moving down, the site includes embedded audio and video modules (as you’d expect from a musical website), and it wraps things up with a simple mailing list signup and a row of social media icons. It’s all pretty basic stuff, but using Divi, the whole thing turns out looking really good.

5. 28 Days to Alpha

A screenshot of the 28 Days to Alpha homepage.

28 Days to Alpha is a more traditional example of a landing page, and one clearly geared towards a more masculine public – in case the title of the program and the James Bond-inspired background weren’t enough to make that clear.

This landing page opens strongly with a header making good use of contrasts, followed by a list of publications where the product has been mentioned. That’s followed by a traditional Divi Blurb module, with four rows and custom icons, plus a nice use of bold lettering to establish a pattern among the informational paragraphs.

The rest of the landing page is by the books for the most part, with alternating rows of text and images on opposing sides to facilitate the flow of reading, all leading down to the crucial call to action – which should be a cinch for visitors who’ve gotten that far.

While the design of 28 Days to Alpha doesn’t necessarily make use of many advanced features included in the Divi theme (aside from blurbs, headers, and testimonials), it does serve as a good starting point if you’re looking to improve upon traditional landing pages.

We’re pretty sure most Elegant Themes readers with Divi experience could quickly put together a similar landing page, but why not add your own personal touches to improve the basic format? Include countdown timers to your next update, make use of pricing tables, or include video sliders. The sky’s the limit!

Conclusion

Building high-converting landing pages is an art form, and if you’re going to attempt it, you might as well go the whole hog and arm yourself with all the tools you need in order to succeed. With Divi’s simple drag-and-drop builder, plus its A/B testing tools, you have everything you need to make your landing pages stand out from the crowd.

As a matter of fact, we just happen to have a few articles to help you get started with building landing pages using Divi. Let’s dive into our archives:

  1. Mastering Conversion Design with WordPress and Divi Leads.
  2. 10 Conversion Rate Optimization Techniques You Can Test with Divi Leads.
  3. Improve Your Website’s Conversion Rates Using Three Core Principles.

Has A/B testing ever resulted in your conversion rates skyrocketing? Subscribe and share your numbers with us in the comments section below!

Article thumbnail image by filborg / shutterstock.com

divi-2-6-logo

Divi 100 Day 10

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post 5 High Conversion Landing Pages Built Using Divi appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply