Template Modification Walkthroughs – Low Impact
Do you have a template based module you want to upgrade for the new SR7 Velocity Engine? Learn the modifications each template requires in this guide.
Template Lists by Impact Level
We advise you to use CTRL + F (on Windows) / Command + F (on MacOS) to do a text search of this page and see if a template you have based your own design on is included in this list.
We also recommend you perform the same search in our guides to high and medium impact template modifications:
Templates With Optional, Low-Impact Visual Adjustments
If you have a module based on a template in this list, you can optionally apply the adjustments recommended in the linked section:
Template Guides – Low-Impact
If you have a module based on a template listed below, you can optionally apply the adjustments recommended in its section.
80s Style Intro
Template Demo: https://www.sliderrevolution.com/templates/80s-style-intro/
This template employs some custom CSS shadows and borders that can be replaced with in-built options and layer based CSS to maximize future proofing and ease of editing.
Adjustment Processes
Click any of the following links to open step-by-step adjustment process guides:
Steps to Upgrade Template
Step 1: Replace Bar border and shadow styling
On the layers named Bar Left, Bar Right and Bar Top add a border style, box shadow, and layer based CSS according to the following.
Select the layer, and on the Layer Options sidebar, open the Style sub-section. In the Border panel, set the Border Color to #e53235, Border Style to solid, and set all four Border Size options to 2px.
Switch to the Adv. Style sub-section and in the Box Shadow panel, toggle the Effect option to ON, set X to 0px, Y to 0px, Blur to 20px, Spread to 20px and Shadow Color to #d02228.
Finally, switch to the CUSTOM CSS sub-section and paste the following code into the Custom CSS box at the top:
animation-name: blink1;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;Step 2: Replace text layer border and shadow styling
On the layers named Slider, N, R and Evolutio add a letter spacing change, background gradient, text shadow, and layer based CSS according to the following.
Select the layer, and on the Layer Options sidebar, open the Style sub-section.
In the Font & Icon panel, set Letter Spacing to -4px.
Then, in the Background panel, set the BG Color option to a linear gradient with a 180 degree angle, and the following stops:
rgba(170,26,24,1)0%rgba(213,44,50,1)39%rgba(236,97,94,1)45%rgba(202,34,34,1)69%rgba(148,36,43,1)100%
Switch to the Adv. Style sub-section and in the Text Shadow panel toggle the Effect option to ON, set X to 0px, Y to 0px, Blur to 20px and Shadow Color to #d02228.
Finally, switch to the CUSTOM CSS sub-section and paste the following code into the CustomCSS box at the top:
-webkit-background-clip: text;
animation-name: blink2;
animation-duration: 150ms;
animation-iteration-count: infinite;
animation-direction: alternate;Step 3: Delete unnecessary code
In the CSS/JS Editor, replace all the existing CSS with this code:
@keyframes blink1 {
from {
box-shadow: 0px 0px 20px 0px rgba(208,34,40,1);
}
to {
box-shadow: 0px 0px 20px 0px rgba(208,34,40,0.75);
}
}
@keyframes blink2 {
from {
text-shadow: 0px 0px 20px rgba(208,34,40,1);
}
to {
text-shadow: 0px 0px 20px rgba(208,34,40,0.75);
}
}360 Panorama Tour
Template Demo: https://www.sliderrevolution.com/templates/360-degree-real-estate-virtual-tour/
This template now uses in-built options to handle pointer events, and as such, the pointer-events CSS in the template can be removed from the CSS/JS Editor.
Adjustment Processes
Click the following link to open the step-by-step adjustment process guide:
Steps to Upgrade Template
Step 1: Remove unused pointer-events CSS
Open the CSS/JS Editor and delete the code in the CUSTOM CSS tab.
Angled Business
Template Demo: https://www.sliderrevolution.com/templates/angled-business-website-template/
The “Angled Footer” template of this package has had Apple specific CSS removed, which you can optionally re-add if you prefer. Please follow the link below for more information.
Adjustment Processes
Click the following link to open the step-by-step adjustment process guide:
App Studio
Template Demo: https://www.sliderrevolution.com/templates/app-studio-website/
The “App Studio Contacts” template of this package has had Apple specific CSS removed, which you can optionally re-add if you prefer. Please follow the link below for more information.
Adjustment Processes
Click the following link to open the step-by-step adjustment process guide:
Before After Slider
Template Demo: https://www.sliderrevolution.com/templates/before-after-slider/
This template contains an IE11 fallback script that is no longer required.
Adjustment Processes
Click the following link to open the step-by-step adjustment process guide:
Steps to Upgrade Template
Step 1:
Delete the code in the CUSTOM JS SR6 tab of the CSS/JS Editor.
Coffee Joint
Template Demo: https://www.sliderrevolution.com/templates/coffee-joint-coffee-shop-website-template/
The “Find Us” template of this package has had Apple specific CSS removed, which you can optionally re-add if you prefer. Please follow the link below for more information.
Adjustment Processes
Click the following link to open the step-by-step adjustment process guide:
Construction Company
Template Demo: https://www.sliderrevolution.com/templates/construction-company-website/
The “Construction-Contacts” template of this package has had Apple specific CSS removed, which you can optionally re-add if you prefer. Please follow the link below for more information.
Adjustment Processes
Click the following link to open the step-by-step adjustment process guide:
Distortion AddOn
Template Demo: https://www.sliderrevolution.com/templates/distortion-effect-add-on-for-wordpress/
This template contains some custom CSS that is no longer required.
Steps to Upgrade Template
Step 1: Delete custom code
Delete the code found in the CUSTOM CSS tab of the CSS/JS Editor.
Duotone Add-on
Template Demo: https://www.sliderrevolution.com/templates/wordpress-duotone-effect-add-on/
This template contains an IE11 fallback script that is no longer required.
Adjustment Processes
Click the following link to open the step-by-step adjustment process guide:
Steps to Upgrade Template
Step 1: Delete custom code
Delete the code in the CUSTOM JS SR6 tab of the CSS/JS Editor.
FullScreen Menu Slider
Template Demo: https://www.sliderrevolution.com/templates/wordpress-fullscreen-menu/
This template uses a script to blur the background when the menu is opened. This script can be replaced by in-built options.
Steps to Upgrade Template
Step 1: Replace blur script with backdrop filter
Go into the template’s Global Layers, select the layer named Background, and in the Layer Options sidebar open the Animation sub-section. In the Keyframes panel, click AnimFrom on the IN line.
In the Advanced panel, open the Layer tab. Then, scroll down to the Layer Back-Drop Filter panel. Toggle the Use Filter option to ON. Change the Blur option, (which sits to the right of the Use Filter option), from 0px to 10px.
Then select the IN animation AnimTo, and the OUT animation AnimTo, and activate the Layer Back-Drop Filter effect with the same settings.
Once the above is complete. Delete the code found in the Custom JS SR6 tab of the CSS/JS Editor.
Immersion One Page
Template Demo: https://www.sliderrevolution.com/templates/immersion-website-template/
This package has three templates using CSS box shadows that can be replaced with in-built options.
Adjustment Processes
Click any of the following links to open step-by-step adjustment process guides:
Steps to Upgrade Template
Step 1: “Immersion Product”, “Immersion Design”, “Immersion Photography”, modules, replace box shadow
Each of these three templates has a layer named Image.
Select that layer, and in the Layer Options sidebar open the Adv. Style sub-section. In the Box Shadow panel, enable the shadow effect and set X to 20px, Y to 30px, Blur to 50px, Spread to 0px and Shadow Color to rgba(0,0,0,0.35).
The immersion-box style can then be deleted from the CUSTOM CSS tab of the CSS/JS Editor.
Landing Page
Template Demo: https://www.sliderrevolution.com/templates/landing-page-builder/
This template requires a minor change to the media queries in custom CSS it uses to control list styling.
Steps to Upgrade Template
Step 1: Update media query CSS
In the CUSTOM CSS tab of the CSS/JS Editor, replace this code:
@media (min-width: 778px)
{
.lp-list {
display:list-item;
padding-left: 10px;
margin-left: 10px;
}
}
@media (max-width: 777px)
{
.lp-list {
display:block;
padding-left: 0;
margin-left: 0;
}
}With this code:
@media (min-width: 778px)
{
.lp-list {
display:list-item !important;
padding-left: 10px !important;
margin-left: 20px !important;
}
}
@media (max-width: 777px)
{
.lp-list {
display:block;
padding-left: 0;
margin-left: 0;
}
}Magazine Slider
Template Demo: https://www.sliderrevolution.com/templates/wordpress-magazine-slider/
This template has a layer, repeated on all four slides, that uses CSS box shadows which can be replaced with in-built options.
Adjustment Processes
Click the following link to open the step-by-step adjustment process guide:
Steps to Upgrade Template
Step 1: Replace box shadow on all slides
Each of this template’s four slides has a layer named Shadowshape.
Select that layer and in the Layer Options sidebar open the Adv. Style sub-section. In the Box Shadow panel, enable the shadow effect and set X to 0px, Y to 30px, Blur to 50px, Spread to 0px and Shadow Color to rgba(50, 50, 50, 0.25).
The immersion-box style can then be deleted from the CUSTOM CSS tab of the CSS/JS Editor.
Mask Showcase
Template Demo: https://www.sliderrevolution.com/templates/minimal-mask-showcase/
This template uses custom CSS and JS to make small adjustments to its nav style. This code can be removed and the adjustments made unnecessary by switching to a different nav style.
Steps to Upgrade Template
Step 1: Change nav style and delete code
Open the Navigation Options sidebar and go to the Bullets sub-section. In the Bullets Type panel, change the Bullets Style option from Bullet Bar to Light Bars.
Then delete the code from the CUSTOM CSS and CUSTOM JS SR6 tabs of the CSS/JS Editor.
Mountain Parallax Header
Template Demo: https://www.sliderrevolution.com/templates/mountain-wordpress-parallax-header/
The title in this template uses a text gradient effect that can be replaced with in-built options and layer based CSS.
Adjustment Processes
Click the following link to open the step-by-step adjustment process guide:
Steps to Upgrade Template
Step 1: Replace text gradient effect
Follow the Convert text gradient CSS to in-built options & layer CSS process for the layer named Title.
The style responsible for the text gradient is the one with the class blurslider-gradient. The gradient type is linear, and the stops used are:
#ff557c0%#f3823c100%
Parallax Scroll
Template Demo: https://www.sliderrevolution.com/templates/parallax-scroll/
This template uses a CSS based box shadow that can be replaced by in-built options.
Adjustment Processes
Click the following link to open the step-by-step adjustment process guide:
Steps to Upgrade Template
Step 1: Replace box shadow on two layers
This template applies the same box shadow to the layers named Blue Bar and Call To Action Btn.
Select each of those layers, and in the Layer Options sidebar, open the Adv. Style sub-section. In the Box Shadow panel, enable the shadow effect and set X to 0px, Y to 20px, Blur to 30px, Spread to 0px and Shadow Color to rgba(9,21,54,0.25).
The tp-joyshadow style can then be deleted from the CUSTOM CSS tab of the CSS/JS Editor.
Peak Agency
Template Demo: https://www.sliderrevolution.com/templates/peak-agency-website-template/
The “Peak Footer” template of this package has had Apple specific CSS removed, which you can optionally re-add if you prefer. Please follow the link below for more information.
Adjustment Processes
Click the following link to open the step-by-step adjustment process guide:
TechCo One-Pager
Template Demo: https://www.sliderrevolution.com/templates/techco-website-template/
This template has an icon with gradient CSS and two buttons with box shadow CSS that can be replaced.
Adjustment Processes
Click any of the following links to open step-by-step adjustment process guides:
Steps to Upgrade Template
Step 1: Replace text gradient effect
Follow the Convert text gradient CSS to in-built options & layer CSS process for the layer named Icon.
The style responsible for the text gradient is the one with the selector .tc-gradient i:before. The gradient type is linear, and the stops used are:
#2ed8a30%#2970ff100%
Step 2: Replace button shadows
This template applies the same box shadow to the layers named Btn 1 and Btn 2.
Select each of those layer, and in the Layer Options sidebar, open the Adv. Style sub-section. In the Box Shadow panel, enable the shadow effect and set X to 3px, Y to 5px, Blur to 10px, Spread to 0px and Shadow Color to rgba(0,0,0,0.2).
The tc-btnshadow style can then be deleted from the CUSTOM CSS tab of the CSS/JS Editor.
Tech Slider
Template Demo: https://www.sliderrevolution.com/templates/tech-showcase-slider-template/
This template uses custom CSS and JS to make small adjustments to its nav style. This code can be removed and the adjustments made unnecessary by switching to a different nav style.
Steps to Upgrade Template
Step 1: Change nav style and delete code
Open the Navigation Options sidebar and go to the Bullets sub-section. In the Bullets Type panel, change the Bullets Style option from Bullet Bar to Light Bars.
Then delete the code from the CUSTOM CSS and CUSTOM JS SR6 tabs of the CSS/JS Editor.
Testimonial Carousel Pack
Template Demo: https://www.sliderrevolution.com/templates/testimonial-carousel-collection/
These templates require a settings change in order to ensure mouse drag can be used for navigation between slides.
Steps to Upgrade Template
Step 1: “Testimonial Carousel 3” and “Testimonial Carousel 5” modules, change navigation setting
For each of these two templates go to the Navigation Options sidebar, open the Touch sub-section, and toggle the Desktop Carousel Swipe option to ON.
Vimeo Gallery
Template Demo: https://www.sliderrevolution.com/templates/wordpress-vimeo-gallery/
Previously, controls appeared by default on Vimeo videos, whereas now if they are wanted they should be manually enabled. If you wish to have them appear, follow the instructions below.
Steps to Upgrade Template
Step 1: Activate Video Controls
If you would like controls to appear on the Vimeo video, select the layer named Vimeo Stream. In the Layer Options sidebar, select the Content sub-section, scroll down to Advanced Media Settings, and toggle the Controls option to ON.
Website Intro
Template Demo: https://www.sliderrevolution.com/templates/website-intro-wordpress-slider/
This template uses custom CSS and JS to make small adjustments to its nav style. This code can be removed and the adjustments made unnecessary by switching to a different nav style.
Steps to Upgrade Template
Step 1: Change nav style and delete code
Open the Navigation Options sidebar and go to the Bullets sub-section. In the Bullets Type panel, change the Bullets Style option from Bullet Bar to Light Bars.
Then delete the code from the CUSTOM CSS and CUSTOM JS SR6 tabs of the CSS/JS Editor.
