Divi Blog Extras Documentation

File Structure

Name of plugin file is divi-blog-extras.zip. It can be downloaded from the link in order confirmation email. The plugin is also available for download from the My Account area. If the plugin was purchased from any vendor, the download link will be available at their website.

Installation

Divi Blog Extras can be installed in 2 ways:

  1. From WordPress Dashboard (most common and recommended approach)
  2. FTP

In order to upload the plugin from the WordPress dashboard, navigate to Plugins >> Add New >> Upload Plugin >> Click on Choose File and browse divi-blog-extras.zip from your Computer and finally click Install Now. On the next page, click on Activate Plugin button on next screen to activate Divi Blog Extras.

If you are trying to install the plugin by uploading through FTP, you need to extract divi-blog-extras.zip on your Computer. Once extracted, there will be a directory created with the name divi-blog-extras. Now connect to the server via FTP and navigate to wp-content/plugins/ directory and upload the extracted divi-blog-extras directory to it. Then navigate to WordPress Dashboard and on Plugins page, click Activate to get started with the plugin.

Once the plugin is activated, it will add the following two items to your site:

  1. A new Blog module to Divi Library named Divi Blog Extras.
    Divi Blog Extras Module

    Interface for back-end editors.

     
    Divi Blog Extras Visual Builder Module

    Interface for front-end-editors.

  2. A Widget with the following settings.Divi Blog Extras widget setting

At this stage, you are good to go to the next step and create your stunning blog and pages using Divi Blog Extras.

Adding Divi Blog Extras Module to a Page or Post

In order to display posts using Divi Blog Extras layout, create a new page or edit an existing one using Divi Builder. Here are the key steps for adding Divi Blog Extras to a page or post using Divi Builder.:

  1. Create/Edit a Page/Post
  2. Create/Edit row (Standard row, not full-width)
  3. Create/Edit column
  4. Click on Insert Module(s)
  5. Click on Divi Blog ExtrasDivi Blog Extras
  6. On the next screen, the module settings will appear. Go to the Design tab and select one of the available layouts and save the page. We will cover the module settings and layouts in the next section of this documentation. But before continuing, here is an information on the type of content supported by the plugin.

Divi Blog Extras can be used to display posts from the following WordPress Post Types. 

  1. Posts – Native WordPress post format which is the default for the plugin.
  2. Projects – Coming soon which will allow displaying Divi Projects with Divi Blog Extras module.
  3. Custom Post Type – Coming soon which will allow you to use Divi Blog Extras to show custom post types. This will open up a wide range of options for displaying post types like – Events, Team, Testimonials, Recipe, and more and more and more. You just need to hook a plugin for post type and use the Divi Blog Extras module to create the view.
  4. Category Archive –  This is the most requested feature and coming soon. It will allow you to use the plugin with your default category archives just like a normal Divi Category Builder plugin will do.

In the next section of this tutorial, we will look at the available layouts and features of Divi Blog Extras and how you could configure them.

Layout Selection

Once you have added Divi Blog Extras module to a page, you will be able to see the default layout of the blog module with pre-configured settings. You may not even want to make any change to the module settings in some cases as the default configuration for the layouts is so simple and well defined.

Here are the available layouts in Divi Blog Extras and how we add them to a page:

  1. Box Extended
  2. Grid Extended
  3. Block Extended
  4. Classic
  5. Fullwidth
  6. Fullwidth Background
  7. More layouts using the above 6 with help of custom CSS. Check out the demo site for more layout options using CSS.

Divi Blog Extras Layout Selection

Layout design selection setting in back-end builder.

Layout design selection setting in Visual Builder.

Module Settings and Configuration

There are 3 tabs on the Divi Blog Extras module settings. Here is detail about them

  1. Content
    1. Number of Posts
    2. Offset Number
    3. Order
    4. Order by
    5. Include Categories
    6. Meta Date Format
    7. Content
    8. Excerpt Length
    9. Show Featured Image
    10. Read Moree
    11. Read More Text
    12. Show Author
    13. Show Date
    14. Show Categories
    15. Show Comment Count
    16. Show Pagination
    17. Module LInk URL
    18. Module LInk Target
    19. Background 
  2. Design
    1. Layout
    2. Pick Colors From Categories
    3. Category COlor
    4. Category Background
    5. Category Hover Color
    6. Category Hover Background
    7. Featured Image Overlay
    8. Text Color
    9. Text Orientation
    10. Text Shadow
    11. Mobile Settings- Show Featured Image
    12. Title Text Formatting
    13. Body Text Formatting
    14. MetaText Formatting
    15. Sizing – Width
    16. Spacing Formatting
    17. Border Formatting
    18. Box Shadow Formatting
    19. Animation – Single Post
  3. Advanced
    1. Custom ID & Classes
    2. Custom CSS on
      1. Before
      2. Main Element
      3. After
      4. Title
      5. Post Meta
      6. Featured Image
      7. Read More
    3. Visibility Control for Phone, Tablet & Desktop
    4. Transition Settings

Widget Configuration

Widget support is a sweet addition to Divi Blog Extras 2.1.4. There are 2 layouts added for widgets in List and Tabbed view. These layouts can be used to display posts in compact space and can be added to the theme sidebar. It can be either added to default sidebar on posts or within Divi builder sidebar module.

Divi Blog Extras widget setting

Here is a preview of the 2 views for Widgets:

  1. Tab View

    Divi Blog Extras Widget Tab View

  2. List View

 

Category Archive Setup

One of the most desired and requested feature of Divi Blog Extras is the ability to use the plugin with default Category archives. This feature is part of the plugin since 2.1.5.

The category archive layout control panel is available under the settings tab in the WordPress Dashboard. It has the following options and requires at least one module/section/layout saved in Divi Library which as Divi Blog Extras module in it.

  1. Navigate to Divi Blog Extras panel in the settings tab.
  2. Enable Archive Layout – Disabled by default, this button is the key to enable the category archive functionality in Divi Blog Extras.
  3. Select Layout from Library – You can select a full page layout, a row or section within a page or just Divi Blog Extras module as your category archive page. This features open up a lot of scope for designing your Divi category page like a normal category builder using other Divi library modules as well. You are surely going to love this feature.
    1. Layout: You must have a page layout created and saved in Divi Library to use this feature. It can be a full-fledged page with all other Divi modules and a layout of your choice along with Divi Blog Extras module at the heart to serve the posts.
    2. Section: If you do not want to use full page layout, you can also use a partial section as your archive page layout. A layout must be saved in the library to be able to make a selection here.
    3. Module: A simple Divi Blog Extras module saved in your Divi library with the setting defined as per requirement. 
  4. Select Sidebar – If your archive pages use a sidebar (usually the default sidebar in Divi theme), you can select a specific sidebar and assign to all your archive pages using this option.

Hint: 

  1. Do not just enable the functionality as per step 2. You must select a layout in step 3 to make things work.

Use Case:

Here is look and feel of the page which is first created to accommodate the Divi Blog Extras module along with other Divi Modules.

Once this layout is saved to the Divi Library, it will be available for selection as archive layout. Final look and feel will be like the following where we have opt-in on the top of the divi category page, there is an opt-in at the bottom as well. In the same manner, we can blend the Divi Blog Extras module and use it in same way.

 

 

Frequently Asked Questions

Q: How to update the plugin?
A: You can upload the plugin by uploading the new files via FTP. Since version 2.0, one-click update feature has been added to the plugin and it can be updated by clicking the update link on the dashboard.

Q: Will it work with Divi Builder plugin installed on any theme other than DIVI?
A: The plugin works with Divi, Extra and Divi Builder Plugin.

Q: I purchased the plugin and want to know how can I download it again in future?
A: Users can visit “My Accounts” page and log-in to download the plugin anytime. In case if users do not remember the login details, they could reset the password using the lost password link. They need to provide the same email which they used to purchase the product.

Q: Will it work on both Post and Pages?
A: Yes, Divi Blog Extras will work on both Post and Pages.

Q: Can I use other modules on the same page where I use Divi Blog Extras module?
A: Yes, it can be used like any other modules without any issue.

Q: I have purchased Regular License. Can I convert it to Extended License?
A: Yes, you can convert regular license to extended license by paying the difference. Contact us and we will send you details on how you can upgrade.

Q: Can I use Divi Blog Extras in my Divi Child Themes which I sale Further?
A: Divi Blog Extras can be used by Divi child theme developers who want to ship the plugin in their products. The child theme license cannot be used to resale the Divi Blog Extras module separately and must be advertised and included within the Divi Child Theme.

Q: How to change category background color in Block Extended Layout of Divi Blog Extras?
A: You can find ‘Category Background’ setting in the design tab of the Divi Blog Extras Module. From there, you can change the background color of the category.

The above solution is for common color for all categories. However, if you like to add separate color to each category, it can be done from the WordPress Dashboard: Post>>Categories>>Edit a Category>>Put Desired Color

Q: How can I set blog pages as per ‘MORE LAYOUTS’ on your Demo page?
A: There are 6 layouts in Divi Blog Extras which can be implemented by selecting them from the Design tab. The More Layouts section of the demo is inherited layouts from the above 6 which can be achieved by adding simple CSS snippet given on each demo page.

Here is a video on how it can be done.

Q: How to make excerpt Lenght Zero in Divi Blog Extras
A: Divi Blog Extras has the option to control the length of the excerpt. It can be set to 0 from the module settings under design tab >> Excerpt length.

Q: I’m using the Blog Extras module with the block extended option. Is there any method of switching from rounded to square corners on each of the excerpts?

A: Please use the following snippet to make the corners square:

.et_pb_post_extra.el_dbe_block_extended {
border-radius: 0;
}

You could paste the code in Divi Theme options Custom CSS area for global implementation. If you want to put it on selected pages, you could paste the code within page CSS area.

Q: How to adjust the width of media and content container in Full-width Layout of Divi Blog Extras Plugin?

A: https://gist.github.com/elicus/1f3088e42a7f7837c034cb33874b0287.js

Divi Blog Extras Video Documentation and Resources

More videos related to configuration and setup can be found on our Youtube Channel.