https://brandandbuildtemplates.me/kadence-cloud/category/post-grid-carousel/
Latest
From the blog.
Humblebrag four loko raclette, aesthetic ennui poutine thundercats tacos ugh hoodie coloring book. Hashtag readymade distillery truffaut organic offal disrupt direct trade brunch man bun kale chips.
Note: The large Post Grid/Carousel block can also be used to display a static post. Simply change the layout in the settings to Grid, and reduce the number of items to show to 1.
If you want to change the colour of the large title background or the custom dot navigation in the carousel, locate the two CSS variables at the top of the Custom CSS toggle in the parent row:
:root {
–bb-post-grid-6-title-background: var(–global-palette3);
–bb-post-grid-6-dot-nav: var(–global-palette1);
}
Change the global palette value from 1 – 9 in each variable to use your customiser colours.
Note: This post carousel uses negative margin to pull the two outer posts partially outside the viewport. You can adjust how much of the outer posts show using the included CSS variables.
At the top of the CSS in the Custom CSS toggle of the parent row, you will see the following:
:root {
–bb-partial-post-carousel-1-desk: -15vw;
–bb-partial-post-carousel-1-tab: -30vw;
–bb-partial-post-carousel-1-mob: -50vw;
}
Increase or decrease the negative view width value for desktop, tablet, and mobile to show more or less of the outer posts. You can also adjust how many posts show on each device size using the layout settings in the post grid/carousel block, and the overhang will adjust accordingly.
All the latest
From our blog.
Note: Copy the Javascript in the Custom HTML block below (including <script> tags) and paste into the Page Scripts footer area on the page you use these flip cards, then delete the block. The script moves the excerpt and read more container out of its parent container on screens above 1024px so that it can be reversed and flipped independantly of the rest of the content.
The CSS is contained within the Custom CSS box of the parent row and shouldn’t require changing as it mostly provides the flip effect. These cards even work with pagination or filters.
elements
Lists
Miscellaneous
tabs
timelines
hero section
Note: This layout is designed to display 5 posts. At the top of the CSS in the row Custom CSS box, you will find the following variables:
:root {
–bb-post-grid-7-height-desktop: 120%;
–bb-post-grid-7-height-tablet: 70%;
–bb-post-grid-7-height-mobile: 100%;
}
These control the height of the images, which in turn control the height of the posts. If your post titles are long or your posts are in lots of categories, you may want to increase the heights so the content does not overflow the post container.
No posts
No posts
Note: The large Post Grid/Carousel block can also be used to display a static post. Simply change the layout in the settings to Grid, and reduce the number of items to show to 1.
If you want to change the colour of the large title background or the custom dot navigation in the carousel, locate the two CSS variables at the top of the Custom CSS toggle in the parent row:
:root {
–bb-post-grid-6-title-background: var(–global-palette3);
–bb-post-grid-6-dot-nav: var(–global-palette1);
}
Change the global palette value from 1 – 9 in each variable to use your customiser colours.
Latest
From the blog.
Humblebrag four loko raclette, aesthetic ennui poutine thundercats tacos ugh hoodie coloring book. Hashtag readymade distillery truffaut organic offal disrupt direct trade brunch man bun kale chips.
All the latest
From our blog.
All the latest
From our blog.
Note: This alternating posts layout will revert to 2 columns on screens under 992px and 1 column under 768px. If you want to change these breakpoints you can do so in the carousel layout settings, but be aware you will also need to modify the media queries in the CSS to match.
The CSS is located in the Custom CSS toggle of the parent row. To change the colour of the post content background, find the following declaration:
.bb-alt-posts-4 .kt-blocks-post-grid-item-inner {
background: var(–global-palette1);
}
And change the colour variable number from 1-9.
Note: This block is great to use on sites with a lot of post categories, where using the default horizontal filter layout looks too busy.
Copy the Javascript from the Custom HTML block below (including <script> tags) and paste into the footer area of Page Scripts on the page you are using this block, then delete the Custom HTML block. Alternatively, add to a code snippets plugin.
The Javascript adds functionality to the button that reveals and hides the post filters on click. You can style the post filters and the button any way you wish using the block settings, but be sure to give the button a fixed width.
The CSS is contained in the Custom CSS box of the parent row. In the first declaration you will see a 200px value:
.bb-post-filter-1 .kb-post-filter-container {
width: 200px;
// Other styles
}
This value should match the fixed width of your filter button.
Style the posts any way you wish. The code that comes with this block only affects the post filters. Don’t forget to define your filters in the post grid/carousel block settings.
