We frequently see weblog playing cards with the creator’s identify, the put up’s class, or the post date. Those are put up components that belong to the put up itself. Divi will provide you with quite a lot of regulate over put up components within a Weblog Module. On the other hand, it may well infrequently be tough to come to a decision which components you need to show (and which you don’t). To lend a hand you make a decision, this put up will read about 8 weblog put up part show combos for Divi’s weblog module. We’ll additionally talk about the benefits of every.

Let’s get began.

Upload Weblog Module to New or Current Web page

You’ll upload a Weblog module to a brand new or current web page or make changes to an current Weblog module. For my examples, I’m adjusting the Weblog modules at the Weblog web page for the Acai Bowl Layout Pack that’s to be had inside of Divi.

Right here’s a take a look at the web page with its default design settings. This web page contains two Weblog modules to create a hero segment and a weblog feed.

Add Blog Module to New or Existing Page

The Weblog module within the hero segment contains 1 put up with a fullwidth format. It shows the featured symbol, identify, date, class, and excerpt.

Add Blog Module to New or Existing Page

The weblog feed offsets the posts by means of 1 so it doesn’t overlap with the hero segment. It shows 3 posts in a grid format. It contains the similar components because the hero segment and provides pagination. We can most commonly focal point at the weblog feed for our examples for the reason that featured symbol is smaller, making the weather more uncomplicated to peer in my screenshots. I’ll additionally upload a couple of with the featured put up module to turn how combos can paintings in combination around the modules.

Add Blog Module to New or Existing Page

Pass to Components Tab

To search out the Components tab throughout the Divi Weblog module, first, click on the grey tools icon that looks while you hover over the Weblog module.

Go to Elements Tab Element Combinations

This opens within the module’s settings to the Content material tab. Scroll all the way down to Components. Right here, you’ll see a listing of choices you’ll allow or disable by means of clicking their toggles. Each and every of those is a component you’ll use, and you’ll use them in any mixture you need. Let’s take a look at every one in my opinion.

Go to Elements Tab Element Combinations

Assessment of the Other Components You Can Display/Conceal in Your Weblog Module

Right here’s a take a look at every of the weather. The weather may also be styled in my opinion within the Design tab and every part has a customized CSS box within the Complicated tab that makes it simple to focus on them with CSS.

Featured Symbol

The primary part is the Featured Symbol. That is the thumbnail symbol from the put up. It attracts consideration to the put up. It’s additionally a hyperlink, so clicking the picture takes the reader to the put up.

Overview of the Different Elements Element Combinations

Learn Extra Button

Subsequent, now we have the Learn Extra Button. This can be a hyperlink to the entire weblog put up. It seems that underneath the remainder of the content material.

Overview of the Different Elements

Writer

Writer shows the identify of the weblog put up creator. It shows the identify in keeping with the way it’s specified within the WordPress Customers Settings. It’s clickable, so the reader can see the archive web page for that creator.

Overview of the Different Elements

Date

The Date part shows the date the put up was once revealed. It makes use of the date structure that you simply’ve specified within the WordPress Basic Settings.

Overview of the Different Elements

Classes

Classes shows the identify of each and every class you’ve decided on for the put up. Each and every class identify is clickable, so the reader can see the archive web page for each and every class.

Overview of the Different Elements

Remark Rely

Remark Rely shows the collection of feedback at the put up. This informs readers if there are any feedback, or any new feedback, they are able to have interaction with.

Overview of the Different Elements

Excerpt

Excerpt presentations a small snippet of the put up in keeping with the way you’ve set it up for the put up. It may be used as a teaser or as an outline of the put up itself.

Overview of the Different Elements

It additionally works with the settings that you simply’ve specified within the Content material house of the Weblog module’s settings, which seems above the Components settings. You’ll set it to make use of the customized put up excerpt if there may be one and specify the collection of characters it is going to show. I’ve set this one to turn 100 characters.

Overview of the Different Elements

Pagination

Pagination presentations the hyperlinks to peer the older and more moderen posts. This assists in keeping you from having to turn each and every put up at the web page and customers nonetheless have simple get entry to to learn them. They may be able to see the former or subsequent posts by means of clicking the hyperlinks, which is analogous to turning a web page.

Overview of the Different Elements

Part Combos & How They Glance

The weather can be utilized in combos to create some fascinating designs. It’s tempting to allow all of them, as I’ve finished within the symbol beneath, however this will litter the web page and supply knowledge that the reader doesn’t want. As a substitute, it’s a good suggestion to make a choice the ones you need. By means of deciding on them in sure combos, we will be able to be extra strategic concerning the weblog design. We will additionally use them together with different Weblog modules, as we’ll see.

Element Combinations & How They Look

Part Combos Choice 1: Featured Symbol, Identify & Description

If you wish to display the featured symbol, the put up identify, and the outline, merely allow the Featured Symbol and Excerpt.

Featured Image, Title & Description Element Combinations

Right here’s the way it appears to be like at the weblog web page. The hero segment nonetheless presentations the date and classes for emphasis. This minimalizes the weblog feed and is helping stay the web page blank.

Featured Image, Title & Description

Part Combos Choice 2: Featured Symbol & Learn Extra Button

This feature contains the Featured Symbol, Put up Identify, and Learn Extra Button.

Featured Image & Read More Button Element Combinations

Right here’s the way it appears to be like at the weblog web page. The weblog feed is simplified even additional. This one doesn’t supply a lot knowledge, however it could paintings neatly if the titles and featured symbol are all you wish to have. Descriptive titles would lend a hand so much.

Featured Image & Read More Button

Part Combos Choice 3: Excerpt, Learn Extra Button & Pagination

This mixture contains the Learn Extra Button, Excerpt, and Pagination.

Excerpt, Read More Button & Pagination Element Combinations

The weblog web page is blank and offers the reader the ideas they want concerning the posts with out drawing numerous consideration to them.

Excerpt, Read More Button & Pagination

Part Combos Choice 4: Featured symbol, Writer, Excerpt & Pagination

This feature contains the Featured Symbol, Writer, Excerpt, and Pagination.

Featured image, Author, Excerpt & Pagination Element Combinations

Right here’s the way it appears to be like at the weblog web page. With out the opposite components, the creator’s identify stands proud. This one is excellent you probably have numerous authors, and you need to attract consideration to them.

Featured image, Author, Excerpt & Pagination

Part Combos Choice 5: Featured symbol, Classes, Excerpt & Pagination

This feature provides the Featured symbol, Classes, Excerpt, and Pagination.

Featured image, Categories, Excerpt & Pagination Element Combinations

Right here’s the way it appears to be like at the weblog web page. The class is extra distinguished throughout the weblog card. Classes are nice to turn if you wish to function them or you’ve gotten numerous them. They may be able to make navigation more uncomplicated for the reason that reader can simply choose the class they wish to see.

Featured image, Categories, Excerpt & Pagination

Part Combos Choice 6: Learn Extra Button, Date, Classes, Remark Rely, Excerpt & Pagination

This one contains the Learn Extra Button, Date, Classes, Remark Rely, Excerpt, Pagination. It feels like so much, and it’s, however it works in a weblog feed. With out the Featured Symbol, the weblog playing cards absorb much less house. Additionally, for the reason that Pagination is in a special location, it doesn’t interfere at the weblog feed.

Read More Button, Date, Categories, Comment Count, Excerpt & Pagination Element Combinations

Right here’s the way it appears to be like at the weblog web page. It really works neatly for the weblog feed and your eyes are nonetheless interested in the featured put up.

Read More Button, Date, Categories, Comment Count, Excerpt & Pagination

Part Combos Choice 7: Excerpt & Learn Extra Button

We will use a couple of Weblog modules in conjunction with other components in every to create extra combos. This mixture simply makes use of the Knowledgeable and Learn Extra Button, however the Weblog module has been moved to the hero segment subsequent to the Weblog module that presentations the featured put up. This offers the module an absolutely other really feel and objective.

Excerpt & Read More Button Element Combinations

Right here’s the way it appears to be like at the web page. It highlights the most recent put up after which supplies the following two posts with out drawing consideration clear of the most recent put up. That is extra like {a magazine} format.

Excerpt & Read More Button

Part Combos Choice 8: Components in More than one Modules

I’ve added the weather to the featured put up and left the weblog feed minimum for this feature. For the featured put up Weblog module, I’ve enabled the Featured Symbol, Writer, Date, Classes, Remark Rely, and Excerpt.

Elements in Multiple Modules Element Combinations

For the weblog feed Weblog module, I’ve enabled the Featured Symbol, Date, Classes, Excerpt, and Pagination.

Elements in Multiple Modules

Right here’s how the Weblog modules glance at the weblog web page. Each modules paintings neatly in combination. The primary one will get the eye and contains additional information. This is helping advertise feedback on the most recent put up.

Elements in Multiple Modules Element Combinations

Choice 9: More than one Weblog Modules with Featured Photographs

This feature makes use of the part combos from the featured put up Weblog module from the former possibility and strikes the weblog feed to the column subsequent to the featured put up. This creates an enchanting hero segment. For the second one Weblog module, I’ve decided on the Featured Symbol, Learn Extra Button, Date, Classes, and Excerpt.

Multiple Blog Modules with Featured Images

Right here’s the way it appears to be like at the weblog web page. The featured symbol will get the eye, however the second one put up isn’t misplaced at the web page. The lowered collection of components assists in keeping the smaller weblog card blank and simple to learn.

Multiple Blog Modules with Featured Images

Finishing Ideas

That’s our take a look at put up part show combos for Divi’s Weblog module. With the ability to allow them in my opinion creates numerous design choices and the use of them in several combos can exchange the take a look at really feel of your weblog web page. Check out other part combos and notice what works right for you. Should you’re now not certain, check out an a/b split test and notice which will get the reaction you’re searching for.

We wish to pay attention from you. Do you employ any of those put up part show combos for your Weblog modules? Tell us about it within the feedback.

The put up 8 Post Element Display Combinations for Divi’s Blog Module seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]