I’m a placeholder for 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 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 for 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 for 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 for 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!