Avada Slider is our own beautiful and lean slider, developed especially for Avada. It has amazing flexibility and produces stunning results. The slider is 100% responsive, giving you full control over width and height to easily create fixed, full width or full-screen sliders. You can create both image and video slides with support for self-hosted videos, YouTube and Vimeo. You can add Title and Caption text, along with buttons, and control various styles and typography settings.
The Avada Slider consists of sliders and slides. The process is to first create a slider, and then create slides and assign them to the slider. Any slide you create can be assigned to any slider. The Slider itself is then assigned to a page, either from the specific Page Options, under the Slider tab, or directly in the page content using the Avada Slider Element.
Avada Slider is a simple and lightweight slider, and it’s not meant to compete with much more complex sliders like Slider Revolution or LayerSlider. Please follow the links to read the documentation on those if you have a more complex slider in mind. But for a simple, lightweight slider, Avada Slider is a great choice. Continue reading below to learn about how to use Avada Slider, or watch the video for a visual overview.
How To Add An Avada Slider
There are two ways to add an Avada Slider to your page. The first is through the Avada Page Options. With this method, you simply create your Slider first, and then go to the page options of the page you want the Slider to display on. On the Slider tab, you can select your chosen slider to display, as well as its position, and a possible fallback image. You can also choose whether to display the Slider on Desktop, Tablet or Mobile screens.
The other way to add an Avada Slider to your page is with the Avada Slider Element. With this method, you can add the Slider anywhere in your content, in any size Column. See the Avada Slider documentation for more information on that method. The rest of this document covers the process of creating both an Avada Slider, and the Sliders inside it.
How To Create A New Avada Slider
Before you can display an Avada Slider on your site, you must of course first create it. The first step is to create a slider to hold your slides. In this section, we’ll be covering how to create a slider, and the options you can use to customize it.
Step 1 – Navigate to the Avada > Sliders > from your WordPress admin panel.
Step 2 – Directly under the Add Slider section, give your new slider a name by entering it in the ‘Name’ field.
Step 3 – Each slider you make can be used as a shortcode in a page or post. Enter a unique shortcode name in the ‘Shortcode’ field. Make sure to only use lowercase letter, numbers and hyphens.
Step 4 – Under the ‘Slider Size’ option, you can enter your slider’s width and height. The width value can be a percentage or a pixel value, while the height value should be a pixel value. So, if you would like your slider to be full width of the browser window, then you can set your slider’s height to 100%. Otherwise, set it to any pixel value to display the slider at a fixed width.
Step 5 – If you would like your slider to be full screen, then you can check the ‘Full Screen Slider’ checkbox. This enables your slider to display 100% width and 100% height of the viewing area, and overrides the height value.
Step 6 – If you’d like your slider to have a parallax scrolling effect, then you can check the ‘Parallax Scrolling Effect’ checkbox. Please make sure to read the important information for this option below in the Avada Slider Options section.
Step 7 – There are many other options you can customize, such as the navigation options, autoplay, slide loop, animation, and the like. Please continue reading below for a description about each setting.
Step 8 – Once you are finished customizing your slider, click the ‘Add Slider’ button at the very bottom to save your slider.
How To Create An Avada Slider From Avada Live
Adding or creating a new Avada Slider from within Avada Live, is also very easy. As you mouse over the header area, you will see a small panel of icons.
Step 1 – Click on the Add Slider Icon in the Icon Panel in the Header. The Slider tab of the Page Options will open in the Sidebar.
Step 2 – Here you can select an existing slider to add to the page, or you can create a new one. For a completely new Slider, there will be an Avada Slider link in the Important Note section. Click the Avada Slider link and you will be taken to the New Slider page.
Step 3 – Follow the same steps as with the normal process to create a Slider, as listed above.
If the page already has a slider, there will instead be an icon panel in the middle of the slider itself, with options to Edit Slider Options, Edit Slider, or Remove Slider, also seen below.
Avada Slider Options
Name – Allows you to set a name for your slider.
Shortcode – Allows you to set a shortcode name that can be used in the post content area. This is usually all lowercase and contains only letters, numbers, and hyphens.
Slider Size – Allows you to set a width and height value for your slider. The width value can be a percentage or a pixel value, while the height value should be a pixel value. You can set your slider width to 100% to display it as full width on your site.
Slider Content Max Width – Allows you to set a maximum width value for your slider’s content. For example, 850px. Leave blank to follow your site width value.
Full Screen Slider – You can check this checkbox to display your slider as full screen. Your slider will be 100% width and 100% height of your screen.
Parallax Scrolling Effect – Check this checkbox to enable a parallax scrolling effect on your slider. This effect only works when assigning the slider in Avada Page Options. This effect won’t work if you are using a Slider Shortcode.
Slider Indicator – Choose from the dropdown if you want to display pagination circles or scroll down indicator.
Slider Indicator Color – Set a color for the slider indicator icon. Hex color code, ex: var(–awb-color1). The default value is var(–awb-color1).
Display Navigation Arrows – Check this checkbox to display the navigation arrows on each side of the slider.
Navigation Arrow Size – Allows you to set a pixel value for the size of the navigation arrows. For example, 25px.
Navigation Box Size – Allows you to set a pixel value for the width and height of the navigation box. For example, 40px.
Slideshow Speed – Allows you to set a numerical value that controls the speed of your slideshow. For example, 1000. 1000 is equal to 1 second.
Slide Loop – Check this checkbox to enable the loop feature and have your slides loop infinitely.
Autoplay – Check this checkbox to enable the autoplay feature on the slides.
Order By – Controls how the slides should be ordered. Choose between Date, ID, Title, Modified, or Random.
Order – Controls the sorting order of the slides. Choose between Descending or Ascending.
Animation – Allows you to set an animation type for slide transitions. Choose between Fade or Slide.
Animation Speed – Allows you to set a numerical value that controls the speed of the slide transition. For example, 1000. 1000 is equal to 1 second.
Responsive Typography Sensitivity – Allows you to set the responsive typography sensitivity on the slider. To learn more about this, please read our Responsive Headings article.
Minimum Font Size Factor – Allows you to set the minimum distance between headings and body text on the slider. To learn more about this, please read our Responsive Headings article.
How To Create A New Avada Slide
Once you’ve created a Slider, you now create a slide, or slides, which you can assign to any existing Slider. Slides are what hold the content to be displayed on the Slider. In this section, we’ll be covering how to create slides, and the options you can use to customize them.
Step 1 – From the Avada Dashboard, navigate to Sliders > Slides. Alternatively, from the Sliders page, there is a link to the Slides page just under the page heading.
Step 2 – Click the ‘Add New Slide’ button just under the heading area.
Step 3 – Once you create a new Slide, don’t forget to give it a name.
Step 4 – Choose what Background Type you’d like to use. You can choose from Image, Self-Hosted Video, YouTube or Vimeo. Read more about each Background Type below. Depending on which type you select, there will be various options to choose.
Step 5 – Customize the Slider Content settings. Enter headings, captions, buttons and more. Read more about the Slider Content settings below.
Step 6 – Customize the Slide Link Settings. Choose to link a button, or the full slide. Read more about the Slider Content settings below.
Step 7 – To assign the slide to a slider, select the slider name in the Avada Sliders option box in the right sidebar. Any slide you create can be assigned to any slider.
Step 8 – When finished, click the ‘Publish’ button to save the slide.
See a visual representation of the Add Slide interface below.
Slide Options – Background Type
Slide Options – Video Options
Self Hosted Video Options
YouTube Video Options
Vimeo Video Options
Slide Options – Content Options
Slide Options – Link Options
Avada Slider General Options and Import/Export
Under this section, we’ll be covering how to edit, delete or clone an Avada Slide or Slider, as well as how to import or export Avada Sliders. Continue reading below for detailed instructions for each of these processes.
How To Edit, Delete or Clone A Slide Or Slider
Step 1 – From the Avada Dashboard, navigate to Sliders > Sliders or Sliders > Slides, to access your sliders or slides.
Step 2 – On these pages, you will see a list of all your existing slides or sliders. Hover over the slide or slider you’d like to customize, and a set of options will appear.
Step 3 – These options are Edit, Quick Edit, Delete or Clone. Edit allows you to edit the slide or slider, Quick Edit allows you quickly edit important options without leaving the page, Delete allows you to delete the slide or slider, and Clone allows you to duplicate the slide or slider.
Step 4 – Simply click on the specific action you’d like to do.
Alternatively, if you’re already editing a slider or a slide, there will be a ‘Clone This Slider’ or ‘Clone This Slide’ button at the top of the Edit Slider area, or directly under the Slide Title, as seen below.
How To Import / Export Avada Slides & Sliders
Step 1 – From the Avada Dashboard, navigate to Sliders > Export / Import Sliders.
Step 2 – To export all your Avada Slides and Sliders, simply click the ‘Export All Sliders’ button. Once you click this button, a file named avada_slider.zip will be downloaded. This file contains all your slide images, a settings.json file, and a sliders.xml file.
Step 3 – To upload all your Avada Slides and Sliders, click the ‘Choose File’ button found under Import, and select the .zip file that you received after exporting your Avada Sliders. Once you have the correct file chosen, click the ‘Upload File and Import’ button.
Step 4 – Wait until the import is finished, then go to the Avada > Sliders page from your WordPress Dashboard to see your newly imported slider and slides.
Troubleshooting
If you can’t see the Sliders menu in the Avada Dashboard, this is because you don’t have Avada Sliders enabled. To do this, simply head to Avada > Options > Advanced > Post Types, and ensure that the Avada Slider option is set to On. If it is Off, change it to On, save the options, and then refresh the page. Now you will see the Sliders Menu on the Avada Dashboard.
If you have the bundled Premium Slider Plugin, Layer Slider, activated on your site, you will have the Layer Slider Element available through the Avada Builder. This very simple Element has only one purpose, and that is to enable you to add a Layer Slider slider anywhere in your content, and not be limited to above or below the header, as is the case when adding them through the Avada Page Options.
Read on to see the options for this simple helper Element, and watch the video below for a visual overview.
Layer Slider Element Options
Select Slider – As you can see below, this Element has only one option, and that is to choose the Slider you wish to show. The Slider will interact with the column and container it is placed in, so if you place it in a 1/2 Column, it will only fill that area.
Avada bundled plugins can be updated independently and outside of an Avada update. The update notification will be visible and can be accessed via the Avada > Plugins section.
Useful Links & Resources
There are extensive options when creating sliders with Layer Slider. Avail yourself of the plugin documentation below.
If you have the bundled Premium Slider Plugin, Slider Revolution, activated on you site, you will have the Slider Revolution Element available through the Avada Builder. This very simple Element has only one purpose, and that is to enable you to add a Slider Revolution slider, anywhere in your content, and not be limited to above or below the header, as is the case when adding them through the Avada Page Options.
Slider Revolution Element Options
Select Slider – As you can see, the Element has only one option, and that is to choose the Slider you wish to show. The Slider will interact with the column and container it is placed in, so if you place it in a 1/2 Column, it will only fill that area.
Avada bundled plugins can be updated independently and outside of an Avada theme update. The update notification will be visible and can be accessed via the Avada > Plugins section.
Useful Links & Resources
There are extensive options when creating sliders with Slider Revolution. Avail yourself of the plugin documentation below.
The Avada Slider Element is a simple helper Element, to allow you to add an Avada Slider, not just above or below the Header, as you can already do with the Avada Page Options, but anywhere into your content. Read more about this handy Element below, and watch the video for a visual overview.
How To Use The Avada Slider Element
The Avada Slider Element simply allows you to place Avada sliders anywhere on your site. First, create your Avada Slider, and add your slides at Avada > Sliders. Then, just add the Element to your desired Column.
Once the Element has loaded, you simply select your slider from the drop-down list in the Element options panel. The only other options are a couple of Height options, and the visibility, CSS Class, and ID field options.
Read below for a description of all element options.
Element Options
Note: The displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, so the options screen may look somewhat different.
Useful Links & Resources
If you have the Layer or Revolution Slider installed, their scripts will load on each and every page of your site, even if the slider is not assigned to one of those pages. This is the default behavior of both of these sliders, and is not related to the theme. The good news is that both of them offer a way to only load the scripts on pages that have the slider on them. Continue reading below to learn how to set this feature up.
How To Configure The Revolution Slider
Step 1 – Go to the Revolution Slider Dashboard from the link in your admin sidebar.
Step 2 – Along the top, you will see a menu. Click on Globals.
Step 3 – A dialog will open. Switch the ‘Include Libraries Globally’ option off. In the following option, you can also choose to manually add which pages to include RevSlider libraries.
Step 4 – Click the Update button to save all your changes.
How To Configure The Layer Slider
Step 1 – Go to the LayerSlider WP tab in your admin sidebar.
Step 2 – Expand the ‘Troubleshooting & Advanced Settings’ section.
Step 3 – Switch the ‘Conditional Script Loading’ option on.
Step 4 – Click the Save Changes button to save all your changes.
When purchasing Avada, you’ll be provided with a unique Purchase Code that you can use to receive auto-updates, support and more. The purchase code you receive can only be used for Avada, not for the bundled 3rd party plugins.
The 3rd party premium plugins that come bundled with Avada can still be used as advertised, however as they are bundled with Avada, they can only be used on your Avada site, and do not come with their own individual purchase code that allows you to receive premium support/features from the individual plugin author. We (ThemeFusion) are the ones to provide support for plugins we bundle with Avada.
Slider Revolution or Layer Slider Purchase Codes
You can only register the Layer Slider & Slider Revolution plugins if you have purchased them individually from CodeCanyon.
Although the status of the plugins state that the site is not authorized to receive updates, this is no cause for alarm. Shortly after any of the bundled premium plugins are updated, we provide the update directly from the Avada > Plugins page.
Below are the various areas you will see these messages. They can be ignored unless you wish to purchase the plugins individually for their own auto updates and premium author support.
Purchase a license for Slider Revolution or Layer Slider
As explained above, you do receive both Layer Slider and Slider Revolution with your Avada purchase, and you are allowed to use both on your Avada site. However, both of these plugin creators offer auto updates, premium support, premium slider imports and more if you buy it directly from them. These features are not available when you buy a theme that bundles the plugins, to get them you must buy their plugins separately which gives you their individual purchase code.
* Your purchase of Avada includes a copy of Slider Revolution and Layer Slider. However, if you wish to receive auto updates, premium features and plugin support from the individual plugin authors, it requires a separate purchase of their plugin.
Aside from the included Premium Sliders, Avada also features various other slider types such as the Avada Slider Element, Post Slider Element, Portfolio and Blog Post Slider, Image Carousels, WooCommerce Featured Products Slider, and finally, the WooCommerce Products Slider. Continue reading below to learn more about our other Slider types. If you’d like to learn about our Premium Sliders, please follow the link below.
Avada Slider Element
The Avada Slider Element is ideal for users who prefer a simpler, and more basic slider to showcase their website’s images. This element makes uploading images and videos slides simple and easy.
To start, add the Element into your desired Column.
There are parent settings, which affect the entire element, and also individual slide items. To edit a slide, click the ‘Edit Item’ icon on the slide you’d like to edit. To add a new slide, click the ‘+ Slide’ button.
You can duplicate existing slide items by clicking the ‘Clone Item’ icon. Also, you can re-arrange them by dragging them into place. After adding a new slide item, select its ‘Slide Type’ to determine if the slide is an Image Slide or a Video Slide, and then add your content. Once you’re done editing the slide, click ‘Save’ to save your changes.
Post Slider Element
Avada’s Post Slider Element can be set to automatically pull your blog posts, titles and excerpts into a sleek and modern slideshow. It includes configuration options such as layout, categories, etc.
Post Slider Element Layouts
To start, add the Element into your desired Column. Configure your settings to your preference. You can configure the element’s layout, which category to display, or how many slides to display.
Portfolio and Blog Post Sliders
Portfolio and Blog Post Sliders aren’t elements, they’re simply pre-set Post Sliders created by adding featured images to a blog or a portfolio post.
Image Carousel Element
Avada’s Image Carousel Element can be used to conveniently showcase any type of image. Each image can have a custom link or open in a lightbox.
To start, add the Element into your desired Column.
There are parent settings, which affect the entire element, and also individual slide items. To edit a slide, click the ‘Edit Item’ icon on the slide you’d like to edit. To add a new slide, click the ‘+ Slide’ button.
To add a new Image slide, click the ‘+ Image’ button. You can duplicate existing slide items by clicking the ‘Clone Item’ icon. Also, you can re-arrange them by dragging them into place.
WooCommerce Featured Products Shortcode Element
The WooCommerce plugin provides a WooCommerce Featured Products element that automatically pulls your featured products from WooCommerce. This Slider features a beautiful design that will surely grab your customer’s attention.
To start, add the Element into your desired Column. Configure the shortcode element to your preferences.
WooCommerce Products Carousel Element
Another feature that the WooCommerce plugin provides is the WooCommerce Products Carousel Element. This Carousel allows you to display your products neatly. You have the option to show only one category, a combination of them, or to show all of them. You can also choose to show or hide information such as category, price and buttons.
To start, add the Element into your desired Column. Configure the shortcode element to your preferences.
Revolution Slider, which comes bundles with Avada Website Builder, offers a full range of sliders, including a very nice full screen slider. A Full screen slider will always take up 100% width and 100% height of the viewable area. There are two different situations that will require two different settings. To make a full screen slider for each situation, please see below.
Full Screen Revolution Slider With Normal Header Above Slider
If you’re using a traditional opaque header above the slider, it’s important that you place .fusion-header-wrapper in the slider general options. The field you need to place the header wrapper class is called the ‘by container’ field, and can be found in the Layout > Decrease Container Height section of the Module General Options, as seen below. Doing this will allow the slider to take up the full width/height of the screen while still showing the header.
Full Screen Revolution Slider With Transparent Header or Header Below Slider
If you’re using a transparent header or a header below the slider, you do not need to put anything in the Offset Containers field. Please leave that field blank.
Slider Creation Process
The creation of Slider Revolution Sliders is a very large topic that is largely outside the scope of Avada support. Please see our Slider Revolution document for an overview of the topic, or for more detailed information and support, visit the ThemePunch Support Center, and check out their YouTube channel for a range of videos on Slider Revolution 6.
Avada includes various sliders in the individual prebuilt websites. When you import a full prebuilt websites, sliders used in that website will import, as long as you have the slider plugins activated before you import. For more information on importing prebuilt websites, see our How To Import A Prebuilt Avada Website doc, or our How To Choose And Import An Avada Prebuilt Website video.
Users can also import / export individual sliders if they wish. Each slider has its own method of importing, so follow the links for the slider you wish to know about.
Common Questions & Issues
Slider Alias or ID Not Found For Layer or Revolution Slider
If you already have sliders made, or something goes wrong during the import due to low server memory, its possible that our demo sliders may not be applied to the pages. You may see an error such as Revolution Slider Error: Slider with alias Avada_Full_Width not found or LayerSlider cannot be found. Sliders are applied by the Slider ID. Each slider gets its own unique ID and they are given in numerical order. If you open up a page after importing the content, and you see an error like that, you only need to edit the page and assign the slider to the page. To verify you have the sliders, go to the Layer or Revolution Slider section of your admin to see them listed. If you do not see them, then you can import the sliders separately.
Slider Images
The demo sliders are mainly useful to see our settings and see how we built the slides. You need to replace the images with your own because the images are not licensed for your usage. Its very important that you replace each image with your own, the slider may not work if you miss one image so be careful when using these. Check each and every sub layer to ensure it does not have a missing image.
There are two methods you can use to assign a slider to a page. You can assign a slider to a page using the Avada Page Options, and second, you can insert the slider through the Avada Builder using the various Slider Builder Elements. Read below for more information on each method.
Assign A Slider Via Avada Page Options
When assigning a Slider using the Avada Page Options, the Slider will always be displayed directly below the main menu as this is the default setting. This ensures that the Slider isn’t affected when adjusting your sites Page’s Top Padding.
By default, all slider types have the option to choose the position of the slider – Default / Below / Above. The slider type you choose will determine what Avada Page Options are available to configure for the slider; For example: The Revolution Slider has the option to Enable / Disable Avada styles, the other slider choices do not have this option, etc.
For Revolution, Layer, Elastic and Avada Sliders on mobile devices, there is a ‘Slider Fallback Image’ field in the Avada Page Options that lets you upload a Fallback Image which will override the slider on all responsive devices.
Step 1 – Head to the Avada Page Options and select the ‘Sliders’ tab.
Step 2 – Locate the ‘Slider Type’ option and select your desired slider from the dropdown field, for example, Avada Slider. This field will only display Slider types that are activated.
Step 3 – Once you’ve selected a slider, the options relating to that slider type will be visible. Select the name of the slider you’d like to display under the corresponding dropdown field. If you select ‘Avada Slider’, then select a name from the corresponding ‘Select Avada Slider’ field.
Step 4 – Remember to save your changes.
Add a Slider via Avada builder
To add a Slider to normal page content via the Avada Builder, you use thenappropriate eleent for the slider. There is the Avada Slider Element, the Slider Revolution Element and the Layer Slider Element. When you assign a Slider Element to a page or post, via the Avada Builder, it’ll be treated as a normal element. You can add it to Columns, save it as a Custom Content Template etc. When added to a page, adjusting your Page’s Top and Bottom Padding will affect the Slider. Lastly, because it’s inserted using an element, you can also set it’s visibility settings for mobile, tablet and desktop devices.