Themes define the look and feel of your website. Zoho Sites has collection of pre-built themes to match your different needs. When you start designing your website, the first step would be to choose the theme for your website. You may switch between themes anytime you want. Changing the theme on your website would not affect the content added to your website and the content would stay as it is.
Selecting a theme from gallery:
To change the existing theme on your website, point the mouse over 'Themes' button in the top right-hand side of the Zoho site builder and click on 'Gallery' option.
From the gallery, select a category on the left that best describes your purpose. Then click on a theme you like and click on "Preview" to see how it appears. Try another theme if the chosen one does not seem to meet your expectations. If you like the theme that you are previewing, simply click the 'Apply' button to use that theme on your website.
Customizing your theme:
Zoho Sites comes with two different editors.
1) An easy-to-use Visual Editor
2) Advanced HTML/CSS editor
Using the Visual Editor, you will be able to customize the following properties.
2) Content in body, sidebar footer etc.
7) Highlight box
Using the HTML/CSS Editor, you will be able to customize almost everything on your website.
To access the 'Visual Editor', click on 'Themes' and select Visual Editor from the drop-down menu. It lets you customize components of your current theme as shown in the image below.
You can modify properties of headings, links, background, font family, size and color easily. Changes can be previewed as and when you make them. In Visual Editor, you also have the option to customize the desktop version and the mobile version of your website individually.
Undoing customizations made to a specific section or to the entire theme:
If something doesn't look the way you expected it to be, you can instantly discard the latest changes you made to a section in your website. Assume you had increased the font size of your headings from 12 to 24, but 12 looked better. Click on "Reset" button in Visual Editor. This will reset the changes made to the heading only.
If you prefer the default theme after making changes to few different properties in your theme, then click on "Reset theme defaults" option, which is highlighted in the image below. This will discard all changes that you made to every component using Visual Editor, and the default styles of the theme. However, your content will not be affected.
Advanced HTML/CSS Editor:
This is especially for users who are HTML savvy. With HTML/CSS editor you can customize the current theme properties as per your requirement.
To access the HTML/CSS Editor, click on 'Themes' and select 'HTML/CSS Editor' from the drop-down menu.
Using the HTML/CSS Editor, you can manage your files, HTML/CSS of your desktop site and mobile site separately. We recommend this editor only to users who are familiar with HTML and CSS. You can learn more about theme customization from our theme documentation.