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 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:
- Click Pages in the top-left corner of your builder.
- Click Edit Page Info to the right of the page that you want the hero slide to be hidden from.
- 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.
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 []

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:
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:
- Access the content tray from the Element menu.
- 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:
- Access your content tray from the Element menu.
- Drag and drop the image element of your choice to the content area of your page.
- Click the Change Image button that appears in the pop-up box on the right.
- Click Upload and select an image on your computer.
- Click Save once the image is uploaded. The selected image will have a green arrow for indication.
Notes:
- 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.
- 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.
To add a gallery:
- Drag the gallery element from your content tray and drop it on your page.
- Click Create Photoset in the top-right corner.
- Name your photoset and click Add.
- Either drag and drop images from your computer or click on the screen to upload files.
- Add a title and caption to the image if you wish.
- Click Add Images at the top-right corner to continue adding images to your gallery.
- Click Add for the gallery to appear on your page.
To edit gallery:
- Click the gallery on your page that you would like to edit.
- Click Manage Photoset in the pop-up box.
- 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.
- Click Add Images at the top-right corner to add images to your gallery.
Gallery Customization Tools
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
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.
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:
- Access the content tray from the Elements menu.
- 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:
- Access the content tray from the Elements menu.
- Drag the spacer element and drop it on your page.
- 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:
- Access the content tray from the Element menu.
- Drag the element of your choice from the Others section and drop it on your page.
Audio
- Access the Audio element.
- Click Upload and choose an audio file from your computer.
- 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:
- Click the audio element on your page.
- Click Playlists in the pop-up on the right.
- 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
- Access the Video element.
- Click the dropdown menu and select the video source provider that you would like to browse.
- Enter the video name in the search box and click Search.
- Click the video to select it. The selected video will be highlighted.
- 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
- Access the Table element.
- Enter the number of rows and columns that you would like your table to contain.
- Set the Width, Alignment, and Header.
- Click OK when you are finished.
Edit Table
- Click the table on your page.
- 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
- Access the HTML element.
- 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.
- Access the Code Snippet element.
- Enter the name of your code and paste your code in the box below.
- Click OK when it's complete.
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.
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:
- Click a section on your page.
- Click the Settings option.
- Click the Shaper tab in the pop-up box on the right.
- Click the drop-down to select a shaper pattern.
Notes:
- 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.
- Click Change Shaper to select a new Shaper.
- 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:
- Click the element that you would like to move.
- 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:
- Click the element or section that you would like to duplicate.
- Click the clone [
] icon and a copy of that element or section will appear.
Delete Elements
- Click the element that you would like to delete.
- 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:
- Click the element or section on your page.
- Click the Settings [
] icon. The tool-box for that element will appear.
Notes:
- Use the Copy/Paste options to copy elements and sections and paste them to other parts of your website.
- 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.
- Use the element and section spacer provided in the builder to create or reduce space between items.
- 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.