How to Create a Fading Intro With the Layers Slider Widget

How To  Tutorials  Last Updated: Time to Read: 1 minute

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.

Fading intros are an elegant way to introduce content on a page, or may be used alone to create an animated landing page. This is achieved with the fade animation in the Layers Slider and the auto-slide function. 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 LAYOUTin the widget Design Bar and choose Full Width.
    • Full Screen also works beautifully.
  5. Click SLIDER in the widget Design Bar.  Set the following:
    • Show Slider Arrows: unchecked (it is best to disable these when using auto-slide)
    • Show Slider Dots: checked
    • Animation Type: Fade
    • fade
    • Auto-play Slides: checked
    • When using auto-slide, you will need to first ensure each slide is rather brief and contains a similar amount of text. This slider setup is best when you put one line/sentence per slide. Gauge how long it takes you to read each slide and set the slide interval appropriately. (6 seconds is a good place to start)
  6. Click on the Background Image button in the slide’s toolbar and choose a background color or upload a background image. You will be using the same color/image on all slides to get this effect.
    • When using background images, always choose a background color that closely matches  so the text color invert triggers correctly.
  7. Click the Text button on the toolbar and choose the Center Align option and Large Text Size. Adjust the text color as desired.
  8. Replace the default Title with your one line or sentence.
  9. Remove the default Excerpt
  10. Remove the button text/link
  11. Click +Add New Slide to duplicate this slide and edit the Title with the next line of text, etc

View Example