Slides Transition
Go to the Customizer -> Front Page Hero -> Select Slider.
Go to the section titled Slides Transitions.
There are 5 customization features available in this section:
Enable Rewind – check this checkbox and enable the slider to replay. The slides succession enters a loop and does not end, even if the slides have already been shown to the users.
Enable Autoplay – check this checkbox for autoplay. Autoplay means users don’t have to manually switch to the next slide, slides change automatically and follows one after another. By default, autoplay is disabled in the customizer, for performance reasons. Click on “(Enable Autoplay) Options” and open the panel with further customization features.
- Slide Duration – this option refers to how long a slide is displayed to users, after which another slide comes in. The values are expressed in milliseconds. The higher the values, the longer a slide is displayed to the users.
- Show Progress Bar – the progress bar indicates that a slide is being displayed. When the progress bar reaches the end, the next slide comes in.
- Bar Color – this feature refers to the color of the progress bar. Select the color you want and adapt it to your branding guidelines.
- Bar Height – this option refers, in fact, to the thickness of the progress bar. Set it to thicker or thinner and see the differences.
Animation Duration – this value is given in milliseconds and refers to the duration of the transition from one slide to another, in the slider. The higher the value, the slower the transition.
Slide Animation Effect – this feature refers to the precise way slides succeed to one another in the slider. You can play with the different options and see the differences:
- Slide horizontal – slides come one after another by following a horizontal pattern, from one side to the other.
- Slide down vertical – slides come one after another by following a vertical pattern (from the top down)
- Slide up vertical – slides come one after another by following a vertical pattern (from the bottom up)
- Fade – slides come one after another through a fade effect (one slide fades out, the next slide fades in)
- Zoom – slides come one after another through a zoom effect (one slide zooms out, the next slide zooms in)
- Flip – slides come one after another through a “flip” effect.
Transition Background – from here, you select the color that is displayed in between slides. This color can be most easily noticed in the case of the “Flip” Animation Effect.
Navigation Options
Regarding the navigation options, there are several customization possibilities:
- Show Navigation
- Show Previous/Next buttons
Click on “Options” to open the panel with the different customization features.
Buttons Left/Right Spacing – this feature refers to the distance the previous/next buttons are placed at, as related to the left/right webpage borders. The values are given on an axis from 0 to 200.
Buttons Offset – this feature refers to the vertical placement of the previous/next buttons, as related to the content of the slide.
Buttons Style – this refers to the shape of the previous/next buttons. They might be square, rounded, rounded square.
Buttons Background Spacing – the changes you make here will only be visible if you have previously set the buttons background color. This feature refers to the space the buttons background occupies in the slide.
Previous/Next Buttons Icons – in addition to the Buttons Style, this feature allows you to define the icons specific to the previous/next buttons. 5+ different icons are available.
Icons Size – from here, you can set the dimensions of the previous/next buttons icons, to larger or smaller values.
Icons Color – this option allows you to choose the color of the icons, so that they should be visible and fully integrate into the overall design.
Background Color – this option refers to the background onto which the icons are placed. You will set the background color from here.
Background Hover Color – this refers to the background color while hovering over with the mouse. The feature helps you make the buttons stand out, while choosing an adequate color that fits into the overall design.
- Show Play/Pause buttons
Play/Pause buttons might be useful for users who want more control over the dynamic features of the website. They might want to browse through it at their own pace, and the Play/Pause buttons should help. Click on “Options” to open the panel with the different customization features for these buttons.
Button Position – different positioning options are available. In the screenshot above, the position of the buttons is right bottom. But you can also choose left top, center bottom, right top, etc.
Button Left/Right Spacing – this refers to the distance the buttons are placed at, in relation to the webpage left/right borders.
Button Bottom Offset – this feature refers to the placement of the buttons on a vertical axis, as related to the slide content.
Button Style – this refers to the shape of the button background. The shape can be set to square, rounded or rounded square.
Button Background Spacing – this option refers to the space the Play/Pause elements occupy in the slide.
Icon Size – this refers to the dimensions of the Play/Pause icons. They can be set to larger or smaller, on an axis from 18 to 80.
Buttons Background Color – this allows you to set the color of the background onto which the buttons are placed.
Background Hover Color – this allows you to choose a specific color for the buttons background, when hovering over with the mouse.
Pause Icon Color – set from here the color of the “Pause” icon.
Play Icon Color – set from here the color of the “Play” icon.
- Show Pagination
Pagination indicates the active item which users see in the slider, as well as its position as related to the other elements in the respective slider.
Check the checkbox to “Show Pagination”, if you want this reference to appear in the slider. Then, click on “Options” to open the panel with the different customization features.
Pagination Position – select where you want the pagination elements to appear: Top or Bottom of the slider.
Pagination Offset – configure how near the pagination elements should appear as related to the slides content.
Shapes Type – define the specific shapes of the elements indicating pagination. They can be medium circles, small squares, large narrow rectangles, to name just a few.
Elements Default Color – set the color the elements of pagination will have by default.
Elements Active/Hover Color – set the color the elements of pagination will have, both in the case a slide is the active element, and in the case of hovering over the items with the mouse.
Elements Spacing – this option refers to the space between the items in the pagination. The values range from 0 to 10.