Follow

Using the UI editor

About this page

This page explains which segments of a page are easy to edit using the Kaizen Platform UI editor.

About the UI editor

The Kaizen Platform UI editor helps creating design Variations and implements these into A/B tests. Quickly move elements around the page, adjust color, font size, etc.

Basic functions of the UI editor

To start the UI editor, choose any existing Experiment and click the + Create Variation-button in the top right corner.

When the mouse moves across the screen, the page elements are highlighted in a blue frame. Select one and a dropdown with functions appears.

Basic functions

  • Drag position : drag elements to move them across the page
  • Remove : remove elements
  • Edit text : make text variations
  • Insert image : adjust or insert images. Sizes below 2MB
  • Show original : display the original design
  • Show preview : open a preview of your new design. All operational functions, like buttons, already work.

Some images have their position defined in the HTML and CSS of the original page and cannot be moved in the Kaizen Platform UI editor. To edit these, use the “Stylesheet” and “JavaScript” sections in the lower left of the UI Editor.

HTML and Style edits

  • Edit HTML: edit HTML of a selected element
  • Edit Style: edit HTML of a selected style=""-element. CSS can be inserted.

JavaScript edits

  • Custom jQuery Code: add a jQuery code to a selected element.

Direct edits to the code

  • StyleSheet tab: CSS will be added to the test page later.
  • JavaScript tab: see all adjustments in JavaScript while using the UI editor.

Edits to pages with restricted access by UI editor

Pages that require Basic Authentication or have IP restrictions can also be edited. Do this either by pasting the Kaizen Platform JavaScript snippet into them. Or by using the Kaizen Platform Assistant, which is available as a Google Chrome extension.

To edit login pages, first login and next open the UI editor.

FAQ

QuestionAnswer
Q: The CSS code I entered into the CSS tab doesn’t seem to be applied to the page. What is happening? A: Possibly, the original page cannot be overwritten. For more, see Working order of the StyleSheet.
Q: Can I make pixel level adjustments to element positions? A: Yes. After moving the elements with Drag position, open the JavaScript-tab on the bottom left, and adjust the number of pixels.
Q: When I upload an image, where is it saved? A: Uploaded images are saved on the Kaizen Platform server.
Q: Can I replace the uploaded images with images on my own server? A: Yes. Open the JavaScript-tab in the Kaizen Platform UI editor, and change the image URL to the image on a specified server.
Q: Which design should I edit in my first Experiment? A: Changing images or button-colours is relatively easy, and is recommended for your first A/B Test. Simple things like changing the color of a button is known to increase traffic by 10%~20% in some cases.
Q: Is there a limit on the image size we can upload? A: Kaizen Platform has just increased the limit, to 2MB per image with a maximum of 10MB per Variation.
Q: Can I code directly and not use the Kaizen Platform UI editor? A: Yes, you can. Open the JavaScript-tab from the bottom left of the UI editor. Or, run a Split URL test which tests the original page against pages created outside the Kaizen Platform UI editor. See Split URL test for full details.
Q: Can I edit images in the UI editor? A: No. The Kaizen Platform UI editor cannot be used to edit images. You can create alternative pages by replacing the whole image. To edit an image, please use your image editing software first, and next replace the image.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.