Ria du PlessisDo you have a new Divi website where you want to add a carousel of related blog posts? Well, today is your lucky day! In this article, we show you step-by-step how you can easily display a carousel of related Divi blog posts on your website. So, let’s get started!
Table of Contents
- Display Related Divi Blog Posts In A Carousel
- Install Pee Aye Creative’s Divi Carousel Maker Plugin
- That’s It!
Display Related Divi Blog Posts In A Carousel
Before we dive into the simple steps for displaying your blog posts in a carousel, there are a few essential website setup requirements. You will need to have the following elements in place:
What You Need
Have Some Blog Posts Already Published
Before you can create a related blog post carousel you need to have already published blog posts on your WordPress Site. You need to have at least three or four previous published articles to have a carousel of posts.
Use Categories For Your Blog Posts
To display “related” posts, they must genuinely share a connection. In our scenario, this connection will be based on categories. Hence, every post on your website should be assigned to at least one category. This way, we can showcase other posts within the same category.
Have A Theme Builder Template For Blog Posts
You will need to use a dynamic blog post-Theme Builder template in order for this tutorial to work. Usually, you would have a Post Content module in your template, we will be placing a Blog module somewhere below that post content.
Install Pee Aye Creative’s Divi Carousel Maker Plugin
In order to make a carousel, we need a carousel maker! And of course, there is a great carousel maker on the market that works great. It is called, the Divi Carousel Maker. Basically, this plugin creates a carousel from your existing Divi modules, so it’s pretty unique and clever. The plugin is a great premium plugin developed by the Pee Aye Creative team.
Add The Blog Module To Your Layout
To start, open the Divi theme builder template that is assigned to your blog posts. Choose where you want the related blog post carousel to be placed within the layout. You can use an existing section or row, or add a new one.
Then, add a Blog module to your layout.
Open the Blog module settings and go to the Design tab to the Layout toggle. Make sure the layout is set to Fullwidth (which is set by default) because this tutorial will not work if you change it to Grid layout.
Set The Post Count To 1
In the Blog module settings, you can set the post count to 1 to display a single post.
Select The Current Category
Next, find the Included Categories checkboxes inside the Blog module settings. Here you need to select the option for Current Category. This setting means the module will only show posts that are within the same category as the post the visitor is currently viewing. In this sense, the posts that show will be “related” to the current one.
Duplicate The Module And Adjust The Post Offset Number
In the previous step, we set the Post Count to 1, so now we need to duplicate the Blog module (i.e. that single post) multiple times. The total number of duplicates is up to you, and this depends on how many related posts you want to show. If you are showing 3 posts at a time in the carousel, then you will need at least 4 posts/modules to make it into a carousel.
Adjust The Post Offset Number
Now you should have a list of Blog modules each set to full width showing only one post. But they are all showing the same post. To change that, we need to adjust the Post Offset Number in each of the duplicates.
The offset feature allows us to skip posts that show in the module.
The first Blog module is fine, you don’t need to add any offset. However, each of the other modules needs to have an offset number assigned. Here is the pattern that you need to follow for it all to work correctly:
- Blog module 1 = Post Offset Number 0
- Blog module 2 = Post Offset Number 1
- Blog module 3 = Post Offset Number 2
- Blog module 4 = Post Offset Number 3
- Blog module 5 = Post Offset Number 4
- Blog module 6 = Post Offset Number 5
That same pattern would always continue if more posts were
*Related Article – How To Add a Divi Carousel To A Website (5 Options)
Enable The Carousel
At this point, you should have your modules set up and designed and ready to turn them into a carousel. To create a carousel, first, go into the Row settings where the Blog modules are located and then into the Column settings. There you will see a new fourth tab called “Carousel” which is added by our Divi Carousel Maker plugin. Inside that tab, you will see a toggle called “Carousel Settings.” Click to open this toggle, and then you will see the setting called “Make This Column A Carousel.”
Enabling this setting is what creates a carousel on the front end (it will not show in the Visual Builder) of the Blog modules. Now anyone who is reading your blog post can scroll through a carousel of related blog posts!
That’s It!
I hope you have enjoyed learning How To Display A Carousel Of Related Divi Blog Posts.
Try Divi Areas Pro today
Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.
Click here for more details
More Articles You Will Like
