Impreza Knowledge Base Elements Row / Section Element

Row / Section Element

The Row is the main container element, that is used to wrap any other elements on a page. Rows are always contain a column/columns (the Column element can't exist without a parent Row). It is available in: 

  • Live Builder;
  • WPBakery Page Builder.

General settings #

  • Vertical Indents — set row vertical idents as a "Default (M)", "None", "S" (small), "M" (medium), "L" (large), "XL" (extra large). Change the default value in Theme Options
  • Full Height Row — ON/OFF checkbox allows to set the height row as full. If the checkbox is ON allows setting "Row Content Position" as a "Middle", "Top", or "Bottom"
  • Full Width Content — ON/OFF checkbox allows to set the full width content
  • Row Color Style — set a row color style as "Content colors", "Alternate Content colors", "Primary bg & White text", "Secondary bg & White text", "Footer colors", "Alternate Footer colors"
  • Background Image — set a custom background image as:
    • None — by default
    • Custom — upload a custom image with "Background Size" which allows setting "Fill Area", "Fit to Area", and "Initial", "Background Position" allows to set "Top Left", "Top", "Top Right", "Left", "Center" (by default), "Right", "Bottom Left", "Bottom", "Bottom Right" position, "Background Repeat" allows to set "Repeat", "Horizontally", "Vertically", "None", "Parallax Effect" set a parallax effect with next options:
      • None — by default
      • Vertical Parallax — set vertical parallax with ON/OFF checkbox "Reverse Vertical Parallax Effect" option
      • Horizontal Parallax — set horizontal parallax as "Parallax Background Width" with next parameters "110%", "120%", "130%" by  default, "140%",  and "150%"
      • Fixed — set fixed parallax effect
    • Featured Image — with "Background Size" which allows setting "Fill Area", "Fit to Area", and "Initial", "Background Position" allows to set "Top Left", "Top", "Top Right", "Left", "Center" (by default), "Right", "Bottom Left", "Bottom", "Bottom Right" position, "Background Repeat" allows to set "Repeat", "Horizontally", "Vertically", "None", "Parallax Effect" 
    • Custom appearance in Grid: Images — set custom appearance inn grid with "Background Size" which allows setting "Fill Area", "Fit to Area", and "Initial", "Background Position" allows to set "Top Left", "Top", "Top Right", "Left", "Center" (by default), "Right", "Bottom Left", "Bottom", "Bottom Right" position, "Background Repeat" allows to set "Repeat", "Horizontally", "Vertically", "None", "Parallax Effect"
    • Options page example: Image — set custom appearance inn grid with "Background Size" which allows setting "Fill Area", "Fit to Area", and "Initial", "Background Position" allows to set "Top Left", "Top", "Top Right", "Left", "Center" (by default), "Right", "Bottom Left", "Bottom", "Bottom Right" position, "Background Repeat" allows to set "Repeat", "Horizontally", "Vertically", "None", "Parallax Effect"
  • Show on background — set show on the background as :
    • None — set as a default background
    • Video — set video background with custom link input field (link to YouTube, Vimeo, or video file (mp4, webm, ogg),  "Hide video at screen width" (600px by default or set "0" to disable video rendering on all mobile devices including tablets)
    • Image Slider — set a custom image slider with "Add images", and set "Transition Effect" ("Slide" or "Fade"), "Transition Duration" (in milliseconds: 300, 600, 1000, 1000 by default), "Auto Rotation Interval" (in seconds: 3, 5, 8), 3 by default)
  • Background Overlay — choose a background color from the list
  • Sticky Row — ON/OFF checkbox allows to set sticky row setting ("Fix this row at the top of a page during scroll")
  • Disable row — ON/OFF checkbox allows the row won't be visible on the public side of the website. You can switch it back any time

Columns settings #

  • Gap between columns — set a custom gap between columns, 3rem by default
  • Columns Content Position — set a custom content position as "Top", "Middle", or "Bottom"
  • Add extra padding around columns content — ON/OFF checkbox allows to set extra padding around content. Improves the appearance of columns with background
  • Reverse order for columns stacking — ON/OFF checkbox allows to set reverse order of columns. The last column will be shown on the top
  • Ignore the "Columns Stacking Width" global option — ON/OFF checkbox allows to set ignore for columns stacking width

Shape divider settings #

  • Show at the top — ON/OFF checkbox allows to choose a shape divider to show on the top as "Tilt", "Curve", "Curve (inv)", "Triangle", "Triangle (inv)", "Triangle 2", "Triangle 2 (inv)", "Wave", "Zigzag", "Custom"
  • Height — set a custom height (examples: 200px, 15rem, 10vh, 15vh by default)
  • Color — choose a color from the list
  • Overlap the content of this Row — ON/OFF checkbox allows to set content overlap
  • Flip horizontally — ON/OFF checkbox allows to clip divider horizontally
  • Show at the bottom — ON/OFF checkbox allows to choose a shape divider to show on the top as "Tilt", "Curve", "Curve (inv)", "Triangle", "Triangle (inv)", "Triangle 2", "Triangle 2 (inv)", "Wave", "Zigzag", "Custom"
  • Height — set a custom height (examples: 200px, 15rem, 10vh, 15vh by default)
  • Color — choose a color from the list
  • Overlap the content of this Row — ON/OFF checkbox allows to set content overlap
  • Flip horizontally — ON/OFF checkbox allows to clip divider horizontally

Display logic settings #

Read the article.

Design settings #

All Design settings are the same for all elements. Read the article.

Background settings #

  • Background Style — select the kind of background would you like to set for this row. Not sure? See Narrated Video Tutorials, as:
    • Default — default option
    • Single Color — set custom single color as "Background Color", "Background Override (Read Description)" with "Default Width", "Apply 1st parent element's width", "Apply 2nd parent element's width", "Apply 3rd parent element's width", "Apply 4th parent element's width", "Apply 5th parent element's width", "Apply 6th parent element's width", "Apply 7th parent element's width", "Apply 8th parent element's width", and "Apply 9th parent element's width"
    • Full Width — set full width
    • Maximum Full Width — set a full maximum width
    • Browser Full Dimension — browser set full width. By default, the background will be given to the WPBakery Page Builder row. However, in some cases depending on your theme's CSS — it may not fit well to the container you are wishing it would. In that case, you will have to select the appropriate value here that gets your desired output
    • Gradient Color — set gradient color with "Gradient Type" ("Vertical", "Horizontal" or "Custom"), "Choose Colors" (at least two color points should be selected. Video Tutorial), "Default Width", "Apply 1st parent element's width", "Apply 2nd parent element's width", "Apply 3rd parent element's width", "Apply 4th parent element's width", "Apply 5th parent element's width", "Apply 6th parent element's width", "Apply 7th parent element's width", "Apply 8th parent element's width", and "Apply 9th parent element's width", "Full Width", "Maximum Full Width", "Browser Full Dimension". By default, the background will be given to the WPBakery Page Builder row. However, in some cases depending on your theme's CSS — it may not fit well to the container you are wishing it would. In that case, you will have to select the appropriate value here that gets your desired output
    • Image / Parallax — select the kind of background would you like to set for this row. Not sure? See Video Tutorials
    • Parallax Style — allows to choose:
      • No Parallax — select the kind of style you like for the background, "Background Override (Read Description)" with "Default Width", "Apply 1st parent element's width", "Apply 2nd parent element's width", "Apply 3rd parent element's width", "Apply 4th parent element's width", "Apply 5th parent element's width", "Apply 6th parent element's width", "Apply 7th parent element's width", "Apply 8th parent element's width", and "Apply 9th parent element's width", "Full Width", "Maximum Full Width", "Browser Full Dimension". By default, the background will be given to the WPBakery Page Builder row. However, in some cases depending on your theme's CSS — it may not fit well to the container you are wishing it would. In that case, you will have to select the appropriate value here that gets your desired output
      • Simple Background Image — set a custom background image (upload or select background image from media gallery) as "Background Image Repeat" option ("Repeat", "Repeat X", "Repeat Y", "No Repeat"). Learn on W3School, "Background Image Size" ("Cover — Image to be as large as possible", "Contain — Image will try to fit inside the container area", "Initial"). Learn on W3School, "Scroll Effect" ("Move with the content" or "Fixed at its position"), "Background Image Position" (you can use any number with px, em, %, etc. Example- 100px 100px), "Background Override (Read Description)" with "Default Width", "Apply 1st parent element's width", "Apply 2nd parent element's width", "Apply 3rd parent element's width", "Apply 4th parent element's width", "Apply 5th parent element's width", "Apply 6th parent element's width", "Apply 7th parent element's width", "Apply 8th parent element's width", and "Apply 9th parent element's width", "Full Width", "Maximum Full Width", "Browser Full Dimension". By default, the background will be given to the WPBakery Page Builder row. However, in some cases depending on your theme's CSS — it may not fit well to the container you are wishing it would. In that case, you will have to select the appropriate value here that gets your desired output
      • Auto Moving Background — set an auto moving background option (upload or select background image from media gallery) as "Background Image Repeat" option ("Repeat", "Repeat X", "Repeat Y", "No Repeat"). Learn on W3School, "Background Image Size" ("Cover — Image to be as large as possible", "Contain — Image will try to fit inside the container area", "Initial"), "Scroll Effect" (options to set whether a background image is fixed or scroll with the rest of the page "Move with the content" or "Fixed at its position"), "Parallax Speed" (set custom parallax speed, enter a value between 1 to 100 (Default 30), "Animation Direction" (set custom animation direction "Left to Right", "Right to Left", "Top to Bottom", "Bottom to Top"), "Background Repeat" ("Repeat", "Repeat X", and "Repeat Y"), "Background Override (Read Description)" with "Default Width", "Apply 1st parent element's width", "Apply 2nd parent element's width", "Apply 3rd parent element's width", "Apply 4th parent element's width", "Apply 5th parent element's width", "Apply 6th parent element's width", "Apply 7th parent element's width", "Apply 8th parent element's width", and "Apply 9th parent element's width", "Full Width", "Maximum Full Width", "Browser Full Dimension". By default, the background will be given to the WPBakery Page Builder row. However, in some cases depending on your theme's CSS — it may not fit well to the container you are wishing it would. In that case, you will have to select the appropriate value here that gets your desired output, "Activate on Mobile" allows to show or hide on mobile devices
      • Vertical Parallax On Scroll —set a vertical parallax on scroll set (upload or select background image from media gallery) as "Background Image Repeat" option ("Repeat", "Repeat X", "Repeat Y", "No Repeat"). Learn on W3School, "Background Image Size" ("Cover — Image to be as large as possible", "Contain — Image will try to fit inside the container area", "Initial"). Learn on W3School, "Scroll Effect" ("Move with the content" or "Fixed at its position"), "Parallax Speed" (set custom parallax speed, enter a value between 1 to 100 (Default 30), "Background Image Position" (you can use any number with px, em, %, etc. Example- 100px 100px), "Background Override (Read Description)" with "Default Width", "Apply 1st parent element's width", "Apply 2nd parent element's width", "Apply 3rd parent element's width", "Apply 4th parent element's width", "Apply 5th parent element's width", "Apply 6th parent element's width", "Apply 7th parent element's width", "Apply 8th parent element's width", and "Apply 9th parent element's width", "Full Width", "Maximum Full Width", "Browser Full Dimension". By default, the background will be given to the WPBakery Page Builder row. However, in some cases depending on your theme's CSS — it may not fit well to the container you are wishing it would. In that case, you will have to select the appropriate value here that gets your desired output, "Activate on Mobile" allows to show or hide on mobile devices
      • Horizontal Parallax On Scroll —set a horizontal parallax on scroll set (upload or select background image from media gallery) as "Background Image Repeat" option ("Repeat", "Repeat X", "Repeat Y", "No Repeat"). Learn on W3School, "Background Image Size" ("Cover — Image to be as large as possible", "Contain — Image will try to fit inside the container area", "Initial"). Learn on W3School, "Scroll Effect" ("Move with the content" or "Fixed at its position"), "Parallax Speed" (set custom parallax speed, enter a value between 1 to 100 (Default 30), "Background Image Position" (you can use any number with px, em, %, etc. Example- 100px 100px), "Background Override (Read Description)" with "Default Width", "Apply 1st parent element's width", "Apply 2nd parent element's width", "Apply 3rd parent element's width", "Apply 4th parent element's width", "Apply 5th parent element's width", "Apply 6th parent element's width", "Apply 7th parent element's width", "Apply 8th parent element's width", and "Apply 9th parent element's width", "Full Width", "Maximum Full Width", "Browser Full Dimension". By default, the background will be given to the WPBakery Page Builder row. However, in some cases depending on your theme's CSS — it may not fit well to the container you are wishing it would. In that case, you will have to select the appropriate value here that gets your desired output, "Activate on Mobile" allows to show or hide on mobile devices
      • Interactive Parallax On Mouse Hover — set an interactive parallax on scroll set (upload or select background image from media gallery) as "Background Image Repeat" option ("Repeat", "Repeat X", "Repeat Y", "No Repeat"). Learn on W3School, "Parallax Speed" (set custom parallax speed, enter a value between 1 to 100 (Default 30), "Background Override (Read Description)" with "Default Width", "Apply 1st parent element's width", "Apply 2nd parent element's width", "Apply 3rd parent element's width", "Apply 4th parent element's width", "Apply 5th parent element's width", "Apply 6th parent element's width", "Apply 7th parent element's width", "Apply 8th parent element's width", and "Apply 9th parent element's width", "Full Width", "Maximum Full Width", "Browser Full Dimension". By default, the background will be given to the WPBakery Page Builder row. However, in some cases depending on your theme's CSS — it may not fit well to the container you are wishing it would. In that case, you will have to select the appropriate value here that gets your desired output, "Activate on Mobile" allows to show or hide on mobile devices
      • Multilayer Vertical Parallax — set a multilayer vertical parallax (upload or select background image from media gallery) as "Background Image Repeat" option ("Repeat", "Repeat X", "Repeat Y", "No Repeat"). Learn on W3School, "Parallax Speed" (set custom parallax speed, enter a value between 1 to 100 (Default 30), "Background Override (Read Description)" with "Default Width", "Apply 1st parent element's width", "Apply 2nd parent element's width", "Apply 3rd parent element's width", "Apply 4th parent element's width", "Apply 5th parent element's width", "Apply 6th parent element's width", "Apply 7th parent element's width", "Apply 8th parent element's width", and "Apply 9th parent element's width", "Full Width", "Maximum Full Width", "Browser Full Dimension". By default, the background will be given to the WPBakery Page Builder row. However, in some cases depending on your theme's CSS — it may not fit well to the container you are wishing it would. In that case, you will have to select the appropriate value here that gets your desired output, "Activate on Mobile" allows to show or hide on mobile devices
    • YouTube Video —set a YouTube Video as a background, enter the YouTube URL of the Video to the input field, "Extra Options" ON/OFF checkboxes "Loop" and "Muted". Muted autoplay is always allowed in chrome. Refer to this link, set a "Placeholder Image" (placeholder image is displayed in case background videos are restricted (Ex - on iOS devices), set a custom "Start Time" and "Stop Time" in seconds (you may start/stop the video at any part), ON/OFF options allows "Play video only when in viewport" (video will be played only when the user is on the particular screen position. Once user scroll away, the video will pause), "Background Override (Read Description)" with "Default Width", "Apply 1st parent element's width", "Apply 2nd parent element's width", "Apply 3rd parent element's width", "Apply 4th parent element's width", "Apply 5th parent element's width", "Apply 6th parent element's width", "Apply 7th parent element's width", "Apply 8th parent element's width", and "Apply 9th parent element's width", "Full Width", "Maximum Full Width", "Browser Full Dimension". By default, the background will be given to the WPBakery Page Builder row. However, in some cases depending on your theme's CSS — it may not fit well to the container you are wishing it would. In that case, you will have to select the appropriate value here that gets your desired output
    • Hosted Video —set any hosted video from the media gallery, "Link to the video in MP4 Format" input field for MP4 format, "Link to the video in WebM / Ogg Format" input field for WebM / Ogg format, "Extra Options" ON/OFF checkboxes "Loop" and "Muted". Muted autoplay is always allowed in chrome. Refer to this link, set a "Placeholder Image" (placeholder image is displayed in case background videos are restricted (Ex - on iOS devices), ON/OFF options allow "Play video only when in viewport" (video will be played only when the user is on the particular screen position. Once user scroll away, the video will pause), ON/OFF options allows "Display Controls" (display play/pause controls for the video on the bottom right position), "Background Override (Read Description)" with "Default Width", "Apply 1st parent element's width", "Apply 2nd parent element's width", "Apply 3rd parent element's width", "Apply 4th parent element's width", "Apply 5th parent element's width", "Apply 6th parent element's width", "Apply 7th parent element's width", "Apply 8th parent element's width", and "Apply 9th parent element's width", "Full Width", "Maximum Full Width", "Browser Full Dimension". By default, the background will be given to the WPBakery Page Builder row. However, in some cases depending on your theme's CSS — it may not fit well to the container you are wishing it would. In that case, you will have to select the appropriate value here that gets your desired output

     

Effect settings #

  • Easy Parallax — ON/OFF section allows to set easy parallax effect, If enabled, the elements inside the row will move slowly, "Parallax Speed" input field (enter a value between 0 to 100 (Default 30)
  • Fade Effect on Scroll — ON/OFF section allows to set fade parallax effect, "Viewport Position" 30% by default
  • Enable Overlay — ON/OFF section allows to set custom overlay "Color" and custom overlay "Pattern" ("Pattern Opacity" with a value between 0 to 100 (0 is maximum transparency, 80 by default, "Pattern Size" allow to set custom pattern size in px), "Fancy Multi Color Overlay" ON/OFF checkbox allows to Multi Color Overlay Opacity in %, 60% by default
  • Separator — ON/OFF section allows to choose "Type" as "None", "Triangle", "Big Triangle", "Big Triangle Left", "Big Triangle Right", "Half Circle", "Curve Center", "Curve Left", "Curve Right", "Tilt Left", "Tilt Right", "Round Split", "Waves", "Clouds", "Multi Triangle", set custom "Position" as a "Top", "Bottom", "Top & Bottom", set custom "Icon to display" and choose icon from "Font Icon Manager" or upload "Custom Image Icon" with custom "Image Width" in px, 48 by default
  • Hide Row — ON/OFF section allows to hide road on mobile devices as "Large Screen", "Desktop", "Tablet", "Tablet Portrait", "Mobile", "Mobile Landscape" with ON/OFF option

*In order for Effects below to work, you must select something except "default" in the background tab. Maybe a single color.
Screenshot - https://cloudup.com/cc1J8ZlcdZW