{"id":369980,"date":"2022-01-15T12:45:40","date_gmt":"2022-01-15T12:45:40","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=369980"},"modified":"2022-03-30T00:16:20","modified_gmt":"2022-03-30T00:16:20","slug":"how-to-add-related-posts-to-your-divi-blog-post-template","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/how-to-add-related-posts-to-your-divi-blog-post-template\/","title":{"rendered":"How to Add Related Posts to Your Divi Blog Post Template"},"content":{"rendered":"
Related posts are a great way to increase your blog\u2019s traffic. Users on your blog will see posts that they\u2019re already interested in. This keeps them on your site longer and increases their interaction with you and your website. Fortunately, related posts are easy to add to your Divi blog post templates in the Divi Theme Builder. In this article, we\u2019ll show you how.<\/p>\n

Preview<\/h2>\n

Here\u2019s a look at what we\u2019re making in this tutorial.<\/p>\n

Related Posts on Desktop<\/h3>\n

\"Related<\/p>\n

Here\u2019s a look at how the related posts will look on a desktop. The title and top of the posts overlap the section above it. Post navigation matches the styling of the layout.<\/p>\n

Related Posts on Phone<\/h3>\n

\"Related<\/p>\n

Here\u2019s how our related posts will look on a phone. It includes the overlap for the title and first post.<\/p>\n

\"Related<\/p>\n

This will also include the navigation, as seen at the bottom of the related posts.<\/p>\n

What a Blog Post Template Needs<\/h2>\n

Several elements are considered crucial to a well-functioning blog post template. The blog post needs a title, a featured image, metadata, and body content. Without them, it won\u2019t work well as a blog post. Users will be confused or turned away from the user experience.<\/p>\n

Other Blog Post Elements<\/h2>\n

Several elements aren\u2019t essential to the functionality of a blog post template, but they add a lot of extra functionality to improve the user\u2019s experience. These elements are good to consider.<\/p>\n

For example, you could include comments so readers can interact with you and other readers. CTAs draw attention to your products, services, and your newsletter. Another option is related posts, as we\u2019ll see in this tutorial. Related posts make it easier for users to find content their interested in.<\/p>\n

Build or Download Your Blog Post Template<\/h2>\n

You can either build your blog post template from scratch or download one from the Elegant Themes blog.<\/p>\n

To build it from scratch, be sure to include the list of essentials that we discussed above. Add Divi modules such as a post title, featured image, metadata, and post content. Next, consider the extras you want to include, such as comments and email optin modules.<\/p>\n

Elegant Themes provides lots of free blog post templates designed to match the free layout packs that are available within Divi. To download one from the ET blog, simply search the blog for \u201cfree blog post template\u201d.<\/p>\n

For my examples, I\u2019m using the free blog post template for the Data Science Layout Pack.<\/p>\n

Upload Your Blog Post Template<\/h3>\n

\"Upload<\/p>\n

If you\u2019re downloading a template from the ET blog, unzip it so you can upload the JSON file. To upload it, go to Divi<\/strong> > Theme Builder<\/strong> in the WordPress dashboard. Select Portability<\/strong> and choose Import<\/strong> in the modal that opens. Click Choose File<\/strong> and navigate to your JSON file and select it. Click Import Divi Theme Builder Templates<\/strong> and wait for the import to complete. Save<\/strong> your changes.<\/p>\n

    \n
  1. Go to Divi in the WordPress dashboard.<\/li>\n
  2. Select Theme Builder.<\/li>\n
  3. Select Portability.<\/li>\n
  4. Choose Import in the modal that opens.<\/li>\n
  5. Click Choose file and navigate to your JSON file and select it.<\/li>\n
  6. Click Import Divi Theme Builder Templates and wait for the import to complete.<\/li>\n
  7. Save your changes.<\/li>\n<\/ol>\n

    How to Add Related Posts to Your Blog Post Template<\/h2>\n

    \"How<\/p>\n

    First, click the Edit icon<\/strong> to open the blog post template.<\/p>\n

    \"How<\/p>\n

    Next, we need to add a new Section<\/strong> and single-column Row for our new blog module. Looking at the template in the wireframe view, we see that this one does include a Post Slider module at the bottom. We\u2019ll delete this slider and use this Row, but first, drag the Section above the Call to Action.<\/p>\n

    \"How<\/p>\n

    Once you\u2019ve moved the Section, delete the Post Slider.<\/p>\n

    \"How<\/p>\n

    This Section is already styled with a black background<\/strong>. If you\u2019re adding the background yourself, open the section\u2019s settings and set the background to black.<\/p>\n

      \n
    • Background Color: #000000<\/li>\n<\/ul>\n

      \"How<\/p>\n

      Next, select the gray plus icon and add a Blog module<\/strong>.<\/p>\n

      Related Posts Blog Module Settings<\/h3>\n

      \"Related<\/p>\n

      The settings will automatically open, where you can make your selections. I\u2019ve switched to the live desktop view to see how the module looks within the layout.<\/p>\n

      Leave the Post Type<\/strong> set to Posts. Set the Post Count<\/strong> to 3. Under Included Categories<\/strong>, select Current Category. If you\u2019re creating a blog post template for a specific category, then select that category here. You can see more about assigning a blog post template to a specific category in the article How to Use Different Blog Post Templates for Different Categories with Divi.<\/p>\n

        \n
      • Post Type: Posts<\/li>\n
      • Post Count: 3<\/li>\n
      • Included Categories: Current Category<\/li>\n<\/ul>\n

        \"Related<\/p>\n

        Select Yes to Use Post Excerpts<\/strong>. Change the Excerpt Length<\/strong> to 150. Under Elements, select Yes to Show the Featured Image<\/strong>.<\/p>\n

          \n
        • Use Post Excerpts: Yes<\/li>\n
        • Excerpt Length: 150<\/li>\n
        • Show Featured Image: Yes<\/li>\n<\/ul>\n

          \"Related<\/p>\n

          Also under Elements, select to Show the Excerpt<\/strong> and Pagination<\/strong>.<\/p>\n

            \n
          • Show Excerpt: Yes<\/li>\n
          • Show Pagination: Yes<\/li>\n<\/ul>\n

            Styling the Related Posts Blog Module<\/h3>\n

            \"Styling<\/p>\n

            Next, go to the Design tab. Make sure the Featured Image Overlay<\/strong> is enabled. Change the Overlay Icon Color<\/strong> to white and the Overlay Background Color<\/strong> to rgba(65,226,186,0.62).<\/p>\n

              \n
            • Featured Image Overlay: On<\/li>\n
            • Overlay Icon Color: #ffffff<\/li>\n
            • Overlay Background Color: rgba(65,226,186,0.62)<\/li>\n<\/ul>\n

              \"Styling<\/p>\n

              Change the Title Font<\/strong> to Roboto Mono. Change the Weight<\/strong> to Regular and the color to a dark blue, #323770.<\/p>\n

                \n
              • Title Text: Roboto Mono<\/li>\n
              • Text Color: #323770<\/li>\n
              • Font Weight: Regular<\/li>\n<\/ul>\n

                \"Styling<\/p>\n

                Set the Desktop Title Text<\/strong> to 15px and change the Phone Title Text<\/strong> to 14px. Change the Title Line Height<\/strong> to 1.7em.<\/p>\n

                  \n
                • Title Text Size (desktop): 15px<\/li>\n
                • Text Size (phone): 14px<\/li>\n
                • TLine Height: 1.7em<\/li>\n<\/ul>\n

                  \"Styling<\/p>\n

                  For the Body Text<\/strong>, set the font to PT Sans, the Weight<\/strong> to Regular, and the color to #62748a (these are the default settings).<\/p>\n

                    \n
                  • Body Text Font: PT Sans<\/li>\n
                  • Text Weight: Regular<\/li>\n
                  • Text Color: #62748a<\/li>\n<\/ul>\n

                    \"Styling<\/p>\n

                    Select the Phone icon for the Body Text Size<\/strong> and change the phone size to 12px. Leave the desktop at the default 14px. Change the Line Height<\/strong> (for all screen sizes) to 2em.<\/p>\n

                      \n
                    • Body Text Size (desktop): 14px<\/li>\n
                    • Text Size (phone): 12px<\/li>\n
                    • Text Line Height: 2em<\/li>\n<\/ul>\n

                      \"Styling<\/p>\n

                      Next, scroll down to Pagination Text<\/strong>. For the font, select Roboto Slab. Set the Weight<\/strong> to Regular and change the Color<\/strong> to #41e2ba.<\/p>\n

                        \n
                      • Pagination Font: Roboto Slab<\/li>\n
                      • Font Weight: Regular<\/li>\n
                      • Color: #41e2ba<\/li>\n<\/ul>\n

                        \"\"<\/p>\n

                        The blog module has a Top Margin<\/strong> of -7vw by default. If you want to change the amount of overlap, add more -vw (this example shows -12vw) to the Top Margin.<\/p>\n

                          \n
                        • Top Margin: -7vw (or preferred amount)<\/li>\n<\/ul>\n

                          Add a Section Title<\/h3>\n

                          \"Add<\/p>\n

                          Finally, we\u2019ll add a title to the section, so users know at a glance that these are related posts. We could also leave off the title to the section because it\u2019s easy enough for users to understand that the posts are related to what they\u2019re reading. Add a new Text module<\/strong> by clicking the gray plus icon and dragging it above the Blog module in the same Row. I\u2019m looking at it in the wireframe view because our settings currently make it appear behind the Blog module.<\/p>\n

                          \"Add<\/p>\n

                          Select Heading 2<\/strong> in the content editor and type the title, Related Posts.<\/p>\n

                            \n
                          • Text: Heading 2<\/li>\n
                          • Content: Related Posts<\/li>\n<\/ul>\n

                            \"Add<\/p>\n

                            Select the Design<\/strong> tab, scroll down to Heading Text<\/strong>, and choose H2. For the Heading 2 Font, select Roboto Slab. Set the Font Weight<\/strong> to Bold and choose Center Alignment<\/strong>. Set the Desktop Font Size<\/strong> to 53px and the Phone Font Size<\/strong> to 15px.<\/p>\n

                              \n
                            • Heading 2 Font: Robo Slab<\/li>\n
                            • Font Weight: Bold<\/li>\n
                            • Desktop Font Size: 54px<\/li>\n
                            • Phone Font Size: 26px<\/li>\n<\/ul>\n

                              \"Add<\/p>\n

                              Scroll down to Spacing<\/strong>. Select the desktop settings and set the Top Margin<\/strong> to -12vw and the Bottom Margin<\/strong> to 9vw.<\/p>\n

                                \n
                              • Top Margin: -12vw<\/li>\n
                              • Bottom Margin: 9vw<\/li>\n<\/ul>\n

                                \"Add<\/p>\n

                                Select the Phone<\/strong> icon for the Margin settings and change the Top Margin<\/strong> to -50vw. Close the settings and save your changes.<\/p>\n

                                  \n
                                • Top Margin: -50vw<\/li>\n<\/ul>\n

                                  Results<\/h2>\n

                                  Related Posts on Desktop<\/h3>\n

                                  \"Desktop\"<\/p>\n

                                  Here\u2019s a look at our related posts on a desktop.<\/p>\n

                                  Related Posts on Phone<\/h3>\n

                                  \"Phone\"<\/p>\n

                                  Here\u2019s how our related posts look on a phone. It still has the overlap.<\/p>\n

                                  \"Phone\"<\/p>\n

                                  This does include the navigation as well. Here\u2019s a look at the bottom of the related posts.<\/p>\n

                                  Ending Thoughts<\/h2>\n

                                  That\u2019s our look at how to add related posts to your Divi blog post template. You can set it to display the current category or any specific category you want. This is easy to do with a Blog module and it can easily match your blog post template.<\/p>\n

                                  We want to hear from you. Have you added related posts to your blog post template? let us know about your experience in the comments. <\/strong><\/p>\n

                                  <\/span>
                                  \n<\/article>\n","protected":false},"excerpt":{"rendered":"

                                  Related posts are a great way to increase your blog\u2019s traffic. Users on your blog will see posts that they\u2019re already interested in. This keeps them on your site longer and increases their interaction with you and your website. Fortunately, related posts are easy to add to your Divi blog post templates in the Divi […]<\/p>\n","protected":false},"author":1,"featured_media":369981,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[106],"tags":[],"class_list":["post-369980","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/369980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=369980"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/369980\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/369981"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=369980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=369980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=369980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}