Once you've decided on the type of experiment you wish to run, you'll build a variation of the page you want to test using the Optimizely Visual Editor. Also known as the WYSIWYG (What You See Is What You Get) Editor, the Visual Editor allows you to easily create variations of your pages for your experiments in a visual format.
After you read this lesson, take an interactive tour of key components in the Visual Editor interface. Then, watch the video on how to make basic changes in the Visual Editor. Finally, practice using the Visual Editor in a simulated exercise.
If you're already familiar with the basics, here are a few best practices to keep in mind when using the Visual Editor. Feel free to use these links to go straight to the lesson.
- Use Move and Resize to fine-tune changes to an element on your page.
- Use Rearrange to drag elements across great distances.
- Select the smallest container possible when using Edit HTML.
- Avoid making multiple HTML changes to the same element in the Visual Editor.
- Be cautious about using Edit HTML on dynamically loaded content.
- Don't add
<script>tags using the Edit HTML tool.