Related posts are a valuable feature commonly found on websites and blogs. By suggesting additional content that is relevant to the current article or topic being viewed, related posts can enhance user engagement and satisfaction. For content creators, this feature helps increase user retention by encouraging visitors to explore more of their site’s content.
If you’re utilizing Divi as your website page builder, integrating related posts into your single-post layout is a breeze. This tutorial demonstrates just how straightforward the process is!
Adding Related Posts in Divi Single Post Template
Get the Single Post Layout Ready
To start, you have the option of either opening your current single post layout or crafting a new one using the Divi Builder editor. If you prefer not to start from scratch, you can download a pre-made single post layout from our website such as “Leuwi Hejo,” “Tumpak Sewu,” and “Grojogan Sewu.”
To load the pre-made layout, follow these steps: after downloading and extracting the file, from your WordPress dashboard, go to Divi → Theme Builder, click the grey plus button, and then assign the template to the posts.
Now, click Add Custom Body → Built Custom Body opening the Divi Builder.
Once you’re inside the builder, click the Portability icon (up and down arrow) in the builder menu. Then, navigate to the Import tab. Load the template by clicking “No File Selected” to choose the JSON file, and once selected, click the Import Divi Builder Layout bar to complete the process.
Please wait a moment for the importing process to complete. Afterward, you can begin editing the layout.
Alternatively, if you wish to create a single post template from the ground up, you can refer to our previous article which thoroughly explains the process of creating a single post layout in Divi.
Add a Section for the Related Posts
After the single post layout is prepared, proceed by adding a new section and a single-column row. Simply click the blue plus icon located at the bottom of the post layout. This addition will accommodate the related posts section following the content.
Now, within the newly created row, click the grey plus icon to insert a Blog module. This module will generate related posts for your current post automatically, once you customize its settings.
Customize the Blog Module Settings
Upon selecting the Blog module, the Blog Settings window will promptly open for customization. Begin by changing the blog layout to the Grid layout. Navigate to the Design tab → Layout block, and select Grid from the available options.
Navigate back to the Content tab, and proceed to open the Content block for further adjustments. Customize the settings to display posts with the same category as the current post, and consider reducing the post number and text to optimize space. Below are the recommended settings:
- Post Type: Posts
- Post Count: 3
- Included Categories: Current Category
- Use Post Excerpts: Yes
- Excerpt Length: 130
Save the current layout by clicking the Save button. Remember to also click the Save Changes button on the Theme Builder page after exiting the builder to apply the layout.
Now, when you open a post and scroll to the bottom, you’ll find three related posts within the same category as the current post.
Moreover, you can enhance the related posts section by including a heading. Simply add a Text module just before the Blog module displaying the related posts. With this setup, the only remaining task is to unleash your creativity and design the related posts section according to your preferences!
The Bottom Line
Related posts serve as a powerful tool for driving traffic, enhancing user engagement, and improving the overall quality of content consumption on websites and blogs. This tutorial shows you how easy it was to add related posts to your single post layout in Divi.
