Skip to main content

Edit a variation

This guide explains how to select elements, modify their properties, and add new components. It also covers how to customize styles for different devices, and set interaction states.

To learn how to create and manage your variations, please read this article.

Select an element​

The Graphic Editor makes selecting elements straightforward and intuitive. When you hover over different parts of your webpage in the editor, each element becomes highlighted. You can select an element by double-clicking.

When you select an element, options appear above the selected element, allowing you to select another relative or edit the element's CSS selector.

Element details​

Upon selection, the element's details, such as its tag, are displayed. Element details help you understand the type of content you are interacting with.

Highlight​

You can access the Highlight in preview options by clicking the cogwheel icon. These switches allow you to highlight elements directly in the preview with different colors.

  • Added Elements: Highlighted with one color to show newly added elements.
  • Changed Elements: Highlighted with another color to identify elements you've modified.

This visual feedback makes it easy to spot changes or additions.

Search, sorting, and filtering​

Element panel

The Element panel provides useful tools for searching, sorting, and filtering.

  • The search bar allows you to find elements by name or tag. For example, if you type "div", the search will return all <div> elements, and any elements with "div" in their name.
  • The sorting options help you navigate through long lists of elements.
    • Newest on top: Sorts elements by their creation or first modification date, with the most recently created or modified elements appearing at the top. This sorting method respects the original creation or first modification date: regardless off future edits, the oldest elements will still appear first.
  • Oldest on top: Sorts elements by their creation or first modification date, with the oldest elements appearing on top. Respects original creation or modification dates, as per Newest on top.
  • The Element panel allows you to Filter items based on specific criteria, allowing you to narrow the list of elements to those relevant to your current task.

Select another relative​

This feature helps you navigate through the hierarchical structure of webpage elements. It's useful when you need to select a related element that's not directly accessible.

For example, if you've selected a heading within a banner and want to select the entire banner, click Select another relative and navigate to the parent element.

Edit CSS selector​

This feature gives you advanced control over which elements are targeted by your changes.

You can refine or change the CSS selector used to target the element. Options include hierarchy, tag, class, or content-based selectors. You can also manually input a CSS selector for precise targeting.

For example, if an element has multiple classes, or is deeply nested, you can manually define the CSS selector to ensure you target the element specifically.

Change an existing element​

Once an element is selected, you have multiple modification tools at your disposal.

The tools are accessible in the element toolbar and the right-hand panel.

Element toolbar​

The element toolbar appears right above the selected element, providing quick access to several editing options:

  • Move: Change the element's position.
  • Resize: Adjust the element's dimensions.
  • Duplicate: Create a copy of the selected element.
  • Delete: Remove the element from the page.
  • Edit content: Modify the text or image within the element.

Right-hand panel​

The right panel in the editor provides in-depth options for customization. Here you can access more detailed settings for the selected element, including:

  • Content: Edit the text, image, or other content within the element.
  • Text: Adjust text alignment, line height, and make text capitalized, uppercase, or lowercase.
  • Background: Change the element's background color or image.
  • Opacity: Change the element's opacity.
  • Border: Add borders or modify their color, style, and width.
  • Shadow: Apply shadow effects to give the element depth.
  • Padding and margin: Fine-tune the spacing around and within the element.
  • Device styling rules: Customize how the element appears on different devices (desktop, tablet, mobile).
  • CSS and classes: Add custom CSS classes or styles for more advanced customization.
  • Attributes: Edit HTML attributes of the element.
  • HTML content: Directly modify HTML content if needed.

Add a new element​

Adding a new element in Kameleoon's Graphic Editor is straightforward and allows for extensive customization to fit your design needs.

Open the Elements panel​

In the left sidebar, click + Add to open the elements panel.

Choose an element to add​

You have several options such as Text, Heading, Image, Widgets, and HTML. Click on the type of element you want to add.

Select position of the element​

You can choose the new element's position relative to other elements. Options include Inside the page or Above the page, and can be set to Relative or Absolute.

Specify the exact position relative to a selected reference element (for example, before, replace, or after).

Manual positioning​

For precise positioning, enable the manual position option and specify the element's top, right, left, and bottom values in pixels.

Define the reference element​

You can define the reference element's CSS selector to position the new element accurately.

Click the reference element in the preview zone or manually input the CSS selector.

Adjust display settings​

Choose the display settings for different devices (desktop, tablet, mobile). You can modify this element's visibility in the left panel later if needed.

Use the color picker​

Eye dropper​

Use the eyedropper tool to select any color on your site's page and apply it to another element.

Contrast ratio​

In the same color picker, you can check the selected color's contrast ration with white.

Colors preset with the ones used on your site​

In the lower part of the color picker, you will find the colors you use most on your site. Click one to apply the color to an element.

Advanced actions​

States​

The states feature allows you to customize the appearance and behavior of elements based on their interaction states. To edit an element's state:

  1. Click the element you want to edit. The element toolbar and right panel open.
  2. Click the State tab in the right panel.
  3. Select the state you want to assign to the selected element: Hovered, Active, Focus, or Disabled.

Once you select a state, various customization options appear. You can change font, text, line, style, color, alignment, line height, border, shadow, padding, and margin for the selected state.

For example, if you select the Disabled state, you can change the text color to indicate that an element is inactive.

Device styling rules​

In the right-hand sidebar, you can define styling rules for an element that may differ from one device to another.

By default, changes made on one device will be mirrored across all other devices, except for size, rotation, padding and position settings. This synchronization method is recommended for A/B testing, as it yields more reliable results.

But in some particular cases, you can select the Customized per device mode. Changes made on one device will remain exclusively on that device. This setting is not recommended for A/B testing, as it may lead to less reliable results.

Multi-device feature​

You can use the multi-device feature in the Kameleoon Graphic editor to preview how your design will appear on different devices.

To view your website's appearance on different devices, click the phone, tablet, or desktop icon at the top of the editor.

You can toggle between devices to test responsiveness and make necessary adjustments to your design elements for optimal display across devices.

When you wish to test your design on different smartphone resolutions, click the three-dots menu near the device selection toolbar. A submenu that lists various smartphone models along with their screen resolutions opens. By clicking on a specific model, the editor will change the preview area to reflect that device's resolution. You can then review and adjust your design to ensure it functions on that specific device.

Edit hidden elements​

To edit a click-triggered menu or hover-over text on a card:

  1. Enter navigation mode by clicking the icon in the header.
  2. Hover or click on the trigger element
  3. Hold CMD (Mac) or CTRL (PC) on your keyboard.
  4. Click the element.

You'll be redirected to design mode.