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

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.

Contents:

Example Nested Structure:

[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

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

<!-- 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

<!-- 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

<!-- 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

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

        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

                Layer Styles and Settings:

                <!-- 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