Will my website visitors be more likely to click on a red button or a green button?
To find out which color button generates the most clicks, I ran a split-test (also known as an A/B test) that showed half of my page visitors a green button and half of my page visitors a red button.
At the end of the test, I could see which button was clicked the most and choose it as the winner.
I was able to do this using the Divi Leads split-testing and conversion optimization feature.
Divi Leads is a default feature built into the Divi Theme. so you can use it too!
What is Divi Leads?
Divi Leads is a full-feature split-testing (A/B testing) and conversion optimization system in the Divi Visual Builder. It allows you to display different versions of your webpage to different users in order to see which performs better.
Divi Leads will collect data on how users interact with each content version and display the results in easy-to-understand graphs and charts so you can identify your most optimum content to display for higher conversions and interactions.
Each split-test will have a Subject and a Goal. The subject is the content that will have multiple versions to be tested. The goal is the desired outcome such as a click, a sale, or a conversion.
Virtually anything can be A/B tested with Divi Leads and in today’s article, I’m going to show you how.
And, of course, I will let you know if my red button or green button converts with more clicks!
How to split-test your content using Divi Leads
1. Starting a new split-test by selecting your subject
To start a new split-test you can right-click on any section, row, or module and select the Split Test option.
This will set your selection as the split test Subject.
A popup window will be shown asking you to Select Your Goal with the following info;
“Congratulations, you have selected a split-testing subject!. Next, you need to select your goal. After closing this window, please click the section, row, or module that you want to use as your goal. Depending on the element you choose, Divi will track relevant conversion rates for clicks, leads, or sales. For example, if you select a Call To Action module as your goal, then Divi will track how variations in your test subjects affect how often visitors read and click the button in your Call To Action module. The test subject itself can also be selected as your goal.”
Click OK on the popup window and you can then use the circular mouse cursor to select your goal.
2. Select your split-testing goal
Use the cursor to select your split-testing goal.
For my test, I clicked on the same button as I had set as the subject as it is both the subject and goal. I want to test different versions of my button (the subject) and see which is clicked (the goal) the most.
You can select any element for the subject and any element for the goal. They do not need to be the same element.
This will activate a popup window asking you to Configure Subject Variations with the following info;
“Congratulations, your split test is ready to go! You will notice that your split testing subject has been duplicated. Each split testing variation will be displayed to your visitors and statistics will be collected to figure out which variations results in the highest goal conversion rate. Your test will begin when you save this page!”
Click OK on the popup window, and you can then start to edit your subject variations.
3. Configuring alternate subject variations
This step is much easier to work with using the wireframe mode which can be accessed by clicking the menu icon in the purple circle. The wireframe icon can then be found in the dark grey section on the left of the screen and is the one to the left of the icons for desktop, tablet, and mobile.
You will see your split-test subject highlighted in yellow and your split-test goal in blue.
If you have selected the same subject and goal (as I have) you will only see the blue color as in the image above.
You will see that your subject has been duplicated. We now have 2 subjects.
You can now edit the design of one of the subjects/buttons using the module settings just as you usually would. For my test, I set the background color of the 2nd button to red and left the 1st button with the original green color background.
If you want to test more than 2 buttons, you can duplicate the test subject as many times as needed and edit each differently.
4. Save the page, exit the Visual Builder, and wait
This step takes quite a while as users are shown your subject variants, so go out and do something away from the computer screen for a while and let the tests run.
The time required to get meaningful results from your split-testing will depend on the type of subject & goal selected and the number of visitors to your site, but you should expect it to be a day at least.
For my button color test, I left it running for less than a day before I checked the results, but your site may take longer.
4. Viewing the split-test results
You can access your results at any time by opening the Visual Builder and clicking on one of the graph icons on your test subjects.
The stats you see will depend on the goal you choose. For my button test, the clicks are the key number I am looking for, but Divi Leads can track the following;
- Clicks will show how many times a goal is clicked with a clickthrough rate being the number of clicks/impressions.
- Sales will show you how often a WooCommerce product has been purchased with the sales rate being the number of sales/impressions.
- Conversions will show how often a contact form or email opt-in form has been submitted with conversion rate being the number of conversions/impressions.
- Bounce Rate will show how often visitors leave the page within 5 seconds, with a bounce rate being the bounces/impressions. The time for what is considered a bounce can be changed from 5 seconds in the split-test settings.
- Reads will show how often visitors read (or the page displays) your goal, with the reading rate being the reads/impressions.
- Goal Engagement is not affected by the test subject but will determine how effective your Goal is, independent of the subject, with the engagement rate being goal reads/goal impressions.
My split test results
As you can see from the results of my test in the image above, the original green button got more clicks than the new red button.
- Button #1 (Green) had 27 impressions with 23 clicks and a clickthrough rate of 85.19%
- Button #2 (Red) had 26 impressions with 13 clicks and a clickthrough rate of 50%
Green is the winner! Now you can use the Divi global color options to change your colors sitewide in a single click!
5. Ending your Divi Leads split test
In the Split Testing Statistics window, click on the End Split Test and Pick Winner button at the bottom of the popup.
This will activate another popup window asking you to Select Split Testing Winner with the following info;
“Before ending your split test you must choose which split test variation to keep. Please select your favorite or highest converting subject. Alternative split testing subjects will be removed and stats will be cleared.”
Click on the Proceed button and you can use the circular mouse pointer to click on the winning subject. Once you do this any extra test subjects will be removed and the split test is completed.
My page viewers will now only see the green button and not the red button!
What to test next?
There is no limit to what can be tested so keep on testing until you find more great content optimizations.
In order to continue optimizing my button clicks on the page, I may want to re-run the tests the same as in the steps above using some new button colors. Maybe a yellow button will get more clicks…
Or, I could also try and test alternate subjects with the same button goal.
For example, in the image above I have set the text module to the left of the button as the subject (1) and the button as the goal (2).
The goal of the test is to see how many times the button gets clicked, but this time the text to the left will be changed and tested to see if it makes any difference to the button clicks.
Think about what might affect your conversions and test, test, test!
Split testing settings
Once you start a split test, you can open the Divi Builder Page Settings popup to access some split test specific settings, which are:
- Bounce Rate Limit is the time limit for counting a user as bouncing from your page or not and is 5 seconds by default.
- Stats Refresh Interval is set to update data once per hour but can be set to once per day to reduce server load. You can refresh the stats at any time within the stats dashboard.
- Shortcode Tracking can be enabled to allow you to track off-page goals by adding the shortcode on any other page on your website.
This particular button test could be seen as a failure as my original design turned out to be the best performing design. But, if you don’t test, you don’t know, so I will continue to test new designs and layouts to optimize my website. You should too!
Running split tests are not a particularly popular thing to do and the vast majority of Divi users might not even be aware there is such a powerful content optimization system available by default in their Divi install.
Do you use Divi Leads? Did you even know it existed? What was your best optimization made using the tool? Drop a comment below.
Thanks for the great tutorial. Just did my first CTA split test in the global header. Excited to see results. Thanks for also calling out the stats refresh interval. Great point. This is such a powerful feature that I’m sure few utilize.
FYI. I couldn’t figure out how to enter wireframe mode and had to look it up. It would be helpful to show, highlight, or explicitly state which button.
Thanks for the feedback. It can get quite addictive once you get started! I have added “The wireframe icon can then be found in the dark grey section on the left of the screen and is the one to the left of the icons for desktop, tablet, and mobile.” hopefully that is a bit clearer.
Hello Craig! I dont know if you will ever answer this comment, as this post is a bit old. But I will try anyway as Iam quite desperate. I have a list post with x amount of products (each with its own button), and I want to test out all the buttons that goes on to the amazon with my affiliate link. Without testing the buttons seperately that makes it look like a traffic light on the website. Do you know if this is possible in any way shape or form? I see they say everywhere that “everything” can be… Read more »
If your post is in a single section you can run a test on that section and change all buttons on the 2nd version. if not I would just put up with a traffic light of buttons for a fe days until you have enough data to see which color or style converts best. let me know which one works best and many I will change some of my own buttons!