When you design a website, you do it with a purpose: to sell products, promote services, or provoke any kind of response or action from your readers. If you have also chosen the Elementor plugin as a page builder to create your website in WordPress, it’s because you are aware that design matters and you want it to be attractive and modern. Today we are going to see how to create A/B tests in an Elementor’s website.
Even if you use Elementor in the design of your pages, how do you know if your exquisite taste is indeed the one that will bring you the best results? You are not your own customer and their opinions and tastes may be very different from yours. Going with your instinct can be very romantic but if you are looking to improve your user’s experience and increase conversions, that is, to get your readers to take any action aligned with your objectives (buy, fill out a form, contact you, etc), the best option is to perform A/B tests on your website.
Table of Contents
What Are A/B Tests?
The number of visitors to your website equals the number of opportunities for a visitor to perform some desired action, also called conversion. This is a subscription, a purchase, filling out a form, etc.
The conversion rate is the number of conversions achieved with respect to the number of visits. Therefore, if you have a total of 100 visits per day on your website, two of which end up buying a product, the conversion rate on your website is 2%.
In the same way that you can measure the success of your email campaigns by analyzing what percentage of those who receive the emails end up buying, with your website you have a very good tool to improve its success or conversion rate: A/B testing.
A/B testing is the best tool to optimize conversion on your website. In short, an A/B test consists of, based on an hypothesis of improvement, proposing a change to your website (for example, a redistribution of the Landing Page to better display certain relevant information, a rearrangement of the menu to get more clicks on my product page or a radical change of the theme to make it more attractive) and then see if that change works better than what you had before.
Technically an A/B test is nothing more than an experiment that consists of showing two variants of the same web page to different segments of website visitors at the same time and comparing which variant generates most conversions.
One of the questions that quickly arises with A/B testing is what type of test you should test. A/B tests are not tests that you define randomly without any sense; they should be part of a more ambitious process known as the Conversion Ratio Optimization or CRO process.
Conversion Rate Optimization
Conversion Rate Optimization or CRO is, as its name suggests, the process of increasing the percentage of website visitors who perform the actions you want. This process, in short, consists of the following steps:
Step 1: Define Your Goals
The first step in any CRO process is to define what your business goals are and the different conversion goals of your website at different stages of your sales funnel. For example, Nelio’s business goal is to increase subscribers to our premium plans. But what is the path do visitors take from the moment they visit our website until they become customers? This is our sales funnel:
If our business goal is to increase subscribers to our premium plans, a prospect or lead may first learn about Nelio A/B Testing when they have searched for A/B testing solutions on Google or in the WordPress plugin Directory. That visitor to our website will probably read some articles in our documentation to learn a little more about our product. If they like the content on those pages, they will visit our pricing page. At this point, a conversion goal for our website could be a visit to the pricing page and our target metric could be to get 2,000 visits per month to that page.
Then, if the potential customer finds interesting information, they will ask for more detailed information or download the plugin from the WordPress Directory to test the free version we offer. A second conversion goal would then be: a visitor fills out our contact form. The metric will be the number of contact forms received and we can define our monthly target with a certain value. Or it could also be a download of our plugin. And so on.
Finally, the prospect subscribes to one of our premium plans. In this case, our conversion goal would clearly involve the purchase of a subscription plan. And since the purpose of our business is to grow, then we can break down this goal downs between the different plans we have.
As you have seen, this first step consists of analyzing the sales funnel to define our conversion goals by establishing metrics.
Nelio A/B Testing
Native Tests for WordPress
Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.
Step 2: Analyze Your Website
After this essential preliminary step, you should start looking for data on the current situation of your website and on which you can act. Identify the problems you currently have on your website. This will help you generate ideas about the A/B tests that you should perform.
How do we collect data? Initially, heuristically evaluate each of the pages you identified in the previous step. Ask yourself whether or not they meet your set of criteria you had established and see if you could improve those results:
- Does the page meet the user’s expectations in terms of content and design?
- How can we improve it?
- Are the content and offers on the site as clear as possible?
- Can we make it clearer or simpler?
- What causes hesitation on this page or hinders the process?
- Can we simplify it?
- What is there on the page that does not help the user to act?
- Can we increase user motivation?
You will get a list of areas of interest that you can potentially improve. Use Google Analytics to find improvement areas too. For example, GA can help you detect the % of visitors who click on your product buttons, which you can then compare with your expected figures. You can also use heatmaps and scrollmaps to better understand the behavior of your web users.
Next, prioritize the problems or improvement areas you’ve identified, focusing first on those you think will have the most impact (either because they have more visits or because it is an important problem). For example, in our analysis we saw that we needed to improve our Nelio A/B Testing product page. We wanted to increase the number of users visiting our pricing page. And this was a major problem.
Step 3: Create Your Hypotheses
The next step, before creating an A/B test, is to translate the list of previously identified problems into a set of hypotheses.
For instance, on our Nelio A/B Testing landing page we saw that many visitors only see the first block and do not scroll down the page. We could see this after analyzing the heatmap and the scrollmap of the web. Also, only 45% of visitors went to the pricing page.
Given this fact, we hypothesized that, by using a clearer message in the first fold that arouses curiosity instead of urgency, we’d get more people interested in clicking on the Start Now button. You can do this same exercise for each of the problems on your ordered list.
Step 4: Generate a Test Idea
Next we had to implement a new headline that “arouses curiosity.” In our particular case, we decided we’d be using the following: Red or Blue? Square or Round? Up or down? Put your WordPress to the test.
We also decided to change the text below the headline as shown in the image. The idea we had was to check if it is true that people prefer we talk about their site and goals instead of our products.
Step 5: Create and Run A/B Tests
Finally, all that’s left is, as you may already imagine, to create the test on your website. As we mentioned at the beginning, an A/B test is nothing more than an experiment in which we create two versions or variants of a page (but it could also be of an post, a menu, a widget, a form or any other element of our WordPress website). Once the test is running, we can then split our visitors so that approximately half of them always see variant A and the rest will see variant B.
When defining an A/B test, we not only have to define the variants (A/B or multiple in case of a multivariate test) of the test, but we must also define our conversion goals. As we have seen in the previous example, our conversion goal was to count the visits to the pricing page of our premium plans. In addition, in an A/B test we can also segment the participants in a test, that is, indicate which visitors we want to participate in the test.
After running the test, you will see if one of the variants has been the winner and you will be able to apply it with certainty as the final one on your website, making sure that it will have an improvement in the conversion.
And as you can imagine, the process of optimizing the conversion of a website is continuous and cyclical. Never stop doing A/B tests to improve your website.
Create A/B Tests in Elementor
You can create an A/B test on a WordPress website with Elementor manually, for example, using Google Analytics for conversion analysis. However, our recommendation is that you use one of the tools available on the market, such as Nelio A/B Testing (free and premium version from € 29/month), Convertize (premium version from $ 49/month), VWO (premium version starting at $ 199/month), Convert Expriences (premium version starting at $ 699/month) or Optimizely (custom prices but starting at approx. $ 800/month), among others, which saves you the trouble of having to segment traffic to your website and directly provide you with the metrics and results you are looking for.
Let’s see what types of A/B tests you can create with Elementor using Nelio A/B Testing, a tool whose great advantage is its being a native WordPress plugin. In fact, you just have to install the Nelio A/B Testing plugin on your website like any other plugin and, once installed, you can start using it without having to learn to use any other tool.
The steps to follow are as follows:
- Select the type of test to create
- Define the test variants,
- Define conversion goals and actions
- Alternatively, define if you want to apply segmentation
- Run the test and analyze your progress
- Apply the winning alternative as final
Select The Type of Test To Create
To create any type of test, the first thing to do is select the type of test you want to create from the list that shown.
Once you have selected the type of A/B test you want to create, you must define the main characteristics of the test you want to run on your website.
Define The Test Variants
First of all, for each of them you must choose the element you want to test and define its variants.
A/B Test of a Page
Let’s look at a very simple example. Suppose we hypothesized that, using a new image on the Elementor page, we’ll get more people interested in knowing more information about the tool and, therefore, clicking on the call to action button.
After selecting that we want to create a page test, in the WordPress editor you will see the page where you must edit your test.
Simply name the test, in this case “Testing Different Images” and select the page you want to test (in our case, the Home page).
Next, you create the variant, “Variant B” of your original page just by giving it a name. And if you want, you can create as many variants as you can by clicking the New Variant button. By default, each variant created will be an exact copy of the original page you selected earlier. Click on its Edit link to modify it.
The advantage you have when using a native WordPress plugin is that you can directly modify the variant of an A/B test using the same visual editor you usually use to create your pages. In this case, the editor is obviously Elementor. This means that, after clicking on the Edit link, you will see the new variant is loaded in Elementor and you can change it as you please.
Tweak the page (in this example, I’ll be only change an image) and save it as a draft:
That’s it! You’ve created your first variant!
A/B Test of a Post
Creating an A/B test for a post is very similar to that of page. After selecting that you want to create a post test, the drop-down to select the original post you want to test will show the list of posts you have published. You can also search for the post by typing its title, URL, or its ID.
The rest of the process is exactly the same as the previous one.
A/B Test of a Custom Post Type
If what you want is to create an A/B test of a custom post type different from pages and posts, such as courses that you have created on your website, FAQs, etc., you can also do it with Nelio A/B Testing. You just have to select that you want to perform this type of test, and now the selector will allow you to select the type of content you want and what specific content you want to test.
Test A/B of a Headline
If when analyzing your website you identify that it is difficult for you to get readers to read the contents of your website, perhaps it is because the headlines are not very attractive. A test that can be very interesting is the headline test. That is, try different versions of a post’s title, excerpt, and featured image and find out which combination gets a greater number of readers.
To perform this type of test, with Nelio A/B Testing you don’t need to edit this information with Elementor. The plugin itself allows you to do it directly when editing a test. After selecting that you want to create a new headline test, Nelio A/B Testing shows you the headlines of the posts you have on your blog.
You select the post whose headline you want to test and create the variants you want of it, without even having to edit the post.
A/B Test of WooCommerce Product Summary
WooCommerce product summary A/B tests are a specific type of WooCommerce test in which different combinations of name, short description, and product image are tested, with the intention of discovering which of them gets more purchases of that product. The way to create a test of this type is very similar to that of the headlines we have seen above.
If you have selected to create a test of this type, Nelio A/B Testing will show you in a drop-down the products that you have available and you only have to make the modifications of the variants that you want to create directly in the test editor. You don’t have to edit the product.
Theme A/B Tests
If after analyzing your website your hypothesis is that your website needs a more radical change, perhaps changing the theme may be what you need. But before jumping in the deep end, remember, create an A/B test with which you can check with data which theme is better.
Creating a theme test is easy with Nelio A/B Testing. You should only have the themes you want to test installed on your WordPress and select them in the A/B theme test.
Keep in mind that if the pages you have with Elementor have been completely customized one by one, the effect that a theme change can have will be minimal.
A/B Test of Templates
Instead of changing the theme of a website, you can try creating different templates for some of the pages on your website. Design them previously with the Elementor page builder and then perform an A/B test with them.
As always, it’s as easy as selecting the different template variants that you want to use as a template variant on all pages that use a particular template.
A/B Test of Menus
With Elementor you can have created the navigation menu structure directly in WordPress or if you use the Pro version of Elementor you can also create menus by using the Nav Menu widget. In case you have created it in the traditional way, creating an A/B test is as simple as selecting one of the menus you currently have and creating the variants you want.
To modify the variants, you just have to click on the edit link and modify the menu in the same way that you edit any traditional menu. Once created, it is now available as a variant of this test.
In the event that you have created your menus with the Elementor Pro version Nav Menu widget, the creation of the test is the same as if you were creating an A/B test of widgets as explained below.
A/B Test of Widgets
If you need to create a widget test in WordPress (including the Nav Menu discussed above), after selecting that you want to create a widget test, you just have to indicate the name of the new widget variant and click on the edit link.
When editing a variant, Nelio uses WordPress’s own widget editor with some additional controls. Add, remove, and arrange the variant widgets as you like and then go back to the test.
A/B Test of CSS
If you want to test different versions of CSS style rules and measure which one works best to meet your goals, you can select to create a CSS test. As in the case of widgets, you just have to enter the name of the new variant and click on the edit link. In this case, an editor will open for you to add the CSS styles you want while you can see the preview of them.
Once you have the new rules defined, click on publish and you have the CSS variant of your test created.
Define Your Conversion Goals and Actions
After defining the variants of your test, let’s go to the next step: the A/B test you have created was done with the idea of testing some conversion goal, such as getting more sales, more subscribers or more visits to the pricing page, etc. Those goals are met when the visitor performs certain actions. For example, you can get more subscribers when a user completes a certain form on your website or more visits to the pricing page when a user clicks a button, etc.
How Do We Define Conversion Goals and Actions in Nelio A/B Testing?
In the “Conversion Goals and Actions” section, you can add as many goals as you want by clicking on the +New link and you can optionally add a name to them. Nelio A/B Testing will show you information on how effective each variant is for each of the goals you have defined.
For each goal, you then have different types of conversion actions to track your visitors. For example, you can monitor when they access a certain page, when they click on a certain element of your website, or when they submit a contact form. Click on the action button that interests you and set it up. For example, you can click on Page Visit conversion action and select your Pricing Page in its dropdown form, or select a Form Submission and choose the form you want to track, etc.
Segment Your Traffic
One of the interesting features of many A/B testing tools is that you can segment your traffic. That is, you can set only certain visitors to participate in a test. For example, by country, time, language, browser, device etc. If you want more details on how to implement traffic segmentation with Nelio A/B Testing, in this article Antonio explains it in detail.
Run the Created Test and Analyze Its Progress
And that’s it, now all you have to do is press the button to start a test and analyze its progress. When using a tool like the ones mentioned above, you don’t have to worry about how long you need to run it or control the statistical confidence of the data.
You will be able to see the total number of conversions and visits to the pages of each variant. You will also be able to see the percentage of improvement (or worsening) of each variant with respect to the original version.
Apply The Winning Alternative
After a while, the plugin will tell you which variant is the best (if there’s one that’s better than the others, of course).
Once there’s one, all that’s left is making it definitive. With Nelio A/B Testing, being a native WordPress plugin, applying the winning variant only involves clicking a button, Apply. And that’s it! There’s no need to recreate the winning variant again – it’s already in WordPress!
And voilà, now you have a new design of your website with proven data, better than the previous one.
Start Performing A/B tests on Elementor Now
With this complete guide on how to create A/B tests in Elementor, you’ll be fully equipped to start planning your own website conversion optimization project. A/B tests are invaluable when it comes to improving your website’s conversion rates. What’s more, by using a tool like Nelio A/B Testing, you reduce many of the risks involved in undertaking an optimization program without clear criteria and only based on your own intuition..
If you have found this guide useful, please share it on your social networks and if you have any questions, comments, or need additional information, do not hesitate to leave your comment at the end of this article.
Featured image by Syd Wachs on Unsplash.
Leave a Reply