Looking for mind-blowing effects? 🤯 Explore Slider Revolution's advanced WebGL animations

Rows and Columns allow for perfectly spaced text.

back to top

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.

Contents:

back to top
  1. Zones
  2. Rows
  3. Columns
  4. Layers

Example Nested Structure:

back to top

[zone]
    [row]
        [coloumn]
            [content_layer]Text[/content_layer]
        [/column]
        [coloumn]
            [content_layer]Text[/content_layer]
        [/column]
    [/row]
    [row]
        [coloumn]
            [content_layer]Text[/content_layer]
        [/column]
        [coloumn]
            [content_layer]Text[/content_layer]
        [/column]
    [/row]
[/zone]

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

back to top

<!-- Begin Rows/Columns that are vertically aligned to the TOP of the Slider -->
<div class="rev_row_zone rev_row_zone_top">

Vertical Align: MIDDLE

back to top

<!-- Begin Rows/Columns that are vertically aligned to the MIDDLE of the Slider -->
<div class="rev_row_zone rev_row_zone_middle">

Vertical Align: BOTTOM

back to top

<!-- Begin Rows/Columns that are vertically aligned to the BOTTOM of the Slider -->
<div class="rev_row_zone rev_row_zone_bottom">

Step 2: Add a Row

back to top
data-frames
    The row's animation.
    data-type
    • row
    Defines the div as a Row
    data-columnbreak
    • 1
    • 2
    • 3
    Choose at which point the columns should collapse. Use "3" for smartphone views, "2" for tablets and "3" for laptops.
    data-baseline
    • slide
    • 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
    margins
      Spacing options for the row, in responsive format
      paddings
        Padding options for the row, in responsive format

        <!-- BEGIN ZONE -->
        <div class="rev_row_zone rev_row_zone_top">
         
            <!-- BEGIN ROW -->
            <div class="tp-caption"
         
                data-frames='[{"delay": 0,"speed": 300, "frame": "0",
                               "from": "opacity: 0;", "to": "o:1;",
                               "ease": "Power3.easeInOut"},
                              {"delay": "wait", "speed":300,
                               "frame": "999", "to": "opacity:0;",
                               "ease": "Power3.easeInOut"}]'
         
                data-type="row"
                data-columnbreak="3"
                data-basealign="slide"
         
                data-margintop="[0,0,0,0]"
                data-marginright="[0,0,0,0]"
                data-marginbottom="[0,0,0,0]"
                data-marginleft="[0,0,0,0]"
                data-paddingtop="[0,0,0,0]"
                data-paddingright="[0,0,0,0]"
                data-paddingbottom="[0,0,0,0]"
                data-paddingleft="[0,0,0,0]">

        Step 3: Add a Column

        back to top
        data-frames
          The columns's animation.
          data-type
          • column
          Defines the div as a Column
          data-columnwidth
            Percentages can be defined to create varying width columns.
            data-baseline
            • slide
            • 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
            margins
              Spacing options for the row, in responsive format
              paddings
                Padding options for the row, in responsive format

                <!-- BEGIN ROW -->
                <div class="tp-caption"
                 
                    data-type="row"
                    <!-- additional row settings continued here... -->
                >
                    <!-- BEGIN COLUMN -->
                    <div class="tp-caption"
                 
                        data-frames='[{"delay": 0, "speed": 0, "frame": "0",
                                       "to": "o:1;", "ease": "Linear.easeNone"},
                                      {"delay": "wait", "speed": 0,
                                       "frame": "999", "ease": "nothing"}]'
                 
                        data-type="column"
                        data-columnwidth="33.33%"
                        data-basealign="slide"
                 
                        data-margintop="[0,0,0,0]"
                        data-marginright="[0,0,0,0]"
                        data-marginbottom="[0,0,0,0]"
                        data-marginleft="[0,0,0,0]"
                        data-paddingtop="[0,0,0,0]"
                        data-paddingright="[0,0,0,0]"
                        data-paddingbottom="[0,0,0,0]"
                        data-paddingleft="[0,0,0,0]">

                Step 4: Add a Content Layer

                back to top

                Layer Styles and Settings:

                back to top
                1. Layer Content
                2. Layer Styling
                3. Responsive Setup
                4. Layer Transitions
                5. Layers Timing
                6. Layer Links
                7. Blend Modes

                <!-- BEGIN COLUMN -->
                <div class="tp-caption"
                 
                     data-type="column"
                     <!-- additional column settings continued here... -->
                >
                    <!-- BEGIN CONTENT LAYER -->
                    <div class="tp-caption tp-resizeme largewhitebg"
                 
                         data-frames='[{"delay": 0, "speed": 0, "frame": "0",
                                        "to": "o:1;", "ease": "Linear.easeNone"},
                                       {"delay": "wait", "speed": 0,
                                        "frame": "999", "ease": "nothing"}]'
                 
                         data-x="center"
                         data-y="center"
                         data-hoffset="0"
                         data-voffset="0"
                         data-width="['auto']"
                         data-height="['auto']"
                 
                    >Content Layer</div>
                    <!-- END CONTENT LAYER -->
                 
                </div>
                <!-- END COLUMN -->

                Popular Solutions

                [ess_grid alias="wp-popular-solutions"]
                Impressum | Datenschutz