标签： sliders

Conditional Script Loading

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 SliderStep 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 SliderStep 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.
IMPORTANT NOTE: On page speed test like Google Page Speed, loading scripts on all pages can result in Render Blocking errors. Using the above option will reduce those errors on pages that do not have a Layer or Revolution Slider. However, using these options can cause other conflicts. If you see issues, it is recommended to keep them on.

Purchase Codes For Plugins Bundled With Avada

When purchasing Avada, you』ll be provided with a unique Purchase Code that you can use to receive auto-updates, theme support and more for the Avada theme. The purchase code you receive can only be used for the Avada theme, not for the bundled 3rd party plugins.
The 3rd party premium plugins that come bundled with Avada can still be used as the plugin advertises, however since they are bundled with the theme, 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.
The Avada purchase code cannot be used to register Slider Revolution or Layer SliderYou 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 within the theme.
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.
IMPORTANT NOTE: As of Avada 5.4.1, 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.Purchase a license for Slider Revolution or Layer SliderAs 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.
Purchase Slider Revolution Plugin For Auto Updates And Plugin Author Support*Purchase Layer Slider Plugin For Auto Updates And Plugin Author Support** 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.

Slider Position

Assigning a slider via Fusion Page Options versus using a Slider Shortcode will place the slider in a different position on the page. In addition, Avada offers an option to position an assigned slider via Fusion Page Options either above or below the header, and the header can be set to be transparent. You can also set a global position for Sliders in Fusion Theme Options.
Slider Positioned Above or Below HeaderYou can choose to have the slider sit above the header, or below the header. This option is called 『Slider Position』 and can be found in Fusion Themes Options and Fusion Page Options. To set it globally for all sliders, use the Fusion Theme Options. If you』d like to set individual slider positions for each page or post, then use the Fusion Page Options. Continue reading below for more in depth information.
Slider Position Assigned Via Fusion Theme OptionsAll assigned sliders on pages or posts will always follow the Slider Position set in Fusion Theme Options located under the Avada > Theme Options > Header > Header Content sub-panel. To set the Slider Position individually for each page or post, you can do so using the Fusion Page Options located on each page or post you create.
Slider Position Assigned Via Fusion Page OptionsBy default, when you assign a slider via Fusion Page Options, the slider position will always follow the position set in Fusion Theme Options. To change the slider position for individual pages or posts, find the 『Slider Position』 option under the Fusion Page Options > Sliders and choose a different setting other than Default.
Slider Element Added To Page/Post ContentWhen adding a Slider Element to a page or post, the slider will be positioned in your page/post content wherever it is added to a column or container using the Fusion Builder. This is best for when you want the slider further down the page or surrounded by content. If you place the Slider Element at the top of the post content field, it will have the page content top padding added to it, which is set to 55px by default. The page content top padding can be adjusted globally in Fusion Theme Options or individually in the Fusion Page Options box.
Slider Position When Using A Transparent HeaderWhen assigning a slider to a page or post via the Fusion Page Options box, you can choose to make your header transparent. If you add any value of opacity to your header, the slider will be moved up to the top most part of the page and will be positioned behind the header. Most likely, you may need to adjust your slider height to accommodate the transparent header. This option works best with our default Header Layout #1. Read more about Header Transparency here.

Other Slider Types

Aside from our amazing Premium Sliders, Avada also features various other slider types such as the 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.
Learn About Our Premium SlidersOverview
Slider Element
Post Slider ElementPortfolio & Blog Post SlidersImage Carousel ElementWooCommerce Featured Products ElementWooCommerce Products Carousel ElementSlider ElementOur 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.
Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Insert a Container and select your desired column layout.
Step 3 – Click the 『+ Element』 section to bring up the Elements window. Locate the 『Slider』 element and click it to open the options window.
Step 4 – On the right side of the element, you』ll see parent settings which affect the entire element. On the left side, you』ll see individual slide items. To edit a slide, click the 『Edit Item』 icon on the slide you』d like to edit.
Step 5 – To add a new slide, click the 『+ Slide』 button.
Step 6 – You can duplicate existing slide items by clicking the 『Clone Item』 icon. Also, you can re-arrange them dragging them into place.
Step 7 – After adding a new slide item, select its 『Slide Type』 to determine if the slide is an Image Slide or a Video Slide. Once you』re done editing the slide, click 『Save』 to save your changes.
Step 8 – Once you』re finished adding slides and configuring the element, click 『Save』 to add it to the page.
Post Slider ElementIMPORTANT NOTE: Only posts with Featured Images will be displayed in the Post Slider.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. To view this element in action, visit our live demo here.
Post Slider Element LayoutsPost With Titles – Displays your post』s title over a featured image.Post With Excerpt & Titles – Displays post』s title and excerpt over a featured image.Attachments (Images Only) – Displays images uploaded to page or post.How To Create A Post Slider ElementStep 1 – Create a new page or post, or edit an existing one.
Step 2 – Insert a Container and select your desired column layout.
Step 3 – Click the 『+ Element』 section to bring up the Elements window. Locate the 『Post Slider』 element and click it to open the options window.
Step 3 – Configure your settings to your preference. You can configure the element』s layout, which category to display, or how many slides to display.
Step 4 – Once done, click the 『Save』 button.
Portfolio and Blog Post SlidersPortfolio 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.
View Information About Portfolio Post SliderImage Carousel ElementIMPORTANT NOTE: If you have the Image Lightbox option enabled, you cannot link the image to another website. You must place your image』s URL in the Image Website Link field, instead.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 view the Image Carousel and it』s many uses, please view the element demo page.
Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Insert a Container and select your desired column layout.
Step 3 – Click the 『+ Element』 section to bring up the Elements window. Locate the 『Image Carousel』 element and click it to open the options window.
Step 4 – On the right side of the element, you』ll see the parent settings which affect the entire element. On the left side, you』ll see the individual slide items. To edit a slide, click the 『Edit Item』 icon on the slide you』d like to edit.
Step 5 – To add a new Image slide, click the 『+ Image』 button.
Step 6 – You can duplicate existing slide items by clicking the 『Clone Item』 icon. Also, you can re-arrange them dragging them into place.
Step 7 – Once you』re done adding slides and configuring the element, click 『Save』 to add it to the page.
WooCommerce Featured Products Shortcode ElementThe 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 view the WooCommerce Featured Products Slider, please view our live demo by following this link.
IMPORTANT NOTE: To set a product as 『Featured』, navigate to the 『Products』 tab on your WP Admin Sidebar and click the 『Star』 icon.Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Insert a Container and select your desired column layout.
Step 3 – Click the 『+ Element』 section to bring up the Elements window. Locate the 『Woo Featured』 element and click it to open the options window. Configure the shortcode element to your preference.
Step 4 – Once done, click 『Save』 to add it to the page.
WooCommerce Products Carousel ElementAnother 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.
Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Insert a Container and select your desired column layout.
Step 3 – Click the 『+ Element』 section to bring up the Elements window. Locate the 『Woo Carousel』 element and click it to open the options window. Configure the shortcode element to your preference.
Step 4 – Once done, click 『Save』 to add it to the page.

How To Use Elastic Slider With Avada

Avada includes the stylish Elastic Slider. This slider is a great way to create beautiful slideshows with stylish captions that have simple animations. Its fully responsive and can be full width or can have a custom width and height set. Users can also customize other settings on the Elastic Slider tab in the Avada Global Options panel.
How To Create A New Elastic SliderStep 1 – Click on the Elastic Slider sidebar item. (If you can』t see this, ensure Elastic Slider is enable in the Global Options > Advanced section)
Step 2 – Click the Add New button at the top and enter a name for the slide.
Step 3 – Find the Elastic Slide Options box where you set your slide Title and Caption.
Step 4 – To set your image, click on the 「Set Featured Image」 link in the Featured Image box and choose an image from your media library.
Step 5 – Then add the slide to a 「Group」. Click on the empty field and enter a Group name then click 「Add」.
Step 6 – Save the slide by clicking 「Publish」. Repeat process to add more slides, be sure to add the same Group name to your slides if you want them all be in one set. You can manage your Groups by clicking on 「Groups」 in the left sidebar under the Elastic Slider menu item.
Elastic Slider Avada Global OptionsThe Elastic Slider has its own tab in Avada Global Options. Navigate to Avada > Options and click on the Elastic Slider tab to set custom settings such as; width, height, animation, font size, color, etc. All of it is controlled in Avada Global Options. You can create as many elastic sliders you want. Simply create a new 「Group」 of slides for each slider.
Here is a screenshot that shows you the various areas of the slider creation page described above.

How To Use LayerSlider With Avada

Avada includes the popular LayerSlider by Kreatura. It is slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects, even from your WordPress posts and pages. We cannot cover everything here but we』ve outlined how to setup a slider and add slides to it.
OverviewPlugin UpdatesResourcesHow To Create A New LayerSliderHow To Add Slides To Your SliderLayerSlider Interface OverviewPlugin UpdatesThe LayerSlider plugin is an Avada bundled plugin and as of Avada 5.4.1, it can be updated independently, outside of an Avada theme update. The update notification will be visible and can be accessed via the Avada > Plugins section.
The current version of the LayerSlider is 7.0.7
ResourcesLayerSlider DocumentationSlider Import/Export InstructionsInstalling The LayerSliderHow To Create A New LayerSliderStep 1 – Click on 『the LayerSlider』 tab on your WP Admin panel, then click the 『Add New』 button on the top of the page, give the slider a name, then click 『Add Slider』 to add it to the list.
Step 2 – The 『Slider Settings』 tab will open and allow you to set the general settings for your slider such as the width, height, responsive, full width, and more. Please Check out each tab.
Step 3 – On the Appearance tab there is a 『Skin』 field. There are several to choose from including our own Avada skin which is called Avada.
Step 4 – Once you are done, click 『Save Changes』 to save the slider. Next you can add slides, see the information below.
IMPORTANT NOTE: You can get Kreatura』s sample sliders by clicking the 『Import Sample Sliders』 button next to the 『Add New』 button. It』s a good way to learn and see the different types of settings.How To Add Slides To Your SliderStep 1 – Open the Slider you』d like to add slides to, then click on the 『Slides』 tab at the top of the page.
Step 2 – Slide #1 will already be created. Add a background image for the slide, set thumbnails, transitions, links and more in the Slide Options box above the Slider Preview window.
Step 3 – Each slide you create can have multiple layers added to it. The layers show up below the slider preview window. Click 『Add New』 to create a new layer. An editing section will display once clicked.
Step 4 – The layer editing section has 4 tabs; Content, Transition, Link & Attributes, and Styles. Content tab is where you add your content, Transition tab is where you set all the timings and animations, Link & Attributes tab is where you can set the content to link and add custom id』s or classes. Finally, the Styles tab is where you set custom styles for your Slider.
Step 5 – Click on the Content Tab and enter your text, image or video or custom HTML content. Then set your transitions, links, styles and attributes if needed.
Step 6 – Click the 『Enter Preview』 button to view a preview of the slider and layers.
Step 7 – When finished, click the 『Save Changes』 to save it.
Step 8 – Add more slides by clicking the 『+』 icon.
LayerSlider Interface Overview

How To Use Slider Revolution With Avada

Avada includes the very popular Slider Revolution by ThemePunch. Slider Revolution creates beautifully animated sliders that are 100% responsive and have some amazing options. We cannot possibly cover everything here, but in this document we outline how to setup a slider and how to add slides to it.
Slider Revolution recently introduced a major update, in Version 6, with major changes to the interface and functionality. Please see the ThemePunch Support Center for detailed documentation and support.
OverviewPlugin UpdatesResourcesHow To Create A New Slider Revolution SliderSlider Revolution Interface OverviewSlider Revolution Mobile Padding ClassPlugin UpdatesThe Slider Revolution plugin is a Premium Avada bundled plugin, and as of Avada 5.4.1, it can be updated independently outside of an Avada theme update. The update notification will be visible and can be accessed via the Avada > Plugins page.
The current version of the Slider Revolution is 6.5.11
Resources
ThemePunch Support Center

How To Export / Import Your Slider Revolution Sliders

How To Ensure A Full Screen Slider Revolution Slider Is Completely Full Screen,How To Create A New Slider Revolution SliderWith Slider Revolution 6, ThemePunch have introduced a Slider Guide to help you with the initial setup of your sliders. To access this, click on the 『Slider Revolution』 link in your WP admin sidebar. Once on this tab, click on the 『New Blank Module』 button at the top of the Slider Revolution interface.
This brings up the Guide. Just click Start Guide to be lead through the creation process of a Slider Revolution Module.
Step 1 of the guide is to choose the type of module you want. You can choose from Slider, Scene and Carousel. There are descriptions below each one to assist you with your choice.
Step 2 of the guide is about the size of the module (slider). You have the option of Auto, Full-Width & Full-Screen. Descriptions below the choices explain the differenced to help you sleect the right one.
Step 3 of the guide is about respoinsive resizing, and there are three choices. The default is intelligent inheriting. If you are not sure what you want, check out the Support Center at ThemePunch, and remember you can always make changes to the settings later.
When you have clicked the 『Go to Editor』 button at the end of Step 3, you are taken to the editor interface, with a blank slide. From here you can begin to add your content.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Slider Revolution Interface Overview,Slider Revolution Mobile Padding ClassWhen using a 100% width slider, content may need to sit directly on the edge of the site width so it aligns with the logo and other page content. However on mobile devices, the logo and other page content has padding applied so it is not right on the screen edge. If you want your slider content to also have the same padding on mobile so it aligns with other content, you can use a custom class on each layer in your slider. Select any layer and insert
Copy to Clipboardfusion-revslider-mobile-padding 1fusion-revslider-mobile-paddingin the 『Classes』 field, located in the 『Attributes』 section of the Layer Options panel, as shown below.,Further InformationThe creation of Slider Revolution Sliders is a very large and detailed topic that is outside the scope of Avada support. Please see the ThemePunch Support Center, and check out their YouTube channel for a range of videos on Slider Revolution 6.
To get you started, here is one of their videos on the basics of slide creation.

Importing Prebuilt Website Sliders

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 Importing Prebuilt Avada Websites doc, or our How To Choose And Import An Avada Prebuilt Websites video.
Users can however, 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.

Slider Revolution – Details On How To Import / Export Slider Revolution Sliders

Layer Slider – Details On How To Import / Export LayerSlider Sliders

Fusion Slider – Details On How To Import / Export Fusion Sliders
Common Questions & IssuesSlider Alias or ID Not Found For Layer or Revolution SliderIf 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 ImagesThe 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.

How To Assign A Slider

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 Fusion Page Option, and second, you can insert the slider via our Fusion Page Builder using Builder elements. Read below for more information on each method.
Assign A Slider Via Fusion Page OptionsWhen assigning a Slider using the Fusion 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 Fusion 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 Fusion Sliders on mobile devices, there is a 『Slider Fallback Image』 field in the Fusion Page Options that lets you upload a Fallback Image which will override the slider on all responsive devices.
How To Assign A Slider Via The Fusion Page OptionsStep 1 – Locate the Fusion Page Options box below the WordPress Content Editor and select the 『Sliders』 tab.
Step 2 – Locate the 『Slider Type』 option and select your desired slider from the dropdown field. For example, Fusion Slider.
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 『Fusion Slider』, then select a name from the corresponding 『Select Fusion Slider』 field.
Step 4 – Once done, click 『Save Draft』 or 『Publish』.
Avada Slider ElementsWhen you assign a Slider Element to a page or post, via the Fusion 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.
Slider ElementsFusion Slider – Insert your Fusion Sliders into a page or post using the Fusion Slider Element.Layer Slider – Insert your Layer Sliders into a page or post using the Layer Slider Element.Revolution Slider – Insert your Revolution Sliders into a page or post using the Revolution Slider Element.How To Assign A Slider ElementStep 1 – Create a new page or post, or edit an existing one.
Step 2 – Click the 『Use Fusion Builder』 button to activate the Fusion Builder.
Step 3 – Insert a Container into the page and select your desired column layout.
Step 4 – Click the 『+ Element』 section to open the Elements window. Locate the Slider Element you』d like to add, then click it to open the options window. For example, the Fusion Slider Element.
Step 5 – Select the specific Slider you』d like to activate, from the dropdown field provided. For the Fusion Slider element, it』s called the 『Slider Name』 field; For Layer and Revolution Slider elements, it』s called the 『Select Slider』 field.
Step 6 – Once you』ve determined which Slider you』d like to display, you can then start configuring the styling options to your liking.
Step 7 – Once done, click 『Save』 to add it to the page.

How To Use The Avada Slider

IMPORTANT NOTE: With the release of Avada 7.0, we have updated and renamed Fusion Slider to Avada Slider.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.
OverviewHow To Add An Avada SliderHow To Create An Avada Slider
How To Create An Avada Slider From Avada Live

Avada Slider Options
How To Create A New Avada Slide
Slide Options – Background Type

Slide Options – Video Options

Slide Options – Content Options
Slide Options – Link Options
Avada Slider Import, Export and General Options
How To Edit, Delete or Clone A Slide Or Slider
How To Import / Export Avada Slides & Sliders
Troubleshooting767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada
How To Add An Avada SliderThere 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. As of Avada 7.4, 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 SliderBefore 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 LiveAdding or creating a new Avada Slider from within Avada Live Builder, 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 OptionsName – 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.
IMPORTANT NOTE: When the Parallax Scrolling Effect option is enabled, the slider height you input will not be exact, due to negative margin which is based on the overall header size. For example, if you have a header size of 50px, and you』ve set your slider to have a height of 500px, then your slider will be 450px high when displayed on the front end of your site. Please take this into consideration.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: #fff. The default value is #fff.
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 SlideOnce 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
Image Slide – Enter the background image you』d like to display in the Featured Image box on the right hand sidebar.

Self Hosted Video Slide – An MP4 format video file is required for self hosted videos. It is recommended that it is in a 16:9 aspect ratio. Enter the URL path or browse for the file via the Media Library. WebM and OGV files are now optional, but can be added to improve browser compatibility. You』ll also want to insert a video preview image for devices and old browsers that do not support these video types.

YouTube Video Slide – Enter the YouTube video ID. For example, the Video ID for http://www.youtube.com/LOfeCR7KqUs is LOfeCR7KqUs. There are also settings to mute, autoplay, loop the video, hide the video controls add a color overlay to the video.
Vimeo Video Slide – Enter the Vimeo video ID. For example the Video ID for http://vimeo.com/75230326 is 75230326. There are also settings to mute, autoplay, loop the video and add a color overlay to the video.,Slide Options – Video OptionsSelf Hosted Video Options
Video MP4 Upload – Add your MP4 video file. This format must be included to render your video with cross-browser compatibility. WebM and OGV are optional. Using videos in a 16:9 aspect ratio is recommended.

Video WebM Upload – Add your WebM video file. This is optional, only MP4 is required to render your video with cross-browser compatibility. Using videos in a 16:9 aspect ratio is recommended.

Video OGV Upload – Add your OGV video file. This is optional, only MP4 is required to render your video with cross-browser compatibility. Using videos in a 16:9 aspect ratio is recommended.

Video Preview Image – IMPORTANT: This field must be used for self hosted videos. Self hosted videos do not work correctly on mobile devices and older browsers. The preview image will be seen in place of your video.

Video Color Overlay – Select a color to show over the video as an overlay. Hex color code, ex: #fff

Mute Video – Turn all sound off for the video.

Autoplay Video – Choose whether to autoplay the video or not when it loads.

Loop Video – Choose whether to loop the video or not.

Hide Video Controls – If this is set to yes, autoplay must be enabled, otherwise the video can』t play. For YouTube and Vimeo videos, in order to ensure the controls are always fully visible, the Video Display Mode should be set to 「contain」.
Note: For true background videos, ensure the last four options are set to Yes.
YouTube Video Options
YouTube Video ID – Enter just the Video ID part of the YouTube URL. For example the Video ID for https://www.youtube.com/watch?v=x3UjX7_Qvbc is x3UjX7_Qvbc

Video Aspect Ratio – The video will be resized to maintain this aspect ratio, this is to prevent the video from showing any black bars. Enter an aspect ratio here such as: 「16:9」, 「4:3」 or 「16:10」. The default is 「16:9」.

Video Display Mode – If set to cover, the video will fill the entire slider area. If set to contain, the video will display such that both its width and its height can fit inside the slider area.

Video Color Overlay – Select a color to show over the video as an overlay. Hex color code, ex: #fff

Mute Video – Turn all sound off for the video.

Autoplay Video – Choose whether to autoplay the video or not when it loads.

Loop Video – Choose whether to loop the video or not.

Hide Video Controls – If this is set to yes, autoplay must be enabled, otherwise the video can』t play. For YouTube and Vimeo videos, in order to ensure the controls are always fully visible, the Video Display Mode should be set to 「contain」.
Note: For true background videos, ensure the last four options are set to Yes.
Vimeo Video Options
Vimeo Video ID – For example the Video ID for http://vimeo.com/75230326 is 75230326

Video Aspect Ratio – The video will be resized to maintain this aspect ratio, this is to prevent the video from showing any black bars. Enter an aspect ratio here such as: 「16:9」, 「4:3」 or 「16:10」. The default is 「16:9」.

Video Display Mode – If set to cover, the video will fill the entire slider area. If set to contain, the video will display such that both its width and its height can fit inside the slider area.

Video Color Overlay – Select a color to show over the video as an overlay. Hex color code, ex: #fff

Mute Video – Turn all sound off for the video.

Autoplay Video – Choose whether to autoplay the video or not when it loads.

Loop Video – Choose whether to loop the video or not.,Slide Options – Content Options
Content Alignment – Select if the content is left, right or center aligned.

Heading Area – Enter the heading text that will display on your slider. You can also choose to insert HTML markup and Avada shortcodes, such as a separator, into the text field.
Title Size – Choose the title size you want to use. The size you choose will utilize the font family and letter spacing typography settings in Global Options for that specific size. Font size is set below. Default: H2Heading Font Size – Adjust the font size of the heading text by entering a numerical value. For example, 60.Heading Color – Select a color for the heading font by entering a hexadecimal code. For example, #000000.Heading Background – Choose to display a semi-transparent background behind the heading text. Choose between Yes or No.Heading Background Color – Select a color for the heading background by entering a hexadecimal code. For example, #000000.
Caption Area – Enter a text caption for your slide. You can also choose to insert HTML markup and Avada shortcodes, such as a separator, into the text field.

Caption Size – Choose the caption size you want to use. The size you choose will utilize the font family and letter spacing typography settings in Global Options for that specific size. Font size is set below. Default: H3.
Caption Font Size – Adjust the font size of the caption text by entering a numerical value. For example, 60.Caption Color – Select a color for the caption font by entering a hexadecimal code. For example, #000000.Caption Background – Choose to display a semi-transparent background behind the caption text. Choose between Yes or No.Caption Background Color – Select a color for the caption background by entering a hexadecimal code. For example, #000000.,Slide Options – Link Options
Button Link – Use one or two buttons. Each button has a text field with a full set of button shortcode options. Enter the settings for each button to display two buttons, or clear out one of the button fields to only show one button.
Full Slide Link – Enter a URL where your full slide background will link. You can also choose to open the link in a new window or not.,Avada Slider General Options and Import/ExportUnder 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 SliderStep 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 & SlidersStep 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.,TroubleshootingIf 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.