How to Create a Jumbo Photo Slider With the Layers Slider Widget

How To  Tutorials  Last Updated: Layers ver. 1.2.8 Time to Read: 2 minutes

This tutorial is part of our feature 10 Ways to Use the Layers Slider Widget. For general help with using the Slider Widget and getting familiar with the controls, see the Layers User Guide.

The Full Screen layout in the Slider widget is a gorgeous way to showcase photo-centric content on your site, such as Travel blogs, photo album pages or 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 the visual can take center-stage.

jumbo

To begin, choose the page you wish to add the widget to and EDIT LAYOUT (or from the front-end, choose Customize in the admin toolbar)

  1. Click EDIT LAYOUT in the Customizer, then click your page’s BODY panel.
  2. Click +ADD WIDGET and choose the Layers Slider widget
  3. Expand the second and third slides and click the red trash-can icon to delete them.
  4. Click LAYOUT in the widget Design Bar and choose Full Screen
  5. Click SLIDER in the widget Design Bar. Set the following:
    • Show Slider Arrows: checked
    • Show Slider Dots: checked
    • Animation Type: Slide
    • Auto-play Slides: unchecked
  6. Click on the Background Image button in the slide’s toolbar and select/upload a background image.
    • For best results, use an image at least 2000px wide and chose the Stretch option to auto-scale it to the screen size.
    • Always choose a background color that closely matches your background image dominant color so the text color invert triggers correctly.
  7. Click the Text button on the toolbar and choose an alignment.
  8. Replace the default Title with your Title.
  9. Replace the default Excerpt with some link text – we will not be using the Button here as the Excerpt allows some styling control.
    1. Example: We used “View Album”
    2. Highlight your text and style it with the editor toolbar, such as bolding, italics or underlining
    3. Click the link button on the editor toolbar and add a link to the post or page this slide represents
    4. Leave Open in New Tab unchecked unless your link is to a different site.
  10. Remove the default button text
  11. Click +Add New Slide to duplicate this slide configuration, then edit the background image, Title and Excerpt. Repeat for each slide you wish to add.
  12. To move the text to the bottom of the slide, click the Advanced button on the Design bar and add a Custom Class jumbo
  13. Add the following styles to the Custom CSS box:

If you want to use the jumbo  style on other pages with the Slider widget, add the Custom CSS code above to the main CSS panel in your Customizer menu instead, then simply add jumbo  to the Custom Class field in the Advanced option of any Slider widget on your site. Learn more about using the Advanced widget option.

View Example