Rows & Columns

Rows and Columns allow for perfectly spaced text.

When Rows and Columns are used, the Slider’s height will expand automatically if additional space is required for the text to fit.  And similar to Layer Groups, Content Layers are nested inside Columns, and Columns are nested inside Rows.

Example Nested Structure:

Step 1: Define a Row/Column Zone

back to top

Slider Revolution includes three “zones” where Rows & Columns can exist, each defined by the the “rev_row_zone_top”, “rev_row_zone_middle” and “rev_row_zone_bottom” classes.

Vertical Align: TOP

Vertical Align: MIDDLE

Vertical Align: BOTTOM

Step 2: Add a Row

back to top
  • data-framesThe row's animation.
  • data-typerow
    Defines the div as a Row
  • data-columnbreak1 2 3
    Choose at which point the columns should collapse. Use "3" for smartphone views, "2" for tablets and "3" for laptops.
  • data-baselineslide grid
    Use "slide" to align the Row to the entire slider (usually applicable for Full Width and Full Screen sliders), or "grid" to confine the layer within the Layers Grid
  • marginsSpacing options for the row, in responsive format
  • paddingsPadding options for the row, in responsive format

Step 3: Add a Column

back to top
  • data-framesThe columns's animation.
  • data-typecolumn
    Defines the div as a Column
  • data-columnwidthPercentages can be defined to create varying width columns.
  • data-baselineslide grid
    Use "slide" to align the Row to the entire slider (usually applicable for Full Width and Full Screen sliders), or "grid" to confine the layer within the Layers Grid
  • marginsSpacing options for the row, in responsive format
  • paddingsPadding options for the row, in responsive format

Step 4: Add a Content Layer

back to top