Editor Palette

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.