As we’ve discussed in previous posts, with WordPress 5.8 and the upcoming Pattern Directory, WordPress block patterns are gaining momentum. What we like most about block patterns is that, from a design point of view, they make sense as a single unit for adding different sections on any page or post.
For example, to increase your credibility and gain the trust of your website visitors, you may want to include a section in which you highlight the main features of your products, another that includes your clients’ logos, another that includes one or more testimonials or reviews of your service, etc. And having a varied repertoire of patterns to choose from for the design of each section is perfect.
Patterns, understood as page layout units, are also ideal candidates for A/B testing. Let’s see below how they can help you create your A/B tests and thus improve conversions on your website.
Improve Web Conversion with A/B Tests
Web conversion refers to any action that anyone who lands on your website is expected to do: they may visit a product details or pricing page, subscribe to the newsletter, contact us, read an article, buy my products, etc. In this context, the conversion rate is the number of conversions achieved in relation to the number of visits. That is, if your website has a total of 100 daily visits, 2 of which end up buying a product, the conversion rate on your website is 2%.
The tool that helps you to improve the conversion rate is A/B tests. An A/B test consists of, based on an hypothesis of improvement, proposing a change on the web and checking if it works better. For example, change the first block of the landing page with a message that generates more curiosity, change the order in which the different products are displayed on your pricing page, add a promotion of your products at the end of your posts, etc.
From a technical point of view, the A/B test consists of showing two or more versions or variants of the same web page (it can also be the menu or theme, etc.) to different sets of web visitors and comparing which variant generates more conversions.
As you may have already observed in the examples discussed above, on many occasions, the variants that you create consist of adding, modifying, or eliminating a section on your tested page. For this reason, we find the concept of block patterns particularly useful in the process of creatingA/B tests.
Create anA/B Test with Patterns
Although you could create anA/B test on a WordPress website manually, our recommendation is that you use one of the tools available on the market and, in particular, if you want to get the most out of block patterns, the best tool to createA/B tests is to use NelioA/B Testing (free and premium (€29/month) available) as it is a native WordPress plugin and, therefore, it is fully integrated with the WordPress block editor.
To create anA/B test with NelioA/B Testing with the WordPress block editor, 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.
In this guide, we explain all the details of each of the previous steps to createA/B tests with NelioA/B Testing in the block editor.
Let’s see with some examples how block patterns can help us to be much more efficient in creatingA/B tests; in particular, in the definition of the test variants.
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.
Examples
Let’s suppose three different test examples that we want to perform on our website.
Example 1 : on the one hand, I want to test an alternative design on our Nelio page by changing the section in which we showcase the benefits of our services.
Example 2 : Similarly I also want to test an alternative design of the testimonial section on the same page and see which one is more appealing.
Example 3 : I would like to test if adding a call to action section or banner at the end of all posts will get more subscribers to our Newsletter. As you can see at the end of this post, currently on our blog, at the end you only find the section to add comments.
How do we create theseA/B tests? With a tool like Nelio it is practically as easy as changing the design of that page with some additional step. Let’s see which ones…
Selecting the Type of Test You Want to Create
It is not the same to create anA/B test of a page than of a template. The creation of the variants will be different but the great advantage of using a tool like NelioA/B Testing, totally native to WordPress, is that by initially selecting the type of test you are going to create, the following steps will be totally intuitive within the context of WordPress.
With NelioA/B Testing, the first thing you have to do is select the type ofA/B test you want to create:
Once you have selected the type of test, you will see that creating the test variants is exactly the same as when you create any WordPress element.
In examples 1 and 2 above, since what we want is to change a section of a page, we would select to create a page test. In example 3, since what we want is the option to add a section at the end of the posts, what makes more sense is to create a template test.
Definition of Test Variants
Example 1 : After selecting that we want to perform a page test, you must give the type of test a name and select the page, also called the control page, where you want to perform the test. You can choose this from the list of pages that you have published on your website. In our case, it is the main page of our website.
Then you can create a new variant. By default, it’ll be an exact copy of your control page. Click on the Edit link of the variant and you will see that you will have the WordPress block editor that you already know to make all the changes you want along with some additional properties of the creation of a test.
You can add, modify, and delete the blocks you want to change the design of the variant as you wish. But what is the big advantage of block patterns? Now, changing for example the design of the section shown in the image is much easier than creating and editing each of the blocks one by one. Simply, by clicking on the add patterns button, I can select the design I like the most.
In this way, once I have the design set in a single click, I just have to replace the images with the ones I already had in the media library and copy and paste the text of the original to change the look of this section.
Example 2 : In this case, the selection process for the test type would be exactly the same as in the previous example. After selecting that we want to create a page test, we would add a name to the test, select the main page, and create a new variant.
When editing it, as before, we find that we have a wide range of testimonial section designs that we can choose from.
And just like before, now by replacing images and a simple copy and paste of text, we have quickly changed the layout of this section.
Example 3. In our last example, we want all posts to include a section at the end in which the reader is invited to subscribe to our newsletter. To do this, the easiest was is to create a template test and use a new template variant that includes the section we want. In the case of the template test, before creating the test, the different templates must have been created.
Remember that, as I told you when explaining the new features of Full Site Editing in WordPress 5.8, now you can create a new template or edit the existing one in the template editor from a post or page. So, you can create a new template and directly from the template editor, you can select and add a pattern similar to what we have done above.
Changes to the inserted pattern are again much faster than if we had created this new section from scratch.
Now we can create the new template test. First, we select that we want to create a template test and then we select for variants A and B which templates we want to display.
And that’s it, we’ve already created the control versions and their variants for each of the examples. From here on, the following steps are the same for the different types of tests.
Define Your Conversion Goals and Actions
After defining the variants of your test, the next step is to define the conversion goal. For what purpose are you creating this test? To get more sales, more subscribers, or more visits to the pricing page? These objectives are met when the visitor performs certain actions.
With NelioA/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. NelioA/B Testing will show you information on how effective each variant is for each of the objectives you have defined.
For each of the goals that you have defined, you 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 on your website, or when they submit a contact form. Click on the action button that interests you and for each type of action you can define its own settings.
Segment Your Traffic
One of the interesting features of any A/B testing tool is that it allows you to segment your traffic. That is, you can establish that only some visitors 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 NelioA/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. NelioA/B Testing will take care of splitting your traffic in two groups so that each of them see one variant or the other. When using NelioA/B Testing, you don’t have to worry about how long you need to run a test or to control the statistical confidence of the data. You will be able to see the total number of conversions and page views for each variant. You will also be able to see the percentage of improvement of each variant compared to the original version.
Apply the Winning Alternative
Finally, if you get a winning variant of a test, NelioA/B Testing allows you to apply that variant as the final version on your website with a single click.
That is, for the first two examples of page tests, if the variant that we had tested is the winner, replacing the original content with that of the winner’s. In the case of a template test, simply at the end of the test, you have to switch the template on the pages/posts you want.
Conclusion
A/B testing is the best tool to optimize conversion on a website. WordPress is evolving very quickly and with the new features and functionalities that have arrived in WordPress 5.8, creating A/B tests is even easier if you use a native WordPress tool fully integrated with the block editor, as it’s the case with Nelio A/B Testing.
Remember that the patterns, designed to create and design different sections, facilitate not only that you can add and change sections of pages and posts, but also templates, as you have seen in this post. Looking forward to see the next new features of WordPress!
Featured Image by Raimond Klavins on Unsplash
Leave a Reply