November 5, 2015

10 Ways to Use the Layers Slider Widget

In this featurette, we have compiled a number of our most popular tutorials to show you how to take your Layers pages further with the Slider Widget. You'll learn how to incorporate it into a Hero-style page layout, vanity cards, slideshows and more.

In Layers 1.2.6, we introduced a revamped  slider using the newest swiper.js and Flexbox to improve responsiveness and content layout flexibility. Slider options were also extended to include three animation types and better support for auto-sizing. Be sure to update Layers to take advantage of these and many other enhancements.

You can hardly find a landing page on any modern WordPress website that is not utilizing a slider in some form or another. They are usually a breeze to set up, inherently customizable, and allow you to showcase creative content in a relatively simple way. Designers love using them to tell a compelling story, and WordPress users love them for promoting several aspects of their business in one interactive space. When implemented well, sliders grab website visitor attention and offer a familiar browsing experience.

But plopping a slider onto your home page without a visual plan and contextual purpose will fail to manifest all these good things. Simply having an element on your page that slides things but does not connect with your visitors has the unfortunate result of entering their visual “blind spot,” where the slider is ignored and scrolled past.  While bold colors, stunning photography or trend-forward textures are a good start for grabbing the eye, what your slider communicates and how it does it will determine most whether someone will take the time to interact with it longer than a few seconds.

The Layers Slider Widget is a key building block for your Layers pages – not just because of its customization options, but because of its incredible versatility. This widget was designed to transform into a wide variety of uses, from single-column static content to photo slideshows. It is not limited to the top-most position on your page, and can be used multiple times. Let’s take a look at some of the many ways you can configure this widget to bring out its best potential.


Traditional Content Slider

When you first add a Layers Slider Widget to your builder pages, this is what you’ll get – a simple, 3-Slide element for highlighting new content on your site. You probably encounter content sliders on a daily basis when browsing news or magazine websites. For sites that are updated often, the Slider Widget is also a popular way to direct visitor traffic to specific features or editorials. For example, you might pair a Slider Widget with a Posts Widget, with the Slider focusing on the latest opinion posts, and the Post Widget displaying the most recent content from all categories. Content sliders are also a common element of e-Commerce websites, where they are used to promote specific products, or categories.

Learn the Basics of the Layers Slider Widget



Simple Page Title

Most people don’t think of a slider in terms of what a single slide element can be used for. At its most basic, the Slider is simply a single column of content, with several layout options, which can be duplicated and stacked and animated. Single slides are synonymous with content blocks and can serve a similar purpose to the Content Widget with one grand advantage – you can control the height of the slider.

Page titles are found atop most interior pages, but may also be used to create a static header on your Home and landing pages.

The single title configuration can be used to mimic the Title Banner at the top of other Layers pages such as the Shop, Blog or Blank template, and customized easily for height, background and alignment.

Learn Now: How To Create Hero Headers With The Layers Slider Widget


Hero Header

Like a bat-signal, the hero-style header layout is formed around a single content section that takes up the first fold of a page to communicate one clear goal. This can be a first impression for your brand or business, and is seen most on design, portfolio and content-driven sites such as Medium, as well as our own websites here at Layers. This tutorial takes the Simple Page Title and blows it up, then adds a dash of Custom CSS to make it sparkle (not literally.)

Learn Now: How To Create Hero Headers With The Layers Slider Widget


Vanity Cards & Site Intros

Remember the days when Flash rules the web and everyone had a cool animated intro? If you’re a designer, you’re probably groaning inwardly at the memory, but when done right, intros add a touch of movement and personality to websites that want to connect with the viewer. Vanity Cards are commonly created with video, which is best if you want full-motion effects and several frames. However, the Slider Widget can be setup to engage your visitors through a handful of slides and its Fade animation – a trick of modern web design that helped Flash lose its foothold.

Learn Now: How To Create A Fading Intro With The Layers Slider Widget



Product Tours

Sliders just seem to be made for marketing products, but it is important product sliders stay focused on the visuals, tagline and core message, as you would expect from a print ad in a magazine. Large quantities of information can overwhelm visitors if presented all at once, so getting straight to the point reduces distraction and increases the chance they will stick around.

Sliding sliders are most effective when you have a set of information, like paragraphs on a page, that you want to be presented in sequence. If each slide is trying to showcase a totally different thing with a different call to action, your visitors are not likely to sit and watch it long enough to interact with every message.

A product slider should begin with introducing the product, then move on to highlighting its features or promoting ways to extend it. Setting up the widget to promote your product or app is as simple as adding it to your page, then customizing the starting configuration and content. The following tutorial will introduce you to the Advanced option of the widget for applying techniques such as replacing the button with an App Store image.

Learn Now: How to Use the Advanced Design Bar Option for Custom Classes, Margins and Padding


Jumbo Photo

The Layers Slider Widget has three primary sizes, presented as Layouts. These are Boxed, Full Width and Full Screen. Like Hero headers, the Full Screen layout  is a gorgeous way to showcase visually-driven content on sites such as travel blogs, photo album pages or creative portfolios. This configuration combines auto-scaling background images with a simple custom style to place the Title and Excerpt at the bottom of the slide, so your images take center-stage.

Learn Now: How To Create A Jumbo Photo Slider With The Layers Slider Widget


Photo Slideshow

The Layers Slider has two primary ways of handling images: the background image and the featured image. You can use either to create a slideshow with the Slider widget, but using background images has a few disadvantages – you can’t link them, they are not inherently “responsive” (i.e. they do not automagically scale with the slide on mobiles) and they cannot affect the slider’s overall size. Featured images, on the other hand, can do all these things, but cannot be overlayed with text by default. This tutorial provides steps for creating a slideshow using featured images to give you the most control over linking and presentation.

Learn Now: How To Create A Photo Slideshow With The Layers Slider Widget



You don’t need a special plugin to add quotes or testimonials to your page. The Layers Slider offers an auto-sizing option and rich text editing to make creating testimonial slides in several styles easy and fun.

Learn Now: How To Create Testimonials With The Layers Slider Widget



Music & Videos

Layers allows you to use any multi-media URL supported by oEmbed in place of the Featured Image in Widgets and Posts. This opens up a variety of ways to showcase videos, playlists and even Tweets in any Slider configuration. If you want to feature a single video and really make it pop, the following configuration used on our example page uses a centered “featured image”, does away with extra text, and makes use of the little-understood padding controls under the Advanced Option:

  1. Set your Slider Layout to Full Width
  2. Under the Design Bar’s Slider option, check Auto-Height, then uncheck Show Slider Dots and Auto-Play Slides
  3. In your first slide (or only slide – it’s up to you!), click the Background Image button in the slide’s toolbar and add a nice background image. For best results, choose an image that jives with your video’s style and color scheme. For non-tiling images, be sure to use large images at least 2000px wide with the Stretch option enabled.
  4. Click the Featured Image option and add your media’s oEmbed URL to the Video URL field.
  5. Remove the Title, Excerpt and Button content.
  6. Click the Advanced button on the Design Bar, and enter 0 into the Padding option’s Top and Bottom.

Learn more about How to Embed Audio & Video with Layers



Call To Action Banner

Call-to-action banners are useful for promoting specific pages on your site such as a Sale or Features page, or a specific post or product. The Layers Slider Widget allows you to easily create a variety of promo section styles that combine text, images and buttons. This tutorial walks you through how to configure both the Content and the Slider Widget for a Tagline & Button style banner that can be placed at the bottom of a Layers builder page, or in a 1 column Site Footer to show across all pages on the site.

Learn Now: How to Create a Call to Action Banner With Layers Widgets



We probably haven’t even thought of all the ways to use the stock slider, with or without Custom CSS. What are some ways you are using the widget on your sites? Tell us in the comments!


One Comment on “10 Ways to Use the Layers Slider Widget

Gangsar Swa Purba
November 7, 2015 at 4:59 pm

waw, it’s the best thing i have waiting for

very clever,
very useful slider 🙂

good job, friends 🙂


Leave a Reply

Your email address will not be published. Required fields are marked *


Sign Up

Simply enter your details below to get started with Layers.

"We discovered Layers and it changed everything. Our clients could not believe it."
~ Matthew Hansen from Principal

  • Get your business online ASAP
  • Gain access to easy-to-use website tools
  • Get the best deals and advice for building your online business
  • Join thousands of like-minded entrepreneurs
Save & Share Cart
Your Shopping Cart will be saved and you'll be given a link. You, or anyone with the link, can use it to retrieve your Cart at any time.
Back Save & Share Cart
Your Shopping Cart will be saved with Product pictures and information, and Cart Totals. Then send it to yourself, or a friend, with a link to retrieve it at any time.
Your cart email sent successfully :)