Optimizely's Visual Editor - Changing The Colour Of A Button

The great thing about Optimizely is the array of options you have to build tests. Below we are going to make a common but simple A/B test to demonstrate how to use the Visual Editor. The A/B test will change the colour of a button.


Generally we don't see a test like this move the needle much but in some cases, such as the famous Fifty shades of blue test from Google, it can prove to have significant impact.

  1. Navigate to the experiment.
  2. Create/Select the variation for the colour change.
  1. Click on Create Change -> Element Change.
  2. Use the selector to highlight the button.
  3. Click the highlighted button and note the css class is added in the left bar.
  1. Now we have our button selected we are able to apply changes.
  2. Scroll down to background and paste your colour code into the input.
  3. Click save to apply changes.

The Visual Editor is the quickest and easiest way to make changes like this to your site. It has it's limitations and may even cause some errors on your site if used incorrectly, so proceed with caution.

Download our free A/B testing guide and make your conversion rate soar