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! (use coupon code "getcoursewith5off" for 5% off) 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!

You will also get a discount coupon in your inbox as soon as you sign up!

 

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