BBB-Info boxes

Note: This slide out contact menu is designed to be opened from a custom link. Following the instructions in the modal’s link settings toggle to add a link to a page which opens the modal. All styling for the menu content is defined within the individual info boxes. This advanced text block you are reading is the current trigger for the modal. View on the front end and click this block to open the menu.

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. Background colours are defined in the front and back row background 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: These circle info blocks are responsive and will retain their shape as long as your content can be contained within the size of the circle. You should adjust the font size for the media number and title text for each device size to avoid forcing the circle into distorting.

Note: The CSS in the Custom CSS box of the main row only ensures each card stays full height regardless of the content. All everything else is controlled within the block settings.

Note: The background colour of the title and text is controlled via CSS. If you would like to change the colour find the following section of CSS is the Custom CSS box of the parent row:

.bb-cta-infobox-1 .kt-infobox-textcontent {
position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    z-index: 3;
background: var(–global-palette7);
}

Change the background variable colour value.

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. Background colours are defined in the front and back row background 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: The CSS for these shaped info box icons is in the Custom CSS box in the parent row advanced settings. Each section of CSS is labelled with the name of the shape it relates to, so you can use the CSS only for the shape you want and delete the rest.

For example, the triangle shape only requires the following CSS:

/* Triangle */
.bb-info-tri .kt-blocks-info-box-media {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Note: The CSS for these shaped info box icons is in the Custom CSS box in the parent row advanced settings. Each section of CSS is labelled with the name of the shape it relates to, so you can use the CSS only for the shape you want and delete the rest.

For example, the triangle shape only requires the following CSS:

/* Triangle */
.bb-info-tri.border :is(.kt-blocks-info-box-media-container, .kt-blocks-info-box-media) {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.bb-info-tri.border .kt-blocks-info-box-media-container {
background: var(–global-palette3);
border: 3px solid var(–global-palette3);
}

.bb-info-tri.border .kt-blocks-info-box-media {
transform: translateY(1px);
}

The CSS highlighted in white is where you can change the colour and width of your border. You need to change both the background colour and the border colour. Everything else is managed in the block settings.

Important! Do not add any margin to the icon in the info box media settings as this will break the shape of the border.

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. Background colours are defined in the front and back row background 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: These info box tabs use minimal CSS to add some shadows for depth. All other styling is controlled within the blocks.

The coloured strip on the right is set in the section’s background gradient and the width of the strip is set in the right padding.

If you change the size of your icon or its padding, you may need to also adjust the icon’s negative left margin. If you do this, add the same positive margin value to the info box’s left margin field.

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

Note: You can adjust the background colour of the text content area by editing the CSS in the Custom CSS toggle of the parent row.

At the bottom you will find this CSS:

.bb-info-box-window-1 .kt-infobox-textcontent {
background: var(–global-palette7);
}

Change the global palette value to between 1-9

Note: Change the images in the section background settings and the height in the section structure settings. The overlay on hover colour is defined in the CSS in the parent row’s CSS toggle. Change the RGBA value in the background property of this section:

.bb-info-box-slide-1 .kt-blocks-info-box-text {
align-items: center;
transform: translateX(-100%);
transition: all 0.5s ease;
padding: 20px;
background: rgba(0, 0, 0, 0.8);
}