{"id":3770,"date":"2017-02-19T04:34:21","date_gmt":"2017-02-19T04:34:21","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=352"},"modified":"2018-09-09T09:58:05","modified_gmt":"2018-09-09T09:58:05","slug":"advanced-layerslider","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/advanced-layerslider\/","title":{"rendered":"Advanced Layerslider"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-30f502b1b980c5d93cfec828221ace08\">\n#top .av-special-heading.av-av_heading-30f502b1b980c5d93cfec828221ace08{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-30f502b1b980c5d93cfec828221ace08 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-30f502b1b980c5d93cfec828221ace08 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-30f502b1b980c5d93cfec828221ace08 av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >Layerslider<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-5ru72g-ab044a4af7bec173ffab6163c095ec80 hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5h2umg-b900f66250dcea49d09db3ff18f16684 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-5erd80-6e7f2c2ecef9c13c60f46526021701ba '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>You can display not only one Layerslider but multiple ones on every page. You&#8217;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.<\/p>\n<\/div><\/section>\n<div  class='hr av-5971sw-89532610ae3c73e34883827bde5b05f1 hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4zxqko-ed231215d083eea4a6c98496b387a750 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Code Snippet<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-6  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-4q5kc0-e85c7133cf41a0aaeed3047c7fd74fb4 hr-default  avia-builder-el-7  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4ky8i8-9007d0c346b3a6c88e575d3815b338f5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-42j4lc-9fa4f5fcd0a0f438e10887b870ff1972 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3u2yqw-10b1640d180706f6eb2a9332ba3556e7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-3okhoo-5ba77f06fccb4c93ef7de5a06b643668 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3lxryo-7d5b529b6377acfd6516d6d3780509b8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Using Google fonts in LayerSlider<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-caqjk-328df6f134d56c0ad9cebec7768f2202 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>One of the most common questions we get is how to add Google\u00a0fonts to LayerSlider.<\/p>\n<p>To add Google fonts go to the LayerSlider &gt; Options &gt; Google Fonts and search for the font.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5457\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/GoogleFonts.png\" alt=\"\" width=\"548\" height=\"660\" \/><\/p>\n<p>After searching and adding the Google font of your choice, &#8220;Save&#8221; the changes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5456\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/GFonts.png\" alt=\"\" width=\"625\" height=\"250\" \/><\/p>\n<p>To use the Google font in your slides goto LayerSlider &gt; Sliders &gt; Styles &gt; TEXT | FONT &amp; STYLE &gt; Family &gt; Select your font style and save changes \ud83d\ude42<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5458\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/SelectFonts.png\" alt=\"\" width=\"975\" height=\"610\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-35zm7k-2520ff9f6c71dd377173089d3c76b16a hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-30opiw-0d7061763769d9ad6157eef73f05ae08 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Video background<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2ww2jk-55f978b85c8207c2ada8855447f62d75 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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\u00a0the option &#8220;<strong>Use this video as slide background<\/strong>&#8220;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5463\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/YouTube.png\" alt=\"\" width=\"1110\" height=\"431\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-2on71k-68691a6faa68cb1cc607fb1df2ca98e3 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2mi9r4-3da73e95e00cf9bc8f48e24669019c59 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Responsive LayerSlider tweaks<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2fbfuo-8eb90f31244fd7f0eab1dd42cbff3f33 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To make responsive tweaks, the LayerSlider provides an option to change an element&#8217;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.<\/p>\n<p>To enable custom CSS class name support, go to <strong>Enfold &gt; Layout Builder<\/strong> and check the option &#8220;Show element options for developers&#8221;. Then using your custom class, add your CSS code in the enfold child theme <strong>style.css<\/strong> or in <strong>Enfold &gt; General Styling &gt; Quick CSS<\/strong><\/p>\n<pre>@media only screen and (max-width: 767px) {\r\n.custom-class {\r\n\r\n\/* YOUR STYLES HERE *\/\r\n\r\n}}<\/pre>\n<\/div><\/section>\n<div  class='hr av-27kuj4-60a4394e472242705e14d2e3b3d25106 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-22tyiw-7f7dff84c53821ad0ecc15a6b05ea1e9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to update LayerSlider<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1wnqiw-8d9c516f74b692da987b8328e3580521 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<\/div><\/section>\n<div  class='hr av-1pcgwg-311564a31beac2ba801bfc89e393ea6b hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1ii1rc-5a708b1baed2a992f9df3a3f04b627b8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Deactivate LayerSlider<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1flrwg-93ec9650848812af63ddfc14bb18caf3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The Enfold theme comes bundled with the LayerSlider plugin. If you don\u2019t want to use it with your site, you can remove its integration with the theme from the theme options.<\/p>\n<p>Go to <strong>Enfold &gt; Layout Builder &gt;\u00a0Integrated (Bundled) LayerSlider Plugin<\/strong><\/p>\n<p>If you are using a version older than 4.2.2 please add the code below to your functions.php file to deactivate.<\/p>\n<p>With a child theme, add this line to your functions.php file:<\/p>\n<pre>add_theme_support('deactivate_layerslider');<\/pre>\n<p>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\u2019s global variable. Look for<\/p>\n<pre>global $avia_config;<\/pre>\n<p>and one line after it add:<\/p>\n<pre>add_theme_support('deactivate_layerslider');<\/pre>\n<\/div><\/section>\n<div  class='hr av-17swsg-9b57e54bef8d1a304333ee3837624c9e hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-13rs94-c513090214c8e5f789a30e7076dd3649 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Manually importing missing Layerslider images of the old demo slides<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-uoh2o-4eaeb53a703e383c630b7cda9c22d7d0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If you have recently updated to Enfold 4.0 or higher and some of the\u00a0images 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&#8217;s the case you should see this image which redirected you here:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7319\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/missing.png\" alt=\"\" width=\"616\" height=\"200\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/missing.png 616w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/missing-300x97.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/missing-450x146.png 450w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/p>\n<p>However, you can import those images manually with the new layerslider. First of all, you need to\u00a0download the zip file with the slider images.<\/p>\n<p><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/09\/Why-Enfold-Small-Header.zip\" target=\"_blank\" rel=\"noopener\">Why Enfold &#8211; Small Header<\/a><br \/>\n<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/09\/Enfold-most-beautiful-theme-ever.zip\" target=\"_blank\" rel=\"noopener\">Enfold &#8211; most beautiful theme ever<\/a><br \/>\n<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/09\/Enfold-Reimagined.zip\" target=\"_blank\" rel=\"noopener\">Enfold Reimagined<\/a><\/p>\n<p>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.<\/p>\n<\/div><\/section>\n<div  class='hr av-2syj4-3ca7eba6951a82ad32083fbb983be0e5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-m3t6w-07e8eb2828a7c2452f8efff99abefc79 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-d3128-18841ff22c9ab9894fb49f41970ff618 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-8w8tk-527f0017c7f9f29cc6016c539ae563d9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=rownqV4Ar8I\"> Layer Slider Element Tutorial <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[2,8],"tags":[],"class_list":["post-3770","post","type-post","status-publish","format-standard","hentry","category-documentation","category-media-elements","documentation","media-elements"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/3770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=3770"}],"version-history":[{"count":3,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/3770\/revisions"}],"predecessor-version":[{"id":11103,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/3770\/revisions\/11103"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=3770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=3770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=3770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}