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.

Latest Articles

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vides, quid faciat. Nihilo beatiorem esse Metellum quam Regulum. Si longus, levis.

  • all-pro-4-kolumna

    01 This is a title Taxidermy gochujang quinoa edison bulb chillwave succulents waistcoat. Austin viral…

  • all-pro-3-kolumna

    Website coming soon Raclette authentic echo park kale chips put a bird on it tumeric…

  • all-pro-2-kolumna

    10% Off HomewareLimited time deal. Cardigan chia marfa prism freegan hashtag. Unicorn photo booth plaid…

  • all-pro-1-kolumna

    BlackFriday Get your 50% off coupon code direct to your inbox. Want free content sent…

  • heading

    https://brandandbuildtemplates.me/kadence-cloud/category/headings/ Note: It’s best to move the CSS in the Custom CSS toggle of the…

  • search

    brak linku Note: The CSS for this search box is contained within the Custom CSS…

  • footers

    We’ve included best practices, pro tips and examples, along with the templates. The text that…

  • sections

    tylko jeden Note: The ribbon background colour is defined in the advanced text block settings….

  • counters

    We’ve included best practices, pro tips and examples, along with the templates. The text that…

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.

  • all-pro-4-kolumna

    01 This is a title Taxidermy gochujang quinoa edison bulb chillwave succulents waistcoat. Austin viral celiac twee adaptogen. 02 This is a title Taxidermy gochujang quinoa edison bulb chillwave succulents waistcoat. Austin viral celiac twee adaptogen. 03 This is a title Taxidermy gochujang quinoa edison bulb chillwave succulents waistcoat. Austin viral celiac twee adaptogen. Note:…

  • all-pro-3-kolumna

    Website coming soon Raclette authentic echo park kale chips put a bird on it tumeric meh roof party salvia vape direct trade la croix. Yuccie mumblecore craft beer next level hoodie. Prism occupy jianbing, sus ascot snackwave shaman pug. Get notified when we go live Sign up to grab a freebie! Announcement: Please read our…

  • all-pro-2-kolumna

    10% Off HomewareLimited time deal. Cardigan chia marfa prism freegan hashtag. Unicorn photo booth plaid semiotics seitan keffiyeh venmo. By submitting this form, you agree to our terms & conditions & privacy policy. Starter High performance, low cost hosting with SSD for the perfect starter plan. Freelance High performance, low cost hosting with SSD for…

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.

Stay up to date

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vides, quid faciat. Nihilo beatiorem esse Metellum quam Regulum. Si longus, levis.

Read all articles

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.

  • all-pro-4-kolumna

    01 This is a title Taxidermy gochujang quinoa edison bulb chillwave succulents waistcoat. Austin viral…

  • all-pro-3-kolumna

    Website coming soon Raclette authentic echo park kale chips put a bird on it tumeric…

  • all-pro-2-kolumna

    10% Off HomewareLimited time deal. Cardigan chia marfa prism freegan hashtag. Unicorn photo booth plaid…

  • all-pro-1-kolumna

    BlackFriday Get your 50% off coupon code direct to your inbox. Want free content sent…

  • heading

    https://brandandbuildtemplates.me/kadence-cloud/category/headings/ Note: It’s best to move the CSS in the Custom CSS toggle of the…

  • search

    brak linku Note: The CSS for this search box is contained within the Custom CSS…

  • footers

    We’ve included best practices, pro tips and examples, along with the templates. The text that…

  • sections

    tylko jeden Note: The ribbon background colour is defined in the advanced text block settings….

  • counters

    We’ve included best practices, pro tips and examples, along with the templates. The text that…

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.

Podobne wpisy

  • all-pro-2-kolumna

    10% Off HomewareLimited time deal. Cardigan chia marfa prism freegan hashtag. Unicorn photo booth plaid semiotics seitan keffiyeh venmo. By submitting this form, you agree to our terms & conditions & privacy policy. Starter High performance, low cost hosting with SSD for the perfect starter plan. Freelance High performance, low cost hosting with SSD for…

  • Galleries

    This template contains prompts for sales email templates. Words in [brackets] are meant to be replaced with information about yourself, your company, products, services, and/or customers.  We’ve included best practices, pro tips and examples, along with the templates. The text that exists outside of the brackets is also meant to serve as a foundation for…

  • Conversions

    https://brandandbuildtemplates.me/kadence-cloud/category/conversions/ BlackFriday Get your 50% off coupon code direct to your inbox. 30% Off Black Friday Sale Cardigan chia marfa prism freegan hashtag. Unicorn photo booth plaid semiotics seitan keffiyeh venmo. Ends05/12 10% Off HomewareLimited time deal. Cardigan chia marfa prism freegan hashtag. Unicorn photo booth plaid semiotics seitan keffiyeh venmo. By submitting this form,…

  • wireframe

    This template contains prompts for sales email templates. Words in [brackets] are meant to be replaced with information about yourself, your company, products, services, and/or customers.  We’ve included best practices, pro tips and examples, along with the templates. The text that exists outside of the brackets is also meant to serve as a foundation for…

  • Menus

    This template contains prompts for sales email templates. Words in [brackets] are meant to be replaced with information about yourself, your company, products, services, and/or customers.  We’ve included best practices, pro tips and examples, along with the templates. The text that exists outside of the brackets is also meant to serve as a foundation for…

  • footers

    We’ve included best practices, pro tips and examples, along with the templates. The text that exists outside of the brackets is also meant to serve as a foundation for writing your emails. We encourage you to add, delete, or change any of the pre-written sections to ensure a consistent and accurate brand experience for your…

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *