Create A/B Tests Quickly with WordPress Block Patterns

Published in WordPress.

Watch our video

There is a better version of your web

Comparison of two variants of the same page using A/B testing

Share this post

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.

Sections of our home page
Different sections of our home page.

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.

An image depicting how A/B testing works: traffic is split and each segment sees one variant, and then we check which variant got more conversions
In its simplest form, A/B testing proposes to randomly split the traffic to the site in two groups so that 50% of the visitors see the A design while the other 50% sees the B design. By monitoring how users in each group react, we can calculate the conversion rate of each group and, in case there is a statistically significant difference between the two, declare a winner design.

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.

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.

Page section showing the benefits of our products
Page section showing the benefits of our products.

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.

Nelio home page testimonials section
Testimonials section of Nelio’s home page.

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:

Test selector in Nelio A/B Testing
Selector of test in Nelio A/B Testing.

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.

Variant creation of a page A/B test
Creation of a variant of a pageA/B test with NelioA/B Testing.

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.

Editing the variant of a page test
Edition of the variant of a page test with NelioA/B Testing.

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.

Adding a new pattern
Adding a new pattern.

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.

Redesigned section by using a pattern
Redesigned section by using a pattern.

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.

New A/B test from the testimonials section of the main page
NewA/B test from the testimonials section of the main page.

When editing it, as before, we find that we have a wide range of testimonial section designs that we can choose from.

Selecting a testimonial pattern
Selecting a testimonials pattern.

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.

Testimonials section displayed with cards
Testimonials section displayed with cards.

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.

Add a pattern in the template editor
Add a pattern in the template editor.

Changes to the inserted pattern are again much faster than if we had created this new section from scratch.

Design of the new template
Design of the new template.

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.

Selection of the templates that make up the A/B test
Selection of the templates that make up theA/B test.

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.

Definition of conversion objectives in an A/B test of personalized content with Nelio A / B testing.
Definition of conversion objectives in anA/B test with NelioA/B testing.

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.

Graphs with the conversion ratios of each variant in an A/B test
Conversion raties of each variant in anA/B test.

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.

Apply winning alternative in an A/B test
Apply a winning alternative in anA/B test.

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

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.