Want updates & exclusive offers?

Hey there!

Responsive Divi Post Carousel

Responsive Divi Post Carousel

Responsive Divi Post Slider

 

I recently created a responsive Divi post carousel for an upcoming child theme. A few days later, someone in the Divi Theme Users Facebook group wanted to know how to create a very similar layout using the Divi post slider module. Though that module does slide posts, it’s not designed to show more than one post at a time, and if you try to make it do so, you’re fighting a losing battle.

There are of course lots of plugins to achieve this effect, but this layout can be easily created with the standard blog module and slick.js.

After sharing this layout with that Facebook user, several more people asked for access, so I decided to make it a freebie.

Slick.js has a number of useful settings, and I’ve included some of those in the code. You can change the number of slides to show at a time, how many to scroll, set autoplay and autoplay speed, as well as define your own breakpoints so you can show less slides on smaller screens. There are more features you can use beyond what I’ve included, and you can see all those on the offical Slick.js page here.

The blog module functions as usual in that you can define the number of posts to show, categories, and which elements are visible. The layout simply takes those posts and inserts them into the carousel.

I hope you find it useful!

P.S. If you’d like 16+ beautiful blog module layouts, join Pro Pass. My upcoming magazine & news child theme includes a ton of different presets for the blog module. With Pro Pass, you get access to all current and future child themes, theme kits, and Canva kits for one low annual price.

 

Download templateView Demo

 

How to use this template.

Unzip the download file and import the JSON layout into a page or Theme Builder layout.

The first section consists of two named code modules. Post Carousel JS adds the required jQuery and CSS file to the page and creates the carousel. Post Carousel CSS styles the carousel itself.

  1. In the Post Carousel JS code module, you can define posts to show, posts to scroll, autoplay (true/false), autoplay speed (in milliseconds), and your breakpoints.
  2. In the Post Carousel CSS code module you shouldn’t need to modify anything except the colours. Search for the HEX colour values to change the colour of the overlay and the text on hover. I have used only black (#000) and white (#fff) for ease.
  3. Make sure you include the code module section on every page you wish to display the carousel.
  4. Edit the blog module settings as you usually would.

Enjoy!

Michelle x

Pro Pass Membership

Want access to all current and future Divi child themes, theme kits, and Canva kits for one low annual price?

Learn how to create Divi Child Themes that sell

Divi child theme course - Reloaded!
  • Use your existing industry knowledge to define and harness your niche
  • Productise your business with affordable website solutions for clients
  • Add a new revenue stream to your business that pays while you sleep
Find out more
Divi Child Theme Course
Are you

Struggling with Divi?

Struggling with Divi?

Hey! I want to make sure the content I create is helpful to the wider Divi community. If there's something you always find difficult to do when creating Divi sites, or a styling option you wish Divi had, complete the Divi tutorial request form and tell me all about it. I don't guarantee I'll be able to create something that solves the issue, but I'm smarter than your average bear so you never know!

P.S. - This is NOT a support request form and you won't be subcribed to any email lists. If you have an issue with one of our products, you can get help here.



First
Why? I might have questions, and if I create a solution I'll let you know.

Want a website like ours?

More posts

You might like!

How to replace the Divi search button with an icon

3 ways to use anchor links in Divi

Anchor links are used to navigate to specific content on a page rather than simply between pages themselves, and mastering anchor links in Divi is actually very simple. In this tutorial, I’m going to show you three ways to use anchor links.

You have Successfully Subscribed!