Layers Slider Widget

Layers User Guide  Since: 1.0 Last Updated: Layers ver. 1.5 Time to Read: 8 minutes

The Layers Slider Widget is incredibly versatile and can be used as a traditional content slider, a jumbo layout section, Call-To-Action bar, Testimonial, or slideshow, just to name a few! This article outlines the widget’s options. For steps on configuring this widget for any of the other uses listed above, visit the Tutorials section.

slider-widget

 

When you add a new Slider widget, or if you have created a page using one of the Preset layouts, the Slider will display with some default settings and content.

Click the widget to expand the options panel. You can customize the overall look and layout of the widget using the Design Bar on the right side of the widget.

This section sets the Slider’s overall size

  • Boxed will limit the width of the slider to 1040px by default and center it.
  • Full Width will allow the slider to span the entire browser window and is the default.
  • Full Screen will set the slides to fill the entire height and width of the user’s browser window.

This section sets the slider’s overall style.

Auto-Height Slides

Check this box if you want slides to automatically adjust the slider’s height based on the content/image size of the first visible slide.

This setting is ignored if Full Screen Layout is chosen.

Slider Height

The slider is 550 pixels tall by default. If you would like to make it shorter or taller, enter your desired value here (minimum of 100)

To fit a default size Title, Description and Button, you must set it to at least 180.

Note: When using the Full Width Layout and setting a Slider Height of more than about 720 pixels, you will be forcing visitors with smaller screens to scroll to view the entire slider. Consider using the Full Screen slider layout instead.

Show Slider Arrows

Check this option if you want the left and right slider arrows to show when the mouse hovers over the slide. If your widget only has one slide, this option is ignored.

Arrows are best if you want your visitors to be able to click back and fourth on their own. We do not recommend enabling arrows if you have Auto-Play enabled.

slider-widget

Show Slider Dots

Check this option to show navigation dots at the bottom of the slider. These can be used alone or in combination with the arrows, but are best used when you have the slider set to auto-slide (when the arrows should be disabled)

slider-widget-dots

Slider Controls Color

Choose a color for your arrows or dots (white by default)

Animation Type

This option controls the slide effect. Choose from a traditional Slide (right to left), Fade, or Parallax. The Parallax option will animate the slider content separately from the background when the slider is advanced or auto-played (not when scrolled!)

Note for Layers Pro users – Fade is not compatible with video hosts that serve up a Flash video when using hosted video backgrounds. Make sure HTML5 videos are enabled on your hosted video account.

Auto-play Slides

Check this option if you would like your slider to advance automatically. This option should not be used if you have Featured Video in any of your slides.

slide-content-options

The widget options bar is something you will see in most Layers widgets. These menus give you detailed control over the content of the widget where content areas are present. A content area is typically a slide, column, tab, accordion or other repeatable area.

background-iconBackground

The widget Background option sets a color or background image for the content area of the widget, such as individual slides or columns.

widget-background-option

Background Color

Click Select Color to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

  • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the text in this content area is black or white by default.
  • Setting a background  in Content Widget columns will add 20px of padding around the column.

Backround Image

Click Choose Image and upload or select an image to fill the content area behind your text with something other than a solid color.

  • Textures, photos and images without embedded text are best.
  • Full-size images  should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
  • Tiles or repeatable images can be any size you want.

When you set a background image, the following settings will appear:

Background Repeat

Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

Background Position

This option aligns your image and can help you adjust the placement of the subject of your background if needed.

Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

Stretch

Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

Darken

Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

PARALLAX (LAYERS PRO)

Layers Pro adds a Parallax option that allows your background image to stay in place while the site is scrolled. For Parallax to work well, your background image must be on Repeat, or be at least 300px taller than the widget’s height to allow for scrolling.

Background Video (Layers Pro)

YouTube, Vimeo or Self-Hosted videos may be added to the slider background to create dynamic slides with full motion graphics, scenic backgrounds or ambiental styles. See How to Embed Audio & Video with Layers for detailed information.

For standard video content in your slides, see Images, next:

image-iconFeatured Media

widget-featuredmedia-option

This setting adds an image or oEmbed media to the content area of your  slide, column, tab etc. Unlike the background option, images and oEmbed media added here are fully responsive.

Featured Image

Click CHOOSE IMAGE and upload or select an image from your Media Library.

  • Images should be at least 960px wide for best results, and will be cropped or scaled automatically depending on the side of the column and your Image Ratio choice.

Video URL(oEmbed)

  • This field takes any oEmbed content URL
  • Most major media platforms support oEmbed, including YouTube, Vimeo, SoundCloud, Twitter and Dailymotion.
  • The URL is copied from the "Share" link on the audio or video player.
  • oEmbed media will take the place of Featured Images

See How to Embed Audio & Video with Layers for detailed information on using oEmbed.

Image Ratio

The icon bar at the bottom of the Featured Media panel controls how your featured image is displayed.

The following specifications pertain to using the Boxed Layout. Full Width Layouts need your chosen images to be at least 600px wide.

  • Portrait: Uses the 340px wide scale of portrait oriented images, or crops your image to 340px from center. The original height is maintained.
  • Landscape: Uses the 480px wide scale of landscape oriented images, or crops your portrait images from center.
  • Square: crops your image to 480x480 from center
  • Original: Uses the original image, scaled proportionately to fit the layout. For left and right aligned images, this is a max of 630px wide. For center-aligned images, this is a max of 1000px wide.
  • Circle: Sets a radius on your image.  To get a perfect circle, your original image must be square. Portrait and Landscape originals will produce ovals.

image-alignImage Align

The Image align option will affect the layout of your content area by placing the image above the text, to the left or to the right.

  • The slider widget has an additional option to place the image below the text. When using the image-below layout, tall images will appear to "peek" out from the bottom of the slide.
  • Images that are large enough will fill the entire image area and should not need additional alignment within the image container.

text-iconText

widget-text-option

The Text option controls the alignment and styling of the title and excerpt within the content area.

Text Align

The Text align option will affect the alignment of text inside the text column of the content area (versus the Image Align which determines the overall layout or placement of the text in relation to the image column). Choose from Left, Center, Right or Justified.

Text Size

Choose from Small, Medium or Large.

Each size option is pre-configured with optimal balance, line height and font-size combinations and will vary depending on your font choice in Site Settings, or custom styling added through a Style Kit or Child Theme.

Text Color

Depending on the background color of the content area, your text will be black or white by default, but can be customized here.

Click on Select Color  to expand the color wheel and click to select a color from the palette or enter an HTML hex value.

HEADING TYPE (LAYERS PRO)

This option allows you to choose the heading tag to wrap your title, H3 by default. The heading tag does not impact SEO ranking or change the heading size by default, though it can be used in child themes or custom styling to allow selecting special heading styles such as jumbo headings, fancy headings etc.

For best results we recommend keeping these H2 or H3 to ensure your site outline reads well for visitors on accessibility devices.

Buttons (Layers Pro)

The buttons control allows you to customize the link button style for this slide and is available with Layers Pro.

Size

Select from Small, Medium, Large or Massive to set the overall height of each accordion toggle. You can also add padding with borders, explained in a bit.

Background Style

Choose from Solid, Transparent, or Gradient.

  • If Gradient is chosen, you will be prompted to choose the Gradient Starting color and Gradient End color, and the angle for the colors to fade.
  • If Solid is chosen, you will be prompted to choose a Background Color
Text Color

Choose a color for the title of each accordion toggle.

Text Shadow

Choose from Bottom, Top or None. Adds a subtle shadow that blends to any background color.

Text Transform

Choose from:

  • –Choose– (Uses theme default styling)
  • Uppercase (ALL BIG LETTERS),
  • Capitalize (Each Word Begins With a Capital Letter)
  • Lowercase (all small letters)
Border Width

Slide the toggle to increase or decrease the border or enter a pixel value. Set to 0 for no border.

Tip: If you want to add padding to your selected button size, you can do so with the border option and a border color that matches your button background color.

Border Color

If the border is enabled, choose a border color.

Rounded Corner Size

Slide the toggle to increase or decrease the rounded edges of the accordions.

  • For square corners, set it to 0.
  • For “pill” style accordions, set it to 100.
Button Shadow

Choose from None, Small, Medium or Large. Adds dimension with a drop-shadow that automatically blends to your background color.

columns-icon

 Advanced

widget-advanced-option

The Advanced option in the Options bar is similar to the Design Bar's Advanced option, but applies only to this column/slide/tab etc.

Custom Classes

You can add a custom class name here to apply custom styles to this or other columns where the custom class is added. The custom CSS selecting this class can be added to the widget's Advanced option in the Design Bar to affect just this widget, or in the global CSS or DevKit panels in the customizer. See How to Customize Your Site With CSS for details on CSS customization in Layers.

  • Add class names without a dot. Example: feature-column  and not .feature-column
  • Class names should be unique. Example: my-feature-column  has a better chance of being unique, column  is not at all unique. This is important to ensure your custom class is not already in use or defined, which may lead to conflicts.

 

You may enter a title and short description here, if desired, or leave these sections blank.

Title

Sets the heading of text in the content area, affected by the Slide Options Text settings. Leave blank for no heading.

Excerpt

Enter the text you want to show in the content area, or leave blank for no content.

The Excerpt includes rich text editing and supports basic HTML input via the Code </> view, much like the WordPress editor.

  • For best results, limit your content to brief, list-style or pointed text, keeping mobile users in mind.
  • Large amounts of text may not fit in the slider on mobile screens.
Code view
  • You cannot put scripts into this field such as javascript snippets
  • You should not paste text/html from Word or other text editors into this field or it may carry over unpredictable code that causes formatting issues.
  • Shortcodes are OK, but the element pulled in may not jive well with the slide’s design limitations and may require Advanced CSS styling.

Content Editor Toolbar

The INSERT LINK option allows for static or dynamic linking of your column content to any URL or published post or page on your site. This option will link the slide’s Title and Featured Image, in addition to any button element you create.

insertlink

  1. Select Custom or Existing Content from the LINK drop-down
  2. Enter the full URL (if Custom) or search for the page or post title you want to link to and select it

Buttons

To create a button, enter the link text into the TEXT field. Leave blank to just link the title and image.

Open in New Tab

To open links in a new browser tab, click the new tab icon to the right of your URL or Page.

 

  • Delete, click the pencil icon in the right corner of the column’s title bar to expand it, then click the red trash-can icon.pencil-trashcan
  • Add, simply click the +ADD NEW Slide button. This will duplicate your last slide to help speed up customization.

 

This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a slider with this class is loaded. This is useful in cases where you want to style sliders differently from one another and want the styling to be saved in the page’s export data. This has advantages over using the global CSS area when creating style kits, for example. You may also add specific classes to specific slides by using the slide’s Advanced button.

If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

Save your layout any time by clicking SAVE & PUBLISH

Each Save will create a revision (up to 5) you can restore if you made a mistake or want to revert to a previous version. See How to Restore Layers Page Revisions for details.

For more amazing ways to use the Slider Widget, check out our Slider Widget tutorial series in 10 Ways to Use the Layers Slider Widget

Next up, the Content Widget