(V5) Layer Sliders setup Print

Layer Sliders allows you to create unlimited sliders (slideshows) to place anywhere on your site. No coding is required, although you can style a slider using CSS to create your own unique look.

Here is a tutorial about how to build a powerful custom slideshow:

Activate and use Layer Sliders

1. Navigate to Design > Blocks and find Layer Sliders.
2. Activate it by clicking the relevant button on the right.
3. Click the edit button.

Manage Slider Groups - Slider Group Management

In Layer Sliders, click on the Manage Slider Groups tab. In this tab, you can create a slider group that you can use to add somewhere on your site. You can create more than one.

Make sure to enter a Slider Group Title. After entering the information in the fields, click the Save & Edit button on top. You will then find extra buttons. To be able to enter and configure that slider group in order to set up the slider the way you want, click on Manage Slides. You can also export this slider group and slides, preview the slider, and delete this slider group.

In summary, you have these slider groups and you can create as many as you want and add them in multiple locations on your website. Every single group forms a slideshow and includes its own images, text, video, layout, and so on. You can add this group to a certain section(s) on your website using the Manage Blocks tab and the Layouts Builder (more on this below) that is found in Design > Theme Settings > Layouts Builder.

Here is a list of the fields and a short description of each one:

• Slider Group Title: Add a slider title (important and must be present).
• Delay: Set the delay duration (in milliseconds) of the slider. This is the default time for each slide before it switches to the next slide. You can modify that per slide once you enter the Manage Slides interface.
• Full Width Mode: Choose full width mode. Boxed means that it will not take the full width of your website.
• Slider Dimensions: Set the slider size (Width and Height). Do not enter the acronym "px" after the number.
• Touch Mobile: Enable or disable touch feedback in mobile mode.
• Stop on Hover: If enabled, the slider will pause when hovering your mouse over it and resume when your mouse is not over your slider.
• Shuffle Mode: Enable or disable shuffle mode, which allows you to mix the slides instead of having a preset order.
• Image Cropping: Enable or disable image cropping.

Image Cropping

• Shadow Type: Choose a shadow type.
• Show Timeline: Enable to show timeline.
• Timeline position: Choose position of timeline.
• Background Colour: Set background colour when no image is present or if image and content don't use the full width of the slider. Enter a colour in this format: #d9d9d9.
• Margin: Set the margin, which is the spacing you want around the whole slider.
• Padding (border): Set the padding/border thickness.
• Show Background Image: Decide if you want to use a background image instead of a colour. If you select yes here, enter the URL in the field Background URL. Note that it is better to enter the Manage Slides interface (after saving) and add a background by clicking the Update Slider Background Image button. This lets you upload an image to your website and use it to ensure that it's always available.
• Background URL: Choose a background URL. Important: Show Background Image must be set to 'Yes' for this to work.

Navigator

• Navigator Type: Choose a navigator type. These are the pagination bullets/dots that appear on or below a slider, on the front-end, to indicate the amount of slides and the current position.
• Arrows (Next/Previous): Enable or disable arrows that allow users to navigate between slider images at will.
• Arrows Style: Choose style of bullets/dots per slider.
• Offset Horizontal: Set the horizontal offset.
• Offset Vertical: Set the vertical offset.
• Always Show Navigator: Choose whether to always show the navigator or not.
• Hide Navigator After: Set the time to hide the navigator (in milliseconds). Do not enter the acronym "ms" after the number.

Thumbnail (for the navigator type 'Thumbnail')

• Thumbnail Width: Set the width of the thumbnail.
• Thumbnail Height: Set the height of the thumbnail.
• Number of Thumbnails: Choose the number of thumbnails that you want visible.

Mobile Visibility

• Hide Under Width: This hides the slider under a width that you specify. For example, if you choose to have the slideshow hidden under 500px, then this means that any screen size, whether laptop, tablet, or mobile, that is under 500px will not be able to see this slider. Enter 0 or leave empty, if you do not want it hidden.

Manage the slides in a group

After setting up your slider group and after you click the Save & Edit button, you'll see a Manage Slides button. Click on that to enter the slides management page.

Fill in the fields and then click the Save button. You'll then see your slide as a new thumbnail. You can edit, delete, or clone it. To edit a slide, simply click on that thumbnail. Once you have more than one, you can drag and drop them to re-order them. That will affect the order of the slides that you will see on your website.

Here is a list of the fields and a short description:

• Title: Add a slide title (important and must be present).
• Status: Enable or disable this slide.
• Transition: Choose the transition type between this slide and the next slide.
• Slot Amount: Set the slot amount of elements in this slide.
• Transition Rotation: Set the time of transition rotation (in milliseconds). Do not enter the acronym "ms" after the number.
• Transition Duration: Set the time of transition duration (in milliseconds). Do not enter the acronym "ms" after the number. This affects how long the animation takes while switching from one slide to another.
• Delay: Set the time delay (in milliseconds). Do not enter the acronym "ms" after the number. This affects how long it takes before it switches to another slide.
• Enable Link: Enable link. You can add a link to this slide. Input any URL and choose whether to open it in a new tab. Optional hover colours are available for text caption.
• Link: Add a URL. The URL added here will be used when someone clicks on this slide. Important: Enable Link must be set to 'Yes' for this to work.
• Thumbnail: Set a thumbnail for this slide. This appears on this page where the thumbnails appear on top.
• Full Width Video: Enable or disable the use of a video using the full width of the slider. In the Video ID field, only enter the last part of the URL. Example: YouTube, take only the last part that is not crossed out like this: https://www.youtube.com/watch?v=dMis7LTpwwg
• Autoplay: Enable or disable video autoplay when the slider appears.

Slide elements

Layers Editor

With each slide, you can add or remove elements (image, video, text). You can set the background image by clicking Update Slider Background Image. After configuring all elements, you can preview or save the slider. We suggest saving every few minutes.

Layer Image: To add images, click the Add Layer Image button and select or upload the image that you want. You can drag and drop the image to your desired location. A new section with settings will load below the Edit Layer Data title.
Layer Video:  To add a video, click the Add Layer Video button and follow the instructions below. Afterward, a new section with settings will load below the Edit Layer Data title.

    1. Choose a Video Type (YouTube, Vimeo).
    2. Input only the video ID found at the end of the URL (of YouTube or Vimeo).
    YouTube example: youtube.com/watch?v=dMis7LTpwwg
    Vimeo example: vimeo.com/147364858
    Only copy the code marked in red above that is after the "=" for YouTube and "/" for Vimeo (but instead, copy the one in your own URL).
    3. Set the Height and Width of the video. Do not enter the acronym "px" after the number.
    4. Click Find Video.
    5. Click Use This Video.
    6. If you won't use a video, click Close.

Layer Text: To add text, click the Add Layer Text button and a new section with settings will load below the Edit Layer Data title.

You can enter any text with HTML tags as well. For example, if you want to add a button using predefined styles, you would enter: <span class="button-green">BUY NOW</span>

In the Layers Editor, once you add an element, you can click on it to view its settings (in the Edit Layer Data section), delete it by pressing the Delete This Layer button, or grab and drag it to position it in your desired location.

Elements configuration

Layer Collection

Select an element in the Layer Collection section to set its time (in milliseconds). That is how you decide the order of appearance of the elements in the slider. Set its time by sliding (or dragging) the button right and left. You can override the time (in milliseconds) by entering your own number. Do not enter the acronym "ms" after the number.

Important: clicking the show button can disable or enable an element.

Edit layer Data

• Class style: With the text element, you can choose between 16 default class styles by clicking the Insert Typography button. Click the Clear button to clear the typography class style.
• Text: Enter your text/content when the Layer Text element is chosen or, when choosing Layer Video or Layer Image, the name of the element.
• Effect: Choose the effect of the element for when it appears.
• Speed: Set the speed of the element (in milliseconds). Do not enter the acronym "ms" after the number.
• Position: Set the position manually, or simply drag and drop in the slider and you'll see those numbers change.

Other Animation

• End Time: Set the end time (in milliseconds). Do not enter the acronym "ms" after the number.
• End Speed: Set the end speed time (in milliseconds). Do not enter the acronym "ms" after the number.
• End Animation: Choose the end animation when the element disappears.
• End Easing: Choose the end easing.

Once you finish editing your slider, scroll to the top to save, cancel (without saving), preview slides, or to go back to your slider groups (without saving).

Manage Blocks

The Manage Blocks tab is a very important section that lets you create a block(s). Once you create one, you have to add it to the front-end of your website (the part that visitors see) in Design > Theme Settings > Layouts Builder.

Fill in the fields below and then press the Save button.
After saving, you'll see your new block on the left. Click it to edit or delete it.
To create another one, click the Layer Sliders button on the left.

• Block Name: Add a relevant name that you can recognize when adding this block to your website. You can add it in Design > Theme Settings > Layouts Builder.
• Status: Enable or disable this block and its attached slider group.
• Slider Group: Choose a slider group that you have previously created in Manage Slider Groups.

Import Tool

In the Import Tool tab, you can import your slideshow, the one that you have exported in the Manage Slider Groups tab.

Import: Browse for the file and click Import to import it.

How to backup and clone/duplicate a slider group and its slides

There are 2 ways to proceed with cloning a slider. Point 1 will also teach you how to backup and export your slider:

1. This first option brings over all your settings in Manage Slider Groups and in Manage Slides. In Manage Slider Groups, click to edit the group you want to clone, click the export button, and save the file on your computer. Then, click on the Import Tool tab and import that file. Back in Manage Slider Groups, you'll find the imported group, which will have the same name as the cloned group but with a higher ID number.
   
   
2. This second option doesn't overwrite your settings in Manage Slider Groups but only the ones in Manage Slides. In Manage Slider Groups, create a new group, set it up, and then click on Manage Slides. In there, click the Clone Data button found on the right and clone the group you want.

We hope that you enjoy using Layer Sliders!
Please contact us if you have any questions.