How To Use The 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.

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.

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.

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.

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.