Blog Sections

Layout Demo URL:  https://diviwp.com/ui/sections/blog-sections/

DiviWP's Blog Sections use the Divi Blog Module to list  Posts or any Custom Post Type in a fullwidth or grid layout. 

The Divi Blog Module's built-in design options are unfortunately very restrictive in their capabilities in that they don't allow you to target certain elements individually or provide design or layout options to achieve our desired design.

That's why we've used Custom CSS in a seperate Code Module to create the Card, Grid and List style interfaces of these sections and to manipulate the Post Featured Image, Post Meta and Post Content into custom positioning.

Where applicable and outlined below we've also used Custom jQuery Code Modules in order to, amongst other things: truly equalize the Blog Module Grid heights, position the Read More button to the bottom of cards and replace the default pipe seperator | to a more interesting bullet • sign.

The beauty of having all the Custom CSS and jQuery in seperate modules is that you can simply remove them at any stage to return to the default Module styles.

How to view Custom CSS or Custom jQuery

When you are editing in the Visual Mode and building on the front-end of your website, Custom CSS Code Modules or Custom CSS configured within a Row, Column or Module is not visible.

Accessing the  Layer View or Wireframe mode gives you access to your page and section structure, displaying all elements in an organized, nested hierarchy list that clearly showcases your page structure. Learn more about Layer View and Wireframe mode.

Let's take Blog Section 1 as an example:

Module Naming Conventions

The Section Admin Label describes the section while the Blog Module positioned within the Column is describing the Module and the custom class name that is set via: 

Module Settings → Advanced → CSS ID and Classes

In this example, the class name is set to diviwp-blog-fullwidth-1

The admin label for the Custom CSS Code module below the Blog Module refers to the class diviwp-blog-fullwidth-1 meaning it is targeting that classname only. 

If your Blog Module had a different classname applied then the code within the CSS and jQuery Code Modules would not work. 

Underneath the Custom CSS module, you can see the Custom jQuery code and an explanation for what it is doing:

"Custom jQuery Code for diviwp-blog-fullwidth-1 to change post meta | to •"

This Code Module is targeting the blog module with a custom class of diviwp-blog-full-width-1 and changing the post meta | sign to a bullet sign  •

Here's an example of how that will render on the front-end of the page:

If you would prefer to have the standard | seperator then you can simply delete the Custom jQuery Code Module and it will not affect the Module or Section in any way. 

You're always in control and can easily turn on or off the CSS or jQuery Code Modules or copy it into your child theme or Divi Theme Options. More on that below!

Why certain Sections may look different in the Visual Builder

Because some sections rely on Custom jQuery to group elements into their own container divs, the appearance in the Visual Builder won't reflect what they really look like on the front-end. 

For example, let's look at a simple example of this in action:

Here's Blog Section 2 in the Visual Builder:

Notice how the category is below the title?

Now let's look at the front-end version:

Here the category is placed above the title. 

Let's take another example using Blog Section 16 as an example, as it appears in the Visual Bulider:

Now let's take a look on the front-end:

This is unfortunately one of the trade-offs we have to make in order to achieve complex layouts using the Divi Blog Module with additional custom CSS and jQuery. 

Please Note:

• Blog Sections 2,4,6,7,8 and 9 all position the category above the post title, however, the category will display below the title in the Visual Builder.
• Blog Sections 16, 17, 18, 19, 20, 21, 22, 23, 24 and 25 will all look different in the Visual Builder because of the custom CSS and jQuery required to achieve their desired designs on the front-end. 
• This is unfortunately one of the trade-offs we have to make in order to achieve complex layouts using the Divi Blog Module with additional custom CSS and jQuery
  

Support is always on hand

You can rest assured that support is always on-hand and we'll be able to guide you as far as possible should you require assistance with any Custom CSS or jQuery we have included in our layouts, templates or sections. 

Frequently Asked Questions

Why do I only see 5 posts in some of the demos?

Some examples only use 5 posts to illustrate how spacing and pagination works between the grid or fullwidth layouts. 

In Sections 10 - 15, you can also see how the cards are equalized in height with the read more buttons aligned to the bottom of the card container. 

Do Sections 10 - 15 and 26 - 27 offer truly equalized heights?

They sure do! This means clever calculations take place to determine the height of the tallest "card" which then sets all the other cards to the same height. 

This also applies to pagination.

My pagination does not look like the demos? How do I get numbered pagination?

The demo examples use a free plugin called WP-PageNavi, which you'll need to install and activate: https://wordpress.org/plugins/wp-pagenavi/

You don't need to adjust any further settings but you may want to remove some of the carets for the previous and next fields. 

How do I change the height of the image in Sections 1 - 9?

We're using a clever trick to scale the image proportionately to the height of the image container within these sections in order to achieve the desired "card" design interface. 

Let's take Blog Section 1 as an example illustrating this:

Opening up the Section via Layer's View:

Then click on the cog icon to open up the "Custom CSS Code for diviwp-fullwidh-1" module:

Look for the .entry-featured-image-url class and you can adjust the height to any value that you feel is appropriate. 

You can also change the media queries further down in the module to any value that you'd like:

The same principles apply for Sections 2-9. 

How do I change the color of the category links in any section? 

The Divi Blog Module does not give us the ability to only target the catgory links. 

We therefore set the color of these links in the Custom CSS module. 

Again, let's use Blog Section 1 as the example. Open up the Custom CSS module and search for:

.post-meta a

You can see from the above screenshot how the color has been set along with the font-weight and the hover style. 

How do I change the colors of the Read More button?

Open up any Section's Custom CSS module and search for:

Moving CSS or jQuery:

You can move Custom CSS and Custom jQuery into Divi's Theme Options or your child theme. 

All you'd need to do is copy the Custom CSS classes and their properties and paste them into one of the options above. 

Just remember to delete the opening and closing <style> tags or <script> tags if you're moving any custom JavaScript.