Image Box
The Image Box element displays text-type content along with a representative image. You can easily add images to your site, with a large amount of control over their appearance and behavior. General Settings: Click the image to select image media from media library. Image position: Select image position. Image box title: Enter image box title. […]
Image
Image element displays a image. Adding an image to a page is a pretty simple and straightforward process. General settings: Image size: Select a preset image size or customize the size from the dropdown custom option. Align: Set image position relative to the containing element. Link: Set a URL adress, target and title for the […]
Icon
The Icon Element allows you to place icons anywhere on your site. Every icon is 100% full vector, so they look incredibly sharp and are retina-ready! General Settings: Link: Set Icon URL target and title. Align: Select Icon alignment relative to the containing element. Style: Select style for the icon. Default: Displays only the icon. […]
Icon Box
The Icon Box element allows you to create a box with an icon and add a description to it. Icon boxes come in very useful when building websites. Often you need to tell your website visitors what services you or your company offers. Element options: Icon position: You can set position of the icon left, top […]
Gallery
The Gallery element can be used to quickly create a responsive and stylish image gallery on your site. Element options: Columns: Set the number of the column spacing between each gallery image.
Heading
The Heading element does exactly what it says: adds a title into your content. You can select any header tag from H1 through to H6, as well as a variety of styling options including Alignment, overrides for Font Size, Line Height and Letter Spacing. The Heading element is very easy to use, and allows for […]
Video
The Video element offers the ability for users to post self-hosted, YouTube, or Vimeo video clips easily to their websites.
Button
The Button element allows you a variety of buttons on your site, with a lot of options.. Choose from 4 sizes, shapes, unlimited colors, border widths, border radius, and icons. Buttons are very useful on a website. You can use them in so many ways. They can link to a website, they can open another […]
Separator
The Separator element offers highly flexible separators for your website. You can also control border size, color, width, alignment, margins above and below, and you even add icons to them.
Adding Elements
To add a content element to the page, here are the steps: Click the + symbol button to Add Element in the working window of the Zion Builder. Select your element from the list. You can use the tabs at the top to limit your option by type, or use the search box top right to filter the […]
Element Toolbox
The element toolbox controls are hidden until the element is hovered, to preserve the clean design of the elements and the builder in general. Upon hovering over the element, and click to the edit button the controls specific to that element will appear to the right. The controls in order from left to right are: Edit, Save, Hide, […]
Editing Elements
To edit an element, simply hover over the element and click on the Edit icon within the hover controls. This will load the Element Options Panel, and here you will be able to adjust the various options for that specific element. You can see an example of the modal bellow. Also, the system of actions that can be […]
Using panel element options
Panel Element Options contains style options for a particular element.Access Panel Element Options by right-clicking on an element and choose Edit or by double-clicking on an element.Close Panel Element Options by clicking the “x” icon at the top right of the panel. Panel Element Options titleIt describes the name of the element you are currently […]
Product additional info
“Product additional info” is an element created for the product single page and it displays additional information about an WooCommerce product. This data can be entered from Products/shipping The element preview looks like this.
Add to cart
“Add to cart” is an element created for the WooCommerce product single page. This means that you need to use this element only in templates made with the theme builder that are applied for the WooCommerce product single page You can create a new template from the themebuilder Apply the template to all products Add […]
Product description
“Product description” is an element created for the WooCommerce product single page. This means that you need to use this element only in templates made with the theme builder that are applied for the WooCommerce product single page There are two types of descriptions, the long description and the short description (excerpt) The short description […]
Product images
“Product images” is an element created for the WooCommerce product single page. This means that you need to use this element only in templates made with the theme builder that are applied for the WooCommerce product single page Useful Tutorial on how to create a WooCommerce Product page
Product meta
“Product meta” is an element created for the WooCommerce product single page. This means that you need to use this element only in templates made with the theme builder that are applied for the WooCommerce product single page Useful Tutorial on how to create a WooCommerce Product page
