Zoho Sites Help
Zoho Sites Help

Visual Editor

The visual editor is a tool that helps you customize the look and feel of your website's template without having to use a single line of code. You can experiment with various visual customizations and choose to either save or discard the changes.

To access the visual editor:
  1. Click Settings at the top of your builder.
  2. Click Visual Editor under Customize.

  3. You can choose various color schemes from Presets. You can also set custom color schemes by entering the desired hex values.

  4. Click Header Layout to choose a header style. You can also select a navigation theme, top-bar, or header.

  5. Click radio buttons to customize your mobile site.

  6. Click Banner Layout and select a style. 

   7. Click Save.

Presets 

Presets are  color schemes that you can apply to your website. You can choose from the schemes we provide or  customize the colors yourself.


To set presets for your site:

  1. Select Presets from the menu on the right.
  2. Click to select a preset you like you like.                                                                                                                                                                               

If you would like to customize your presets: 

  1. Click Custom Values.
  2. Click the corresponding hex values and use the color picker to set a color.
Note: You can also add typography such as Base and Heading Fonts by clicking the drop down and selecting a font from the font library.

Header Layout

You can customize your the way your header looks by accessing the Header Layout option. 


To customize the header for your site:

  1. Select Header Layout from the menu on the right.
  2. You can apply various header layouts by simply clicking on them. 
  3. Click the drop-down list to select themes for your Top-bar, Header, and Navigation.
  4. Click the radio buttons if you would prefer to have either a transparent or animated header when you scroll.
  5. You can also choose from options such as Social Icon Floater, Logo In Mobile, and Site Title in Mobile.

Banner Layout

You can add banner layouts such as:
  1. Full Width 
  2. Boxed
  3. Full Screen
  4. Full Width Header Overlapped