How to Create a Fading Intro With the Layers Slider Widget
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).
- Click EDIT LAYOUT in the Customizer, then click your page’s BODY panel.
- Click +ADD WIDGET and choose the Layers Slider widget
- Expand the second and third slides and click the red trash-can icon to delete them.
- Click LAYOUTin the widget Design Bar and choose Full Width.
- Full Screen also works beautifully.
- 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
- 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)
- 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.
- Click the Text button on the toolbar and choose the Center Align option and Large Text Size. Adjust the text color as desired.
- Replace the default Title with your one line or sentence.
- Remove the default Excerpt
- Remove the button text/link
- Click +Add New Slide to duplicate this slide and edit the Title with the next line of text, etc