Setting up the Revolution Slider Thuan thao jsc
This tutorial is kindly provided by the plugin developer. Please note that some of the VamTam themes come with Layered Slider or VamTam Slider, so make sure you are reading the right guide :)
You can access the full plugin’s documentation here:
Setting up the Revolution Slider
We always recommend importing the demo content. If you have done so you would have imported the sample sliders (thanh trượt) that come with the theme and replicate the one on the demo website. You can use these sliders as a starting point for your own website. The “sample sliders” are well designed and complex sliders. If you are not yet familiar with the slider and theme options it is a must to use them.
Revolution slider is powerful and complex parallax slider. It gives you unlimited opportunities to create slides with many sub layers with different animation.
Please note that the Revolution Slider is a plugin and have its own option panel found in the main left side navigation menu — Revolution Slider
Activating the Slider in Pages/Posts’ Header
Local Settings
You have local slider options that can be found just below the text editor in every page/post.
Troubleshooting
Some of the plugins may interfere with the way slider works. Please deactivate all your plugins, clear your browser cache and see if this fixes the issue.
Inserting Revolution Slider to your page
Inserting the slider using the Drag & Drop Builder
You can place your sliders into pages and posts using the Drag & Drop Builder.
1. Click on the button or drag into the editor in order to insert it.
2. Click on the “edit” icon of the Revolution Slider element and chose a slider from the one you’ve already created.
3. Save Element
4 Publish
Inserting the slider with the Revolution Slider widget
Revolution Slider supports widgets, so you can place your slider in your front-end page just by a drag n’ drop. To do that, navigate to the Appearance menu on your left sidebar and select “Widgets”. Grab the Revolution Slider Widget and drop it into one of your widget area.
Ways to add the Slider to your Theme:
- * From the theme html use:
<?php putRevSlider( "alias" ) ?>example:<?php putRevSlider("homeslider") ?>
For show only on homepage use:<?php putRevSlider("homeslider","homepage") ?>
For show on certain pages use:<?php putRevSlider("homeslider","2,10") ?> - * From the widgets panel drag the “Revolution Slider” widget to the desired sidebar
- * From the post editor insert the shortcode from the sliders table
1. Shortcode Methodback to menu
From the slider’s main settings page, copy your slider’s shortcode to your computer’s clipboard.
And then paste the slider’s shortcode into your page’s main content area.
2. Quick Shortcode Creatorback to menu
From the page’s main content editor, select “Revolution Slider” icon.
Then select a slider and choose “Add Selected Slider”.
3. Add Slider to Theme’s Widget Areaback to menu
From “WP Menu -> Appearance -> Widgets”, you’ll find “Revolution Slider” listed.
Then drag and drop the “Revolution Slider” box into one of your theme’s “Widget Areas”.
Widget Options:
1. Optional title to be displayed above the slider
2. Choose the actual Slider you wish to display
3. Choose to only display the slider on your homepage
4. Enter a set of page ID’s to only display the slider on a set of specific pages (page ID’s separated by commas).
4. Visual Composer
If you have the Visual Composer plugin installed, click the “+” button to add a new element.
Next, select “Revolution Slider 5”, and you’ll then be shown the Quick Shortcode Creator.
Create Slider
1. Create a New Slider
1.1 From the plugin’s main admin page, select “Create New Slider”.
1.2 Enter a Slider Title (1) and Alias (2), and click “Save”.
Quick Note:
Before saving, you can select several of the slider’s settings from this page. But choosing these settings are not required to officially create a new slider, as they can be adjusted afterward.
Alias Naming:
The slider’s “Title” can be anything, but the “Alias” should not have any special characters or spaces (but dashes and underscores are ok).
1.3 You’ll now be redirected to the plugin’s main admin page where you’ll see your new slider listed.
2. Start with a Demo Slider
There are two types of demos that can be imported. The first are those included with the plugin by default, and the second are those that may be included with your purchased theme.
When choosing “Add Slider Template”, you will be shown the “Template Library”, which will include a large array of free templates for you to choose from, and also where the Premium Sliders can be found.
2.1 Add Slider Template
Choose “Add Slider Template”, the view the Template Library.
Important Note:
Register your Purchase Code to gain access to the free Premium Sliders.
Category Filters: Narrow your template search to a specific category.
Update Library: Check to see if new templates are available.
New/Updated: View the latest templates.
Scrollbar: Scroll the template list window to view templates below the fold.
Preview Button: View the template’s live demo.
Installed: Signals that the template has already been downloaded.
Not Installed: Signals that the template has yet to be downloaded.
Click the “+” icon to view the template’s details and install the template.
Quick Note:
If the template has not been downloaded yet, #5 and #6 would just be replaced with a button titled “Install Slider”.
Template Overview: Basic information about the template.
Setup Notes: Important information about using the slider.
Requirements: Information about the minimum plugin version and Add-Ons needed to install the the template.
Installed/Available Version: Information about what current version of the template is installed, and its latest available version.
Re-install Slider: Useful for when templates are updated, and also for cases when template content has been deleted by accident.
Add Slider: Install the template.
Become a “Direct Customer” for Premium Sliders:
“Premium Sliders” are only available to direct customers, and are not available if the plugin was packaged with your theme. But if you’d like access to Premium Slider’, visit the link below to learn how you can become a direct customer.
http://revolution.themepunch.com/direct-customer-benefits/
After choosing your template, choose how you wish to import it. “Online” will import the template automatically from the ThemePunch servers, but you can also choose “Local” and import the slider from one of the demo zips included with the plugin’s original source.
For the example below, we’ll continue with the “Local” option.
Quick Note:
“Premium Templates” are only available as “Online” imports.
To complete the “Local” import, from the plugin’s original source folder, you’ll find a folder named “example-zips”. Click the “browse” button (#1), and locate the zip file listed in the green box from your computer (i.e. “exwebproduct.zip”). Then click “Import Template Slider” (#2).
You’ll then see the template slider listed in the plugin’s main admin page.
2.2 Import Slider
Use this option to import a demo that was possibly included with your purchased theme.
Special Note:
Unless otherwise instructed by your theme author, use the default “Custom Animation” and “Default Styles” selections.
3. Slider Management
1. General Options
a. Embed Slider — View options for how the slider can be added to one of your pages.
b. Export — Create a zip file of your slider that can be imported to a different website.
c. Delete — Delete the slider.
d. Duplicate — Create a copy of the current slider.
e. Preview — View a quick preview of the slider from inside the slider’s admin.
2. Slider Settings — Content Source, Layout Options, etc.
3. Create/Edit Slides — Individual slide management.
Slider settings
Settings Previews
Important Note about Slider Settings:
Depending on your Slider Type, not all settings will be applicable for your slider. For example, the Carousel Settings will only be shown when your “Slider Type” is set to “Carousel”, and Navigation Settings will not be shown for a “Hero Scene” slider.
When adjusting your slider’s settings, a small preview box will be shown to illustrate each setting. This is particularly useful for settings such as “Appearance”, “Navigation”, etc., as it will give you a quick visual of the specific setting.
In the following screenshot, “Shadow Type 1” is illustrated in the hover preview box.
General settings
1. Slideshow
Stop Slide on Hover
Stop slider progress when the user hovers their mouse over the slider.
Stop Slider After..
Amount of Loops:
Stop the slider after all slides have looped a set amount of times.
At Slide:
Stop the slider at a specific slide.
On Mobile Only
Shuffle / Random Mode
Stop slider progress when use hovers their mouse over the slider.
Loop Single Slide
Choose to loop your slider if it has only one slide (“Standard Slider” much be chosen as the Slider Type).
Stop Slider out of Viewport
Stop slider when the page is scrolled and the slider is no longer visible.
Out of Viewport:
Wait:
Only start the slider when its scrolled into view (useful for sliders further down the page).
Pause:
Pause the slider when its scrolled out of view.
Area out of Viewport:
A percentage of the slider that needs to be inside/outside the viewport before slider starts or pauses.
Wait for revapi1.revstart()
If you’re a developer who’s using the slider’s API, this option can be used to only start the slider when this API method is explicitly called.
Click here to view a code example of how this option can be used.
2. Defaults
Set the default individual slide settings.
For example, let’s say you always want your individual slides to start off with a “Slide to Top” transition. Adjusting the “Transitions” value will set it up so all new slides have have a “Slide to Top” transition by default.
Or if you already have individual slides created, you can change the value of “Transitions” and then select its checkbox, and then click the “Overwrite Selected Settings on all Slides” button, and the main transition for all existing slides will be changed to the new default value.
3. Progress Bar
The timer line that illustrates the amount of time before the next slide is shown.
If active, choose the progress bar’s position (top or bottom of slider), its height in pixels, and also its color and transparency level.
4. First Slide
Alternative 1st Slide
Normally the slider will always start with slide #1. But if you’d like your slider to start with a different slide, enter the slide’s number here.
First Transition Active
Sometimes when your slider first starts, it’s more elegant to have a different transition such as a simple fade at the very beginning. Use this option if you’d like to specify a special, initial transition for the very first slide.
When set, the special transition will only be executed on the very first slide once. Then once the slider loops, the original slide will default back to its individual slide transition settings.
5. Misc.
Next Slide on Focus & Disable Blur/Focus Behavior
Browser behaviour varies when switching between windows/tabs (JavaScript stops executing, etc.). But these options will often correct slider issues related to switching between tabs and windows.
Layout and visual
1. Appearance
Shadow Type
Shadows will be shown beneath the slider. Choose between 6 different styles, or choose “No Shadow” (the default option). And preview the Shadow Type as shown in the Primer section above.
Dotted Overlay Size
Dotted overlays are transparent grid-like graphics that will be placed above the slides, giving the slider a “mesh” type look (4 styles available). Preview the options as shown in the Primer section above.
Slider Background
The slider’s main background. Normally if your individual slides have their own background images, the slider’s main background would only be visible when the slider first loads, and before the first slide displays. But setting a background here for the slider itself is particularly useful for when you’re using “Transparent” slides (slides with no background image).
Choose a solid color or set an image as the background. Apply some padding to give your slider a border. And set specific background image options such as Background Fit, Background Repeat, and Background Position.
