Flexed info boxes

These info boxes sit in a 4 column row. CSS is added in the custom CSS box of the row to make all the info boxes the same height and align the buttons to the bottom regardless of the amount of content.

Learn More

Works with any number of columns

You can change the row layout to any number of columns you wish and the info box will automagically adapt its height to the tallest box.

Learn More

Placeholder images with sizing

I’ve also included a handy placeholder image in the cloud file with recommended sizing and the image aspect ratio used in this demo.

Learn More

Adopts your native styles

Fonts and colours are set in the customiser, so once you import the block layout, the content will adopt your site’s styling. Oh, and they’re mobile ready too!

Learn More

Coming in…

  

Connect. Captivate. Convert.

Fashion axe big mood bushwick microdosing. Sus yes plz roof party, post-ironic VHS actually bruh cliche keffiyeh messenger bag pabst echo park paleo. Seitan succulents letterpress photo booth, craft beer cray sustainable venmo chambray vaporware.

Email

Notify Me

Note: These progress bars are designed to be added to your shop, basket and checkout pages when you have WooCommerce installed. You can copy and paste the relevant row into each page and it will display above the WooCommerce page content. Don’t forget to set the links on each info box so they direct to the correct pages on your site.

Note: The structure of these flip cards must be maintained for them to function. You can increase or reduce the number of columns in the row holding the cards, and use any blocks inside the labelled front and back rows that make up the cards. Images and overlay gradients are defined in the front and back row background and background overlay settings. You must set a minimum height in the sections labelled ‘card 1, card 2 etc.’ and this can be different for desktop, tablet and mobile. All the cards will adjust their height to match the tallest card.

Note: This gallery frame effect will work with the masonry and grid gallery layouts only. It is advisable to keep the gutter set to 50 in the gallery settings as the custom CSS relies on this number. You can however, change the number of columns.

Note: This gallery frame effect will work with the masonry and grid gallery layouts only. It is advisable to keep the gutter set to 50 in the gallery settings as the custom CSS relies on this number. You can however, change the number of columns.

Note: This info box timeline will revert to a single column, left-aligned on mobile. The colour of the borders, circles, arrows, and joining lines is controlled via a CSS variable. At the top of the custom CSS box in the parent row, you will see the following:

:root {
    –bb-info-timeline-3-color: var(–global-palette8);
}

Change the number ‘8’ to any number from 1-9. The colour corresponds to the colours set in the colour palette in your customiser.

Learn how to A, B & C in this free workbook that will help you achieve X, Y & Z.

Art party sustainable snackwave deep v gastropub venmo, twee sus. Poutine dreamcatcher shoreditch shabby chic man bun listicle banh mi occupy before they sold out 90’s semiotics austin.

Email

Submit

Note: To use this footer template, copy the parent row to a new Kadence content element and select ‘replace footer’ in the placement settings and ‘entire site’ in the display settings.

The copyright year uses a shortcode to automatically update. You will need to paste the following PHP function into your child theme functions.php file or a code snippets plugin for the date to display via the shortcode:

function current_year() {
$year = date(‘Y’);
return $year;
}
add_shortcode(‘year’, ‘current_year’);

Don’t forget to choose your menus in the navigation blocks, hook up your form to your email service provider, and update the social profile links.

Note: To use this footer template, copy the parent row to a new Kadence content element and select ‘replace footer’ in the placement settings and ‘entire site’ in the display settings.

The copyright year uses a shortcode to automatically update. You will need to paste the following PHP function into your child theme functions.php file or a code snippets plugin for the date to display via the shortcode:

function current_year() {
$year = date(‘Y’);
return $year;
}
add_shortcode(‘year’, ‘current_year’);

Don’t forget to change your contact info and social links.

Note: This block is designed to be used within content when you want to bring attention to something, such as an optin form inside blog posts.

To use this block you must have Header/Footer Scripts enabled in Appearance > Kadence (this is a pro feature).

IMPORTANT – Copy the code from the Custom HTML block below into Kadence Block Controls > Page Scripts >Custom CSS & JS > Footer on this page, then delete the Custom HTML block. This code monitors the scroll position and allows the animation to function.

Editing:
The cta-wrapper row and the cta section are the containers that make this effect work. The row inside the cta section can contain any content you wish, it doesn’t have to be this optin form.

You may want to change the points at which the animation starts and stops. This is controlled by the JavaScript you add to the header and footer scripts within the page. This is the only part you need to edit:

rootMargin: “-30% 0px -30% 0px”,

The root margin values move clockwise: top, right, bottom, left. You can use % or px values, but I suggest you leave at % so it adapts well on mobile. Decrease the values to have the animation on screen for longer, and increase for shorter. The top and bottom values do not need to be the same.

Note: To use this footer template, copy the parent row to a new Kadence content element and select ‘replace footer’ in the placement settings and ‘entire site’ in the display settings.

The copyright year uses a shortcode to automatically update. You will need to paste the following PHP function into your child theme functions.php file or a code snippets plugin for the date to display via the shortcode:

function current_year() {
$year = date(‘Y’);
return $year;
}
add_shortcode(‘year’, ‘current_year’);

Don’t forget to change your menu and social links.

Note: This pricing table has very minimal CSS that moves the nested row top and bottom dividers to create the background effect. Everything is styled within the blocks.

Note: The CSS contained in the parent row only controls the ‘shake’ effect on hover. Everything else is defined in the block settings.

This is your title

This is your title

This is your title

This is your title

This is your title

This is your title

This is your title

This is your title

Note: The CSS for this layout is contained in the parent row Custom CSS toggle in the advanced tab. The CSS defines placement and function. All styling is managed within the blocks themselves. You can change the images in the background settings of each row that has the name of a car.

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: The CSS for this search box is contained within the Custom CSS toggle of the parent row. The height of the search bar is controlled by the padding around the button. At the top of the CSS you will see this variable:

:root {
–bb-search-box-3-size: .7em;
}

Adjust the em value. Increase to make the search box taller, decrease to make shorter.

Note: The CSS for this search box is contained within the Custom CSS toggle of the parent row. The height of the search bar is controlled by the padding around the button. At the top of the CSS you will see this variable:

:root {
–bb-search-box-4-size: .7em;
}

Adjust the em value. Increase to make the search box taller, decrease to make shorter.