Section

Section element is main layout building block used to separate columns in to rows

Section element is main layout building block used to separate columns in to rows. Element popup contains following options;

Layout tab

  1. Section metrics  -  Set section metrics. Section label is used in builder for easy sorting and if you add it to scroll menu it is used in section scroll menu element as tooltip. If you add this section label to scroll menu, do not forget to add Section menu element to the builder. If you select exclude in Full page inclusion option, this section will be displayed as normal section.
  2. Layout mode  -  Select section layout mode. By default grid layout is created by using left floats for columns, if set to flex or flex equal height grid is using flexbox layout wich gives you additional column flexibility.
  3. Section box style  -  Adjust .thz-section-holder section box style.
  4. Section Contained  -  If set to contained this section will be contained by max site width.
  5. Section spacings  -  Adjust spacings for all containers or columns in this section. This option will help you adjust side space for this section .thz-container or .thz-column. If empty it will use spacings options located in theme options "Site" tab. The section vertical padding can be reset or changed in "Section box style" padding option.
  6. Use CSS ID as anchor  -  f set to yes the section ID can be used as anchor in your menu. To scroll to this anchor via menu link, create a new menu Custom link with URL #thisID. Do not forget the pound (#) sign in front of the element ID.
  7. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

Typography tab

  1. Fonts settings  -  Add custom font settings.
  2. Links colors  -  Add custom links colors.

Effects tab

  1. Background layers  -  Create background layer. Add parallax, infinity or basic background layer. This option adds additional background layer to the HTML container. Note that z-index is assigned per layer position in the order. The layer on top has the highest z-index.
  2. Animation  -  Add animation. This option adds animation effect to the HTML container.
  3. Content parallax  -  Add content parallax effect. This option adds a parallax effect to the HTML container content.
  4. Scroll fade  -  Add scroll fade effect. This option adds fade effect on scroll to the HTML container or the container content.
  5. Full height  -  Add full height effect. This option adds full height ( viewport height ) to the HTML container.
  6. Separator  -  Add separator. This option adds separator layer to the HTML container.
  7. Container parallax  -  Add container parallax effect. This option adds a parallax effect to the HTML container.
  8. Open in lightbox  -  This option hides the section from a page and adds it to a lightbox. If you wish to open this section in a lightbox it will be hidden on the page but you can use any link option that has a Magnific popup link type to open it. For example Image element, Click action -> Open link -> Add custom link -> Link type. Remeber to use the # sign infront of the magnific popup id like this; #this_section_id and make sure you have a custom ID for this section.

Responsive tab

  1. Section breakpoints  -  Add custom section settings on specific breakpoints.
  2. Columns breakpoints  -  Add custom settings for all section columns on specific breakpoints.