How to Turn Divi Blog Module into Carousel Blog Posts

In Divi, there’s a Blog Module that can display your blog posts dynamically and you can also style them in two layouts selection right off the bat, the Fullwidth layout which displays vertically stacked posts so only one post appears on a single row, and the Grid layout that places the blog posts in multiple columns thus creating a grid. If you’ve been using the module for a while, chances are, you may want to have another style besides the Grid and Fullwidth layout for your blog posts.

Previously, we also made some articles that you can try to style up your blog posts. One of them is about moving the content of the blog posts over the featured image for the grid layout blog module and another one is for turning your blog posts with full-width layout into the List Layout.

And this time, we want to show you one more customization to style up your blog posts: turning the blog posts into a carousel with draggable functionality on PC and swipeable on mobile to navigate through the blog posts like the following animation.

Turning Divi Blog Module into a Carousel

Step 1: Create a Page or Edit an Existing Page

To start turning your Divi blog module into a carousel, add a new page to the website or edit an existing page then edit it with the Divi Builder visual editor. For this tutorial, we will create a new page and use the Blog Layout from Charter Boat premade layout packs.

Step 2: Create Previous and Next Button for the Carousel

Once you’ve loaded the layout, the blog module will load your blog posts dynamically. The next step is to create the previous and next buttons to allow the user to go back and forth between posts.

Add a New Row for the Navigation Buttons

Start by adding a new row and move it just above the blog module row, then use the following column structure.

Without adding any modules yet, open the Row Settings then set the width of the row to 100% of the section width by navigating to the Design tab → Sizing block and setting both the Width and Max Width to 100%.

Add the Blurb Modules for The Buttons

Once the row is ready, add a blurb module for the first button to navigate the posts. We choose the blurb module for the button as it has many options to style up the icon.

Open up the Blurb Settings once you’ve added the module applies the following settings to the module:

• Change the Title to “Previous”
• Remove the Body text
• Open up the Image & Icon block, toggle the Use Icon option to Yes, and select the left arrow icon.

• Move to the Design tab then open up the Image & Icon block to change the icon settings as follows:
  • Icon Color: #000000
  • Image/Icon Background Color : #f2f2f2
  • Image/Icon Rounded Corner: 50px for all corner

• Open up the Title Text block to style the title text as follows:
  • Title Font Weight: Semi Bold
  • Title Text Alignment: Center

• Change the module sizing option across different screen sizes and adjust its alignment to the right by going to the Sizing block then modify its settings as follows:
  • Width : Desktop = 10%, Tablet = 20%, Phone = 30%
  • Module Alignment: Right

• Add a custom CSS Class to the module to trigger the carousel action later by moving to the Advanced tab → CSS ID & Classes block then add the “back-button” custom CSS class to the CSS Class field.

• Change the cursor into a pointer by adding the following CSS snippet to the Custom CSS →Main Element:
  • cursor: pointer;

Clone the Button Row and Move it Below the Blog Row

Once the previous button is set, let’s clone its row and module included so we don’t have to repeat the steps, move the row below the blog posts row and just change some settings on the cloned blurb module for the icon, the title, and the custom CSS class for the next button. The changed settings are as follows:

• On the Content tab change the value of:
  • Title: Next
  • Icon: Right Arrow
• Then move to the Advanced tab to change the CSS class
  • CSS ID & Classes → CSS Class: next-button

Step 3: Get the Blog Module Ready

Prepare the Row for the Carousel Blog posts

Before touching the module, let’s prepare the row of the blog module first before we turn it into carousel blog posts. Start by opening the Blog Row Settings then make changes in the settings as follows:

• Go to the Design tab →Sizing block then set the:
  • Width: 100%
  • Max Width: 100%

• Move to the Advanced tab →Visibility block:
  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

The above settings will ensure that the carousel won’t cause any horizontal scroll bar to appear within your page.

Prepare the Blog Module

Once you’ve prepared the row, then it’s time to start tweaking the blog module. Start with opening the Blog Settings then make changes in the settings as follows:

• On the Content tab → Elements block set the Show Pagination setting to No

• Move to the Design tab → Layout block to change the blog post layout to full-width
  • Layout: Fullwidth

• Then add an overlay by adding the following values on the Overlay block
  • Featured Image Overlay: On
  • Overlay Icon Color: #ffffff
  • Overlay Background Color: rgba(1,0,66,0.33)

• Still on the Design tab, open up the Image block and select one of the box shadow effects from the Image Box Shadow option to add a shadow effect to the featured image and use the following color:
  • rgba(1,0,66,0.33)

• Move to the Advanced tab, add a custom CSS class to the blog module to enable the carousel later by opening up the CSS ID & Classes block then add the following CSS class:
  • CSS Class: wpblog-module

• Add some space between the featured image and the title and also some space between the post meta and the excerpt by adding some margins, To do so, add the following CSS snippet to the Custom CSS block:
  • Title: margin-top: 10px;
  • Post Meta: margin-bottom: 30px;

And that’s it for the blog module settings. Let’s turn it into a draggable and swipeable carousel, shall we?

Step 4: Turn the Blog posts into a Draggable and Swipeable Carousel

Once the blog module settings are set, now is time to turn the blog posts into a draggable and swipeable carousel. To do so, we need to add a Slick JS library and some custom codes to make it work.

Add Slick JS Functionality and Slide CSS

Slick JS is a jQuery plugin for creating fully customizable, responsive, and mobile-friendly carousels. To add the functionality of Slick JS, add a code module to any column on the page, or you can add the following script with URL to the head of your website by going to the Divi → Divi Theme Options → Integrations:

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

For this tutorial, we use the code module and place the above code into it, then we add the following slide CSS code just below the end of the script tag.

<Style>
	.slick-slide {
	float: left;
	margin: 2vw;
	}
</style>

Let the Carousel Take its Form

To finally let the draggable and swipeable carousel take its form, you’ll need to add the following JQuery code. You can place the code after the previous slide CSS code. Without further ado here’s the code:

<script>
  jQuery(function($){
   
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.wpblog-module .et_pb_ajax_pagination_container');
   
postContainer.addClass('slider'); 
postContainer.addClass('blog-carousel'); 
 
$('.blog-carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '10%',
    swipe: true,
    prevArrow: backButton,
    nextArrow: nextButton,
   
    responsive: [{
    breakpoint: 1079, settings: {
    slidesToShow: 1
    }
    }]
 
});
});
</script>

The code above also makes the Previous and Next buttons work properly as the navigation buttons. You can look at the picture below for our code placement in the code module.

Step 5: Watch Your Carousel Blog Posts Live

Now, all the required codes are in place already, however, the blog module is still in the full-width layout in our Divi builder. How come?

Don’t worry, save the page and exit the visual builder to see your blog posts from the front end. And voila, your blog posts are turned into a draggable and swipeable carousel with the next and previous buttons to give you another way for navigating through the carousel blog posts.

The Bottom Line

If you’ve been using the blog module for a while, chances are, you may want to have another style besides the Grid and Fullwidth layout for your blog posts which are the default layout that you can get right off the bat. This tutorial showed you how to turn your blog posts into a draggable and swipeable carousel which give you more option to style up your website elements such as blog page or related posts.

If you often use code CSS when creating a website with Divi, you can store your CSS code snippets to the cloud using Divi Cloud service from Elegant Themes. Thus, you can access the snippets from anywhere.