Skip to main content

Search Divi Plus Documentation

Search for answers or browse our knowledge base.
Explore Divi Plus's Live Demo

All Topics
Print

Blog

Overview of the Blog module

This page shows you how to add the Blog module to your page and explains every setting in its Content, Design and Advanced tabs, with screenshots. The Blog module shows your posts in grid, list or masonry layouts, with filters, pagination and many display options. For more details, view the demo.

Blog module on the frontend
The Blog module on the frontend.

How to add the Blog module to your page

  1. Open your page in the Divi Visual Builder.
  2. Click the gray (+) icon inside a row to add a new module.
  3. Search for DP Blog in the module search box.
  4. Click the module to insert it. Its settings open on the right.
Adding the Blog module in the Divi Visual Builder
Search for DP Blog in the Insert Module window.

Content tab settings

The Content tab holds the module’s own settings, grouped in the toggles below. Link, Background and Element Label are the standard Divi options.

Blog Content tab
Blog: Content tab.

Layout

Blog Layout settings
  • Layout: Select the layout.
  • Number Of Columns: Select the number of columns to display posts.
  • Column Spacing: Increase or decrease spacing between columns.
  • Row Spacing: Increase or decrease spacing between posts.
  • Enable Masonry: Enable Masonry for posts.

Query

Blog Query settings
  • Number Of Posts: Define the value of number of posts you would like to display.
  • Order: Choose the order of your posts.
  • Order By: Choose the order type of your posts.
  • Post Date Format: If you would like to adjust the date format, input the appropriate PHP date format here.
  • Ignore Sticky Posts: This will decide whether to ingnore sticky posts or not.
  • No Result Text: Define custom no result text.

Display Settings

Blog Display Settings settings
  • Show Featured Image: This will turn thumbnails on or off.
  • Featured Image Size: Select the size of the featured image.
  • Content: Showing the full content will not truncate your posts on the index page. Showing the excerpt will only display your excerpt text.
  • Excerpt Length: Define excerpt length in characters, if 0 no excerpt will be shown. However this won’t work with the manual excerpt defined in the post.
  • Show Author: Turn on or off the Author link.
  • Show Date: Turn the Date on or off.
  • Show Categories/Terms: Turn the category/terms links on or off.
  • Show Comment Count: Turn Comment Count on and off.
  • Show Read More: Define whether to show “read more” link after the excerpts or not.
  • Read More Text: Define “read more” button/link text.

Pagination

Blog Pagination settings
  • Show Pagination: Show Pagination or not.

Design tab settings

The Design tab lets you style each part of the module:

  • Title Text: styling options for the title text.
  • Body: styling options for the body.
  • Post Meta: styling options for the post meta.
  • Category: styling options for the category.
  • Read More Button: styling options for the read more button.
  • Image: styling options for the image.
  • Post Content: styling options for the post content.
  • Sizing, Spacing, Border, Box Shadow, Filters, Transform, Animation: the standard Divi design options for the whole module.
Blog Design tab
Blog: Design tab.
Blog Title Text design settings
Title Text settings.
Blog Body design settings
Body settings.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.

Blog Advanced tab
Blog: Advanced tab.
Table of Contents