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.