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!

Contents

Export HTML Method

1. Open the plugin's the "Global Settings"

2. Set "Enable Markup Export option" to "On" and press "Update" button in the bottom of Settings popup.

3. Press F5 on your keyboard to refresh the browser's page (or just reload the admin page manually).

4. Select the "Export to HTML" option for your slider.

This option will only be visible after performing steps #1-3 above.

Zip has following structure

In slider html you can find the source code for the slider. You need to copy assets, css, fonts and js folder to your html site corresponding folders. Js and CSS includes can be found in head section of slider.html Slider source can be found in body section of slider.html

PHP Embed Method

Open the following file and review its contents:

revslider-standalone/embed_example.php


<!-- update the path to the "embed.php" file here -->
<?php include 'revslider-standalone/embed.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title>Example of Revslider embedding</title>
<?php RevSliderEmbedder::headIncludes(); ?>
</head>
<body>
<!-- change "example" in the code below to match your slider's alias -->
<?php RevSliderEmbedder::putRevSlider('example'); ?>
</body>
</html>

Code explanation:

1. Import the editor's "Embed" class.


<!-- Include slider embed library -->
<?php include "revslider-standalone/embed.php"; ?>

2. Load the slider's CSS/JS files.


<!-- Add CSS and JS libraries to html header -->
<?php RevSliderEmbedder::headIncludes(); ?>

<!-- Add false parameter if you want to disable jQuery library that comes with slider Revolution -->
<?php RevSliderEmbedder::headIncludes(false); ?>

3. Embed the slider's HTML markup somewhere on the page,and replaced the "example" part with your slider's "Alias" (see screenshot below).


<!-- change "example" in the code below to match your slider's alias -->
<?php RevSliderEmbedder::putRevSlider("example"); ?>

4. If you need to split CSS / JS check this sample


<?php include 'embed.php'; ?>
<html>
<head>
<title>Example of Revslider embedding</title>
<?php RevSliderEmbedder::cssIncludes(); ?>
</head>
<body>
<?php RevSliderEmbedder::putRevSlider('example'); ?>
<?php RevSliderEmbedder::jsIncludes(); ?>
</body>
</html>

JS Embed Method

Open the following file and review its contents:

revslider-standalone/embed_example_js.php


<html>

    <head>

        <title>Example of Revslider embedding with javascript</title>

        <!-- update the path to the "revslider-standalone" folder for your site for the files below -->
        <link rel="stylesheet" type="text/css" media="all" href="revslider-standalone/revslider/public/assets/css/settings.css" />
        <script type="text/javascript" src="revslider-standalone/assets/js/includes/jquery/jquery.js"></script>
        <script type="text/javascript" src="revslider-standalone/revslider/public/assets/js/jquery.themepunch.tools.min.js"></script>
        <script type="text/javascript" src="revslider-standalone/revslider/public/assets/js/jquery.themepunch.revolution.min.js"></script>
        <script type="text/javascript" src="revslider-standalone/assets/js/revslider.js" id="revslider_script"></script>

    </head>

    <body>

        <!-- change "example" in the code below to match your slider's alias -->
        <div class="revslider" data-alias="example"></div>

    </body>

</html>

Code explanation:

1. The slider's core CSS file


<link rel="stylesheet" type="text/css" media="all" href="revslider-standalone/revslider/public/assets/css/settings.css" />

2. Load a copy of jQuery

3. Add the remaining 3 scripts needed for the slider.


<script type="text/javascript" src="revslider-standalone/revslider/public/assets/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="revslider-standalone/revslider/public/assets/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="revslider-standalone/assets/js/revslider.js" id="revslider_script"></script>

4. Place this div where you want the slider to show up on your pageand replaced the "example" part with your slider's "Alias" (see screenshot below).


<div class="revslider" data-alias="example"></div>

Popular Solutions