WordPress Redirect & Split URL Testing
Table of contents
In short
Create the new block in the CMS (e.g. with Elementor), give it a unique ID and hide it there directly, for example via the CMS's own settings or a CSS field. Then create an experiment in the Varify A/B testing tool and show the block again in the test variant using CSS. This allows you to test how the block affects user behavior.
Insert new element in WordPress page
Simply drag and drop the desired widget (e.g. text, image, button) into the desired area of your page. As soon as it is placed, you can customize the content and design according to your wishes.
In this example, a tile for the troubleshooting area has been inserted in the upper part
Assign a CSS ID to a new element
Select the element that you want to show later using Varify - this can be a new block, a column or just a single element. Click on it and go to the "Advanced" tab in the Elementor menu. There you will find the "CSS ID" field. Enter a unique ID here, e.g. "new-element".
Hide element
In the "Advanced" tab, switch to the "Responsive" section. Activate the three switches there to hide the element on desktop, tablet and smartphone. This allows you to publish your customizations without users already seeing the element.
Show element in via experiment
- Create a new experiment in Varify.
- Then click on the code symbol at the top right to go to the CSS area.
- You can enter this code there (adjust the ID if you have assigned a different name):
#new-element{
display: block !important;
} - Replace "new-element" with the ID you assigned in Elementor.
- Save the variant.
- Test the experiment to see if everything works as desired.
- Start the experiment
Optional: Hide other element
If you are testing a variation of an existing element, you should hide the original element as soon as the new element is displayed.
Procedure:
-
- Assign a unique ID to the original element in the CMS.
- Add the appropriate code to the CSS of the Varify variant, for example:
#original-element{
display: none !important;
}
This ensures that only the new element is visible in the test variant.