post blocks

https://brandandbuildtemplates.me/kadence-cloud/category/posts-block/

Note: You need to leave the layout settings at 1 column and the number of posts at 3 for the grid layout to function correctly.

Note: If you would like to change the size of the images you can adjust the variables at the top of the CSS in the Custom CSS toggle of the parent row. At the top you will find two variables:

:root {
    –bb-latest-posts-3-image: 150px;
–bb-latest-posts-3-image-mobile: 120px;
}

Adjust the values as you like.

Note: In order to have a smooth transition on hover, we have to define a max-height for the excerpt. This is set using a CSS variable in the Custom CSS toggle of the parent row:

:root {
–bb-post-content-reveal-1-height: 250px;
}

If you increase the excerpt length or the number of columns in the Posts block, you may need to increase the max-height variable above 250px for all the content to display on hover.

Note: The posts block is set to display 10 posts, but you can increase this if you wish and subsequent posts will adjust their position to fit the layout.

At the top of the CSS in the Custom CSS toggle in the parent Row Layout block, you will find the following:

:root {
-bb-stag-posts-1-offset: 10%;
}

This adjusts the depth of the offset. You can change the 10% to any value you like, and even change the unit (to px, vw, em etc.) and the layout will adjust to your new value.

Note: If you choose to display more than 2 columns, you may want to adjust the padding of the content container on desktop. In the Custom CSS toggle of the parent row find this CSS declaration:

.bb-post-grid-5.wp-block-kadence-posts .loop-entry .entry-content-wrap {
display: flex;
flex-direction: column;
position: absolute;
padding: 5% 15vw 8% 5%;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
}

Adjust the second value of the padding property.

Note: In order to have a smooth transition on hover, we have to define a max-height for the excerpt. This is set using a CSS variable in the Custom CSS toggle of the parent row:

:root {
–bb-post-content-reveal-2-height: 250px;
}

If you increase the excerpt length or the number of columns in the Posts block, you may need to increase the max-height variable above 250px for all the content to display on hover.

Note: This posts block is flexibly designed so you can show more than just the title over your featured images. Switch on the meta data and/or the excerpt if you wish, it’s all prestyled. If you find there isn’t enough vertical space to show your content, adjust the image ratio in the post block settings to make posts taller. It’s also fully responsive with no need for media queries. The number of columns will automagically adjust to the device size.

Note: You need to leave the columns on the posts block layout settings as 3 on desktop and 2 on tablet for the alternating feature to function.

Note: The circles and lines in this block will adopt your primary accent colour. To change this, replace the var(–global-palette1) value everywhere you see it in the CSS toggle of the parent row.

Note: The posts block is set to display 10 posts, but you can increase this if you wish and subsequent posts will adjust their position to fit the layout.

At the top of the CSS in the Custom CSS toggle in the parent Row Layout block, you will find the following:

:root {
-bb-stag-posts-1-offset: 10%;
}

This adjusts the depth of the offset. You can change the 10% to any value you like, and even change the unit (to px, vw, em etc.) and the layout will adjust to your new value.

Note: You need to leave the columns on the posts block layout settings as 3 on desktop and 2 on tablet for the alternating feature to function.

Note: This posts block is flexibly designed so you can show more than just the title over your featured images. Switch on the meta data and/or the excerpt if you wish, it’s all prestyled. If you find there isn’t enough vertical space to show your content, adjust the image ratio in the post block settings to make posts taller. It’s also fully responsive with no need for media queries. The number of columns will automagically adjust to the device size.

Note: This posts block is flexibly designed so you can show more than just the title over your featured images. Switch on the meta data and/or the excerpt if you wish, it’s all prestyled. If you find there isn’t enough vertical space to show your content, adjust the image ratio in the post block settings to make posts taller. It’s also fully responsive with no need for media queries. The number of columns will automagically adjust to the device size.

Note: You need to leave the layout settings at 1 column and the number of posts at 3 for the grid layout to function correctly.

Note: In order to have a smooth transition on hover, we have to define a max-height for the excerpt. This is set using a CSS variable in the Custom CSS toggle of the parent row:

:root {
–bb-post-content-reveal-1-height: 250px;
}

If you increase the excerpt length or the number of columns in the Posts block, you may need to increase the max-height variable above 250px for all the content to display on hover.