On-page element split tests with Divi Builder

Step by step

Divi doesn’t get its own settings panel inside AB Split Test - it doesn’t need one. Every Divi module, row and section lets you add a CSS class, and that’s all AB Split Test needs to know which element is which variation.

1. Go to AB Split Test > New Test.
2. Give the test a name. Internal only - remember it for later.
3. Choose On Page Elements as the test type.
4. Pick your conversion goal: a page visit, a button click, scroll depth, a WooCommerce order, or any of the other triggers.
5. Click Launch Test. Make a note of the class shown on the test screen - it looks like ab-var-1234-{name}, where 1234 is your test’s ID.
6. Edit your page in the Divi Builder.
7. Open the settings for the module, row or section you want to test, go to the Advanced tab, and open CSS ID & Classes.
8. In CSS Class, add your variation class - for example ab-var-1234-original.
9. Duplicate that module, change it into your alternate version, and give the copy the same class with a different variation name - ab-var-1234-bold.
10. Save the page. Each visitor now sees one version, and AB Split Test hides the other.

Repeat step 9 for as many variations as you want. A test needs at least two.

A few Divi-specific notes

• Put the class on the outermost element you want swapped. If you’re testing a whole call-to-action block, tag the row or section rather than each button inside it.
• Both versions sit on the page at once, so build them one after the other rather than in separate layouts.
• Divi’s own Static CSS File Generation can cache aggressively. If you don’t see the variations switching, clear the Divi cache under Divi > Theme Options > Builder > Advanced as well as your page cache.

This is the same approach used for any builder that supports CSS classes - there’s more detail, including the older two-class format, in On-page split testing with any (or no) page builder.