This layout allows you the full ease of the Divi builder, without resorting to fetching library items.

Animation of the tabs is controlled using Divi’s on-load animation options. Set a color background to the page so that any background colors don’t flash through during the transition.

Some medium-level CSS is used to style the blurbs. You should be able to edit the icon, and text colors, as needed.

At the top of this page are 4 modules. Two jquery modules, and two CSS.

One jquery version of the code requires a click to display the tab content. The other requires a hover event. You decide.

To see all the sections, and style them in the Visual Builder, just disable the jquery code module.

You will also see two additional CSS code modules, 1 CSS and 2 CSS. Enable and disable at will, otherwise the css will hide all non-active tabs in the front end.

On mobile, the blurb tabs compress into buttons, with the icons left aligned.

You can manually control the break points of the tab titles by putting your text in the Blurb Description area, and inserting a <br> item.

This layout only works where the tabs have equal heights, controlled by equal lines of text. I’ve used the description area instead of the Blurb header area. This allows granular breakpoints.

Add the number of blurbs you need.

In the CSS module, find this section, and change the percentage to accommodate the number. Divide 100% by the number of blurbs you need. This may/may not affect your padding and spacing, so be careful.

/* Width of Tab Title – Dependent on Item Number */
#blurb-tabs .tab-title {
width: 20%;
}