Featured Posts

The Featured Posts Block is suitable for displaying the post of your site in the horizontal layout, displaying the first post as having the bigger featured images with the post title followed by the smaller one with the smaller featured image and post title.

Adding Featured Post Block
Adding Featured Post Block

Once you have selected the Block, you will get two options: 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 four options as listed below:

General #

The option allows you to choose the number of columns to display the posts. You can either select a single column or two columns.

General Settings
General Settings

Query #

It consists of the settings related to the Category and Post Count. It allows you to choose and assign a specific category to be displayed on the Block. Likewise, you can choose the number of posts to be displayed on the Block according to the site requirement.

Query Settings
Query Settings

Block Advanced #

The Advanced section consists 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 along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile)

Adding Block Margin
Adding Block Margin

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 Featured Posts block only, you can add a class such as featured-posts-title to the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:

h3.featured-posts-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 Code
Adding Additional CSS Code

Powered by BetterDocs

Scroll to top