Sliders are known to not be great for conversion so I like to find other uses for them because visuals are so important for so many users. The demo site shows a coming soon example as well as an alternate gallery look, both using the navigation dots as text links to click through images. Probably works best with no more than 8ish slides.
Notes
I don’t assign IDs or classes in my code (unless it’s for a free layout) so you’ll need to do that if you don’t want the code affecting all instances of the slider module.
Demos are using the regular slider module (not the fullwidth slider).
The CSS code is for the coming soon example (the alternate gallery look is using it as well but doesn’t need all the code).
CSS Code
[css]
/*** SLIDER WITH NAVIGATION DOTS AS TEXT ***/
.et_pb_slider .et_pb_slides .et_pb_container {
min-height: 100vh; /* make fullscreen - height of slides */
}
.et_pb_slider .et_pb_slider_container_inner {
display: block; /* moves description to the top */
}
.et_pb_slider .et_pb_slide_description {
padding: 10% 6%; /* default is 16% 8% */
-webkit-animation-name: none; /* removes animation between slides since slider is using same text on each slide */
-ms-animation-name: none;
animation-name: none;
}
.et_pb_slider .et-pb-controllers {
display: flex;
flex-direction: column;
justify-content: flex-end;
left: unset;
right: 0;
width: auto;
height: 100%;
}
.et_pb_slider .et-pb-controllers .et-pb-active-control {
background-color: #cba135; /* background of active dot text */
}
.et_pb_slider .et-pb-controllers a {
border-radius: 50px;
width: 110px; /* will need adjusting based on your text and font */
height: 30px; /* will need adjusting based on your text and font */
margin-right: 3rem;
margin-bottom: 15px;
color: transparent; /* hides the # of the controller */
background-color: #679352; /* background of dot text */
opacity: 1;
}
.et_pb_slider .et-pb-controllers a:before { /* adds text to dots */
display: block;
color: #fff;
font-size: 15px;
font-weight: 600;
line-height: 30px;
text-indent: 0;
}
.et_pb_slider .et-pb-controllers a:nth-child(1):before {
content: 'Food';
}
.et_pb_slider .et-pb-controllers a:nth-child(2):before {
content: 'Cocktails';
}
.et_pb_slider .et-pb-controllers a:nth-child(3):before {
content: 'Dessert';
}
.et_pb_slider .et-pb-controllers a:nth-child(4):before {
content: 'Café';
}
.et_pb_slider .et-pb-controllers a:nth-child(5):before {
content: 'Location';
}
[/css]
0 Comments