Divi tip – Vertical controllers on slider

Here’s how to put the Divi slider/gallery/carousel controller dots to the side.

Compared to my other tutorials, this one is probably one of the simplest. Just a snippet of CSS, and you’re DONE. woot.

I won’t even make a video for this one. haha

I will have to explain some stuff though..

NOTE: Hey, something went wrong with my current setup: WP5 + Extra 2.18.4
So I just put it in Divi + WP 4.9ish because… it works.

Check it out here.

Click me to go check it out

Here’s how to put the Divi slider/gallery/carousel controller dots to the side.

Compared to my other tutorials, this one is probably one of the simplest. Just a snippet of CSS, and you’re DONE. woot.

So, here’s what you do:

.et_pb_gallery.et_pb_slider.vertical-dots .et-pb-controllers {
  position: absolute;
  transform: translateY(50%);
  bottom: 50%;
  right: 30px;
  left: auto;
  display: inline-block;
  text-align: center;
  width: 15px;
  height: auto;
}
.et_pb_gallery.et_pb_slider.vertical-dots .et-pb-controllers a {
  display: block;
  background-color: rgba(255,255,255,.4);
  width: 12px;
  height: 12px;
  margin: 12px 0;
  border-radius: 50%;
  border: 2px solid #fff;
}
.et_pb_gallery.et_pb_slider.vertical-dots .et-pb-controllers a.et-pb-active-control {
  background-color: #fff;
}
.et_pb_gallery.et_pb_slider.vertical-dots .et-pb-slider-arrows {
  display: none;
}

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! Start learning proper CSS for Divi

Image Credits

Photo by Nathalie Jolie on Unsplash, Photo by Jannis Brandt on Unsplash, Photo by Jessica Ruscello on Unsplash, Photo by Joseph Gonzalez on Unsplash