CustomFit Dashboard
  • Getting Started
    • Installing CustomFit Code Snippet
      • Installing the code snippet on Webflow
      • Installing the code snippet on Wordpress
      • Installing the code snippet on Wix
      • Installing the code snippet on Shopify
      • Installing the code snippet on Unbounce
  • Account Setup
    • Configuring Account Users
    • Add Users and Assign Roles
    • Configuring Subdomains
    • Configuring Traffic Blocking
  • Experience
    • How to create an A/B test
    • How to create a Split URL test
    • How to create an AI Conversion Optimize experience
    • How to create an Outbound Experience
    • Creating an Experience
    • Experience Page Paths
    • Experience Targeting
    • Visual editor
    • Experience Goals
    • Experience Insights
    • Experience Settings
    • Experience Dashboard
    • Experience FAQs
  • Visual Editor
    • Overview
    • App Bar
    • Editor Palette
    • Toolbar
    • Popups
  • ABM
  • Audience Segments
    • Geo Location
    • Technology
    • UTM Parameters
    • Visitor Attributes
    • Salesforce Attributes
    • HubSpot Attributes
    • Kickfire Attributes
    • Visitor Behavior
      • Page event
      • Click event
      • Track event
  • Integrations
    • GA4 Integration
    • GA4 Integration via GTM
    • Microsoft Clarity Integration
    • Hotjar Integration
    • Clearbit Integration
    • 6sense Integration
    • Segment Integration
    • Mixpanel Integration
    • Amplitude Integration
    • Heap Integration
    • Salesforce
      • Connected App
      • Apex Class
      • Apex Triggers
      • Remote Site Settings
    • Kickfire
    • HubSpot
    • Slack
  • Split URL Testing
  • Reports
    • Create Report
    • Configure Targets
    • Configure Goals
  • Overview of Reports
  • Segments
    • Creating a Segment
    • Segment Rules
  • Dashboard
    • Analytics
  • Install the CustomFit snippet
  • Event Analyzer
    • Creating an Event
    • Forward Custom Events from GTM to CustomFit
    • Event Insights
    • Event Properties
    • Property Insights
  • Change Log
  • Frequently Asked Questions
    • CustomFit JS Script
Powered by GitBook
On this page
  • Changing the Text
  • Changing the Typography of the Text
  • Changing the Image
  • Changing the Background Image
  • Changing the Dimension
  • Removing an Element
  • Hide/Show
  • Changing the URL
  • Applying Border Radius
  • Changing the CSS Classes
  • Reset
  • Onclick Execute JavaScript
  • Onload Execute JavaScript

Was this helpful?

  1. Visual Editor

Editor Palette

PreviousApp BarNextToolbar

Last updated 11 months ago

Was this helpful?

The editor palette appears whenever you click on any HTML element, like a text element or an image. The editor palette allows editing the selected element.

Changing the Text

Using CustomFit visual editor, you will be able to change any text in the webpage without any prior coding knowledge. To edit the text

  • Click on any text element on the web page. In the editor palette, you can see the text field with prefilled text. Modify the text based on your requirement

  • Click on the Save button

Changing the Typography of the Text

If you wish to change the typography of the text element then you can do it in the editor palette. In the Typography section, you can edit the following styles

  • Font Size: You can change the font size

  • Font Style: You can change the font style(Italics, bold, etc)

  • Font Weight: You can change the boldness of the text

  • Font Family: You can also change the font family

When you select any text element then all the above values will be pre-filled with the current value.

Changing the Image

If you wish to change any image on the webpage then click on the image which you wish to change. Then in the editor palette, you can see the Image Source field. This field is visible if the clicked element is of type image, if it is of any other type then you won't see the Image Source field.

In the Image Source field either enter the image URL or upload it from your local folder.

Click on Save button to see the image being replaced in the visual editor.

Changing the Background Image

If you wish to change/apply any background image in the website then click on the element to which you wish to change and in the editor palette you can see the Background Image URL field.

In the Background Image URL field either enter the image URL or upload it from your local folder.

Click on the Save button to see the image being replaced in the visual editor.

Changing the Dimension

If you wish to change the dimension of any element then click on the element which you wish to change and in the editor palette you can see the Dimensions field.

Change the dimensions based on your requirement.

Click on the Save button to see the updated dimensions being applied to the element.

Removing an Element

If you wish to remove an element from a webpage then click on the element and in the editor palette you can see the Remove option under the Visibility section.

Click on the Remove option.

Click on the Save button

In the visual editor you can see the removed element in the blur.

And again if you want to add the removed element then click on the element and unselect the Remove option.

Hide/Show

The hide option in the editor palette allows you to hide/show any element. Click on the element which you wish to hide. Click on the Hide option in the editor palette under the Visibility section.

Click on the Save button.

In the visual editor, you can see the hidden element in the blur.

And again if you want to show the hidden element then click on the element and unselect the Hide option.

Changing the URL

If you have any element(button) with an URL and if you wish to can change the URL then you can do it through the editor palette. When you click on the element then in the editor palette you can see the Link to(href) field.

Change the URL as per your requirement and click on the Save button.

It also provides you an option to configure whether the URL has to be opened on the same tab or in the new tab.

Applying Border Radius

If there are elements such as buttons or images and if you wish to have a rounded border for it. Then you can achieve it by clicking on it and in the editor palette, you can see the Border Radius field.

Provide the required border-radius and click on the Save button.

In the visual editor interface, you can see the element with the rounded border.

Changing the CSS Classes

If you wish to update the CSS classes of any element then you achieve it through the CSS Classes field in the editor palette. Click on the element. Change the required CSS Classes and click on the Save button.

Reset

If you have done multiple changes to an element and wish to reset the element to its default values then click on the Reset button in the editor palette.

Onclick Execute JavaScript

  • Select the element on which you want to execute JS

  • From the editor palette under the action section, you will find an Onclick option

  • From the dropdown select the Execute JS option

  • Copy and paste the JS code and click on Save

Onload Execute JavaScript

  • Select the element on which you want to execute JS

  • From the editor palette under the action section, you will find an Onload option

  • From the dropdown select the Execute JS option

  • Copy and paste the JS code and click on Save