Get the Latest from Sniffle Valve
If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee
For help with the content presented in this tutorial, book a one-on-one online training session
The tabs, accordion, and toggle widgets in Elementor can be styled from within Elementor, but those styles apply to all the respective items in each widget.
There may be times when you would like to apply certain styles to the individual items, including perhaps, a background image. That is what this tutorial shows you how to do using relatively simple CSS.
For each of the three widgets, all I did in Elementor was add an additional item and additional text in the second and third items.
It should be noted that if and when you add additional items, you will have to add an additional block of CSS for that widget type and increment the [data-tab] or [data-section] value accordingly.
The rest is done with CSS. I use the Simple CSS plugin and recommend that you do as well.
Color names are used instead of the hexadecimal values as it is easier for those who are not accustomed to them to be able to see what’s going on. The W3Schools HTML Color Names page is a good resource for those wanting to find out more on the subject.