How To Design For Conversion Using The Divi Theme

No matter what type of blog you run, I think all website and blog owners can agree that they all want the same thing: conversion.

Now, you can do all the on-site/off-site SEO that you’d like to do – and don’t get me wrong, that’s an important part of any marketing strategy – but if the design of your site isn’t properly set up for conversion, then all that effort is essentially wasted.

Designing for conversion can be… tricky, to say the least. You have to be able to balance user experience and overall design with content that has clear calls to action. If that were easy, then no one would be struggling with this “Conversion Crisis”, as I like to call it.

As a Web Designer who focuses on Conversion Centered Design (CCD), I was thrilled after I got my hands on Divi and saw the power that could be harnessed with the theme.

There is so much that goes into designing a site that gently nudges people toward the action that you want them to take. However, the first half that struggle is in the design – especially the landing page(s).

Divi makes creating a conversion powered website easier than ever before. All you need to do is learn some of the tricks that goes into designing with that goal in mind.

The Keys To Designing For Conversion On Your Homepage

I’m sure you’ve heard the phrase, “One Site Fits All”.

Well, unfortunately, that idea doesn’t really work with Conversion Centered Design. Every site has a different goal, and only time and testing can tell what design will work best for each website.

However, there are some fundamental keys to designing for conversion that give can at least give you a starting point:

• A contrasting, but pleasant color scheme (2-4 colors are generally enough)
• A leading question or thought
• Calls to action that stand out

When designing your homepage (especially the top section), these 3 steps are crucial. Thankfully, Divi makes all three rather simple.

Using Divi To Build A Conversion Based Homepage

Though not as effective as a landing page, your homepage should still be optimized for conversion.

The top section of your homepage is the first thing that your visitors will see, and that will be the area that I’ll be focusing on for this part of the post on.

The design of your homepage is important. If you can grab a viewers attention with your message, then you’re one step closer to converting their page view into your end goal.

The thing that amazed me most about Divi is how the pre-designed layouts seemed to already have this in mind. Take the Homepage Company design layout for example.

The default look and layout come out looking a bit like this.

This layout looks a bit bland, but that’s the point. It’s just a layout that you can tweak to look like whatever you want. Just as a demonstration, I decided to quickly edit the modules and change the look while keeping in mind the 3 fundamental design keys that I mentioned earlier.

In the Homepage Company layout that I’ll be using, this top section uses the Fullwidth Slider module. I won’t change the module, however, I will be adding some design tweaks to make this section really pop.

After selecting the Section Module, I uploaded a new background that is specific to that area of my homepage.

Next, I edited the Fullwidth Slider.

Instead of having multiple slides that could distract from my conversion goals, I only used one slider. Within the Slider Settings for the one that I want to display, I edited the information and look of that particular slide.

The options I have there are easy to navigate but have a pretty powerful output.

The areas in the backend I changed and edited were the Heading, the Button Text, the Link, as well as the slider picture.

Here is the end result.

Pretty different, right? (Hail the power of Divi!)

I would still consider this design a rough draft, but this encompasses everything that I would want to start with. Bold but pleasing colors, a leading question, and a call to action about fixing their issue that is highlighted in the most striking color in the color palette that I’ve selected.

Here is another example of someone who used Divi to build a conversion based homepage.

The layout that ConversionLab uses for the top section of their homepage is the same one that I’ve used, only they’ve designed it a bit differently. However, their design sticks to those 3 fundamental design keys that I mentioned before.

They have a cohesive color scheme (white, blue, orange, and grey towards the bottom of their site), a leading thought (“Get High Conversion Rates On Landing Pages”), and a call to action (“Get Help With Landing Pages”) that is highlighted in the brightest color.

These guys definitely knew what they were doing when they built the page. (Two thumbs up!)

Now don’t start thinking that Conversion Center Design is only for websites that promote conversion based products; anyone can use these tips on their website.

To show you what I mean, I’ll change the design of the top section of my homepage to reflect something that a maintenance company may like to use in order to drive leads to their contact form.

As you can see, I changed everything in the design of the page.

I chose a black and white background, posed a slightly fear inducing question, and then highlighted my call to action in a color that draws automatic attention. I also changed the former slide picture into a video that will automatically start playing when someone comes to the site.

This layout is the same one that I’ve been using from the start; it’s only the look of things that has changed.

While looking at this picture, my assumption is that your eyes are being drawn to that bright blue button and the word FREE inside of it.

If someone came to this site looking for this service, this is what they would notice first too. Now, what do you think they would click on? Most likely, the button.

And where would that button lead? My guess would be that it would connect to a type of lead generation landing page that further wows the visitor into filling out a contact form for the service. This translates into a lead that can become a sale for that site and business owner.

That is the power of optimizing your site for conversion, and it’s the kind of conversion you can be harnessing. The real power, though, in any conversion optimized site is in the landing page. Before you design a landing page though, it’s important to know what it is.

What Is A Landing Page?

In case you’re new to the idea of a landing page, let me give you a basic rundown of what it is and what it’s used for. A landing page is a separate page on your site designed with conversion as its objective.

It is a very focused and condensed page that can be designed into 2 ways:

• As a Lead Generation page, or
• A Click-Through page

As the name would suggest, a Lead Generation landing page is designed to captured leads in return for something else. For example, a person may fill out the contact form on a lead capturing landing page in return for some kind service or product (i.e. a free e-book, or a professional service like graphic design). The site owner gains a lead and will deliver the promised product or service to the person who filled out the form. It’s a win-win situation.

A Click-Through page is slightly different, but the end goal is similar: prompting a specific action, or in this case, prompting a click to another specific page to help along you sales funnel. These are used to help control and further push your traffic to a very specific page on your site.

Both types of landing pages are powerful components in pushing conversion on a site, but designing a landing page is different from designing a homepage.

Before you jump into just creating one and crossing your fingers with hopes that it will work, be sure you follow these next few design tips.

Keys To Designing For Conversion On Your Landing Page

Image by Bloom Design | shutterstock.com

Landing pages tend to take the Less Is More approach, and it works wonders. When designing either a Lead Generation page, or a Click-Through page, there are some elements that you should be sure to focus on.

The 3 design keys I mentioned before are important:

• Great color scheme (2-4 colors are generally enough)
• A leading question or thought (best for a Click-through page)
• Calls to action in a bright color

Below are a few more worth considering in your design:

• Bold Heading and Subheading that relate to your product or service
• Pictures or video since they convert better then just words on the page
• A Contact Form (best for Lead Generation pages)
• Directional cues to promote a specific action

There is quite a lot that goes into designing a landing page that actually converts. If you’d like to take the time to get your hands dirty and learn the psychological aspects that go into designing landing pages, or even if you just need some inspiration, then be sure to take a look that the resources below.

• The Anatomy Of A Perfect Landing Page Infographics
• Free E-Book On Hubspot: Conversion Centered Design (take note that this link is another great example of a Lead Generation landing page *wink*)
• Landing Page Example For Your Inspiration

Now on to the fun part.

Using Divi To Build A Conversion Based Landing Page

Even though Divi comes with some great landing and splash page layouts, I decided to design my landing page from scratch while keeping in mind all elements that I mentioned above.

I’m going to create a lead generating landing page that plays off the idea of the homepage that I designed earlier (a property maintenance type of company) to give you an idea of how a click-through design from your homepage can link to a page like this.

I first started out with a Fullwidth Section and added a single Text Module. Using this, I added a bold looking title to the top of the page and set the color of the background to a dark blue.

Next, I decided to use one of the Specialty Section columns that are now available with Divi and added the needed Columns and Modules into those sections. I added a couple Text Modules (one for written content and one to embed an iFrame video), a Divider and a few Blurb Modules along with some CSS to get the look I wanted.

Now for the bottom half of my landing page.

I used another Fullwidth Section with a Text Module and a made sure to set it with a bright background since I plan to use this for my call to action.

Lastly, I created another Fullwidth Section with a Contact Form and a directional cue in the form of an arrow so that I could capture leads.

Ready for a look at the end result?

Tah-dah!

As you can see, I incorporated every single element that I mentioned above (bold headings, nice color scheme, bright colored call to action, ECT.) and the end result is pretty great. Outside of the Modules that I used for the design I did a couple CSS tweaks, but other than that, this was all Divi.

Now the question is, will this the design be the best for capturing leads? If you’d like to know the answer, then be sure to read the last section of this post.

Final Thoughts On Designing For Conversion

As I mentioned earlier, designing for conversion is tricky to nail down. Divi makes building pages and websites rather easy, however, it’s up to you to be able to really utilize its power for conversion. When it comes to CCD, there are things that work and things that don’t. But, how do you know if your design is working or not? Is there an easy way to figure that out?

Thankfully, you don’t have to stumble around blind in this endeavor. Use these 3 steps to figure out what’s working on your site, and what needs to change:

• Google Analytics. This tool will help you to analyze the bounce rate on your page; a high bounce rate signals a red flag and it’s time to change things up.
• Use A Heatmap.  A heatmap allows you to track your viewers mouse-clicks and will help you get an idea of what is grabbing their attention. You can use this to help your understand where your design is lacking, and then you can optimize your landing page or homepage even further by using that data to tweak your site. A popular heatmap software that many love is CrazyEgg.
• A/B Test. The idea behind A/B testing your landing pages is rather simple: create more than one landing page with slight differences in the design and study the conversion rates between the two. Most times it is the smallest thing that can make the biggest difference in your conversion rate, but you’d never know without testing things out and studying the data.

Without testing, studying data, and then tweaking things accordingly, your chances of better conversion are slim. Whether you use Divi or not, be sure that you’re really making the most your design by following these steps and expanding your knowledge on Conversion Centered Design.

It can take a bit of time to get right, but it’s well worth the effort.

Thumbnail Image by Bloom Design via Shutterstock.com