How To Use Fusion Slider With Avada
The Fusion Slider is a beautiful and lean slider, developed especially for Avada, with amazing flexibility that 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. Create image and video slides with support for self-hosted videos, Youtube and Vimeo. Add title and subhead text along with buttons, and control various styles and settings. Read below for information on how to use the Fusion Slider.
The Fusion Slider consists of sliders and slides. You must first create a slider, then create slides and assign them to the slider. Any slide you create can be assigned to any slider. Continue reading below to learn about Fusion Sliders and Slides.
How To Create A New Fusion Slider
Before you can display your Fusion Slider on your site, you must first create a slider for your slides. In this section, we’ll be covering how to create a slider, the options you can use to customize it, and some important information.
Step 1 – Navigate to the Fusion Slider > Add or Edit Sliders tab on your WordPress admin panel.
Step 2 – Give your 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.
Step 4 – Under the ‘Slider Size’ option, you can enter your slider’s width and height.
Step 5 – 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 a fixed width.
Step 6 – 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.
Step 7 – 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 Fusion Slider Options section.
Step 8 – There are may 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 9 – Once you are finished customizing your slider, click the ‘Add Slider’ button at the very bottom to save your slider.
How To Create A Fusion Slider From Fusion Builder Live
In Fusion Builder Live, the new Front-End Editor, adding or creating a new Fusion Slider is very easy. As you mouse over the header, you will see a small panel of icons. If your page does not have an existing slider, you will find the Add Slider Icon in that panel, as seen below.
If the page does have a slider, instead there will 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.
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 a Fusion Slider link in the Important Note section. Click the Fusion 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.
Fusion 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. 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.
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.
Parallax Scrolling Effect – Check this checkbox to enable a parallax scrolling effect on your slider. This effect only works when assigning the slider in Fusion Page Options. This effect won’t work if you are using a Slider Shortcode.
Display Navigation Arrows – Check this checkbox to display the navigation arrows on each side of the slider.
Navigation Box Size – Allows you to set a pixel value for the width and height of the navigation box. For example, 40px.
Navigation Arrow Size – Allows you to set a pixel value for the size of the navigation arrows. For example, 25px.
Autoplay – Check this checkbox to enable the autoplay feature on the slides.
Slide Loop – Check this checkbox to enable the loop feature and have your slides loop infinitely.
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.
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.
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 Fusion Slide
Once you’ve created a Slider, you can now create Slides which you can assign to any existing Slider. Slides are where you create your and upload your content to be displayed on the Slider. In this section, we’ll be covering how to create slides, the options you can use to customize them, and some important information.
Step 1 – Navigate to the Fusion Slider > Add or Edit Slides tab on your WordPress admin panel.
Step 2 – Click the ‘Add New Slide’ button at the top of the page.
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.
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 Fusion 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 below.
Slide Options – Background Type
Slide Options – Video Options
Self Hosted Video Options
YouTube Video Options
Vimeo Video Options
Slide Options – Content Settings
Fusion Slider Import, Export and General Options
Under this section, we’ll be covering how to import or export Fusion Sliders, as well as how to edit, delete or clone a Fusion Slide or Slider. Continue reading below for detailed instructions for each of these processes.
How To Edit, Delete or Clone A Slide Or Slider
Step 1 – Navigate to the Fusion Slider > Add or Edit Sliders tab on your WordPress admin panel to access your sliders, or navigate to Fusion Slider > Add or Edit Slides to access your 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.
Step 5 – Alternatively, if you’re already editing a slide or slider, there will be a ‘Clone This Slide’ or ‘Clone This Slider’ button directly under the Title field.
How To Import / Export Fusion Slides & Sliders
Step 1 – Navigate to the Fusion Slider > Export / Import tab on your WordPress admin panel.
Step 2 – To export all your Fusion Slides and Sliders, simply click the ‘Export All Sliders’ button. Once you click this button, a file named fusion_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 Fusion Slides and Sliders, click the ‘Choose File’ button and select the .zip file that you received after exporting your Fusion 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 Fusion Slider tab on your WordPress admin panel to see your newly imported slides and sliders.