Divi includes a blog module to display your posts in a full width or grid layout. It’s a nice module and gets the job done. What if you wanted different layouts and features? That can be done with CSS, but a third-party plugin called Divi Blog Extras makes the task much easier.
Divi Blog Extras is a third party plugin from Divi Extended that adds a new module to the Divi Builder with several new features to display your blog posts. It includes six different layout designs and adds an AJAX loading feature with a load more button. The posts load as you scroll and loading is fast. You can change the text for both the read more and the load more buttons.
In this plugin highlight we’ll take a look at Divi Blog Extras and get some ideas of what can be done with this plugin. Images for these examples were taken from Unsplash.com.
Divi Blog Extras Installation and Settings
Upload and activate as normal. A new module called Divi Blog Extras will then be available in the Divi Builder. To use it simply drop it into a row just like any module. Since the options are the same as standard Divi Builder modules, using this module is intuitive.
The Content settings includes the familiar options and has six layout choices, excerpt length, category colors, load more button text, featured image overlay, read more button text, and text color options. The Design settings include header, meta, and body text, and border styling. The Block Extended layout adds image position and Classic adds social icons. Let’s look closer at each of the layouts.
Grid Extended
The default layout, Grid Extended, displays blog posts with images and text alternating. The images brighten on hover. Category names are placed within a box. in responsive mode the images are placed on top.
In this example I’ve added a hover overlay, hover icon, changed the read more text, limited the excerpt to 100 characters, and changed the category text and background colors. The hover animation displays when you hover over any part of the post.
Box Extended
Box Extended places the excerpt in a box that overlaps the image and removes the box around the category name. The author’s image is added to the meta section. The images and text alternate. This is one of the more elegant blog layouts.
In this example I’ve changed the category font and background colors, limited the excerpt length to 150 characters and changed the font to blue, and changed the read more button text. The default hover brightens the image as seen in the top image above.
Full Width
Full Width places the images on the left and excerpt on the right, adding a styled date to the far left. Each post is separated by a line. The category name is placed within meta.
This example disables the date and meta info. The text uses custom colors. I’ve changed the read more and load more button text. The excerpt is limited to 200 characters.
All of the layouts are responsive. Here’s a look at Full Width’s responsive look. This shows two modules side-by-side in a 2-column row.
Block Extended
Block Extended is a blog grid that adds the category name over the image and meta at the bottom of the card. The image zooms when you hover over any part of the card. I like this type of micro-interaction because it shows the card is clickable.
Block Extended has three options for displaying the images. This example places the featured image in the background with the text in an overlay.
This example alternates the background image between the first two choices.
Full Width Background
Full Width Background displays a cropped version of the image in full width and places the excerpt with meta in an overlay over the image. The excerpt placement alternates. Meta is separated from the excerpt with a line.
This example uses a dark overlay over the image to show that the excerpt’s overlay doesn’t use the same overlay on hover. The background of the section is red for this example. Notice the red shows through on hover. I’ve also added my own read more button text and a 2 pixel border.
Classic
The Classic layout displays the blog posts with full size images and full width excerpts under the images. The category and date is place above the title. The title includes a short line separator to make it stand apart from the image. Under the excerpt is the author’s name and number of comments separated by a bar. A thinner and wider line separator separates the posts from each other.
This layout has an option to display social icons. Clicking Load More (or as I’ve labeled it – See More Articles) displays the next set of posts, which equals the number of posts that I’ve selected to display. In this example I’m displaying two posts. Load More loads the next 2 posts.
Creating a Unique Layout with Divi Blog Extras
Multiple modules can be used together to create magazine layouts. This simple layout includes four modules displaying the Gird Extended layout. Each module displays different categories. The two in the middle display two posts each.
This creates a magazine layout with different categories for the various sections. This examples shows how the Extended Grid looks as responsive.
This is the same Divi Builder layout but uses Full Width Background. The overlays cover the images almost completely when in responsive mode.
This example uses the Classic layout for the top module and Grid Extended for the next two modules. Each of the modules display different categories and have their own styling for the category text. The top module does not display an excerpt.
This creates an interesting magazine layout. I also set the rows to display full width. You can mix and match the layouts to get a unique design. I’ve created the layouts with different categories for each module. In a future update the module will have an offset feature so you could use multiple modules within the same category.
License
A single site is $15. The extended license is $30 and can be used on unlimited sites for you and your clients. It includes lifetime updates.
This plugin does not work with Extra.
- You can purchase this plugin at Divi Extended’s website.
Final Thoughts
Divi Blog Extras adds some nice styling and design features to give your blog module some pizazz. It also adds the ability to style category backgrounds and text. It uses AJAX for loading and includes a new load button. You can even add your own text to the load more and read more buttons. Each of these designs are great for giving your blog a unique look from the standard blog. If you want a blog design that goes beyond the standard Divi Builder blog module, Divi Blog Extras might the module you’re looking for.
We want to hear from you. Have you tried Divi Blog Extras? Let us know about your experience in the comments below.
Featured Image via pulsar011 / shutterstock.com
The post Divi Plugin Highlight – Divi Blog Extras appeared first on Elegant Themes Blog.
