4. Building Sliders

Created by Danny Wong, Modified on Sun, 9 Aug, 2020 at 4:25 PM by Danny Wong

GETTING STARTED WITH THE SLIDER BUILDER

Since LayerSlider allows you building professional grade animated material, its slider builder interface can be a bit overwhelming at first. There are many options to control every aspect of your content. This is why it is important to take time and try to understand the basics with the following tips:

  • Read the tooltips: Almost everything on the admin interface reveal further information with tooltips. Just move your mouse cursor over option fields, buttons, and other interface elements, and the exact description of those will appear in a tooltip message.
  • Use the preview mode: By pressing the Preview button you can see your work in action instantly. Don't be shy to change settings. If you're not sure about how an option works exactly, just change it and observe the differences in the preview mode. When previewing a layer, you can change the content and settings on the fly, and see the changes instantly, without the need to jump in and out of preview every time something changes.
  • Use slider templates: Discussed under Gettings Started / Importing slider templates, you can see how we built our demo sliders and which settings we used to achieve certain animations. You can find both simple and complex sliders to discover LayerSlider's capabilities. Don't be afraid of making changes on these samples, you can always import a fresh copy at any time. Premium slider templates can also be the starting point of your projects since we're focusing on covering most use cases.

SLIDER SETTINGS

This is the page where LayerSlider navigates you after adding a new slider. On this screen you can set common settings like the size of the slider, and customize its appearance or features in the other sub-sections.

We do not provide an extensive list of settings here since every option has its description displayed on the admin interface. Please review them carefully, so you can customize your slider behavior and appearance in the way you like.

Illustration of the Slider Settings

Slide defaults

When you will work with slides and layer, you may notice that some option can inherit values from higher up the hierarchy. Layers can inherit option values from slides, and in the same manner, slides can inherit values from slider-wide global options. This gives you an opportunity to have a master switch to control certain settings. For example, instead of setting the sizing mode for each slide background one by one, you can just leave them on the value inherit, then set only one option in slider settings. We're using the inherit value by default for the options where it makes sense, so you don't have to bother with that. Just keep in mind that you can control some options from a central place.

Illustration of the default slide options section

Advanced settings

The slider settings section contains hidden options which can be displayed separately. The main goal is to remove clutter from the user interface, since these options control overly specific features, or they meant to be used by experienced users. You can display these options with the switch on the upper right corner. See the illustration below.

Illustration of advanced slide options section

ADDING SLIDES

As mentioned previously, we don't have an extensive list of all the available options in this documentation, since the admin user interface contains all these information and you can access them on the fly. Just hover over an option/button with your mouse cursor, then a tooltip will appear describing the option in question.

Please note, keeping space efficiency in mind we hide some options used less frequently. Just click on the SHOW MORE OPTIONS button, then you can reveal every slide option.

List of slides and the Slide Options area

Managing slides

FEATURE
DESCRIPTION
Naming slides
You can rename a slide by double-clicking on its name in the tab bar. Type the new name, then press  or click away to save your changes.
Re-ordering slides
You can drag and re-order a slide by grabbing its tab in the tab bar and move it to the intended location.
Duplicate slides
Click on the Duplicate slide button to make a new copy of the current slide with the exact same settings and layers. This feature is useful if you want to experiment on a copy without affecting your actual work, or if you want to build a similar slide.
Hiding slides
Hiding a slide will exclude it from the actual slider on your front-end pages. This means your visitors cannot see it, but you will still be able to access it in the Slider Builder. This feature is particularly useful when you want to hide half-finished slides or keep older ones without actually deleting them. Please note, at the moment there is no way to make these slides visible on the front-end, even if you would use custom coding.
Removing slides
Select a slide and press  on the right side of the corresponding tab.

About slide transitions

LayerSlider offers more than 200 pre-defined 2D/3D slide transitions. By using the Transition Builder it can be easily extended with custom ones for your own needs. Slide transitions will only use the background image of slides since web standards don't offer a way to "capture" all contents within a slider. It's important to keep in mind that layers will not be used for slide transitions, even if they made to look like a background image.

Modern web browsers are required for 3D transitions to work properly. If you select any 3D transition, LayerSlider will prioritize them over 2D ones. The plugin has multiple fall-back levels whenever a visitor's machine is not capable of showing certain transitions. In general, 2D transitions are supported on all major web browsers.

Linking slides

Linking a slide will make its entire surface clickable. You can also link layers to add a button or a smaller control. Based on your settings, layers can be either above or below of the slide link, making it possible to link both.

Click on the insert... button and use the Choose Page or Post option if you want to link a WordPress resource like a page, post or attachment on your site. This way URLs will be generated automatically and point to the right place even if you change permalinks. It's also the way to use localization plugins like WPML where URLs might change according to the selected language.

Smart links

Smart links can control the slideshow, media playback and other aspects of sliders. It's an easy way to trigger certain slider actions when clicking on the linked element. It can be used for something small and trivial like adding a custom "stop" button up to building your navigation area replacement with your own customizations.

Just click into the linking field and you will be presented with a list of available slider actions. There is only one action that might require some explanation: switching slides. You can achieve that by entering a hash tag (#) followed by the slide number that you want to jump to. For example, if you want to jump to the third slide, you need to enter #3 into the linking filed.

Deeplink

A deeplink is a slide alias name, which you can use in your URLs with a hash tag so LayerSlider will start with the corresponding slide when visitors arrive to the page. Example: domain.com/page/#welcome

Use only lowercase alphanumeric values. You can also use this feature to implement slide navigation with links.

PREVIEW AREA FEATURES

The preview area has many hidden features, which can drastically improve your productivity.

Illustration of the preview area in the Slider Builder

Preview area toolbar

FEATURE
DESCRIPTION
Zoom
Grab the zoom slider to quickly resize the slider to the size you feel right. This feature can be particularly useful when you're working larger sliders on smaller screens.
Auto-fit
Sets the zoom level automatically to make sure the whole slider is visible without scrolling. This feature will not upscale your sliders on larger screens, but you can manually set the zoom level to your own liking.
Align layers
You can quickly position your layer(s) to the center of the slider, or at any side and corner.
Undo/Redo
Want to undo an unwanted/unintentional change? Just press the undo button.
Slide preview
You can preview the whole slider live. It starts with and repeats the current slide, but you can navigate to other slides as well with the arrows.
Layer preview
Continuous live preview of the selected layer. You can change the layer content and settings on the fly, without leaving or restarting the preview session.
Device view
You can control each layer individually whether they show up on a particular device or not. This is useful to build different layouts of the same slider on smaller screens by dynamically hiding and showing up different layers. Click on the device you want to preview.

Hidden features

FEATURE
DESCRIPTION
Upload images
You can drag and drop images from your desktop to instantly upload them and set their positions where your mouse cursor is.
Multiple selections
You can select multiple layers by pressing and holding down your mouse button, then draw a lasso around the layers you want to select. You can manually add or subtract from the selection by pressing and holding down the Ctrl/Cmd key and clicking on the corresponding layers in the preview area.
Moving layers
Grab the selection and move wherever you like. Naturally, you can move more than one layer at once by using multiple selections. By holding the Ctrl/Cmd key, you can temporarily disable layer snapping.
Resizing layers
Grab one of the resize handles at the corners and sides of your selection to resize one or more layers.
Guides
Press and hold down your mouse button on one of the rulers, then you can drag out a guide line. Layers will snap to guides, use them to position layers in the same line with ease.
Edit text
Select a text layer in the preview, then press enter or double click on it to switch into edit mode. This will allow you to directly type in the layer content there, without the need to leave the preview area.
Overlapping layers
In some cases layers might cover each other in the Preview area and clicking on them will only select the uppermost item. That's why we've added a right-click mouse action, which will present you a list of layers occupying that area. Just choose the desired layer, then the preview will select and bring it into the front.
Keyboard shortcuts
Jump to the Keyboard shortcuts section to see all the available options. As a teaser, you can copy and paste layers, duplicate layers, move layers around with the arrow keys, start and stop the preview, save the slider ... and much more!

ADDING LAYERS

List of layers and the Layer Options area

Managing layers

FEATURE
DESCRIPTION
Naming layers
Making complex slides will require many layers. Naming them as you build your slide can be really useful to quickly navigate between them.
Re-ordering layers
You can drag and re-order layers by grabbing the  icon. The exact order is particularly important when you work with overlapping layers since it controls which layer should be on top of the other.
Locking layers
Locking a layer with the  icon will disable the drag n' drop functionality in the Preview, securing it from moving around unintentionally.
Hiding layers
Hiding a layer with the  icon will make it invisible in the visual editor and on your front-end pages. This is useful when you would like to keep a layer for later use, but prevent it from showing up in the actual sliders.

Layer types

TYPE
PURPOSE
 Image
Displays an image. You can upload a new image or choose an existing one from your WP Media Library. You can also insert from URL or pull the featured image from posts.
 Text
This layer type should be used for most of the textual contents. You can select the role of the layer with the sub-controls. Do not wrap your content within an HTML element, as it is done automatically based on your selection. You should not use any HTML codes in this field, with the exception of <br>, <b>, <strong>, <i>, <u> and other general purpose inline text formatting elements.
 HTML
You should choose this type of layer to use custom HTML content or WordPress shortcodes. Please note, the layer contents will be automatically placed in a <div> element, so it's not necessary to insert a wrapper element. For using semantic HTML, you can select multiple element roles under the Text type instead of using HTML unnecessarily.
 Video / Audio
This layer type is preserved for multimedia contents. Choose it if you want to embed YouTube, Vimeo or HTML5 video/audio. In older sliders where you put multimedia contents into an HTML layer will continue to work properly. However, to take advantage of the new multimedia settings introduced in LayerSlider 6, you will need to change the layer type.
 Dynamic content
Select this type of layer if you want to use contents pulled dynamically from your WP posts and pages. See Using the Slider Builder / Dynamic Layers section for more information.

Device support

It's possible to build multiple layouts for different devices in the same slider by dynamically showing and hiding layers. With the Show this layer on the following devices buttons, you can choose on which devices should the currently selected layer appear.

Choosing devices for layers to appear
ICON
ROLE
CRITERIA

Shows/hides a layer on desktop computers.
Screen width > 1024px

Shows/hides a layer on tablets.
Screen width >= 768px and <= 1024px

Shows/hides a layer on phones.
Screen with <= 767px

Embedding videos

LayerSlider supports YouTube, Vimeo, and self-hosted HTLM5 video/audio out of the box. We've integrated many features for these solutions such as setting autoplay, preview image, volume and other controls. They will also automatically pause and resume the slideshow while playing.

Just choose the Video / Audio layer type to embed multimedia contents. For YouTube and Vimeo videos you need to paste the embed code from their website into the text field. Otherwise, click on the Add Media button to add self-hosted HTML5 video or audio.

To use HTML5 self-hosted video/audio, please make sure you're using supported media formats described here. We recommend using MP3 or AAC in MP4 for audio, and VP8+Vorbis in WebM or H.264+MP3/AAC in MP4 for video. The supported formats may vary between browsers, but you can also provide multiple formats if needed by holding down the Ctrl/Cmd key and selecting multiple items from your WordPress Media Library.

At the moment we do not support other media players out of the box since those solutions have their own distinct APIs to control media playback. However, users with web development experience can use the LayerSlider API to detect slider events and run custom code to control 3rd party media players.

Using WP shortcodes and interactive content

Make sure you add WP shortcodes or other interactive content (such as Google Maps embeds, custom scripts, etc) to an HTML layer. Shortcodes will only be rendered on front-end pages, so don't be afraid if the slider builder interface doesn't show the result you would expect.

Using interactive content highly relying on Javascript can be problematic, and might not work properly. Since we cannot workaround every possible issue in someone else's code, it's possible that some shortcodes and embed will be broken.

It also worth mentioning that in responsive mode LayerSlider only scales the layer element itself to gain extra performance. The content inside should adapt the dimension changes on its own. While this happens automatically in most cases, shortcodes and complex HTML might not be resized in sync with the slider.

Layer transitions

This is where you can build your layer transitions. This section can be daunting at first since LayerSlider offers many options to customize every aspect of your work. However, everyone can learn it quickly and easily by following the tips already mentioned previously:

  • Read the tooltips: Almost everything on the admin interface reveal further information with tooltips. Just move your mouse cursor over option fields, buttons, and other interface elements, and the exact description of those will appear in a tooltip message.
  • Use the preview mode: By pressing the Preview button you can see your work in action instantly. Don't be shy to change settings. If you're not sure about how an option works exactly, just change it and observe the differences in the preview mode. When previewing a layer, you can change the content and settings on the fly, and see the changes instantly, without the need to jump in and out of preview every time something changes.
  • Use slider templates: Discussed under Getting Started / Importing slider templates, you can see how we built our demo sliders and which settings we used to achieve certain animations. You can find both simple and complex sliders to discover LayerSlider's capabilities. Don't be afraid of making changes on these samples, you can always import a fresh copy at any time. Premium slider templates can also be the starting point of your projects since we're focusing on covering most use cases.

There are multiple types of animation, you can view one at the time by clicking on its title or icon. In each section, you can find the description of what it does and when it will be used. For clarity, we've made animated illustrations that you can see by hovering over the icons. The green highlight shows which transition types are being used by the layer, while the scaled (larger) icon shows the currently opened transition section.

Illustration of layer transition options

Linking layers

You can link a layer under its Link & Attributes tab. Enter a URL and set whether you want to open it on the current page or in a new tab/window.

Click on the Choose Page or Post button if you want to link a WordPress resource like a page, post or attachment on your site. This way URLs will be generated automatically and point to the right place even if you change permalinks. It's also the way to use localization plugins like WPML where URLs might change according to the selected language

Smart links

Smart links can control the slideshow, media playback and other aspects of sliders. It's an easy way to trigger certain slider actions when clicking on the linked element. It can be used for something small and trivial like adding a custom "stop" button up to building your navigation area replacement with your own customizations.

Just click into the linking field and you will be presented with a list of available slider actions. There is only one action that might require some explanation: switching slides. You can achieve that by entering a hash tag (#) followed by the slide number that you want to jump to. For example, if you want to jump to the third slide, you need to enter #3 into the linking filed.

Layer attributes

You can also apply commonly used attributes (such as a unique ID or classes) on layers in the same section. These settings are made for users with web development experience who want to use custom coding to achieve a customization level that a visual editor cannot provide.

Apart from the pre-defined list of attributes, it's also possible to add your own. In the custom attributes section, you can enter any attribute name, including pre-defined ones to override them. Many 3rd party plugin uses custom attributes, this section is important if for example you would like to set up a FancyBox image gallery on LayerSlider layers.

Layer Styles

Under the Styles tab of your layers, you can find commonly used formatting options to customize their appearance. We highly recommend using these settings whenever it's possible, instead of adding unnecessary HTML code to the contents of layers.

This is where you can also set the position of layers with the Left and Top options. While you can use the visual editor to move layers around, it's often better to fine-tune them here for a pixel-perfect result.

IMAGE EDITOR

With the help of Adobe's Creative SDK, LayerSlider 6 now has a built-in image editor. You can perform common tasks like resizing, cropping, rotating images, as well as photo retouching, adding frames, text, effects, stickers and a lot more. It's like a mini-Photoshop.

Look for the  icon on the upper left corner of any image picker button to launch the editor with the currently selected image.

Illustration of the image editor button
 
Illustration of the image editor

POPOUT EDITOR

One of the main design goals with LayerSlider 6 was the ability to work right in the preview area, without having to scroll up and down constantly to change settings. In addition to keyboard shortcuts, we've also added a Pop out editor button, which will transform layer options into a floating window that can be resized and placed wherever you want. This makes it extremely easy to edit everything in one place.

Illustration of the popout editor

TIMELINE

The timeline feature can be used to review all layer transitions occurring on the slide at once. The color-coded markers clearly show when and what happens. You can even grab the playhead and move it back and forth to play segments at your own pace.

Illustration of the slide timeline

DYNAMIC LAYERS FROM POSTS

Illustration of dynamic layer settings

You can pull individual post information by using post placeholders. These are working very similarly to WordPress shortcodes. You can enter one or more placeholder into the layer's content area, then LayerSlider will automatically replace them with the appropriate content from posts. You can even mix them with static content. Example:

This post was written by [author] on [date-published] will be
This post was written by admin on March 13, 2015

Using post filters

By using the post filters you can target certain WP posts or pages to pull information from. LayerSlider supports custom post types, tags, categories, and taxonimies to find literally any kind of custom content that themes and plugins may use. To set filters you just need select a dynamic layer and click on the Configure post options button. In the opened modal dialog window you can also order the results in your preferred way.

Get the items from results to work with

The post filters are global across slides, but you can select items from the results independently. This allows you to work with posts in a custom order, for example, you can retrieve only the even/odd posts from the results. If you want to follow the original order you can choose the option following, then LayerSlider will get them automatically.

Using mixed content

You are not forced to build sliders with dynamic contents only. You can mix them with static slides and layers.

Using custom post fields

You can use the [meta:fieldname] post placeholder to pull content from custom fields. Please make sure to replace the fieldname part with the actual field you want to pull information from.

Frequently Asked Questions

  • Q: Can I use static and dynamic contents at once?

    A: Sure, you can mix them freely. Just make sure to select the Dynamic content from posts layer type.

  • Q: Can I set custom [excerpt] for posts?

    A: Yes, just enable the excerpt field under Screen Options when you're editing a post/page, then enter the desired content.

  • Q: How excerpts are generated?
    • Manually entered excerpts will remain "as is", without any modification or formatting. Custom HTML code is allowed.
    • Auto-generated excerpts have all shortcodes and HTML tags removed and they will appear as plain text.
    • Auto-generated excerpts will be trimmed down to 55 words. The [...] "hellip" sign will be appended at the end if the text exceeds this limitation.
    • Custom word count used by themes will be automatically applied in your sliders. Developers can override it by using filter hooks.
    • Auto-generated excerpts respect WP's <!--more--> tag, so you can easily split your content at the point you want.
  • Q: Can I work with fixed posts?

    A: No, the purpose of dynamic sliders is to automatically update their contents when you add a blog post or any other content on your site.

    However, there is a simple workaround with a similar result. You can find specific posts with unique properties (e.g. custom tag) just by setting the right filters in the Post Options section of dynamic layers. The results will not update as long as you don't add more posts that match to the selected filters.

  • Q: Can I use content from multiple posts on the same slide?

    A: At the moment you can't. This feature is yet to be added in a later update.

  • Q: Can I pull content made by WooCommerce or other plugins?

    A: Yes, see the "Using custom post fields" part.

  • Q: Can I pull content from custom post fields?

    A: Yes, see the previous point.

MULTILINGUAL SLIDERS

How to translate the admin user interface?

  1. Download PoEdit

    There are several apps available to help you with translating .PO files. PoEdit is a popular one, and it's available on every major platform. You can download it from here.

  2. Start translating

    Open the default LayerSlider-en_US.po file from your "/wp-content/plugins/LayerSlider/locales/" folder. When you save your work PoEdit will generate you a .MO file which will be needed to apply your work.

  3. Name your files properly

    WordPress recognizes your localization by a special formatting of file names. You will need to include the right language and country codes so it can identify what language your work is made for.

    For example, a French localization would have the file names: LayerSlider-fr_FR.po and LayerSlider-fr_FR.mo. You must follow this syntax, including the dash, underscore, and lower- or uppercase letters.

  4. Apply your localization

    Copy your newly created .PO and .MO files into the "/wp-content/plugins/LayerSlider/locales/" folder. WordPress should use them immediately if you named your files properly.

Creating multilingual sliders with qTranslate

qTranslate (and its successor, qTranslate X) is the one of the easiest way to create multilingual sliders in LayerSlider. It is a free and simple plugin that supports a shortcode-like syntax to enter text in multiple languages, so it can display the proper one for your visitors. LayerSlider supports shortcodes and other special syntaxes within the contents of layers, so you can enter something like this to create a multilingual slider:

[:en]English text[:de]German text

The line above will output "English text" if the visitor selected English page and "German text" if the visitor selected German. You can read more about qTranslate on its WP.org plugin page.

Don't forget to disable the "Use slider markup caching" option under the LayerSlider → Options → Advanced tab. Due to technical difficulties, it's not possible to dynamically show up multilingual content in a cached copy. Your sliders could always show the same language string if you keep caching enabled.

Translating with the WPML plugin

You need the "Multilingual CMS" version of WPML with installed WPML String Translation add-on.

Translating the plugin's user interface:

  • Navigate to WPML → Theme and plugins localization
  • Make sure that the "Translate the theme and plugins using WPML's String Translation and load .mo files as backup" option is selected in the "Select how to translate strings in the theme and plugins" section. This should be the default selection in newer versions of WPML.
  • In the "Strings in the plugins" section select LayerSlider and press the "Scan the selected plugins for strings" button below.
  • Under WPML → String translation menu item, you can now see and edit the strings that the LayerSlider UI uses. This list might be cluttered with other translatable strings, so you might want to select the "LayerSlider" option in the "Domains" dropdown list.

Creating multilingual sliders:

LayerSlider registers translatable strings when you save your work. If you want to translate a previously created slider, you need to re-save it first, even if you don't change anything. Once LayerSlider registered the translatable items, they will appear under the WPML → String translation menu item in your WP admin sidebar.

You can quickly filter the translatable items to your slider contents by selecting the "LayerSlider Sliders" (or "LayerSlider WP" if you're using an older version) option from the "Domain" dropdown list.

After translating a string and marking it as complete, they will automatically appear in your front-end sliders. Whenever you make a change in your sliders, the affected strings will be marked as "Translation needs update" in WPML's String Translation module.

The WPML team was kind enough to provide an official step-by-step guide of translating LayerSlider sliders. It explains and illustrates every step of the way in detail. Click here to read their guide.

Don't forget to disable the "Use slider markup caching" option under the LayerSlider → Options → Advanced tab. Due to technical difficulties, it's not possible to dynamically show up multilingual content in a cached copy. Your sliders could always show the same language string if you keep caching enabled.

KEYBOARD SHORTCUTS

Keyboard shortcuts may not work when you're interacting with form elements, since many keys have special meaning while typing into a text field. To avoid any issue, some shortcuts are disabled until the form element loses its focused status (i.e. the glowing ring around it). To overcome this inconvenience simply press . This will unfocus the form item you're working with and re-enable all keyboard shortcuts.

General interface shortcuts

SHORTCUT
DESCRIPTION
 in text fields
Lose focus on current form item to make all keyboard shortcuts accessible.
 on selected layer
Toggles editing mode on the selected layer, so you can change the layer text in the preview area.
 + Z
Undo. Erases the last change done to the slide revering it to an older state.
 + Yor
 +  + Z
Redo. Reverses the undo or advances the buffer to a more current state.
 + S
Save the slider.

Slide actions

SHORTCUT
DESCRIPTION

Toggle slide preview mode to see your work in action.
(  /  ) + 
Toggle layer preview mode to see only the selected layer(s) animating.

Managing layers

SHORTCUT
DESCRIPTION
 + C
Copy selected layer(s), so you can paste them on different slides or move across sliders.
Please note: to avoid conflicts with the OS native copy event, this action will only work when there's no active text selection on the page.
 + X
Copy and remove selected layer(s) in a single step.
 + V
Paste previously copied layer(s).
 + D
Duplicate selected layer(s).

Remove selected layer(s).

Positioning layers

SHORTCUT
DESCRIPTION

Move layers in any direction by a pixel on the slide canvas.
(  /  ) + 

Move layers in any direction by 10 pixels on the slide canvas.
Holdwhile dragging layers
Move layers along their vertical or horizontal axis.
Holdwhile dragging layers
Disable the "snapTo" feature to freely move around layers.

SLIDER REVISIONS

LayerSlider 6.3.0 introduced a new premium feature: Revisions. Have a peace of mind knowing that your slider edits are always safe and you can revert back unwanted changes or faulty saves at any time. This feature serves not just as a backup solution, but a complete version control system where you can visually compare the changes you have made along the way.

Reverting a slider to an earlier version adds another snapshot to Revisions, which can also be reverted if you change your mind and would rather return to the original copy. Slider Revisions also saves the undo/redo controls. Even if there is no perfect snapshot, you will be able to undo the changes in-between to find what you are looking for.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article