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!

QUICK TIP:

Review the Basic Template Setup for information about how to setup a custom production environment.

To get started with the Duotone Add-On, first add the "revolutions-addons" folder into your production site:

Next, add the Duotone stylesheet and script. The script should placed below all other scripts on the page.


<!-- PANORAMA STYLESHEET -->
<link type="text/css" href="revolution-addons/duotone/css/revolution.addon.duotone.css" />


<!-- DUOTONE SCRIPTS -->
<script type="text/javascript" src="revolution-addons/duotone/js/revolution.addon.duotone.min.js"></script>

Next, assign a variable to your slider's main settings script as shown in the following example.


var slider = jQuery('#rev_slider_1').show().revolution({

/* ******************** */
/* SLIDER SETTINGS HERE */
/* ******************** */

});

Then initialize the Panorama Addon directly after the slider settings (shown above)


/*
ARGS:

- jQuery,
- sliderAprVariable,
- simplify transitions (improves slide transitions), true/false
- simplified transition easing function: https://matthewlein.com/tools/ceaser
- simplified transition timing in milliseconds

*/
RsAddonDuotone(jQuery, slider, true, "cubic-bezier(0.645, 0.045, 0.355, 1.000)", "1000");

Next, add the "data-duotone" attribute to your slides

data-filter
  • "blue"
  • "blue-dark"
  • "blue-light"
  • "orange"
  • "orange-dark"
  • "orange-light"
  • "red"
  • "red-dark"
  • "red-light"
  • "green"
  • "green-dark"
  • "green-light"
  • "yellow"
  • "yellow-dark"
  • "yellow-light"
  • "purple"
  • "purple-dark"
  • "purple-light"
  • "pink"
  • "pink-dark"
  • "pink-dark"
  • "pink-light"
  • "blue-yellow"
  • "blue-yellow-dark"
  • "blue-yellow-light"
  • "pink-yellow"
  • "pink-yellow-dark"
  • "pink-yellow-light"
  • "red-blue"
  • "red-blue-dark"
  • "red-blue-light"


<!-- BEGIN DUOTONE SLIDE -->
<li data-transition="fade" data-duotone="blue">

<!-- slide main background image -->
<img src="assets/images/image.png" class="rev-slidebg">

<!-- ***************** -->
<!-- SLIDE LAYERS HERE -->
<!-- ***************** -->

</li><!-- END DUOTONE SLIDE -->

Popular Solutions