Editing a variation using the Graphic Editor to make changes to page elements. 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, allowing you to select it easily by double-clicking it.
Some options at the top provide element details and let you select another relative or edit the CSS selector of the element.
Element details
Upon selection, the element’s details, such as its tag (e.g., <h1>, <p>, etc.), are displayed. This helps you understand the type of content you are interacting with.
Highlight
By clicking on the cogwheel icon, you’ll access the Highlight in preview options. 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 that have been modified.
This visual feedback makes it easy to quickly spot changes or additions, helping you ensure that all necessary elements are correctly identified and modified.
Search, sorting & filtering
In addition to the highlight feature, the Element panel provides some useful tools.
- 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, as well as any elements with “div” in their name, such as an element named “division”. This dual search functionality ensures you can easily locate specific elements, regardless of their type or how they are named. - The sorting options help you navigate through large lists of elements.
- Newest on top: This sorts elements by their creation or first modification date, with the most recently created or modified elements appearing at the top. Even if older elements are later modified again, they will still appear lower on the list than elements that were created or modified more recently for the first time.
- Oldest on top: This sorts elements by their creation or first modification date, with the least recently created or modified elements appearing at the top. Similar to “Newest on top,” this sorting method respects the original creation or first modification date.
- The Element panel also allows for filtering elements based on specific criteria, letting you narrow down 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 div, use Select another relative to open this feature in the left-hand sidebar and navigate to the parent element.
Edit CSS selector
This feature gives you advanced control over which elements are targeted by your changes, ensuring precise modifications.
You can refine or change the CSS selector used to target the element. Options include hierarchy, tag, class, or content-based selectors, or you can manually input a CSS selector for precise targeting.
For example, if an element has multiple classes or is deeply nested, manually define the CSS selector to ensure you target it specifically.
AI Generated CSS Selector
The AI-Generated CSS Selector feature is designed to simplify the targeting of elements on your website. By utilizing intelligent algorithms, this feature can generate CSS selectors that identify elements in a flexible and efficient manner. However, it’s essential to understand when and how to use these selectors to ensure optimal performance and avoid potential pitfalls caused by changes in the structure of your website.
The more intricate a CSS selector is, the more it relies on the specific structure of a webpage. For example, if you have a selector targeting the third child element within a <div>, which is itself nested inside another <div>, changes higher in the hierarchy can break the selector’s functionality. If that outer <div> is shifted or altered, the selector may no longer find the intended element, even though it still exists on the page.
Conversely, simpler selectors, such as:
[class*="Footer_linkContainer"] a:nth-of-type(2)
are more resilient. These selectors focus on specific classes or attributes, making them less dependent on the hierarchical position of elements. In this case, as long as an element with the class "Footer_linkContainer" exists on the page, the selector can find it regardless of changes in its relative position.
Limitation
It’s important to acknowledge that while simpler selectors are often more robust, they aren’t a one-size-fits-all solution. There are situations where the website’s structure plays a vital role in targeting the right element.
For instance, suppose you are targeting an element with the class Footer_linkContainer. If the website undergoes a redesign, and a new element with the same class is introduced higher up on the page, the simplified selector will target this new element instead. In such cases, the original element you intended to modify will be missed, and the selector will need to be adjusted to account for the structural changes.
Change an existing element
Once an element is selected, you have multiple tools at your disposal to modify it.
They are accessible:
- In the element toolbar
- In 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 position of the element within the layout.
- Resize: Adjust the dimensions of the element.
- 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 font size, color, style, alignment, and other text properties.
- Background: Change the background color or image of the element.
- Border: Add or modify borders, including 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 the 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
On the left sidebar, click on the + Add button 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 position of the new element 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 (e.g., before, replace, after).
Manual positioning
For precise positioning, you can enable the manual position option and specify the top, right, left, and bottom values in pixels.
Define the reference element
You can define the CSS selector for the reference element to position the new element accurately.
Click on the reference element in the preview zone or manually input the CSS selector.
Adjust display settings
Decide on 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 in the color picker of the right-hand sidebar to select any color on your site’s page and apply it to another element.
- The insert also includes the characteristics of this color.
Contrast ratio
In the same color picker, you can check the contrast ratio of the chosen color with white color.
Colors preset with the ones used on your site
In the lower part of the color picker, you will find the colors mostly used on the site
You can then apply them to an element with a single click.
This feature help our customers build more consistent experiments (with their Design System).
Advanced edition
States
The states feature allows you to customize the appearance and behavior of elements based on their interaction states.
Click on the element you want to edit. This brings up the element toolbar and the right panel.
In the right panel, switch to the State tab. Here, you can select the state you want to edit from the dropdown menu: hovered, active, focus, 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 a CTA is inactive.
Device styling rules
In the right-hand sidebar, 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 exclusive to that device. This setting is not recommended for A/B testing, as it may lead to less reliable results.
To edit a click-triggered menu or hover-over text on a card:
- Enter navigation mode by clicking the header icon.
- Hover or click on the trigger element
- Hold CMD (Mac) or CTRL (PC) on your keyboard.
- Click the element.
You’ll be redirected to design mode.
Custom code
This feature allows you to customize the variation’s behavior and appearance by directly editing its CSS and JavaScript.
In the left panel, choose the variation you want to edit.
Click on the three dots next to the variation name and select Custom code.
In the popup window, switch between the CSS and JS tabs to add or modify your custom code.
Then click Save to apply your changes.
