Monday, December 10, 2018
Tips

Bring your blog to life with DTS Blog Module

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.

When you finish configuring all the options you just have to save the changes. And ready!

Jefferson Maldonado
the authorJefferson Maldonado
UX WordPress Designer
Ux & Web Designer. Portafolio: http://maldonadoz.com/portafolio/ Divi Blogger, WordPress Expert, UX Designer, Business Consultant.

Leave a Reply