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;
}

 

Divi tip - Vertical controllers on slider To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! Start learning proper CSS for Divi

 

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

 

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