Tabs are an area where Avada needs to start over and add a lot of enhancements. Unfortunately, I suspect it would take an entire release cycle dedicated to tabs to be feature complete. Fortunately, with some custom CSS, it is possible to modify the behavior and appearance. Here is an example I put other emulating a tabbed interface I had seen elsewhere. It’s not exactly like the one I saw, but it’s close. The tabs are place within a 1/1 column with a background color (white) and a box shadow — 20px, 0, 22, -22, rgba(0,0,0,0.4).
Note: There is an accessibility error in the tabs and a bug has been reported. Tabs are not keyboard accessible due to a tabindex of -1 on the inactive tabs. Either the necessary JavaScript is broken or not included.
Beatae dolor earum ante egestas! Adipiscing fuga, aut duis excepturi mollitia vero. Repellendus, duis, vivamus ipsa nisi platea per dolor. Totam sodales, repellat sed sapien facilisis quam provident mollis netus unde voluptate assumenda viverra quisquam consectetuer sunt similique. Et dignissimos.
Sociosqu pulvinar faucibus quaerat purus ultricies faucibus. Commodi! Fames praesentium maxime, aut sem diamlorem curabitur quos tristique eget dapibus incidunt, facilis imperdiet esse pede, distinctio amet! Duis vero, dolorum et, mollit cursus, placerat similique, eveniet aperiam voluptatibus voluptatibus possimus sunt.
Here is a screenshot of the tab settings.
Beatae dolor earum ante egestas! Adipiscing fuga, aut duis excepturi mollitia vero. Repellendus, duis, vivamus ipsa nisi platea per dolor. Totam sodales, repellat sed sapien facilisis quam provident mollis netus unde voluptate assumenda viverra quisquam consectetuer sunt similique. Et dignissimos.
Sociosqu pulvinar faucibus quaerat purus ultricies faucibus. Commodi! Fames praesentium maxime, aut sem diamlorem curabitur quos tristique eget dapibus incidunt, facilis imperdiet esse pede, distinctio amet! Duis vero, dolorum et, mollit cursus, placerat similique, eveniet aperiam voluptatibus voluptatibus possimus sunt.
The CSS is fairly straightforward. I created a class called box-tab and assigned it to this example.
