Full Width Sliders

Library item: "Dawn Full width Slider"

This is the first Slide

It has a dark grey Background overlay colour over the slide and text colour set to light.

This is the Second Slide

It has a transparant white Background overlay colour and text colour set to dark

This is the third Slide

Lorem ipsum dolor sit amet, cu eum corpora efficiendi omittantur, timeam nonumes his cu.

Insert the “Dawn Full width Slider” into your pages by adding the module to a full width section.

You can tweak the settings for each individual slide in the slider module to improve readibility of text and the overall look; set the ” Background overlay color” and it’s transparancy, and adjust the “Text color” to  dark or light as needed.

Parallax Effect

The slider below is the same “Dawn Full Width Slider”, but with a Parallex effect.

To achieve this effect, go to the General tab (of the whole module, not individual slides within the module) and toggle “Use Parallax effect” to Yes. For “Parallax method” below choose true Parallax.

 

This is the first Slide

It has a dark grey Background overlay colour over the slide and text colour set to light.

This is the Second Slide

It has a transparant white Background overlay colour and text colour set to dark

This is the third Slide

Lorem ipsum dolor sit amet, cu eum corpora efficiendi omittantur, timeam nonumes his cu.

Design Idea Using the Dawn Full width Slider in front of a video or image

The building element below consists of slides that are displayed over a moving video background. The video is placed in the full width section behind the actual slider.

To set a video go to the Section; on the General Tab,  under “Background Video MP4”

Add & adjust slides in the slider module, making sure there is no  background colour or image for your individual slides or slider module, so that the text on the slides is displayed in front of the video.

It is also possible to set videos behind individual slides, just like you can set an image for each slide.

To use this effect with an image, i.e. slide text in front of an image, set an image for your full width section instead of a video.

[divi_help]

This is a full width Slider in front of a Video

Here the video is placed in the section, so the slide text slides in front of it.

This is the Second Slide

with another message and a button