Zoho Sites Help
Zoho Sites Help

Elements

Elements enable you to add a range of content types to your website, each with its own customization options. Use elements to build the website you've always wanted. 


How do I...

Section Layout

Sections are the building blocks of a page. Each section can be individually customized and has a hierarchy based on the elements within.


Sections are created by adding elements to your page. All you need to do is drag and drop elements from the content tray to the desired area on your page. 

      

Access section

Either hover over the content on your page and click to select a particular section, or click the content on your page and select a section from the dropdown list. 


Customize section

Access a section and use the customization tools from the pop-ups


Hero slide

The hero slide is a slide show at the top of your page. Like a banner, it appears site-wide. This slide, like any other section on your page, can be customized by adding elements.

 

Note: To hide the hero slide on a particular page:

  1. Click Pages in the top-left corner of your builder
  2. Click Edit Page Info to the right of the page that you want the hero slide to be hidden from.
  3. Click No for the Show banner on this page option.

Access Elements

  1. Click the Add icon [] in the top-left corner of your builder.
  2. Click Element in the dropdown list.

The content tray on the left provides you with various content options that you can use to creatively construct your website.

Add and Edit Elements

Elements help structure the content layout on your page. Choose from a range of elements, such as Text, Images, Buttons, Dividers, Audio, and Video.

Top

Add Elements

Depending on your preference, there are two ways to add elements to your page:

  • Click the Add [] icon in the top-left corner of the builder, then click +Element. Next, drag and drop elements from the tray to your page.
  • Hover over the section where you would like an element to appear and click +Add. Either click or drag and drop elements from the tray to your page.

Edit Elements

Each element comes with its own set of customization options. You can find these tools alongside the element, after you have added it to your page. They also appear when you click an element. 

 

Tip: You can click and drag tool boxes to create more space on your screen.

Text

Elements like Heading and Paragraph enable you to add text to your page. 

 

To add text:

  1. Access the content tray from the Element menu.
  2. Drag Heading and Paragraph elements and drop them in a section on your page.

Edit Text

To edit text, click the text element on your page and use the tools that appear in the pop-up.

Heading

Click the heading element to toggle the heading tags, alignment, and style. 

    

Paragraph

Click the paragraph element to align your text. 

    

Note: In addition to headings and paragraphs, this tool box is also available for any other element with text in it.

Images

A picture is worth a thousand words. Images create curiosity and draw reader's attention. Use them to add visual appeal to your website.

 

You can add stand alone images or images with text.

To add images:

  1. Access your  content tray from the Element menu.
  2. Drag and drop the image element of your choice to the content area of your page.
  3. Click the Change Image button that appears in the pop-up box on the right.
  4. Click Upload and select an image on your computer. 
  5. Click Save once the image is uploaded. The selected image will have a green arrow for indication

You can edit text on your website by double clicking on a text box on your website. Alternatively, when you select a text box a settings menu will appear. your website by double clicking on a text box on your website. Alternatively, when you select a text box

Edit Image

1. Click the image element on your page to modify its alignment, size, style, etc. You can also choose to make the image a link or caption it.

Note:Images with text will have text and image edit options. 

Icons

Icons make your content stand out and adds visual appeal to your text. Icons are of three types: Stand alone, with heading, and with heading and text.

Edit Icon

You can change the icon image by clicking Change Icon. From here, you can also modify the alignment, style, and size of your icon. Heading and text properties are customizable too. 

Buttons

A button is an interactive element, used by visitors when they need to select an option or respond to a Call to Action (CTA).

Edit Button

Click the button element on your page, then toggle display options like Alignment, Style, Size, Width, and Outline. Make buttons link to other pages and change their icons.

Content

Content allows you to add and display elements in various styles. Get creative and these elements will give you awesome results. There are four content types: Carousel, Tabs, Accordion, and Box.

 

To add content containers:

  1. Access the content tray from the Elements menu.
  2. Select a content container from the Content section. 

Content Containers

  • Carousel 

Display your content in a slide show format. 

 

  • Tabs 

Display your content in tabbed sections.

 

  • Accordion

Display your content in vertically tabbed sections.

 

  • Box 

Divide the section in boxed portions.


  • Row
  • Divides the section into rows of various ratios.

 

To add elements to your content container:

 

Click +Click here to add element to access the content tray from the Element menu. Then select the element you would like to add.

Dividers 

Use dividers to provide separation within a section. You can have plain dividers, dividers with icons, and dividers with text, based on your preference.

Edit Divider

Click the divider on your page and use the tools that appear in the pop-up on the right.

Others

There's more! You can add other elements too. 

 

To add these elements:

  1. Access the content tray from the Element menu.
  2. Drag the element of your choice from the Others section and drop it on your page.

Audio

  1. Access the Audio element.
  2. Click Upload and choose an audio file from your computer.
  3. Click Save once the file upload is complete.

Edit and add audio

To edit audio: 

Click the audio element on your page and use the tools provided in the pop-up on the right to edit your audio preferences.

 

To add audio:

  1. Click the audio element on your page. 
  2. Click Playlists in the pop-up on the right.
  3. Click Add Audio.

Note: Click Edit on the right to change the name of the audio file. You can also click towards the left of the file name to drag and rearrange audio files.

Video 

  1. Access the Video element.
  2. Click the dropdown menu and select the video source provider that you would like to browse.
  3. Enter the video name in the search box and click Search.
  4. Click the video to select it. The selected video will be highlighted.
  5. Click OK. The video will be added to your webpage.

Note: Click Embed Video to insert an embed code from a video source provider.

Table

  1. Access the Table element.
  2. Enter the number of rows and columns that you would like your table to contain.
  3. Set the Width, Alignment, and Header.
  4. Click OK when you are finished.

Edit table

  1. Click the table on your page.
  2. Select tools from the popup box to modify your table. Select table alignment from the pop-up on the left.

Note: You can also click the pink Add  [] icon to add additional rows and columns.

HTML

  1. Access the HTML element.
  2. Paste the code in the box and click OK.

                

Note: The HTML Element will only accept codes that are in HTML and iframe formats.

Code Snippet

Use the Code Snippet Element to insert widgets and script from source providers to your site. 

              

  1. Access the Code Snippet element.
  2. Enter the name of your code and paste your code in the box below.
  3. Click OK when it's complete.

Newsletter

Use the Newsletter option to keep your users in the loop.

        

  1. Access the Newsletter element.
  2. Edit the newsletter properties using the tools in the pop-up on the right.
  3. Configure your newsletter by associating your mailing list with Mail Chimp and Zoho Campaigns.

Note: Zoho Campaigns provides two options while adding individuals in your mailing list. 

1. With confirmation 

2. Without confirmation. 

With confirmation, invited individuals are added to your mailing list when they approve the invite. If confirmation is not enabled, they are added automatically. Only lists of confirmed individuals are displayed in your Zoho Sites account.  Unconfirmed lists are displayed only in your Campaigns account and not in Sites. To enable the confirmation option, follow the instructions below.


To enable confirmation for your mailer list:

  1. Log in to your Zoho Campaigns account.

  2. Click Lists under Lists and Subscribers in the dashboard.

  3. Click the More] icon to the right of the list that you would like to enable confirmation.

  4. Click Edit List in the drop-down list.

  5. Click Change then click Go Ahead.

  6. Click Yes and enter a description about how you know them.

  7. Click Save.

Your list will have confirmation enabled and will be visible in your Zoho Sites newsletter integration.

Access and Edit Sections, Apps, and Forms

To access Sections, Apps, and Forms:

  1. Click the Add [] icon in the top-right corner of your builder, then click Element.
  2. Select either SectionApps, or Forms, depending on your requirement.

 Sections 

Use sections to display section content in various layouts.

      

  1. Access the Sections menu.
  2. Choose a section category and drag the section of your choice and drop it on your page.
  3. Select content within the section to edit its properties.

Apps

Use Apps to get people buzzing. Embed widgets like Comment boxes and Social Share to get connected to your users.


  1. Access the Apps menu.
  2. Drag the social widget of your choice and drop it on your page. 

Use customization tools in the pop-up to edit the apps that are on your page.

Forms

Use forms to collect and analyze information from your website users. Sites provides you with two options to create custom forms with ease:

 

  • CRM
  • Custom Forms

 

To access your form builder:

  1. Click the Add [] icon in the top-right corner of your builder, then click Element.
  2. Click Forms on the left-side of the element menu.

CRM

Create forms on your Zoho CRM account to add your web forms to your website. Once the form is generated, you can add them to your site.

Create a new Form

Apart from CRM, you can create your own forms or choose from pre-built forms too.

Create your own form:

  1. Access the Form menu.
  2. Click the Create a new Form.
  3. Click Build your own Form.
  4. Enter a name for your form and click Create a Form.
  5. Drag form fields from the menu on the left and drop them in the blank space in the center.
  6. Modify the field and form properties by switching between the tabs on the right-side.
  7. Click Back to Site Builder in the top-right corner to apply your form.

Pre-built form

  1. Access the form element.
  2. Click Create a new Form.
  3. Choose a form from the categories on the left.
  4. Click Add to apply your form.

Note: Forms that you create will be listed under the Other Forms menu and you can access them for later use. 

Move and Delete Elements

You can move elements to different sections of your page using the move option.

  

To move elements:

  

  1. Click the element that you would like to move.
  2. Use the four point arrow [] to drag and move the element to the area you prefer. 

Note: A blue line indicates where you can add an element and where it will appear.

Delete Elements

  1. Click the element that you would like to delete.
  2. Click the Delete [] icon.

Note: When an element gets deleted, it leaves an empty section that can be clicked to add another element. This section can also be deleted by selecting it then clicking the Delete [] icon.

Save Progress

The Zoho Site builder has an autosave feature that automatically saves your work as you continue to create your site. You can also manually save your work with the Save option.

 

To manually save:

Click the Save [] Icon in the top-left corner of your builder. Your progress will be saved instantly.