Fusion Slider

11/06/2018

Fusion Slider is a beautifully simplistic slider with amazing flexibility that produces stunning results. This responsive slider gives you full control of the slider width and height so you can 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.

Click Here For The Fusion Sliders Section
Click Here For The Fusion Slides Section
Click Here For The Export, Import And General Options Section
Click Here To Watch The Fusion Slider Video Tutorial – In HD & Fullscreen

Fusion Sliders

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.

How To Create A New Fusion Slider

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.

Fusion Slider Options

Name - Illustrated as A. Allows you to set a name for your slider.

Shortcode - Illustrated as B. 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 - Illustrated as C. 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 - Illustrated as D. 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 - Illustrated as E. 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 - Illustrated as F. Choose from the dropdown if you want to display pagination circles or scroll down indicator.

Slider Indicator Color - Illustrated as G. Set a color for the slider indicator icon. Hex color code, ex: #fff. The default value is #fff.

Parallax Scrolling Effect - Illustrated as H. 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.

IMPORTANT NOTE: When this 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 side 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.

Display Navigation Arrows - Illustrated as I. Check this checkbox to display the navigation arrows on each side of the slider.

Navigation Box Size - Illustrated as J. Allows you to set a pixel value for the width and height of the navigation box. For example, 40px.

Navigation Arrow Size - Illustrated as K. Allows you to set a pixel value for the size of the navigation arrows. For example, 25px.

Autoplay - Illustrated as L. Check this checkbox to enable the autoplay feature on the slides.

Slide Loop - Illustrated as M. Check this checkbox to enable the loop feature and have your slides loop infinitely.

Order By - Illustrated as N. Controls how the slides should be ordered. Choose between Date, ID, Title, Modified, or Random.

Order - Illustrated as O. Controls the sorting order of the slides. Choose between Descending or Ascending.

Animation - Illustrated as P. Allows you to set an animation type for slide transitions. Choose between Fade or Slide.

Slideshow Speed - Illustrated as Q. 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 - Illustrated as R. 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 - Illustrated as S. 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 - Illustrated as T. 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.

Fusion Slides

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.

How To Create A New Fusion Slide

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.

Fusion 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 - MP4 and WedM files are required for self hosted videos along with hosting the video on a server. Enter the URL path for the MP4 and WebM files into their respective fields. OGV is optional. You'll want to insert a video preview image for devices and old browsers that do not support these video types. There are also settings to mute, autoplay, loop the video, hide the video controls add a color overlay to the video.
    • 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.

    Slider Content Settings

      • 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 Fusion shortcodes, such as a separator, into the text field.
      • Heading 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 hexcode. 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 hexcode. For example, #000000.
      • Caption - Enter a text caption for your slide. You can also choose to insert HTML markup and Fusion shortcodes, such as a separator, into the text field.
      • 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 hexcode. 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 hexcode. For example, #000000.

      Slide Link Settings

        • 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.

        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.

        Recent Posts

        Recent Tweets

        For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
        I Accept