Post List

The Post List Block is suitable for displaying the post of your site in the list form. It displays the post with the thumbnail, post title, and date by default.

Adding Post List Block
Adding Post List Block

Once you have selected the Block, you will get two options consisting of Settings and Advanced. These tabs are to make changes to your block design. Let’s explore one by one below:

Block Settings #

The settings section mainly consists of three options as listed below:

Query #

In the Query section, you can find the Category and Post Count settings. It allows you to choose and assign a specific category. Likewise, you can choose the number of posts to be displayed.

Query Settings
Query Settings

Image #

It allows you to enable or disable the post thumbnail image appearing on the site. Once you have enabled the option, it provides the option to change the post alignment to either left or center.

Image Customization
Image Customization

Block Advanced #

The Advanced sections consist of two customization options for the Block.

Advanced #

Inside the Advanced > Block Margin section, you will have the option to add the Block Margin values to all four sides of the block. According to the site requirement, you can assign a specific margin value to the block. Also, you can choose any units like px, em, %, and rem.

Moreover, you can set the value of the different margins for various devices (Desktop, Mobile, and Tablet). Likewise, you can also add the specific CSS ID to make changes in the specific section of the block.

Advanced Settings
Advanced Settings

CSS #

It allows you to add a CSS class to your block, letting you write custom CSS to style this particular block.

For example, if you want to change the post title color of the Post Title block only, you can add a class such as post-list-title to the Additional CSS Class field. After that visit your CSS editor and write a style for the class as below:

h3.post-list-title a{
color: #f31315;
}

Upon adding the code, it will make the changes only to this particular block and not other blocks.

Adding Additional CSS Class
Adding Additional CSS Class

Powered by BetterDocs

Scroll to top