Theme:
Impreza
Zephyr
Knowledge Base
Support Forum

Sections, Rows, and Columns

Updated 1 month ago

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"
    • 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.

Columns #

2536.png

Responsive Options #

These settings are available when the "Columns layout via CSS grid" option is OFF (Theme Options > Advanced > Modules). To see that option you need to enable the "Live Builder" there.

Read the official documentation for details.

2539.png