Media Slider Element

06/08/2020

The Media Slider Element is a simple element that allows you to display multiple images, and/or videos, into your site content. Read below to discover more about this useful visual element.

  • Man Drawing
  • 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
For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept
View Element Demo Page!

How To Use The Media Slider Element

The Media 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 ‘Media 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 media slider in one go. You can always add more later. You can then choose from a range of options including margin, alignment, autoplay, smooth height, and more. You can even 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 Media 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.

  • Margin – Enter values including any valid CSS unit, ex: 4%.

  • Alignment – Select the slider’s alignment. Choose from Text Flow, Left, Center, or Right.
  • Autoplay – Turn on to autoplay the slideshows.

  • Smooth Height – Turn on to enable smooth height on slideshows when using images with different heights.

  • Slideshow Speed – Controls the speed of slideshows for the slider element. ex: 1000 = 1 second.

  • 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 Add YouTube Video or Add Vimeo Video, 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 Media Slider Element.