DiviFlash Post List modules offer an all-in-one solution for any list type of post. From title to divider, it impressively provides unique features with a lot of customization options.
To get familiar with our Post List module, We are going to walk you through all of the features and customizations through this documentation.
Child Item
Child items are the core element to give your post list a solid structure. Here, you will get 10 elements as child items to display a post list in an informative manner. They are –
- Post Title
- Post Content
- Read More Button
- Post Author
- Publish Date
- Post Categories
- Post Tags
- Post Comments
- Custom Text
- Divider
Child Item – Content Tab
Elements
Now let’s get started with all of these 10 different elements
Post Title
Post Title enables you to show the title of your post on the site. Also, you can change the tag of your title including h1 to h6, p tag, span tag, and div tag.
Post Content
Post Content will help you to decorate your post-listing by using both –
- Show Content – Display the whole content as a description in the content area
- Show Excerpt – Display a small portion of your content as a description in the content area. It automatically takes the first few lines as excerpt from the content
Choosing over ‘Show Excerpt’ will enable two options –
- Use Post Excerpt – Toggle ON this button to show your customized excerpt. Make sure you have written it down in the particular post.
- Excerpt Length – Define how many words you want to show as an excerpt
Read More Button
Here, you can get access to add a button. Usually, it’s named with Read More Button but you can customize the button text using the ‘Read More Text’ field.
Post Author
Post Author enables you to display the name of the content author in the post list. Besides, you can customize some settings in this element like –
- Show Author Image – Display the author name by toggling ON this button. By doing ON this button will let you have two options –
- Author Image Size – Define the image size of the author here
- Hide Author Text – Toggle ON this button will hide the author’s name
Publish Date
Show the content publish date from here. You can adjust the Date Format by giving the PHP date format here.
Post Categories
Post Categories help you to categorize or make groups of your content.
Post Tags
The tags are used to describe smaller terms. In a sense, they are keywords for posts or indexes of content.
Post Comments
You can toggle ON the ‘Turn off Comment Text’ button if you don’t want to show comments.
Custom Text
Add any custom text if you want to show the text before the author’s name.
Note: From ‘Post Author’ to ‘Custom Text’ you will get two options in every element. They are
- Display – Change the element’s display position by using three different options – Inline Block, Inline, and Block.
- Align – You can align the elements only with the ‘Default’ and ‘Right’ options. And remember, If you use the ‘Block’ display options, you will not get the ‘Align’ option in the meantime.
Divider
This will help you separate the groups of your content list.
Divider Line
- Divider Line Height: Customize the line height by giving it a value
- Divider Color: Set both Primary and Secondary colors for the divider
- Divider Color Direction: Add color direction according to your needs
- Position: Define Starting and Ending Position
Icon Settings
The icon setting is placed to add an icon or image to the post list. You have to enable the ‘Use Icon’ to get the settings. Additionally, you have access to align the image or icon to the top, middle, or bottom using their Vertical align option.
- Icon: will give you the option to insert an Icon, add an Icon color, and Icon size
- Image: you will get Image Alt Text and Image Width set settings here
Background
Background features of the child Items Content tab have multiple attributes to choose from including background color, gradient color, image, video, pattern, and mask features.
Additionally, the background image lets you have some options to adjust as you desire. Like – parallax effect, image size, position, image repeat, and blend options.
Admin Label
Admin labels match the module names by default, and you can change the labels in the backend without affecting the front end.
Child Item – Design Tab
Text
Text feature align your child item text and apply a shadow effect. But make sure that the child items contain text.
Text Styles
Text Styles allow you to modify the font, weight, alignment, color, size, letter spacing, and line height of the text.
Note: This feature is only applicable to items that contain text.
Spacing
There are two standard margin and padding settings available under the spacing feature. Adjust them according to your needs.
Before After Text
The before and after text feature modifies the before & after text font, weight, and color. Furthermore, you can adjust text size, letter spacing, and line height, and select different text-shadow effects.
Sizing
Here, the sizing feature works to increase or decrease the item width and height. In addition, you can set a minimum or maximum height & width for the item.
Border
You can round the container corners with this design feature. Also, you can customize the design by changing the border width, style, and color under it.
Box-shadow
This Box shadow affects the entire child item. This feature consists of distinct shadow effect styles with all the necessary settings.
Filters
With this unique function, you can achieve numerous color effects for a particular child item. The filter setting adds effects like hue, saturation, brightness, contrast, invert, sepia, opacity, and blur. Plus, you can adjust these effects by using the blend mood.
Transform
On the child item design tab, you can transform your child item in five different ways – transform scale, translate, rotate, skew, and origin options. Implementing these functions on your items will give you better control over the design.
Child Item – Advanced Tab
The child Item Advanced tab lets you do something exceptional by using the CSS code. Additionally, the visibility, transition, position, and scroll effects settings will help you to work fluently.
Global Settings of Post List Module
Like any other divi module, the Post List module’s global setting is structured with three categories – Content, Design, and Advanced Options.
Content Tab
Post Settings
- Post Count: Choose how many posts you would like to display per page.
- Display Post By: Display your post by Recent, Category, and Tag.
- Orderby: Make your post list order by Newest to oldest, Oldest to newest and Random.
- Post Offset Number: Choose how many posts you would like to skip. These posts will not be shown in the feed.
- Show Pagination: Enabling this button will give you to use number pagination and let you add older and next entries button text.
Background
A variety of background attributes can be applied to the Content tab’s background feature for better layout views. Such as background color, gradient color, image, and video features.
Admin Label
The Admin Label of this Post List module provides the opportunity to modify the module name as you want.
Design Tab
Alignment
This module uses the Alignment feature to align the entire container. You can create alignment for every element in the module with one click.
Layout
Here, you have three layout options to choose from. You can use layout breakpoint and also can manually change the breakpoint measurement.
Plus, you can make over the layout gap, image column size, and alignment with stretch, top, center, and bottom options. There are two buttons more to consider if you want to collapse and give the layout an equal height.
Post Item
Post Item setting lets you add a background color, adjust margin-padding, and corner radius. You can also change the border styles, customize the width, and color, and add a box shadow.
Featured Image
By turning ON the ‘Show Image’ button, you can get your image featured. You can change the image size, and image scale type from the additional settings.
But turning off this button will give you the option to use the icon. You can change the icon, size, color, margin padding, and background color by using the icon settings.
Plus, you have options to change the corner radius, border styles, width, and color, and add a box shadow.
Content Wrapper
Content wrapper helps you to add solid, gradient, and image backgrounds.
For a solid background, you can add color, adjust margin padding, and corner radius. You can also change the border styles, customize the width, and color, and add a box shadow.
For a gradient background, you can change colors, type, direction, adjust margin padding, corner radius, and more with border settings.
And for background images, you can change image size, color, margin padding, corner radius, and more with border settings.
Content Inner Wrapper
In this Content Inner Wrapper attribute, you can access all the customized properties that are available in the previous Content Wrapper attribute. But these are only for inner wrapper content.
Pagination Button Styles
By using this Pagination Button Styles, you are able to customize the alignment, next & previous icons, and background of the pagination button. There remain settings for gradient and image background also.
However, you can define the pagination button font weight, style, alignment & color, text size, line height & letter spacing alongside text-shadow effects through its settings. Additionally, you can change the button border style, width, & color with corner rounding & box shadow.
Active Pagination Number
Active pagination number allows you to access all customized properties available in pagination button style.
But remember, this feature affects the active page number only. Cause, when you click on the next page, the existing page numeric value loses the active style, and the next one will get it.
Overflow & Z-index
Overflow options allow you to set the CSS overflow property of an element. You have five different overflow view options for both the ‘Outer Wrapper Overflow’ and ‘Inner Wrapper Overflow’ fields.
Plus, you can change the position of the feature image and content wrapper by giving it a value.
Sizing
Here, the sizing feature works to increase or decrease the item width and height. In addition, you can align the module and set a minimum or maximum height & width for it.
Spacing
The spacing feature provides the privilege to apply margin & padding over the entire container.
Transform
Using the transform controls, you can perform visual adjustments to any element using a combination of Scale, Translation, Rotation, and Skew settings. This allows you to create advanced design effects without the need for a separate graphic design program.
Animation
Pick an animation style to enable animations for this element. Once enabled, you will be able to customize your animation style further.
Advanced Tab
Advanced Tab allows you to customize all of the standard Divi module options. You can precisely play with each element by implementing CSS ID & Classes and other Custom CSS codes.
