The DiviFlash Post Grid module provides a dynamic and visually appealing way to showcase posts on your website.
Let’s see the settings in brief and how to make better use of it —
Content Tab
The Content Tab is where you manage and configure all the elements that make up your post grid.
Add New Post Element
To add a new post element, click the + Add New Post Element button. This opens the Post Element Settings, where you can customize individual post elements. By default, four post grid items are included, all of which can be edited or removed. To learn how to 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: When this option is enabled, the grid will only display posts that are relevant to the current page.
- Post Count: Select the number of blog posts to display in the grid.
- Display Post By: Select the types of posts you want to display. You have three options: Recent, By Tag, and By Category.
- Orderby: Set the order of the displayed posts. Only available if “Recent” posts are selected.
- Include Categories: Choose the categories of the posts. Only available if “By Category” is selected.
- 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 grid.
- 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.
- Use Image as Background: Use the featured images of the posts as the background of the other post elements.
- Background Image Scale on Hover: Enable this option to Make the background image zoom in when you hover over it.
Item Background: Add a background color, gradient, or an image to each post.
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
The Design Tab allows you to style and visually customize every aspect of your Post Grid.
Alignment: Change the placement of all the post elements relative to the posts’ containers.
Layout
- Layout: Choose between a traditional grid layout or a modern masonry layout.
- Column: Select the number of columns to display in the post grid.
- Space Between: Adjust the space between the posts.
- Equal Height: Enable this to make all post items the same height.
Item Outer Wrapper: Border customization options for the outer wrapper of the post grid.
Item Inner Wrapper: Border customization options for the inner wrapper of the post grid.
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
- 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.
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
From this settings tab, you can customize each post element separately. Any customization you make here will override the settings you make in the “Post Grid Settings, which means parent level.
Content Tab
Element
Type: Choose the type of the post element. There are 12 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 Image”
- Outside Inner Wrapper: Enable the featured image of the post to be placed outside the inner wrapper but inside the outer wrapper.
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 the posts have no excerpt, Divi will automatically take the first few sentences to generate an excerpt from the post’s content. The Excerpt Length option allows you to control the length of this auto-generated excerpt. However, if the posts have manually submitted excerpts, the value in excerpt length will not apply.
If you choose the “Read More Button”
- Read More Text: Type in the text of the “Read More” button.
If you choose “Post Author”
- Outside Inner Wrapper: Enable the author’s name to be placed outside the inner wrapper but inside the outer wrapper.
- 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”
- Outside Inner Wrapper: Enable to place the post publish date outside the inner wrapper but inside the outer wrapper.
- 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”
- Outside Inner Wrapper: Enable to place the post categories or post tags outside the inner wrapper but inside the outer wrapper.
- 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.
- Outside Inner Wrapper: Enable the post comments to be placed outside the inner wrapper but inside the outer wrapper.
- 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”
- Outside Inner Wrapper: Enable to place the custom text outside the inner wrapper but inside the outer wrapper.
- Custom Text: Input the custom text you want to display.
- 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 “Reading Time”
- Before text: Add text that will appear before the reading time value.
- After Text: Add text that will appear after the reading time value.
- Outside Inner Wrapper: Enable this option to place the reading time outside the inner wrapper.
- Display: Choose how to display the reading time: inline (same line as other elements), inline-block (next to other elements with possible line breaks), or block (on a separate line).
- Align: Adjust the horizontal placement of the reading time within its container. This option is unavailable if Display is set to Block.
If you choose “Divider”
Using this will only show a divider line to separate post elements visually.
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, enable ACF support by going to WordPress dashboard > DiviFlash > Setting and then enable support ACF
Overlay and Scale
If you choose “Post Image” as the “Type”, this additional section will show up.
- Overlay: Enable to add a gradient over the post image on hover.
- Overlay Primary Color: Choose the primary color for the overlay gradient.
- Overlay Secondary Color: Choose the secondary color for the overlay gradient.
- Overlay Gradient Direction: Adjust the overlay gradient direction.
- Use Icon: Enable to use an icon on the overlay gradient.
- Icon Color: Choose a color for the overlay icon.
- Icon Size: Adjust the size of the overlay icon.
- Icon Reveal Type: Choose the reveal animation for the overlay icon.
- Image Scale Type: Choose how the post image will animate on hover.
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
- 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: Set a background color, gradient, or image specifically for this individual post element.
Element Label: Rename the post element to organize it more easily in the Divi Builder.
Design Tab
Image Settings
If you choose “Post Image” as the “Type”, this additional section will show up.
- Image Size: Select the desired post image size: original, large (1080×675), or small (400×250).
- Force Full Width: Toggle on to make the post images full width.
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
Use this tab for custom CSS, visibility, and advanced conditions specific to the post element.
Need Help?
If you have any questions or need assistance, contact our support team: [email protected]
