Easily create a new Vertical Divi Slider!
Follow these steps to change your Divi Slider’s default Horizontal Navigation Into a Vertical Navigation in no time.
PREVIEW:
Paste this into Slider → Advanced → CSS Class:
dd-slider
By assigning this CSS Class only to the module you want to modify, you will prevent these styles from being applied to other modules on the same page.
Paste this into Page Settings → Advanced → Custom CSS:
.dd-slider .et_pb_slide_image, .dd-slider .et_pb_slide:first-child .et_pb_slide_image img.active, .dd-slider .et_pb_slide_description {
animation-timing-function: ease-in-out;
animation-name: fadeIn;
animation-duration: .7s;
animation-delay: .7s;
}
.dd-slider .et_pb_slide_description {
text-shadow: none;
}
.dd-slider.et_pb_slider {
display: flex;
align-items: center;
}
.dd-slider .et_pb_slides {
order: 2;
flex: 1;
}
.dd-slider .et-pb-slider-arrows {
order: 3;
bottom: 0;
right: 0;
z-index: 11;
background: transparent;
}
.dd-slider .et-pb-arrow-next, .dd-slider .et-pb-arrow-prev, .dd-slider.et_pb_slider:hover .et-pb-arrow-prev , .dd-slider.et_pb_slider:hover .et-pb-arrow-next {
opacity: 1;
position: relative;
display: flex;
bottom: 0;
left: auto;
right: auto;
font-size: 35px;
margin: 12px!important;
padding: 3px;
background: transparent;
}
.dd-slider .et-pb-controllers {
order: 1;
position: relative;
bottom: 50%;
left: 0;
width: auto;
transform: rotate(90deg);
height: 0;
}
.dd-slider .et-pb-arrow-prev:before {
content: "\21";
}
.dd-slider .et-pb-arrow-next:before {
content: "\22";
}
This code places the Navigation elements (Arrows and Dots) on both sides of the Slider, and also matches the “Fade In” Animation for Images and Descriptions!
🥳 That’s it!
Boost your creativity!
Want to create all kinds of Navigation Menus even more easily?
