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

 

    Notice

    Hi! Please consider signing up for my newsletter for... the occasional email about news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

    You will also get a 10% 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

    Default image
    PK
    Hi, I'm a front-end wordpress developer, web designer, and hobbyist photographer living in Australia, and I made this website to share thoughts and tips about web design and everything related to it. If you want to chat, drop me a line here
    Articles: 127

    Leave a Reply

    Generic selectors
    Exact matches only
    Search in title
    Search in content