Editor Palette
Last updated
Last updated
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
