You are here:Home»KB»Web Design»CMS»Wordpress»Setting up a WordPress Blog for a Client using Divi
Friday, 21 March 2025 10:50

Setting up a WordPress Blog for a Client using Divi

Written by

Below are the basic instructions pon setting up a blog for you client (or yourself). Once you have set up your blog you can always change the look and feel afterwards.

Create a page, and call it Blog

  • make sure you have not defined the 'blog' page for displaying [posts as this will prevent you from editing it with Divi, unless you use the blog template in theme builder)
  • Settings --> Reading --> Your homepage displays --> Posts page: `– Select –`
  • if you have I think you need to add another template in theme builder?? or it just uses the default global, see what it foes `blog template`
  • or design a template and do your styling there, but i prefer the blog page, but does this cause issues?

Design your Blog page

There are 2 places you can design your `Blog` page:

  1. A standard page
  2. Using the `Blog` template in `Theme Builder`

I prefer creating a `Blog` page as it is easy and more logical for me to manage, especially for small sites.

Using the `Blog` template to override the posts page as defined in static pages is a not really needed unless you have a specific reason such as overriding the `Global` Header and Footer or even just adding a featured image.

You can mix and max the styles below by having blocks with a Sidebar but you might find you run out of real estate on your page quickly.

Layout 1 - Blocks (Divi Default)

Follow the instructions below, styling as required, and you will get a layout similar to the Divi Blog that utilises blocks.

  • Top Section (Regular) = n/a
  • Middle Section (Regular)
    • 1st Row (3 Column: 1/5, 3/5, 1/5)
      • 1st Column
        • Empty
      • 2nd Column
        • Module(s):
          • Text
            • Use the text
              • <h1>: QuantumWarp Blog
              • <p>: Stay up to date with our most recent news and updates
            • I use a custom header with the title and other text in it instead of this module as this fits with my site. So this section is not needed for my page.
          • Search
            • Input Placeholder: Search Our Blog
            • Show Button: No
            • Exclude Pages: Yes
            • Save as a Global module calling it `Blog - Search`.
      • 3rd Column
        • Empty
    • 2nd Row (1 Column)
      • 1st Column
        • Module(s)
          • Blog
            • Post Type: Posts
            • Post Count: 9
            • Content Length: Show Excerpt
            • Use Post Excerpts: Yes
            • Show Featured Image: Yes
            • Show read More Button: Yes
            • Show Author: No
            • Show Date: Yes
            • Show Categories: Yes
            • Show Comment Count: Yes
            • Show Pagination Yes
            • Save as a Global module calling it `Blog - Posts`.
  • Bottom Section = n/a

Layout - Standard Article List (with Sidebar)

Follow the instructions below, style as required and you will get a standard post list layout with a sidebar.

  • Top Section (Regular)
    • 1st Row (1 column)
      • 1st Column
        •  Module(s):
          • `Post Title`
            • I use a custom header with the title and other text in it instead of this module as this fits with my site. So this section is not needed for my page.
  • Middle Section (Regular)
    • 1st Row (2 columns: 2/3, 1/3)
      • 1st Column
        • Module(s):
          • `Post Content`
            • .....add setting notes here.............
      • 2nd Column
        • Module(s):
          • Sidebar
            •  Add relevant widgets to the sidebar such as `search`
            • `Widget Area` set to `Sidebar`
            • (Optional) Remove the grey separator bar
            • Save as a Global module calling it `Blog - Sidebar`.
  • Bottom Section = n/a

Design your Post Page

Follow the instructions below, style as required and you will get a standard post list layout with a sidebar.

If you don't want a sidebar, set the middle section row to have only 1 column and remove the `Sidebar` module and configuration from the following instructions, the rest will be the same.

If you don't want comments, just don't add the bottom section.

Create the Template

  • Divi --> Theme Builder --> Add New Template --> Build New Template --> Use On: `All Posts` --> Create Template
  • Divi --> Theme Builder --> `All Posts` --> Add Global Body --> Build Custom Body

Build your Layout

Create the layout as shown below:

  • Top Section (Regular)
    • 1st Row (1 column)
      • 1st Column
        •  Module(s):
          • `Post Title`
            • Show Title: Yes
            • Show Meta: No
            • Show Author: Yes
            • Show Date: Yes
            • Show Posts Categories: Yes
            • Show Comments Count: No
            • Show Featured Image: No
            • I use a custom header with the title and other text in it instead of this module as this fits with my site. I would therefore insert the dynamic `Post title` in there. So this section is not needed for my page.
  • Middle Section (Regular)
    • 1st Row (2 columns: 2/3, 1/3)
      • 1st Column
        • Module(s):
          • `Post Content`
            • .....add setting notes here.............
      • 2nd Column
        • Module(s):
          • Sidebar
            • Use the Global module `Blog Sidebar`.
            • `Widget Area` set to `Sidebar`
            • (Optional) Remove the grey separator bar
            • Add relevant widgets to the sidebar such as `search`
  • Bottom Section
    • 1st Row (1 Column)
      • 1st Column
        • Module(s):
          • `Comments`
            • .....add setting notes here.............

Design your Search Results page

After someone has used the blog search feature you need to make sure the search results they are offered are styled correctly.

You can use either either of the `Blog` page layouts, but it you want to use your `Blog` page design you used above then this is very simple,

Instructions

  • Make sure any modules you want to be in sync between this page and the `Blog` page are made global.
  • Divi --> Theme Builder --> Add New Template --> Build New Template --> Use On: `Search Results` --> Create Template
  • Divi --> Theme Builder --> `Search Results` --> Add Global Body --> Build Custom Body
  • Copy your `Blog` page layout and paste into
    • Divi --> Theme Builder --> `Search Results`--> Custom Body
  • Make the following changes:
    • Change the Page Title to be `Search Results`.

 

 

Read 133 times Last modified on Friday, 21 March 2025 15:33