How To Manage Content In Row


You can divide each part of the web page into different rows. You can also display content in full width and set the padding, margin, and border. There are six different customization options in row element. We have described these options in detail below.



With the help of general tab, you can make minimal changes in row for particular page. With general settings, you can make changes such as row stretch, column gap, content position, and much more.

Have a look at below to get detailed knowledge of general row setting.

Row stretchSelect stretching options for row and content.
Note: stretched may not work properly if parent container has “overflow: hidden” CSS property
Columns GapSet gap between columns, all columns within row will be affected by this value.
Full Height Row?Set row to be full height.
Note: if content will exceed screen size then row will be bigger than screen height as well
Equal HeightSet all columns to be equal height.
Note: all columns will have same height as longest column
Content PositionSet content position within columns – Default, Top, Middle, Bottom.
Note: Default value will be used top or other if defined within theme
ParallaxWhen you want to add parallax background for row, this option is helpful.
Note: If no image is specified, parallax will use background image from Design Options
Parallax background ratioThis option is to select parallax background scrolling ratio within row.
Disable RowClick yes, If checked the row won’t be visible on the public side of your website. You can switch it back any time.
Position RelativeIf you want to show all belonging content to this row and those content should not display outside particular row, choose this option.
OverflowWhen you want to select different visibility of content overflow from hidden to visible and auto, choose this option.
Z-indexThis property specially used when you want to specify the stack order of any row content. It is an option with greater stack order and it is always in front of an element with a lower stack order.
Add Margin Top of Header HeightIf you select this option then the row add spacing in header height.
Full Width Header Sticky?You can use this option, when header header in container layout and select on for sticky full layout.
Footer StyleIf you want to select type of footer section, use this option.
CSS AnimationSelect type of animation for row to be animated when it “enters” the browsers viewport.

Thus, these are general row settings that you can customize according to your interest.

Background Video

When you want to use video in the background, use this feature. By clicking yes, a video will play in the row background.

To set background video, you can also select the types of background video such ad self, YouTube, Video.

When you select self :

ImageThis image will be visible instead of autoplay background video in some mobile / tablet device due to their operating system restrictions.
MP4This option to add mp4 type of video URL.
WEBMThis option to add WEBM type of video URL.
OGGThis option to add OGG type of video URL.
Loop videoThis option for video in loop mode.
MuteThis option for mute video.

If you select YouTube :

YouTubeThis option to add YouTube video URL.
ParallaxSelect YouTube video parallax background for row.

If you choose Vimeo :

VimeoThis option to add Vimeo video URL.


If you want to add an overlay in row, use this setting. When you select “on” button, you will see below settings.

Overlay ColorIt shows overlay color.
Overlay OpacityIf you want to set the overlay opacity level, use this option.
Z-indexThis option specifies the stack order of an overlay. An element with greater stack order is always in front of an element with a lower stack order.

This is all about row element and its settings and what you just read is a vital part for building a webpage. With row shortcode, you can make a fancy web page.

Scroll Down

Click “On” button in a row setting to add scroll down navigation. You can also make different changes like below.

Scroll to down iconChecked On to add Scroll down icon.
Target section idDefine particular target area by adding target section with it.
AnimationChecked on for Scroll down icon animation.
Custom icon imageChecked on if you want to add custom icon image for scroll down.
Font iconVarious options to choose scroll down icon.
Icon colorChange scroll down icon color with this option.
Icon hover color Change icon hover color.
Icon background colorScroll down for icon background color.
Icon hover background colorTo change hover background color, select this option.