04. Page Builder & Shortcodes - Section/Row

Section/Row

A simple row, the holder of multiple columns, in this theme and the base of everything.

This shortcodes have a lot of features just you click to pencil icon for access to this features, let's see:

  • Extra Section ID Name - If you wish to style particular content element differently, then use this field to add an ID and then refer to it in your css/js file ( you can add only one ID ).
  • Extra Section Class name - If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css/js file ( for more classes write these separated with a space ).
  • Section Mode - Choose the layout of your section.
  • Section Module - Choose the module for this section, custom video background, background image and others.
  • Section Padding - You can select your padding for your section. This field is importand for the sections contains a video/image background. You can set the padding top and bottom for increase the height of the section if not have a content inside.

About Section Mode

You can choose a different type of layout for your section based on your needs:

  • Default - The content inside the section shortcode is wrapped into a 1170 pixel container width.
  • Full Width - The content inside the section shortcode is wrapped into a 100% of width viewport. If you select this option appear a checkbox for remove the margin and padding ( optional ) it is useful for many shortcodes ( maps, sliders, portfolio grid and others ). See Here
  • Full Screen - The content inside the section shortcode is wrapped into a 100% width and height viewport. If you select this option the section don't have any margin and padding by default. You can add a Scroll Button to next section ( optional ), if activate this you need set the next section ID. See Here

About Section Module

You can choose a different module for each section based on your needs:

  • Custom Image - You can add a custom background image for your section. Also you can add a Mask Color Overlay, Pattern Overlay or both.
  • Custom Image Parallax - You can add a custom background image with Parallax Effect for your section. Also you can add a Mask Color Overlay, Pattern Overlay or both. This effect is disabled on mobile/tablet devices.
  • Custom Color - You can add a custom flat backgroun color.
  • Custom Video - You can add a custom video background for your section. You can select between Self-Hosted Video ( you need upload a webm and mp4 file ), Youtube Video ( only ID ) or Vimeo Video ( only ID ). Also you can add a Mask Color Overlay, Pattern Overlay or both. You can have more than one video inside the same page no problem for this.

    You can select if the video is Decorative ( The video has autoplay, loop and mute audio enabled. In mobile/tablet device the video is replaced with an image, you can add a text into the section if you want ).

    Or you can select if the video is Play/Pause ( The video has autoplay, loop and mute disabled. You can play & pause the video with a click, remember with this module NOT insert any content into the section. In mobile/tablet device the video is replaced with an image and a link for external video ).

    Also you can select if you want open your video in a new window or open into pop-up modal for mobile/tablet devices. This option is only visible if you navigate the site with a mobile/tablet devices and only for video play/pause module.

    Note remember if you select the custom video, in mobile/tablet devices the video is removed. Is replace with a fallback image. If you select decorative video you have only the image, but if you select play/pause mode the video is replace with the fallback image and appear a play button for see the video in an external page.

Section Mode Layout - Screencast

Section Module - Screencast

Section Next to Button Scroll - Screencast