Slider with Boxed Bullets Nav
Like promised, in this tutorial, we’ll see how to customize DIVI Slider using parameters and CSS in order to add navigation boxes under slides.
All started on Facebook, when we discussed about the way to achieve a custom slider with boxed bullets using DIVI.
The challenge was to have three different slides with linked navigation boxes at the bottom. A small triangle must show up upon the box of selected slide. Once clicked, a box leads to the given slide.
So when the linked slide isn’t active, the nav box will look like that
And once linked slide is active it will look like that
Someone suggested to use javascript and someone suggested that it would not be necessary cause DIVI already manage the slides and navigation inside slides. So it was said that CSS could do the job in order to add the small triangle and add the boxes.
I found the idea funny so i decided to give it a try. I know there are multiple ways to achieve such a result (customize the slider module php, using javascript, using pictures for the boxes…) but the solution provided here uses only CSS.
The point is that there is nowhere to add text inside the <a> for the bullets and wich is more, the text was hidden using text-indent in order to avoid seeing bullets content (natively it contains the number of the slide.)
So to insert “text” for our boxes, we need to target them by child number. So bullet ONE would be “a child ONE” and so on for other bullets…
If we want three boxes, we need to give 100%/3 size to each one, so each box should be 33.333333% wide. If we want four boxes we set the width to 25%.
By targetting each box with its child number, we are able to add content (title text) and color, and background color to each one.)
Let’s have a look at what our slider will look like
In order to have something similar, you need to download the following zip file and extract the json file :
And next, you need to import that file inside your DIVI Library.
Next you need to add a new page (later you’ll be able to save only the slider section if you want, or you can delete anything else on the layout.) and load the imported layout from DIVI Library.
Next, you’ll need to add the following custom CSS to your child theme style.css or inside DIVI custom CSS (It’s far better to use a child theme)
/* SLIDER CSS - creaweb2b.com */
/* Overiding the native bullets bottom setting for bottom position */
.testslider .et-pb-controllers {
bottom: -10px;
}
/* Background color for each bullet (box) */
.testslider .et-pb-controllers a:nth-child(1) {background-color:#895001!important;}
.testslider .et-pb-controllers a:nth-child(2) {background-color:#05b5c4!important;}
.testslider .et-pb-controllers a:nth-child(3) {background-color:#9ea507!important;}
/* Setting the title font for Boxes */
.testslider .et-pb-controllers a::before {
color: #fff;
font-size: 25px;
text-shadow: 0 0 2px #666;
}
/* Here go the text for each box title (change the text inside content:"PUT YOUR TITLE HERE";) */
.testslider .et-pb-controllers a:nth-child(1)::before {
content: "Brandy";
}
.testslider .et-pb-controllers a:nth-child(2)::before {
content: "Sea sunrise";
}
.testslider .et-pb-controllers a:nth-child(3)::before {
content: "Green Lemon";
}
/* Making our bullets looking like boxes */
.testslider .et-pb-controllers a {
border-radius: 0;
display: inline-block;
font-size: 0; /* This is set to hide the native number inside the bullet */
height: 60px;
margin-right: 0;
padding-top: 15px;
text-indent: 0;
width: 33.333333%; /* here we want 3 boxes - if you want more or less change this by dividing 100%/number of boxes you want */
}
/* Here goes our little triangle */
.testslider .et-pb-controllers a.et-pb-active-control::after {
background-color: inherit !important;
content: "";
display: block;
height: 25px;
margin-left: auto;
margin-right: auto;
position: relative;
top: -61px;
transform: rotate(45deg);
width: 25px;
z-index: 9;
}
/* Adjusting the slider height for images with an height of 640px */
/* I gave the slider the class of testslider inside diapo settings in the builder */
@media only screen and ( min-width:981px ) {
/* slider height */
.testslider, .testslider .et_pb_container {
height: 640px !important;
}
.testslider, .testslider .et_pb_slide {
max-height: 640px;
}
}
/* some settings to make the whole thing look not so bad on mobile and tablets */
@media only screen and ( max-width:768px ) {
.testslider .et-pb-controllers {
height: 20px;
}
.testslider .et-pb-controllers a::before {font-size:8px;}
.testslider .et-pb-controllers a.et-pb-active-control::after {
height: 8px;
top: -31px;
width: 8px;
}
.testslider .et-pb-controllers a {
height: 20px;
padding-top: 0;
}
}I added Slides descriptions and buttons on each slide. I found nice to make the buttons match the boxes background colors. If you want you can customize these or just remove the whole thing.
All images come from Pixabay.
Hi,
How can I achieve this with a full width slider?
Best, Chris
Is there away to turn these into thumbnails?
Yes, this can be done by adding thumbnails inside CSS, but it’s a little hard to explain that in a comment.
This is perfect. I tried it worked perfect. For mobile only doesn’t look good. The buttons are tiny. Tried to change manage it a little but still not good. Any ideas?
Fabrice, you rule! 👏👏👏👏👏
Thanks Elisandro 🙂
Hello, I followed your tutorial and got a nice slider. Thank you for that.
However I noticed that all my other sliders got the same boxes now which I do not want. How can I make that only the slider I want get this layout?
Would love if you would help me sort this out.
Thanks in advance.
Arun
Hi, just updated the tutorial for you. Add a class to the slider module (here it’s testslider) and use the new css provided. Be warned, maybe quotes will be replaced by fancy quotes so check this when you copy/paste the code.
New code below :
/* SLIDER CSS – creaweb2b.com */
/* Overiding the native bullets bottom setting for bottom position */
.testslider .et-pb-controllers {
bottom: -10px;
}
/* Background color for each bullet (box) */
.testslider .et-pb-controllers a:nth-child(1) {background-color:#895001!important;}
.testslider .et-pb-controllers a:nth-child(2) {background-color:#05b5c4!important;}
.testslider .et-pb-controllers a:nth-child(3) {background-color:#9ea507!important;}
/* Setting the title font for Boxes */
.testslider .et-pb-controllers a::before {
color: #fff;
font-size: 25px;
text-shadow: 0 0 2px #666;
}
/* Here go the text for each box title (change the text inside content:”PUT YOUR TITLE HERE”;) */
.testslider .et-pb-controllers a:nth-child(1)::before {
content: “Brandy”;
}
.testslider .et-pb-controllers a:nth-child(2)::before {
content: “Sea sunrise”;
}
.testslider .et-pb-controllers a:nth-child(3)::before {
content: “Green Lemon”;
}
/* Making our bullets looking like boxes */
.testslider .et-pb-controllers a {
border-radius: 0;
display: inline-block;
font-size: 0; /* This is set to hide the native number inside the bullet */
height: 60px;
margin-right: 0;
padding-top: 15px;
text-indent: 0;
width: 33.333333%; /* here we want 3 boxes – if you want more or less change this by dividing 100%/number of boxes you want */
}
/* Here goes our little triangle */
.testslider .et-pb-controllers a.et-pb-active-control::after {
background-color: inherit !important;
content: “”;
display: block;
height: 25px;
margin-left: auto;
margin-right: auto;
position: relative;
top: -61px;
transform: rotate(45deg);
width: 25px;
z-index: 9;
}
/* Adjusting the slider height for images with an height of 640px */
/* I gave the slider the class of testslider inside diapo settings in the builder */
@media only screen and ( min-width:981px ) {
/* slider height */
.testslider, .testslider .et_pb_container {
height: 640px !important;
}
.testslider, .testslider .et_pb_slide {
max-height: 640px;
}
}
/* some settings to make the whole thing look not so bad on mobile and tablets */
@media only screen and ( max-width:768px ) {
.testslider .et-pb-controllers {
height: 20px;
}
.testslider .et-pb-controllers a::before {font-size:8px;}
.testslider .et-pb-controllers a.et-pb-active-control::after {
height: 8px;
top: -31px;
width: 8px;
}
.testslider .et-pb-controllers a {
height: 20px;
padding-top: 0;
}
}
Hi Fabrice
Thank you very much for taking your time. I tried again and it works but this time the triangles and the names inside the boxes went away. I tried again with your old code and it came back. Maybe there is a little error in the code this time. I wish I had a bit more knowledge to understand it.
Again thank you for such great help. Hope you can find the error.
Best regards
Arun
Hi Arun, as i said, check out the quotes, i see that inside the code,WP has replaced it with fancy quotes and so the line maybe ignored. (Search for the lines with the word content.)
I updated the tutorial, so now if you copy/paste the code from the code box, it should work fine (no more fancy quotes)
Such a small code with one class to add to the slider module and it makes such a big impact. I changed percentage to 20% for my slider of 5 images and I ignored the media heights so that I could use my fullwidth slider for full page. Added class to module and voila! Thanks so much for this amazingly simple way to make the slider funky.
Nice to see you like it. If needed you can improve code by adding the slider class before each .et-pb-controller so you can create more than one customized sliders on the same website.
This is so much change and really cool. Thank you so much.
Thanks, you’re welcome.