Die basic tabbladen van DIVI opmaken doe je zo

23 jun 2021 | DESIGN TIP

Marloes met laptop blog
De DIVI tabbladen zijn van zichzelf niet heel mooi, ook al doe je je best in het Ontwerp tabblad. Met een beetje CSS geef je ze wat meer uitstraling!
divi-tabbladen-opmaken-doe-je-zo

Stap 1: Maak je Tabbladen module op in het Ontwerp tabblad

Verwijder allereerst de rand door in het Ontwerp tabblad onder Rand de Boordbreedte op 0px te zetten.

Geef de tabs een mooie achtergrondkleur passend bij je huisstijl en geef een andere opmaak mee aan de actieve tab, zodat duidelijk is in welk tabblad iemand aan het lezen is. Dit doe je in het Ontwerp tabblad onder Tab tekst:

divi-tabbladen-opmaken-css

In het Content tabblad geef ik nog lichtroze als achtergrondkleur mee. Bij mij ziet hij er dan zo uit:

divi-tabbladen-voor-css

Met een lelijke grijze achtergrond en rechthoekige tabjes. Meh.

Stap 2: Voeg CSS toe om de boel aantrekkelijker te maken

In het Geavanceerd tabblad ga je naar Aangepaste CSS.

Vul bij Tabcontroles:

background: transparent;

Hiermee verwijder je de grijze achtergrond.

Vul bij Tab:

border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-left: 2px;
margin-right: 2px;

Met de eerste 2 regels rond je de hoeken van de tabs links- en rechtsboven af. Wil je minder afgerond, dan maak je er minder pixels van.

Met de margin regels creëer je wat afstand tussen de tabs. Wil je geen afstand dan kunnen deze 2 regels wegblijven. Je kunt er ook 1 of 3 px van maken uiteraard.

divi-tabbladen-instellingen-geavanceerd

Stap 3: Pretty!

Sla je wijzigingen op en bekijk het resultaat!

Ga je dan nu de Tabbladen module wél gebruiken? 😉

0 reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd.

Customize lekker verder!

Marloes blij blog

Hoi, ik ben Marloes!

Een enthousiaste webdesigner, gespecialiseerd in het DIVI thema voor WordPress. Mijn tutorials zijn geschreven voor iedereen die de basics van DIVI al kent.

Ken jij die nog niet, maar wil je graag met DIVI aan de slag? Bekijk dan mijn uitgebreide beginners training!