Divi Section Slider Guide

 

Intro

 

Divi Section Slider is a premium and unique plugin that includes two Divi modules to construct stunning slideshows easily, using the default Sections included in Divi. One of this modules, the one named FS Section Slider it will contain the slider content, and the other one, “FS Section Slide” is a marker that must be inserted in each section to indicate the slider container that the section with this module is an slide of the slider.

The Slider Module and The Slide Module have a field named “Identifier”. To build the slider, the value of the slide must be the same of the value of the slider. This is the way the slider recognice the slides that will be part of it.

Let’s see this step by step.

Basic Usage

The Slider Module must be inserted in the desired position and a unique identifier must be assigned to the slider. The section where the module was inserted MUST NOT BE AN SLIDE.

Each Section in the layout can be used as slide, just inserting the slide module. The identifier field value must be the same that you used in the Slider Module.

Repeat the process in some others sections, to make a fully functional slider example.

If you save the layout and check the front side of your site, your slider should be working

Over the slider and slides, you will see a mark. This marks only appears in the builder and indicates you the value of the module

If you click in the Visual Builder Settings item you can activate the preview of your slider in the visual builder.

Please Notice

Is better for performance keep the preview turned off. Be careful to dran and drops layout inside the slider module while the preview is activated

Please Notice

If you insert an slider inside of a section with a slide module in it, the slider won’t work. This, because if the slider is inside the slide, you can’t adjust the settings of the slider.

Basic Demo Video

Slider Parameters

To adjust the slider parameters, you must open the slider settings tab, the slider nav tab or the slider dots tab

  • Autoplay: Fires the slider automatically in page load.
  • Autoplay Speed: The time it will remain on the screen (1000ms = 1s).
  • Transition: Kind of transition used to move from one slide to another.
  • Transition between slides speed: The time in milisecond of the slide transition.
  • Display Nav Icons: Show/Hide the nav icons. This icons lets users navigate between slides ignoring the autoplay speed.
  • Display Nav Only on Mouse over: If this option is on, the nav icons will be hide until the users pass the mouse over the slider.
  • Nav Color:
  • Nav Background Color:
  • Nav Size: Icon Size. The background size is adjusted automatically.
  • Previous Nav Icon: This option must be selected, otherwise, even if you have the option to display nav items as on, the nav icons won’t be showed.
  • Next Nav Icon: Same as above
  • Display Dots: Show/Hide the dots below the slider.
  • Dots Color
  • Dots Size

Animations

Divi Section Slider modifies the default animations included in Divi to works properly as slider animations should work. You can use the animations in the modules, rown, columns and even in sections. Just add any animation to the element, and SET THE ANIMATION REPEAT AS “LOOP”.

Normally, when you use the loop option, the animations are running indefinitely, but don’t worry, this plugin adjust this to launch the animation after each slide transitions was completed and stop it after the animation was ended.

 

Animations in Sections

 

If you want to use the default animations as slide transitions, the first step is set the slider transition speed as 0, to avoid the use of two transitions.

Then, just add the desired animation to the section used as slide. Repeat the process in each slide section. You can use the same one in all of them or a different one in each one.

Animating Multiples Modules

 

If you want animate multiple modules and each module must be appear once the previous one was ended the animation, you must use the delay option to match the duration of the previous one.

An example of this:

We add a Title and a subtitle to the module.

The second one should be appear just after the animation of first one was ended.

So, first, we add a text module to the section and apply an animation like this.

 

Then, we add a new text module to fill it with the subtitle content and the animation is setted with a delay equally to the duration of the first animation.

 

Demos Layouts

Here you can download the layouts you seen on the demo page. To Import it, you must click on the nav at bottom in your visual builder, then click on the up/down arrows, upload the file and cli