Layerslider
Overview
You can display not only one Layerslider but multiple ones on every page. You’ll have all the amazing Layerlsider options for each slider, starting with height, style, transitions etc. The transitions for each element can be set in a fancy drag and drop editor, you have amazing options like mouse parallax effects and a slew of demo sliders to import.
Code Snippet
Shortcode
[av_layerslider id='1' av_uid='av-46zg74']
Customization
Using Google fonts in LayerSlider
One of the most common questions we get is how to add Google fonts to LayerSlider.
To add Google fonts go to the LayerSlider > Options > Google Fonts and search for the font.
After searching and adding the Google font of your choice, “Save” the changes.
To use the Google font in your slides goto LayerSlider > Sliders > Styles > TEXT | FONT & STYLE > Family > Select your font style and save changes 🙂
Video background
To add video background to LayerSlider, select the last layer and choose Video from the content tab. Here you can add your own self-hosted video or YouTube videos as slider background. Lastly, select the option “Use this video as slide background“.
Responsive LayerSlider tweaks
To make responsive tweaks, the LayerSlider provides an option to change an element’s visibility, this is useful only to show or hide content on different devices. However, to make more advanced changes like font size or width etc, please use custom CSS.
To enable custom CSS class name support, go to Enfold > Layout Builder and check the option “Show element options for developers”. Then using your custom class, add your CSS code in the enfold child theme style.css or in Enfold > General Styling > Quick CSS
@media only screen and (max-width: 767px) {
.custom-class {
/* YOUR STYLES HERE */
}}
How to update LayerSlider
Selected plugins are bundled with the theme and LayerSlider is one of the plugins you receive with the theme. The bundled plugins get updated with the theme updates, so to update the bundled version of the LayerSlider, you only have to make sure the theme itself up to date.
Sometimes the plugin may still show a new update is available after updating Enfold. This is because after we release an update, a new version of the plugin will be released. In such a case please wait for us to release a new version of the theme with the updated plugins.
If you wish to purchase and use a standalone version please deactivate the bundled version. Make sure to export the old sliders and import them back after installing the standalone version.
Deactivate LayerSlider
The Enfold theme comes bundled with the LayerSlider plugin. If you don’t want to use it with your site, you can remove its integration with the theme from the theme options.
Go to Enfold > Layout Builder > Integrated (Bundled) LayerSlider Plugin
If you are using a version older than 4.2.2 please add the code below to your functions.php file to deactivate.
With a child theme, add this line to your functions.php file:
add_theme_support('deactivate_layerslider');
If you are not using a child theme you will need to add the same line after each theme update to your functions.php file at the top, just after the theme’s global variable. Look for
global $avia_config;
and one line after it add:
add_theme_support('deactivate_layerslider');
Manually importing missing Layerslider images of the old demo slides
If you have recently updated to Enfold 4.0 or higher and some of the images of your default layerslider are missing: this is because you were using some of the default images that were shipped with the theme, but at this point are no longer part of the theme folder, due to a change of how the Layerslider works. If that’s the case you should see this image which redirected you here:
However, you can import those images manually with the new layerslider. First of all, you need to download the zip file with the slider images.
Why Enfold – Small Header
Enfold – most beautiful theme ever
Enfold Reimagined
Once that is done, simply use the layerslider import tool to import the new version of those default sliders. The images will be added to your media library. You can now simply replace the missing image URLs with the images from your media library.
Resource
Contributed video: