The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchase Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $29. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

Prerequisites

1. Setup your testing environment
2. Setup your basic slider

This article is an introduction to Slide Layer markup.

The example will include a basic Text Layer, with some styling and positioning applied.

1. Copy the following Layer HTML markup to your clipboard.

This following is an example of the bare-minimum HTML markup required to create a Slide Layer.

<!-- BEGIN BASIC TEXT LAYER -->
<div class="tp-caption tp-resizeme largewhitebg"
 
    data-frames='[{
 
        "delay": 0,
        "speed": 300,
        "from": "opacity: 0",
        "to": "opacity: 1"
 
    }, {
 
        "delay": "wait",
        "speed": 300,
        "to": "opacity: 0"
 
    }
 
]'>Caption Text</div><!-- END BASIC TEXT LAYER -->

2. Add the Text Layer markup to one of your existing Slides, placed after the Slide's main background image.

<!-- BEGIN SLIDE -->
<li data-transition="fade">
 
    <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
    <img src="assets/images/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg">
 
    <!-- BEGIN BASIC TEXT LAYER -->
    <div class="tp-caption tp-resizeme largewhitebg"
 
        data-frames='[{
 
            "delay": 0,
            "speed": 300,
            "from": "opacity: 0",
            "to": "opacity: 1"
 
        }, {
 
            "delay": "wait",
            "speed": 300,
            "to": "opacity: 0"
 
        }
 
    ]'>Caption Text</div><!-- END BASIC TEXT LAYER -->
 
</li><!-- END SLIDE -->

Popular Solutions