Post List Overview

The DiviFlash Post List module offers a flexible and dynamic way to display blog posts with fully customizable layouts.

Activation Required: This module is disabled by default. To use it, you need to enable it manually. Refer to our guide for step-by-step instructions.

Let’s see the settings in brief and how to make better use of it —

Content Tab

This tab contains all the essential settings to add, manage, and customize your post elements.

Add New Post Element

Add post elements to your post list by clicking the plus + Add New Post Element, which opens the Post Element Settings. By default, 4 post elements are already added and can be removed or edited. To learn how to add and customize the post elements, click here.

Note: You can change the ordering of the post elements by dragging the post element bars. 

Post Settings

• Posts for Current Page: Display posts relevant to the current page (e.g., category pages).
• Post Count: Select the number of blog posts to display in the list.
• Display Post By: Choose how posts are filtered (Recent, By Tag, By Category).
• Orderby: Define post order (available for Recent posts).
  • Include Categories: Choose the categories of the posts.
• Include Tags: Choose the tags of the posts. Only available if “By Tag” is selected.
• Posts Offset Number: Choose some posts to be excluded from the display, starting from the latest ones.
• Show Pagination: Enable to use pagination for navigating through the post list.
  • Use Number Pagination: Enable to use page numbers along with the previous and next buttons.
  • Older Entries Button Text: Input the text for the previous button.
  • Next Entries Button Text: Input the text for the next button.
• Ignore Sticky:
  • Ignore specific Sticky Posts:

Background: Add a background color, gradient, image, video, pattern, or mask to the module.

Element Label: Rename the module to organize it more easily in the Divi Builder. (Only you can see this label.)

Design Tab

Use this tab to customize the appearance of the post list.

Alignment: Change the placement of all the post elements relative to the posts’ containers.

Layout

• Use Breakpoint: Enable this option to apply a breakpoint limit for the post list. Unless the post list exceeds this limit, it will automatically break to adjust to the screen size
  • Breakpoint: Set the breakpoint limit for the post list.
• Layout: Choose from three different layout styles for the post list.
• Gap: Adjust the gap between each post of the post list.
• Image Column Size: Adjust the size of the post featured images in the list column.
• Vertical Align: Change the vertical placement of the post featured image relative to the other post elements. 
• Collapse: Allow the post image to partially overlay the text and other elements for a more visually interesting and modern look. (not available if you chose “Stretch” in the vertical alignment.)
  • Collapse Value: Adjust how much the image and the other post elements will overlap against each other.
• Equal Height: Toggle on to make all the post images the same height.
  • Image Min Height: Set a minimum height limit to all the post images.

Post Item: Background, spacing, and border options for all the post items.

Featured Image

• Show Image: Toggle on to display featured images in the post items.
• Image Size: Choose whether to maintain the original image size or adjust it to a different dimension.
• Image Scale Type: Choose the hover animation for the post featured images. You have 9 different hover animation options.
• Use Icon: Enable this option to display an icon instead of the featured image.  (Only available when “Show Image” is disabled.)

The rest of the options are for customizing the post featured image borders.

Content Wrapper: Background, spacing, and border options for the content outer wrapper.

Content Inner Wrapper: Background, spacing, and border options for the content inner wrapper.

Pagination Button Styles

Turn on pagination to use the functionalities described below-

• Pagination Alignment: Change the horizontal position of the arrow buttons. 
• Next & Prev Icon: Choose from 4 different sets of next and previous icons for the pagination.

The next options are for changing the background, typography, and border of the pagination buttons.

Active Pagination Number: Background, typography, and border customization options to differentiate the active pagination number. (Turn on number pagination to apply these styles.)

Overflow & Z-index

• Outer Wrapper Overflow: Control how content within the outer container is handled when it exceeds its boundaries.
• Inner Wrapper Overflow: Control how content within the inner container is handled when it exceeds its boundaries.
• Featured Image: Set the z-index value for the post featured images.
• Content Wrapper: Set the z-index value for the content outer wrapper.

Note:  Elements with higher z-index values will appear above elements with lower z-index values.

Sizing: Adjust the width, height, and alignment of the module.

Spacing: Add custom margin and padding to the module’s container.

Transform: Scale, rotate, move, or skew the module.

Animation: Apply reveal animation effects and customize delay, duration, repeat settings, and animation type.

Advanced Tab

This tab provides additional settings for advanced users who want greater control over the module with custom code, conditions, and more.

Post Element Settings

Each post element is a child of the parent Post List module. Any settings applied here will override the parent module’s settings.

Content Tab

Element

Type: Choose the type of the post element. There are 11 different post elements to choose from. However, you can use custom post elements, by using an ACF (Advanced Custom Field) plugin.

If you choose “Post Title”

• Title Tag: Choose the HTML tag for the post title.

If you choose “Post Content” 

• Post Content: Choose to show either the content of the posts or just the post excerpt.
• Use Post Excerpt: Toggle this option to display the post excerpt that was manually submitted. 
• Excerpt Length: Define the character length of the post excerpt.

Note: If a post has no excerpt, Divi will auto-generate one from the content. Excerpt Length only applies to these auto-generated excerpts, not manually submitted ones.

If you choose the “Read More Button”

• Read More Text: Type in the text of the “Read More” button.

If you choose “Post Author”

• Show Author Image: Enable to display author image along with the name.
  • Author Image Size: Adjust the size of the author image.
  • Hide Author Text: Enable to hide the author’s name and only display the image.
• Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
• Align: Choose the horizontal placement of the author’s name. Not available when “Block” is selected as the display option.

If you choose “Publish Date”

• Date Format: Define the date format. Use any combination from here.
• Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
• Align: Choose the horizontal placement of the date. Not available when “Block” is selected as the display option.

If you choose “Post Categories” or “Post Tags”

• Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
• Align: Choose the horizontal placement of the post categories or post tags. Not available when “Block” is selected as the display option.

If you choose “Post Comments”

• Turn Off Comment Text: Enable to hide the text of the comments.
• Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
• Align: Choose the horizontal placement of the post comments. Not available when “Block” is selected as the display option. 

If you choose “Custom Text”

• Custom Text: Input the custom text you want to display.
• Use Custom Field: Enable this option to use a custom field for the text.
  • Select Field Name: Choose the name of the custom field you want to display.
  • Before Text: Add text that will appear before the custom field value.
  • After Text: Add text that will appear after the custom field value.
• Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines). 
• Align: Choose the horizontal placement of the custom text. Not available when “Block” is selected as the display option.

If you choose “Divider”

A divider line will be added between post elements.

If you choose “Reading Time”

• Before Text: Add text that appears before the reading time.
• After Text: Add text that appears after the reading time.

If you choose “ACF Fields”

• Post Type: Choose the type of post you want to display in the ACF fields. You have three options: Posts, Projects, and posts.
• Select ACF Field: Select the ACF field value you want to display.
• Before Text: Add text that will be displayed before the ACF field value.
• After Text: Add text that will be displayed after the ACF field value.
• Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines). 
• Align: Choose the horizontal placement of the ACF field value. Not available when “Block” is selected as the display option.

Note: This section will not be visible unless you have an ACF plugin installed and activated. Also, make sure ACF Support is enabled by going to WordPress > DiviFlash > Setting > General and then enable ACF Support.

Icon Settings

If you choose the “Read More Button”, “Post Author”, “Publish Date”, “Post Categories”, “Post Tags”, and “Post Comment” as the “Type”, this additional section will show up.

• Use Icon: Enable to use an icon for the selected post element.
  • Icon Color: Choose a color for the icon.
  • Icon Size: Adjust the size of the icon.
  • Enable Vertical Align Center: Enable to place the icon both vertically and horizontally in the center of its container. 
• Image: Upload an image to use instead of the icon.
  • Image Alt Text: Submit an alt text for the image.
  • Image Width: Specify the width of the image.
  • Vertical Align: Change the vertical placement of the post element relative to the image.

Divider Line

If you choose “Divider” as the “Type”, this additional section will show up.

• Divider Line Height: Adjust the height of the divider line.
• Divider Color Primary: Choose the primary color for the divider gradient.
• Overlay Color Secondary: Choose the secondary color for the divider gradient.
• Divider Color Direction: Adjust the divider gradient direction.
• Starting Position: Adjust the starting position of the divider gradient.
• Ending Position: Adjust the ending position of the divider gradient.

Settings For ACF

If you choose “ACF Fields” as the “Type”, this additional section will show up.

• Link Text: Input the text that will mask the URL in the custom URL field.
• Link Target: Decide if you want the URL to open in a new or the same tab. 
• Email Text: Input the text that will mask the email address in the custom email field.
• Image Max Width: Set a maximum width limit for the image in the custom image field.

Background: Add a background color, gradient, image, and more to the post element.

Element Label: Change the name or label of the post type element which will only be visible to you.

Design Tab

Text: Options to change the alignment of the text in the post element and add a shadow effect to it.

Text Styles: Typography options for the text in the post element.

Spacing: Add custom margins and padding to the post element.

Before After Text: If you use an ACF plugin to add custom field elements to your posts, you can add text before and after the value of that custom field element. In this section, you can style the typography of the before after text.

Sizing: Adjust the width, height, and alignment of the post element.

Border: Border customization options for the post element. You have the option to style each border individually or all the borders together.

Box Shadow: Apply a shadow effect to the post element.

Filters: Add color filters to the post element.

Transform: Change the scale, placement, size, angle, etc. of the post element.

Advanced Tab

This tab allows you to apply advanced settings to individual post elements.

Need Help?

If you have any questions or need assistance, contact our support team: [email protected]