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.

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.

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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

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

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

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

Click the paragraph element to align your text.

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.

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.

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.

1. Drag the gallery element from your content tray and drop it on your page.
2. Click Create Photoset in the top-right corner.
3. Name your photoset and click Add.
4. Either drag and drop images from your computer or click on the screen to upload files.
5. Add a title and caption to the image if you wish.
6. Click Add Images at the top-right corner to continue adding images to your gallery.
   
7. Click Add for the gallery to appear on your page.

1. Click the gallery on your page that you would like to edit.
2. Click Manage Photoset in the pop-up box.
3. Click the Edit icon or Delete icons. If you would like to make changes to the title and caption of the photo or remove it all together.
4. Click Add Images at the top-right corner to add images to your gallery.

Click the settings icon to access your gallery tool box.

You can choose from the following gallery styles:

1. Square

This style enables you to display your images in a square format. You can specify the amount of spacing you would require between each image.

2. Rectangle

This style enables you to display your images in a rectangle format. You can specify the amount of spacing you would require between each image.

3. Slide

This style enables you to display your images in a slide-show format. Visitors can click on the arrows to view the images which come up next in your gallery.

4. Filmstrip

This style enables you to display your images in the format of a filmstrip. You can choose the number of images you would like to be displayed at a time. Toggle with the corresponding settings such as Image Count, and Spacing as well as Arrow Position, Design, and Style to customize your Filmstrip gallery. To know how the Filmstrip gallery style looks, check out this site we created. 

Notes: 

• The Square, Rectangle, and Filmstrip formats have both the caption and light-box options while the Slide format only has the caption option.
• If you have the Show Heading option enabled and have your arrows positioned at the top, an alignment option will be enabled where you can choose from four alignment styles. 
  

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.

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.

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

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.

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 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.

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

• 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.

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

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.

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.

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

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

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.

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.

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

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

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.
   

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.

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.

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

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.

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

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.

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.

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.

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

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.

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

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.
   

The clone option enables you to make duplicates of various 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.

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

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

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.

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