Divi Blog Extras Documentation

easy instructions to get you started

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 using 2 methods:

  1. From WordPress Dashboard
    1. Go to WordPress Dashboard >> Plugins >> Add New >> Upload Plugin >> Choose File >> Browse divi-blog-extras.zip and click Install Now >> Activate Plugin.
  2. Manually uploading via FTP
    1. Extract divi-blog-extars.zip.
    2. Connect to your server using FTP application.
    3. Navigate to wp-content/plugins/.
    4. Upload the divi-blog-extras directory in the plugins directory of your server.
    5. Go to WordPress Dashboard >> All Plugins > >Activate Divi Blog Extras.

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.

Blog Page Setup

  1. Create/Edit a Page/Post that uses Divi builder.
  2. Create/Edit row (Standard row, not full-width).
  3. Create/Edit column.
  4. Go to insert Module option.
  5. Insert Divi Blog Extras.Divi blog extras module
  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 the Divi Blog Extras module is added to a page, it will show the default selected layout with pre-configured settings. Go to the Design tab to change the layout. List of available layouts in Divi Blog Extras are

  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

Layout design selection setting in Visual Builder.

How to Create Pagination in Divi Blog Extras?

  • On the Content tab of Divi Blog Extras module, go to the Pagination section.
  • Enable the toggle labled as Show Pagination
  • Once the Pagination is enabled, the pagination type field is displyaed below it.
  • Slect Ajax or Numbered Pagination from the list. This will add the pagination with default paramers. Customize the pagination controls as required.

WP-pageNavi: This is third option available for pagination using the WP-pageNavi plugin. This is enabled once you select Numbered pagination. In order to use this feature, the plugin WP-pageNavi must be installed and activated.

Pagination in divi blog extras

Widget Configuration

Check out the Widgets section on your website after installing the plugin. Add Divi Blog Extras widget on your desired sidebar.

There are 2 available layouts for the recent post widgets.

  1. Tab view
  2. List view

Select the layout to display in the sidebar.

Divi blog extras widget setting

Here is a preview of the 2 views for Widgets:

  1. Tab ViewDivi blog extras widget tab view
  2. List ViewDivi blog extras widget list view

Category Archive Setup

Divi Blog Extras was initially designed to work from Pages and the layouts were not available for category archive pages.

Divi Blog Extras 2.1.5 and above let you specify a global archive layout for all category archives.

  1. Go to Settings >> Divi Blog Extras >> Archives >> Category >> Enable Archive Layout.
  2. Select a layout from the Divi Library. (In order to use this feature, you must create and save a Divi library layout with Divi Blog Extras on it.).
  3. Select the sidebar position for Archives.
  4. Save the page.
  5. This will apply the layout as global Archive layout.

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.

Divi blog extras use case

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.

Divi blog extras front page view

This feature is also available from the Divi 4 theme builder and it is recommended for Divi 4.0 and above users to use those features. In order to do that follow the following steps.

  1. Create a Divi theme layout.
  2. Assign it to your specific archive pages or all archives (as required).
  3. In the body section, insert the Divi Blog Extras module.
  4. The module will automatically display posts on which this template will be called and display in the Divi Blog Extras layout.

Tag, Author & Date Archives Setup

Specify a layout to show Divi Blog Extras layout as archive page for Tag, Author, Date. To configure this, follow the same steps as Category Archive (above).

Tag, author & date archives setup

Taxonomy Archives

Divi Blog Extras will let you specify a layout for your Taxonomy archives. This feature is helpful in a scenario where you have a custom post type for the restaurant menu and want to display the categories of the restaurant menu type using Divi Blog Extras layout.

  1. Go to Settings >> Divi Blog Extras >> Archives >> Taxonomy >> Enable Taxonomy Archive Layout.
  2. Select a global Taxonomy layout from the Divi Library. (In order to use this feature, you must create and save a Divi library layout with Divi Blog Extras on it.).
  3. Select the sidebar position for Taxonomy Archives.
  4. If you want to assign a separate layout for each taxonomy, click on Select Taxonomy and select. Select a layout from the library and set the sidebar.
  5. Save Changes.
  6. If you want to specify a different layout for other Taxonomy, click on the blue plus icon and repeat the process.

Customize Plugin Templates

In order to customize the plugin layout, copy the required layout files in your child theme. The layout files are available in the Divi-Blog-Extras/includes/modules/BlogExtras/layouts directory.

Divi blog extras files directory

Each file has detail about where it needs to be copied.

Divi blog extras layout override

Copy the layout in your theme or child theme. For example

wp-content/themes/divi-dental/divi-blog-extras/layouts/

Here a directory named divi-blog-extras is created in the child theme directory.

Directory in child theme

Example:

Here is an example of the customization where we tried to add a unique background color for each blog post. You can read more about the process here.

Custom Post Type Support

Divi Blog Extras layouts can be used for Custom Post Types. In order to display custom post types using the Divi Blog Extras module on a page, it needs to be enabled first. Here are the steps to enable it for Custom Post Types.

  1. Go to Settings >> Divi Blog Extras >> Custom Post Types >> Enable Custom Post Types in Modules.
  2. Select Custom Post Types to enable.
  3. Enable Custom Taxonomies in Module if you want to display a list of Taxonomies in the module content tab. Select this option if you want to display selected Taxonomies of custom post types.
  4. Save changes

This will add the List on the content tab of the module setting to specify Post type.

Divi blog extras custom post type support

Category Background Color

Go  to WordPress Dashboard >> Posts >> Categories >> Edit a Category >> on next page, set color as required.

Divi blog layout custom color for category

​Then on the Divi Blog Extras module, enable the setting by going to Design >> Category >> Enable the control for Pick Colors from Categories Terms.

Divi blog extras category color

Here is the output

Divi blog extras category color output

How to Use Divi Blog Extras Plugin to Display Tags Anywhere on a Page Using Divi Builder?

  1. Go to Settings >> Divi Blog Extras on your WordPress Dashboard.
  2. Go to Custom Posts and Enable Custom Taxonomies in Module.
  3. Go to the builder and the tags will be displayed on the Divi Blog Extras module. Select the tags to display on a the page.

Divi tag layout

Divi tag on page

Divi Blog Extras Video Documentation and Resources

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

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, a 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 the “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 a regular license to an 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 the ‘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;
}

Q: How to remove the border from category in Block Extended layout?

A: 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 the page CSS area.

.et_pb_post_extra.el_dbe_block_extended .post-categories a { 
    border-radius: 0;
}

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

A:

Q: How to change overlay opacity in Block Extended layout?

A: The opacity can be adjusted by adding the following CSS snippet to the Divi Theme Options Custom CSS area. Here 0,0,0 is the color code in RGB and .7 is opacity. Increase or decrease the opacity as required or use its own custom color instead of black (0,0,0).

.et_pb_post_extra.el_dbe_block_extended.image-background .post-media:before {  
	background: rgba(0,0,0,.7);
}

Q: How to change position of the category in Block Extended layout?

A: Please use the following snippet to change position of the category in Block Extended layout:

.et_pb_post_extra.el_dbe_block_extended {
    ​display: flex;
    ​align-items: flex-start;
}

.et_pb_post_extra.el_dbe_block_extended .post-categories {
   ​align-self: flex-end;
   order: 2;
   margin-bottom: 30px;
}

.et_pb_post_extra.el_dbe_block_extended.image-top .post-categories {
   position: relative;
}

Q: How to display featured images in high quality?

A: By default, 1080px width image is used as the thumbnail. It can be changed from module settings and you could select Full size. This will display the full image size without using the resized version.

How to display featured images in high quality in divi blog extras

Q: How to adjust the width of the post content and post media container in Full Width layout?

Adjust the width of the post content

Adjust the width of the post media container

Q: My website is multi-lingual and I’m using the WPML plugin. When I click the “Show More” button, the next posts that appear are shown in another language (let’s say Spanish)instead of in English. This behavior is only happening when logged in the admin panel. When I’m logged in the WordPress panel it works fine.

A: This issue can be solved by activating an option about AJAX in the WPML module.

Q: How do we change the page number color?

A: Use the following CSS snippet with your desired color:

.el-blog-pagination ul .page-numbers { 
    color: #fafafa;
}

The active page color & background can be changed by adding the following CSS snippet with your desired color:

.el-blog-pagination .page-numbers.current {
    color: #f2f2f2 !important;
    background: #000000 !important;
}

Q: How to add category filter on Divi Blog Extras?

A: Currently, the feature for category filter is not available in the plugin. However, there is a hack around process.
1. The plugin renders a shortcode on the page which is executed and displayed as the blog layout.
2. You can find the shortcode on a page once you add Divi Blog Extras module on it, disable the Divi Blog Extras plugin and then view the page.
3. Save that shortcode. Repeat the same process for the next category and copy the shortcode for the second category and so on.
4. Use the Divi Tabs module and place each shortcode in a new tab.
5. Format the tab bg color and header etc.

Q: How to reduce the size of blocks and image for the Grid Extended, Box Extended and Full Width Background layouts?

A: In the Grid Extended layout, the sections are set to 50% each. The first half is controlled using the post-content class.

Grid extended post content

The second half (image) is controlled using the post-media class.

Grid extended post image

You could override these classes and restructure the width from 50% to the required width.

The Box Extended layout goes in a similar manner and uses the calc property to adjust the spacing.

You could override the classes discussed above and use own values accordingly.

In the Full Width Background, the post-media class goes 100% and the layers sit on it. You could change the width of the post-content class to adjust your width of inner areas.

Fullwidth post content

Q: How to align the Read More button to the bottom of the module in Block Extended Layout?

A: Use the following CSS snippet.

.et_pb_post_extra.el_dbe_block_extended {
	display: flex;
        flex-direction: column;
}
.et_pb_post_extra.el_dbe_block_extended .post-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
        padding: 30px;
}
.et_pb_post_extra.el_dbe_block_extended .post-content .post-data {
	flex-grow: 1;
}

Q: Is it possible to highlight a post so it will display first on Divi Blog Extras?

A: ​You could quick edit a post and set it as sticky to show it on the top.

Divi 4 header footer pack

Fill up your details to download the file

Please check your email for the download link.

One Plugin, Many Possibilities

You have Successfully Subscribed!