Zoho Sites Help
Zoho Sites Help

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 slider

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.

The Hero Section of your website can be considered as the most important part of your website. It's the area which grabs your visitors attention first. Use this area to portray your most prominent and eye-catching content. We provide you with various tools to help you edit and customize this portion of your website.

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, Video and much more.

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.

Reposition where elements appear by clicking on them and using the four-point arrow []

To delete an element, click on the element then click the trash icon [].

In addition to editing text, 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.

Notes: 

  1. Customization options also incude Custom CSS, Animation, Style Editor and Element Visibility.


 2. With Element Visibility, you can choose to either show or hide various portions of your website on different devices. This tool comes in handy if you would like to display an element on the desktop version of your website that you would not like to portray on the mobile version on your website.   

If you have closed the properties box and would like for it to appear again, click the Settings icon [].

Make modifications by toggling between each tab to set properties to suit your preference.

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, images with text, and galleries.

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.

Notes: 

  1. We have integrated with stock image providers such as Google, Pixabay, and Unsplash to bring you the image library. You can add beautiful, professionally photographed images to your website. You can access over one million high quality photos right from your Zoho Sites website builder and add them inline, as section and hero slide backgrounds, and more.
  2. Images that you add to your website are automatically optimized to reduce the loading time. You can remove optimization for images if you wish. By clicking the arrow beside the upload button and selecting Upload and skip optimization.

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.

To add a light box or link for your image, click the image and select the Link tab. Then click the Enable light box toggle and select a theme from the drop-down list. To set a link, click the Enable light box switch off and click Change Link. Select a link location and click Save.

Note: Images with text will have both text and image editing 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.

Button

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. You can also make buttons link to other pages, URL's, phone numbers, files, email ID's, etc.

To do this:
  1. Click a button on your page.
  2. Click the Link tab in the pop-up box.
  3. Click Change Link.
  4. Choose the link location from the menu on the left.
  5. Enter details based on the link location you have chosen.
  6. Enter a Tool tip and click the switch to enable Target and Nofollow.
  7. Once you are done, click Save and your button will be linked.

Content and Containers

Content and Containers allow you to add and display elements in various styles. Get creative and these elements will give you awesome results. The four content types are: Carousel, Tabs, and Accordion. The two container types are: Box and Row.

To add content and containers:
  1. Access the content tray from the Elements menu.
  2. Select a container element from the Content or Container section.
Content and Container types
  • Carousel

Displays your content in a slide show format.

  • Tabs

Displays your content in tabbed sections.

  • Accordion

Displays your content in vertical sections.

  • Box

Divides the section in boxed portions, where you can add a back-ground color or image to high-light your content.

  • Row

Divides the section into rows of various ratios.

To add elements to your container:

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

Divider

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

Spacers help you increase the space between elements and sections on your page.

To use the spacer:
  1. Access the content tray from the Elements menu.
  2. Drag the spacer element and drop it on your page.
  3. Click the spacer element on the page. Then click and drag the two way arrow to increase or decrease  its size.

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.

Google map

You can embed Google Maps directly on your website. Simply drag and drop the map and enter the location you wish to display.

Note: You can also embed google maps, via sections by selecting the map section you would like on your page.

Multiple menu 

With this element, you can have more than one menu on any page to allow quick navigation. You can choose to replicate your default menu on different areas of your page. Or, you can create a menu with new menu items. These menus can be individually customized with the style, alignment, and label options.

Access and Edit Section, 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 Section, Apps, or Forms, depending on your requirement.

Sections

Use sections to display 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.

​​Shapers

Use shapers to add patterned layouts to your sections. Shapers provide color and design to give your content a distinctive look.

To apply shapers:
  1. Click a section on your page.
  2. Click the Settings option.
  3. Click the Shaper tab in the pop-up box on the right.
  4. Click the drop-down to select a shaper pattern.
The shaper will be applied.

Notes:

  1. You can edit the shaper based on its properties. Some Shapers have transparency and others have solid colors. You can also choose if you want them to be displayed in mobile devices or not. You can edit these properties based on your requirement by toggling their settings in the pop-up tool box.
  2. Click Change Shaper to select a new Shaper.
  3. Click the pattern drop-down list to select a new pattern. You can also click none to remove the Shaper from your section.

Move, Clone 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.

Clone Elements

The clone option enables you to make duplicates of various elements and sections.

To clone elements and sections:
  1. Click the element or section that you would like to duplicate.
  2. Click the clone [] icon and a copy of that element or section 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.

To access your element tool box:

  1. Click the element or section on your page.
  2. Click the Settings [] icon. The tool-box for that element will appear.

Notes:

  1. Use the Copy/Paste options to copy elements and sections and paste them to other parts of your website.
  2. Use the redo and undo buttons to help you reverse your previous edits. Use the redo and undo button while you work to remove or include your customizations. This tool also comes in handy if you have deleted your work by accident.
  3. Use the element and section spacer provided in the builder to create or reduce space between items.
  4. You can enable content stickiness for Box and Column elements. By fixing certain sections and elements on your page so that they follow as the user scrolls, you can keep important information in front of your visitors. 

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.