If you want to create a 3 column blog with a sidebar that allows to customize with Divi so that you can display this customized sidebar on each of your blog pages, you will want to read this article. You can do this, regardless of how well versed you are in Divi because I am going to show you how to implement this on your site by following the step-by-step instructions listed in this article.

Below are the topics of discussion in this article.  Feel free to click on  any one of the following links to skip to that section.

 

The Problem with WordPress Blogs

Ironically, WordPress started out as a blogging platform, and though WordPress has come a very long way, one of the greatest frustrations I have had with WordPress, is not being able to customize the look and layout of the WordPress sidebar. Honestly, if WordPress would simply allow its users to change the font, font color, and font size in the settings of the Sidebar widget, this would not be a problem, but at the moment, they do not allow for this.

Fortunately, this can be solved with just a few lines of CSS, and I’ll show you step-by-step how you can easily implement this into your Divi blog in a moment. Before we get to that, however, let’s start out by showing you how to build the three column blog using Divi. If you already have your three column blog layout figured out, you can click here to skip directly to the section that explains how to implement the few lines of CSS.

 

Purchase the $19 Divi Blog Extras Plugin and Install it

I know that people do not like to spend money on plugins.

Enter the Divi Blog Extras plugin, by diviextend.com. I’m not going to go into great detail here in this article as to why it’s such an awesome plugin, (Elegant Themes has written an entire blog post on this themselves), but let me take a brief moment to tell you why I think it’s worth your investment.

Though it very well may be possible implement extensive CSS (the key-word here is extensive), in order to obtain our objective of displaying a three column blog layout, you have to count the cost involved in doing this, and I’m not necessarily talking about money.

It’s only $19 for a single site. You just can’t beat that. You may be the CSS King of the world, but it will take you far more than an hour to hand code and test your CSS to get it to work correctly. If you are not the CSS King of the world, (the rest of humanity), you probably want a simple solution that just works. You want a plugin that is easy to implement, has been tested with time, has a great reputation, one that won’t break the bank. Given this, I highly recommend that you purchase Divi Blog Extras. I did, and I’m confident that you wont’ regret it.

 

Building The Three Column Blog Layout

 

Step 1Create a New Page

  • Create a new page (PAGES > ADD NEW)
  • Name the page “Blog” (or whatever you like), and save it.
  • If you want your blog to be your home page, go to SETTINGS > READING, and under YOUR HOMEPAGE DISPLAYS, select A STATIC PAGE, and then select BLOG from the drop-down menu, (assuming you named the page “Blog”.
  • Be sure to click the SAVE button to save your changes

 

Step 2Open Up the Divi Builder

  • Once you have opened up the newly created page, (we will refer to it as the “Blog” page from here on out), click on the Purple USE DIVI BUILDER button.

  • You will now see the Divi Builder screen as pictured below.

 

Step 3Create the Layout

  • Now, you will want to click on INSERT COLUMNS in the center of the displayed row.
  • The INSERT COLUMNS dialog box will appear. Be sure to click on the “3/4 1/4” option as displayed in the image below.

  • Now your Divi Builder Layout should look like the image displayed below.

 

Step 4Divi Blog Extras Configuration

  • At this point, you will want to click on the INSERT MODULE(S) “+” button (as shown above), and then select DIVI BLOG EXTRAS, as displayed below.

  • The DIVI BLOG EXTRAS MODULE SETTINGS dialog box will now appear, as shown below.  You will want to click on the CONTENT tab, and scroll down to select the CATAGORIES that you would like to display.

  • Before clicking SAVE & EXIT, click on the DESIGN tab and under BLOG LAYOUT, select BLOCK EXTENDED from the drop-down menu, (see below)
  • Now, you *could* take time to edit the DIVI BLOG EXTRAS module settings now to customize the look of the blog itself, but that is beyond the scope of this article.
  • Again, after selecting BLOCK EXTENDED, click SAVE & EXIT, (see below).

 

  • Now, your Divi Builder should look like this, (see below).

 

Step 5Configure the Sidebar

  • Now let’s click on the first  INSERT MODULE(S) on the right 1/4 of the row.
  • Once again, this opens the INSERT MODULE dialog box.
  • This time, however, scroll down until you see the SIDEBAR module and select it, (see below).

  • After having selected the SIDEBAR Module, the following dialog box will appear.
  • You simply want to ensure that SIDEBAR is selected from the drop-down menu under the WIDGET AREA, (see below).
  • Now click SAVE & EXIT

  • You should now see the following screen in Divi Builder.
  • Now, be sure to click SAVE DRAFT to save all of your settings on this page thus far.

 

 

Implement This CSS Code

The hard part is over, but we have just a smidgen of CSS that we need to implement.  Don’t be intimidated, however, I’ll walk you through the entire process.  It’s no biggie.

  • You need to click on DIVI in the WordPress menu, then THEME OPTIONS.
  • When the page displays, scroll all the way to the bottom and enter the following CSS in the CUSTOM CSS section.

#page-container div#sidebar li a {
font-weight: 600;
color: #0c71c3!important;
}
#page-container div#sidebar h4 {
font-weight: 600;
text-transform: uppercase;
text-decoration: underline;
text-decoration-style: solid;
-webkit-text-decoration-color: rgba(0,0,0,0);
text-decoration-color: rgba(0,0,0,0);
color: #000000!important;
}

  • Now click on the SAVE CHANGES all the way at the bottom of the page.
  • There is one more place that we need to enter some CSS, but don’t worry, I’ll walk you through it together.
  • Open up your BLOG page, and click on the three horizontal lines at the top right hand side of THE DIVI BUILDER.

  • This will then open up a pop-up dialog box like the one below.

  • You will need to copy the CSS below and paste it in the CUSTOM CSS text box and then click the SAVE button.

@media screen and (min-width: 981px) { .et_pb_column_3_4 .et_pb_post_extra.el_dbe_block_extended { width: 30.667%; margin-right: 4%; } .et_pb_column_3_4 .et_pb_post_extra.el_dbe_block_extended:nth-child(2n+2) { margin-right: 4%; } .et_pb_column_3_4 .et_pb_post_extra.el_dbe_block_extended:nth-child(3n+3) { margin-right: 0; } }

  • Be sure to click SAVE DRAFT on your BLOG page.  See, that wasn’t too hard, was it?

 

 

Customizing the Sidebar Couldn’t Be Easier

Now for the fun part!  Simply continue to follow the instructions listed below:

  • Without logging out of WordPress, let’s visit your newly created BLOG page and click on ENABLE VISUAL BUILDER.
  • On the right hand side, you should see your Sidebar.  Click on the MODULE SETTINGS icon (cog-wheel), at the top of the sidebar.
  • From here, the SIDEBAR SETTINGS dialog box will appear, allowing you to modify the look and feel of the Sidebar to your heart’s content.
  • After you save your settings, you can visit your newly create BLOG page and you’ll see that the SIDEBAR that you customized on your BLOG page, now displays on every blog page.

 

Following the above procedure is how I built TalkDivi.com, so I know that it works ;-).  My hope is that you will have found this tutorial useful, but more importantly, I hope that you see that this is something that YOU can do.

Want to know a little secret?  I don’t know ANY CSS.  I got one snippet of CSS from the Divi Blog Extras plugin, and the other snippet of CSS from Elegant Theme Support Team by simply sending them an e-mail.  Because I am a member, they were more than willing to assist, and even provided all of the CSS needed without me having to do anything other than copy and paste what they had given me.  By the way, they responded with code and all within 24 hours 😉

Enjoy!