I am thrilled to start a series on pushing the boundaries of the Divi Post Slider module. In this series, I will take inspiration from well-known blogs across the web and challenge myself to recreate their unique post slider designs right here in Divi. These tutorials are an incredible way to explore the Post Slider’s hidden depths and showcase just how flexible it can be!
Today, I am setting my sights on a fantastic example of a clean and engaging post slider: the one found on their now offline Tesco Living website. Their design offers a great blend of functionality and style, and I am excited to break down how you can achieve a similar look for your own Divi blog.
What We’re Building: A Tesco Living-Inspired Divi Post Slider
In this tutorial, you’ll learn how to transform Divi’s standard Post Slider module into a visually similar slider, mirroring the appearance and feel of the Tesco Living example. This means focusing on specific layouts, typography, image presentation, and potentially navigation elements to capture that distinctive aesthetic. It’s an excellent exercise in understanding how custom CSS can totally revolutionize a standard Divi module’s appearance.
Get ready to dive deep into custom styling, refining every detail to match our model slider. By the end, you’ll not only have a stylish new post slider but also a deeper understanding of the Divi Post Slider module’s capabilities.
For a complete, step-by-step visual guide on how to recreate the Tesco Living Post Slider in Divi, be sure to watch our detailed video tutorial:
[Coming Soon]
Implementing the Tesco Living Post Slider Style
To achieve this unique look for your Divi Post Slider, you’ll primarily be working with custom CSS to override and enhance the module’s default styling. The video tutorial above will guide you through the process, including any necessary Divi Builder settings adjustments and precisely where to apply the CSS code (e.g., within your Post Slider Module’s Advanced tab > Custom CSS, Divi Theme Options Custom CSS, or your child theme’s style.css file).
If you would like to use a child theme, you could make use of our 100% free child theme to use on your site. You can access it by clicking https://dividuck.com/download-free-divi-child-theme/
Pay close attention to the video for specific instructions on setting up your Post Slider module and adding any required CSS Classes to ensure the custom styles are applied correctly.
1. CSS ID
You need to add a custom CSS ID to your Divi Post Slider module to allow the CSS code to target it specifically without affecting other Post Sliders on your site. Watch the video to see where to add the class if you are unsure.
The CSS ID I used for this tutorial is:
dd-slider2. Custom CSS Code
This CSS will be the core of the visual transformation, modifying the layout, typography, navigation arrows, pagination, and more to match the Tesco Living aesthetic.
/* SLIDER - GENERAL */
#dd-slider .et_pb_slides .et_pb_slide { padding: 0; overflow: hidden; }
#dd-slider .et_pb_slides .et_pb_container { height: auto !important; padding-bottom: 60px; }
/* SLIDER - IMAGE */
#dd-slider .et_pb_slide_image { width: 61.25%; margin: 0 !important; top: 0; }
#dd-slider .et_pb_slide_image img { max-height: 100% !important; }
/* SLIDER - DESCRIPTION */
#dd-slider .et_pb_slide_description { width: 38.75%; display: block; padding: 25px !important; }
/* SLIDER - TITLE */
#dd-slider .et_pb_slide_title { margin-top: 40px; }
/* SLIDER - CATEGORY */
#dd-slider .post-meta { font-size: 0px !important; position: absolute; top: 25px; }
#dd-slider .post-meta span { display: none; }
#dd-slider .post-meta a { font-size: 15px !important; color: #878486 !important; }
/* SLIDER - NAVIGATION */
#dd-slider .et-pb-slider-arrows { position: absolute; left: 63.25%; bottom: 10px; z-index: 20; }
#dd-slider .et-pb-arrow-next, #dd-slider .et_pb_slider:hover .et-pb-arrow-next, #dd-slider .et_mobile_device .et-pb-arrow-next { right: 0 !important; }
#dd-slider .et-pb-arrow-prev, #dd-slider .et_pb_slider:hover .et-pb-arrow-prev, #dd-slider .et_mobile_device .et-pb-arrow-prev { left: 0 !important; }
#dd-slider .et-pb-arrow-prev, #dd-slider .et-pb-arrow-next { position: initial; padding: 0 5px; margin: 0; display: inline-block; opacity: 1; -webkit-transition: none; -moz-transition: none; transition: none; }
#dd-slider .et-pb-arrow-prev:before, #dd-slider .et-pb-arrow-next:before { font-family: 'ETmodules' !important; font-size: 34px; color: #333; }
#dd-slider .et-pb-arrow-prev:before { content: '\34'; }
#dd-slider .et-pb-arrow-next:before { content: '\35'; }
#dd-slider .et-pb-arrow-next:hover, #dd-slider .et-pb-arrow-prev:hover { opacity: 0.5; }
/* SLIDER - NNUMBERS */
#dd-slider .et_pb_slides .et_pb_slide:before { margin-left: 100px; opacity: 0; position: absolute; bottom: 17px; left: 61.25%; }
#dd-slider .et_pb_slides .et-pb-active-slide:before { opacity: 1; }
#dd-slider .et_pb_slides .et_pb_slide:nth-child(1)::before { content: '1 of 5'; }
#dd-slider .et_pb_slides .et_pb_slide:nth-child(2)::before { content: '2 of 5'; }
#dd-slider .et_pb_slides .et_pb_slide:nth-child(3)::before { content: '3 of 5'; }
#dd-slider .et_pb_slides .et_pb_slide:nth-child(4)::before { content: '4 of 5'; }
#dd-slider .et_pb_slides .et_pb_slide:nth-child(5)::before { content: '5 of 5'; }
/* SLIDER - RESPONSIVE */
@media only screen and (max-width: 960px) {
#dd-slider .et_pb_slides .et_pb_slide .et_pb_slide_image, #dd-slider .et_pb_slides .et_pb_slide .et_pb_slide_description { width: 100% !important; text-align: left; display: block; position: initial !important; }
#dd-slider .et_pb_slides .et_pb_slide .et_pb_slide_description { padding: 25px 0 0 0 !important; }
#dd-slider .et_pb_slide_title { margin-top: 40px !important; }
#dd-slider .et-pb-slider-arrows { left: 0; }
#dd-slider .et_pb_slides .et_pb_slide:before { margin-left: 0; left: 80px; }
}
/* SLIDER ANIMATIONS - OPTIONAL */
#dd-slider .et_pb_slider .et_pb_slide_image,
#dd-slider .et-pb-active-slide .et_pb_slide_image,
#dd-slider .et_pb_slide:first-child .et_pb_slide_image img.active {
-webkit-animation-duration: 0.7s;
-moz-animation-duration: 0.7s;
-ms-animation-duration: 0.7s;
-o-animation-duration: 0.7s;
animation-duration: 0.7s;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
-ms-animation-delay: 0.9s;
-o-animation-delay: 0.9s;
animation-delay: 0.9s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
#dd-slider .et_pb_slider .et_pb_slide_image {
-webkit-animation-name: fadeBottom;
-moz-animation-name: fadeBottom;
-ms-animation-name: fadeBottom;
-o-animation-name: fadeBottom;
animation-name: fadeBottom;
}
#dd-slider .et-pb-active-slide .et_pb_slide_image,
#dd-slider .et_pb_slide:first-child .et_pb_slide_image img.active {
-webkit-animation-name: fadeTop;
-moz-animation-name: fadeTop;
-ms-animation-name: fadeTop;
-o-animation-name: fadeTop;
animation-name: fadeTop;
}A Fresh Spin on Your Divi Blog Posts
And there you have it! By following our step-by-step video and applying the custom CSS, you can give your Divi Post Slider module a distinct and polished look inspired by the Tesco Living website. This tutorial not only helps you achieve a specific aesthetic but also deepens your understanding of how to customize Divi modules to fit virtually any design vision.
We hope this exploration inspires you to push the boundaries of your own Divi designs. Experiment with other styles and features, and share your recreated Post Sliders in the comments of our YouTube channel!
Happy designing with Divi!
