Article du fil d'actualités de CreaWeb2B

N'hésitez pas à commenter et partager

Slider with Boxed Bullets Nav

by | 13 Jul,2016 | DIVI, Tutorials, Webdesign, WORDPRESS

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

Talking about Brandy

Talking about Summer Drinks

Talking about fresh fruits

In order to have something similar, you need to download the following zip file and extract the json file :

Layout with Slider

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 - */

/* 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 {
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 {
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.