Formerly called Divi Custom Blog Module, DTS Blog Module Pro is a plugin that allows you to customize Divi modules without code, and includes the following:
- Custom grid style and full width modules
- 12 new and exclusive personalization options
- Personalization of Meta box
- Custom category labels at the top of the post image.
- Buttons with custom social media icons
- Custom CSS options for category labels
- Widgets Pack
Custom Widget “about me”
Custom Widget “Latest entries”
Custom Widget “Popular Tickets”. - Plugin options page
- Custom file with the full width layout customized for:
- Categories
- Labels
- Author
- Search results
To obtain this plugin, you must have installed Divi from Elegant Themes.
Let’s see all the customization options offered by this super plugin.
Each time you create a new page, you will see a button called Builder that will take you to the Divi image builder. When you click there you will see another button called Visual Builder, and you must click there.
Remember that to add a module you must first create a row.
Once in the Visual Builder and with a row added, we will add a module called Blog by clicking on the option that you will see there called that way.
Once you add it, you will start to see options, the 3 main ones are Content, Design, and Advanced.
Content
In this tab, as its name says, we can configure all the content that will be seen in the module. Show a variety of options:
Number of entries
It serves to configure the number of posts you want to show. Of course, you should have some posts already written (or create some with text lorem ipsum to try!).
Included categories
Here you can see the categories you have created to select which ones you want to include.
Date Format
Here you will configure the date format you want to be used in your blog. The default format is American: Month / Day / Year.
Content
You can decide whether to show the full content or an extract.
Offset number
Here you can configure the module so that posts in the layout that are already in the list of recent posts are not repeated. for example: if you decide that the compensation number is 3, the first 3 posts of your feed will not be shown but will be on the list of the most recent ones. It is a strategy to make the content is not repetitive.
Featured image
Here you can select whether or not you want to show thumbnails of the featured image of each post in your blog module.
Read more button
Here you can select whether or not to show the Read more button in the excerpt.
Author
Select if you want the author to be shown below each blog post.
Date
Select if you want to show the creation date of each blog post below it.
Categories
Choose whether to show the categories below the title of each entry.
Comment Counter
Choose if you want to show a comment counter below the title of the post.
Pagination
Here you can select whether or not to show the pagination of the feed. If you want to activate the numbered page, you can install the WP Page Navi plugin.
Administrator tag
With this option, you can change the label of the module to identify it easier.
Design
In this tab, you can customize everything related to the design of the module. You will find the following options:
Layout
You can show your posts in a grid or in full width.
Hover of the featured image
If you activate this option, a color will be displayed when users hover over the image of the post.
Icon layer color
Defines a custom color for the icon layer
Hover coat color
Define a color for the layer.
Layer icon
Define an icon for the layer.
Text color
It allows you to choose between Claro and Oscuro depending on the background of your blog.
Header font
You can select the header source since Divi has a large variety available thanks to Google Fonts.
Font size of the header
You can swipe to enlarge or reduce the size of the font, or enter the exact values in the field to the right of the slider.
Text color of the header
Select the text color you want.
Space between letters of the header
Again you can use the slider or enter exact data in the required field.
Space between lines of the header
Like the previous option, you can increase or decrease the space between the lines of the header with a slider or by entering the data you want.
Text body font
As in the header, it allows you to choose a variety of fonts thanks to Google Fonts integrated with Divi.
Body text font size
Here you can also increase or decrease the font size thanks to the slider or enter the size in pixels.
Body text font color
Select the color you want for the font in the body of the text.
Space between letters of the text body
Swipe to increase or decrease the space between the letters.
Space between text body lines
Swipe to define the line spacing.
Meta font
You can change the font of your meta description in the same way as in the previous options.
Font size
Move the slider to define the size of the font in the meta text.
Text color
By default, all text colors will be white or dark gray. If you want a different one, select the one you want.
Space between letters
Swipe to define the space between letters.
Space between lines
Swipe to define the line spacing or enter the exact values.
Edge
Select if you want your module to have a border or not.
Edge color
Select the color you want for the edge of your module.
Edge thickness
By default, the border is 1 pixel. Swipe to increase or decrease the thickness.
Edge style
There are a variety of styles for the edge of the module, select the one you want and apply the changes.
Advanced Options
These options are reserved for more experienced web designers. You will find the following:
CSS ID
Place an optional CSS ID. You can use it to create a CSS style or generate specific links for your page.
CSS Class
You can add several CSS classes to style your module.
Custom CSS
Add all the custom CSS you want, separated by semicolons.
Visibility
Here you can configure the types of devices for which the module was created. You can select to show only in the desktop version for a minimalist design in the mobile version or that can be seen in tablets and more mobile devices.
