I’m a placeholder for Number One demonstration purposes only. Edit or remove me.

This is just demo content. You can add any blocks to the tabs you wish. I just put these mischevious cats here to fill the space so you can see what the tabs look like with content. Click next for more instructions.

I’m a placeholder for Number two demonstration purposes only. Edit or remove me.

The tabs block allows up to 8 tabs before they stack. You can add or remove tabs so you have a total of between 1 and 8. If you add or remove tabs, don’t foget to adjust the column number in the tabs block Tab Title Width/Spacing/Border settings.

I’m a placeholder Number three demonstration purposes only. Edit or remove me.

Background colours for the numbers are defined in the CSS added to the parent row layout and pulled from your customiser settings. The backgrounds will use your button colour for the active tab, and the 7th colour in your palette for lines and the hover effect.

I’m a placeholder Number four demonstration purposes only. Edit or remove me.

If you want to change the size of the number circles I’ve made that easy using CSS variables. At the top of the CSS in the Custom CSS section of the parent row layout block you’ll see this:

:root {
–bb-stepped-tabs-1-number-size: 50px;
–bb-stepped-tabs-1-number-size-mobile: 40px;
}

Change the 50px value for desktop and tablets, and the 40px value for mobile. You can change the text size in the subtitle font settings.

I’m a placeholder Number five demonstration purposes only. Edit or remove me.

That’s about it, not much else to it really. You can link the button below back to the first tab (as I have), or for better conversion, use a CTA that tells your reader what you want them to do next. Enjoy!

Note: These tabs use CSS contained in the parent row to define images about the tabs titles. At the top of the CSS you will find the following variables:

:root {
–bb-image-tabs-1-bg: var(–global-palette2);
–bb-image-tabs-1-bg-active: var(–global-palette1);
–bb-image-tabs-1-size: 80px;
}


The first variable controls the image background colour
The second variable controls the image background colour on hover
The third variable controls the width and height of the image

Also inside the CSS, you will find 8 declaration that define the image to use above the tab titles:

.bb-image-tabs-1 .kt-tabs-title-list li:nth-of-type(1) .kt-title-text::before {
background: url(/kadence-cloud/wp-content/uploads/100×100.jpg);
}


The above declaration is repeated 8 times (once for each tab) and the nth-of-type(1) value is changed for each instance. You can add more tabs and add images for them by duplicating the declaration above and incrementing the nth-of-type(1) value for each one. Don’t forget to change the URLs to your own.