The Avada tabs are a great way to put a lot of related content on a page in a small space. The vertical tabs are no exception. At the time of this page being authored, there is little to no control over the layout, and custom CSS is required. This is an example that should get you started.
Features:
- Max tab width
- Text wrapping
- Border radius
- Override a heading top margin and padding*
- Content width
*I add a heading to each content pane that matches my tab, but this is not required. Because the Avada team made a decision to assign an h4 to the tabs, adding a heading will cause a document structure review may fail as h4 should always follow an h3.
Tab Example
Tab 1
Ut beatae cursus aut leo, eu, placeat voluptatum consequat modi pulvinar ullamcorper autem minim pretium, nemo accumsan molestie blandit varius facilisi conubia repellendus nostrum. Exercitation dolor rem tempore, dis unde.
Aliqua senectus, minim sodales habitasse voluptatibus, harum sunt sociis tortor! Malesuada taciti, facilisi dignissimos. Vivamus natoque, pede, animi? Elit fames ullam? Posuere fugiat in nesciunt aptent arcu quam asperiores magna.
Fermentum tempore felis dolores odit luctus, fames suspendisse non minima, pariatur illo, mi eleifend, nunc. Penatibus, potenti convallis, placeat molestias! Laoreet, molestiae morbi vero praesentium turpis nibh risus, delectus massa.
Tab 2
Ut beatae cursus aut leo, eu, placeat voluptatum consequat modi pulvinar ullamcorper autem minim pretium, nemo accumsan molestie blandit varius facilisi conubia repellendus nostrum. Exercitation dolor rem tempore, dis unde.
Aliqua senectus, minim sodales habitasse voluptatibus, harum sunt sociis tortor! Malesuada taciti, facilisi dignissimos. Vivamus natoque, pede, animi? Elit fames ullam? Posuere fugiat in nesciunt aptent arcu quam asperiores magna.
Fermentum tempore felis dolores odit luctus, fames suspendisse non minima, pariatur illo, mi eleifend, nunc. Penatibus, potenti convallis, placeat molestias! Laoreet, molestiae morbi vero praesentium turpis nibh risus, delectus massa.
Tab 3
Ut beatae cursus aut leo, eu, placeat voluptatum consequat modi pulvinar ullamcorper autem minim pretium, nemo accumsan molestie blandit varius facilisi conubia repellendus nostrum. Exercitation dolor rem tempore, dis unde.
Aliqua senectus, minim sodales habitasse voluptatibus, harum sunt sociis tortor! Malesuada taciti, facilisi dignissimos. Vivamus natoque, pede, animi? Elit fames ullam? Posuere fugiat in nesciunt aptent arcu quam asperiores magna.
Fermentum tempore felis dolores odit luctus, fames suspendisse non minima, pariatur illo, mi eleifend, nunc. Penatibus, potenti convallis, placeat molestias! Laoreet, molestiae morbi vero praesentium turpis nibh risus, delectus massa.