Slider Element

11/03/2019

The Slider Element is a simple element that allows you to display multiple images, and/or videos, into your site content, that are fully responsive and come with several customization options. Read below to discover more about this useful visual element.

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

Slider With Images or Videos

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac nisl eget metus imperdiet venenatis non at nisi. Nam vitae risus neque, sed egestas sem. Suspendisse tristique, purus et ullamcorper tempor, purus enim scelerisque nisl.

  • Unlimited use per page
  • Many parameters to control content & slide
View more examples!

How To Use The Slider Element

The Slider Element allows you to add image and / or video sliders anywhere in your content.

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Slider’ element and click it to bring up its options window.

Step 4 – The options on the right hand side are Parent Options, and affect the whole slider. Before you begin, it’s a good idea to view the Element Demo page, to check out the different layouts and options on offer. The Parent options start with the Bulk Image Upload option, which allows you to add many images (slides) to your slider in one go. You can always add more later. You can then choose a hover type, and then you can add the dimensions you want the images to display at, in either pixels or percentage.

Step 5 – Once you have set all your Parent Options, you add Child Items on the left. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. This is where you add, and configure, the individual slides. The Slide Type option allows you to choose whether the slide shows an image or a video. If you choose video, you must add the Video Element or Video Embed Code into the field below. You can also enable Lightbox for the images in the Slider, but to do that, the full path of the image file must be added into the Full Image Link or External Link field. This can be a local or an external link. Finally, if you don’t enable Lightbox, there is an option for opening the image links in a new browser tab or the same one.

Step 6 – You can then duplicate existing slides to edit, or create new slides, by clicking on the Clone Item icon, or the + Slide button respectively.

Step 7 – Once you have completed adding your slides, click Save. You will be returned to the edit page. You can preview the page to view your slider, and you can always edit the element again to make changes.

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: Please note that the displayed options 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, and so the options screen may look somewhat different.

Parent Options

  • Bulk Image Upload – This option allows you to select multiple images at once and they will populate into individual items. It saves time instead of adding one image at a time.

  • Hover Type – Select the slider hover type. Choose from none, Zoom In, Zoom Out, or Lift Up.

  • Image Size Dimensions – Dimensions in percentage (%) or pixels (px). With the Slider Element, it’s good practice to use the same size images and orientations for best results.

  • Element Visibility – Allows you to choose which devices to display the element. Choose one or more from Mobile, Tablet, or Desktop. Each of the 3 sizes has a custom width setting on the Fusion Builder Elements tab in the Theme Options.

  • CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

  • CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

Add / Edit Settings

  • Add / Edit Items – This is where all your child element’s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.

  • Edit Item Icon – Allows you to edit an item.

  • Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.

  • Delete Item Icon –  Allows you to delete an item.

  • Re-order Feature –  Allows you to drag and drop the item to your desired order to rearrange them. A small thumbnail of the image is shown to assist you in this.

  • Add New Slider Button –  Allows you to add a new Slider.

View The Options Screen

Child Options

  • Slide Type – Select whether the slide is an Image, or a Video.

  • Image – Upload an image to display.

  • Video Element or Video Embed Code – Click the Youtube or Vimeo Element button, then enter your unique video ID, or just copy and paste your video embed code.

  • Full Image Link or External Link – Add the URL of where the image will link to. If the lightbox option is enabled, you have to add the full image link to show it in the lightbox.

  • Lightbox – Show image in lightbox. Lightbox must be enabled in Theme Options or the image will open up in the same tab by itself.

  • Link Target – Choose whether the slide opens in the same browser tab – _self, or in a new tab – _blank.

View The Options Screen

Global Options

There are no Global Options for the Slider Element.

Element Parameters

Copy to Clipboard

Parent Settings

  • hover_type – Choose from none, zoomin, zoomout, or liftup. Sets the hover type.
  • width – Accepts a pixel or percentage value. For example, 1px, or 50%. Set the image or video width. Leave blank for full width.
  • height – Accepts a pixel or percentage value. For example, 1px, or 50%. Set the image or video height. Leave blank for full width.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further CSS customization.
  • id – Add a custom id to the wrapping HTML element for further CSS customization.

Child Settings

    • type – Choose from video, or image. Sets the slide type.
    • link – The URL path where the image links to. For example, http://www.example.com/
    • lightbox – Choose from yes, or no. Enable or disable the lightbox.
    • link_target – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
    • custom content – Insert the image or video URL between the
      Copy to Clipboard

      tags.