Hello, and welcome to Zoho Sites!
This beginner's guide will cover everything you need to know when you are creating your first website on Zoho Sites. With a user-friendly interface and a smooth drag-and-drop website editor, you will find it easy and simple to design your website.
By the time you reach the end of this guide, you will be ready to publish your website. Let's get started!
Getting started
Log in to Zoho Sites using your Zoho Account credentials. If you don't have an account with us, you'll need to create one.
To create an account:
- Go to sites.zoho.com.
- Enter an email address, password, and phone number.
- Read and accept the terms and conditions.
- Click SIGN UP FOR FREE.
You can also sign in using your Google or LinkedIn account.
Creating your website
- Enter your website name and select your website category.
- Click Choose Template. You will be directed to our free website templates page.
- Hover over the templates and choose a website theme that will best showcase your ideas and content. Click Live Demo to check out how the website looks and feels. If you like the website template, go back and click Customize.
- You can further customize the template by choosing the desired website colors, font, header, and banner styles.
- Click Finish. Your site will load in a few minutes, and you will have a basic website ready for further customization.
Notes:
- The template gallery comes stocked with industry-based, predesigned templates. You can achieve the look of a professionally designed website instantly with no prior design experience.
- You can switch from one template to another without losing your content. You can change your website title and styles at any time as well.
Adding elements
Elements help you design a well-structured website that will look neat and appealing to the audience. Choose from a range of elements, such as Text, Images, Buttons, Icons, Dividers, Audio, Video, and much more, to include in your website.
There are two ways to add elements to your page.
- Click the Add icon in the top-left corner of the builder, then choose Element. From the tray of options, drag and drop elements of your choice to your website.
- Hover over the section where you would like to insert an element and click Add Element. A tray of options will appear, from which you can select the element you would like to add to your page.
You can also find options under the Add icon to add Sections, Apps, and Forms to your website.
Sections
Sections are the building blocks of your page, within which you add your elements. These rows of content are arranged in their order of importance and can be individually customized. You can select to add a newsletter section, accordion menu, or a carousel among other sections to your page. There are a couple of ways you can do this:
- Hover over the content area on your page to add a section.
- Click on the content and select from the dropdown list.
Notes: Click the add icon and select Section to access the sections content tray. From this, you can select and add sections with varying content layout.
Editing elements
Reposition your elements by clicking on them and using the four-point arrow to drag and drop them at the preferred spot on the page. - To delete an element, click on the element and click the trash icon .
- In addition to editing text, each element comes with its own set of customization options. You can find these options alongside the element after you have added it to your page. They also appear when you click an element. If the customization option doesn't show up, click the settings icon. You can make specific modifications by clicking on options to adjust text alignment, typography, and spacing. You can also add shadow or animation to your content, such as slide, bounce, and fade. Customization options include Custom CSS scripts, Style Editor, and element visibility.
- Element visibility gives you the freedom to either show or hide various portions of your website on different devices. This tool comes in handy if you wish to display an element on the desktop version of your website but not on the mobile or tablet version of your website, or any other way around. Element visibility gives you the freedom to either show or hide various portions of your website on different devices. This tool comes in handy if you wish to display an element on the desktop version of your website but not on the mobile or tablet version of your website, or any other way around.
Adding pages
- Click the Add icon on the top-left corner of the builder, then click Page.
2. Enter a name and URL for your page.
3. Click Save.
Notes: You can also enable page settings such as SEO, Menu options, Header and Footer Code, and Sidebar.
Managing pages
- Click the hamburger icon in the top-left corner. Select Pages.
2. Here, you will find all your pages listed in one place. You can browse and add more pages without having to leave the page.
3. To delete, move, or clone a page, click the check box on your left side, then select your preference.
Blog posts
A blog page is one of the best possible ways to engage your audience. Blogs facilitate interaction and increase your website's visibility.
To add a new post:
- Click the Add icon, and then click Blog Post.
- Choose Create Blog.
- Click Add Post.
- Add your post URL, select your blog category or create a new one, include tags, enable or disable commenting, type a small summary, and set the cover image.
- Start typing your blog, format it, and include images.
- Click the Publish Post button.
If your website menu is enabled, you can access the blog page by clicking on the blog option on your navigation bar, at the top of your builder. From there, you can add a new blog post by clicking Add Post.
Notes: Clicking Publish Post will post your blog. However, it won't go live until your website is published.
To manage your blog page
- Click Blog Preferences in the top-left corner of your builder.
2. On the screen next, you can add your blog's title, URL, number of blog posts to display, enable or disable RSS feed, set SEO title and description, among other blog settings. Click Blog Preferences, then click Blog Settings.
Customizing your site:
Style your template just the way you like. You can make modifications to properties like Preset color, Header layout, and Banner layout, without having to write complex code. Open the visual editor and select the desired options.
To access the Visual Editor:
- Click the palette icon on the right side of your builder.
2. You can also go to your dashboard to open the Visual Editor. Click Customization and then choose Visual Editor.
3. Customize your template with the list of available options. Click Save.
- Access the HTML/CSS Editor if you prefer coding a template from scratch or making edits to the existing template.
- On your dashboard, click Customization, then choose Templates.
- Click Edit Template.
Other settings
Click the hamburger icon in the top-left corner of your builder to access the settings for your site like Comments, SEO, Member Portal, and other options. Preview
View the preview of your website before you publish it to see how your site looks and functions for the visitors, and to ensure there are no mistakes.
- Click the Preview icon in the top-right corner of your builder header to generate a replica of your website.
- Every website you create is automatically optimized for mobile and tablet. Your website will look great on phones, tablets, and desktops.
- You can preview your website to see how it will look on these devices.
Publish
Once you are done designing your website, you need to publish it. Users will be able to visit your website regardless of the device they are using. You can publish your website and make subsequent edits by clicking Publish in the top-right corner of your builder.
Notes:
You will need a domain name before your site goes live. An ideal domain name would be one that is specific to the nature of your website. If you do not have a domain already, you will need to configure one.
Configuring your domain
When you click the Publish button for the first time, you will be able to choose from the following domain options:
- Create a free sub domain.
- Buy a new domain name.
- Map your existing domain.
Post-publish assistance
If you have come to the end of this help guide, you are likely to unveil your first website with us! However, if you ever find yourself in a fix, please don't hesitate to contact our 24/7 support team. Feel free to write to us at support@zohosites.com.
Now that you have created your site, you are ready to learn even more advanced tips. Check out our help guide to know more information on customizing, collaborating, and configuring!