Layout, typografie en opmaak instellen
Als u in WordPress werkt met het thema Divi, dan kunt u op verschillende manieren de layout, typografie en opmaak van uw website of webshop instellen:
- U kunt dit doen met behulp van een html code welke u inline plaatst bij de tekst.
- U kunt dit via het tabblad geavanceerd, welke u kunt terugvinden bij secties, rijen en modules.
- U kunt dit doen via de pagina of bericht instellingen.
- U kunt dit doen via de preset functie van secties, rijen en modules.
- U kunt dit doen via de optie systeemaanpasser van thema (team customizer)
- U kunt dit doen bij Divi thema opties in het veld “Aangepaste CSS”.
- U kunt dit doen via met een Child theme in het style.css bestand.
Beginnersfout bij het werken met Divi
Uit eigen ervaring kan ik u vertellen dat het niet handig is om via optie 1 t/m 3 de opmaak van uw tekst, titels of knoppen te doen. Waarom dan niet? Zodra de omvang van uw website groeit en u veel pagina’s en berichten heeft gepubliceerd, kost het heel veel tijd om een wijzinging in de opmaak van één onderdeel door te voeren binnen uw gehele website. Kies er daarom voor om op slechts twee locaties de layout, opmaak en typografie in te stellen. Waar dan? U kunt hier kiezen uit twee combinaties:
- combi optie 4 + 6 (preset functie + Aangepast CSS veld in Divi thema opties)
- combi optie 4 + 7 (preset functie + Child theme)
Waar moet u de instellingen dus vooral niet aanpassen!
Doe geen inline aanpassingen (optie 1)
Pas de instellingen dus niet inline aan. Als u bijvoorbeeld in de tekst module zit, kunt u hier de opmaak van tekst aanpassen. Dit noemen we inline aanpassen.
Zodra u vervolgens op het tabblad “Tekst” klikt, krijgt u de eventuele inline html codes te zijn.
Doe geen aanpassing via het tabblad geavanceerd in sectie, rijen of modules (optie 2)
Hieronder zit u bij de tekst module het tabblad geavanceerd.
U kunt vervolgens bij de optie “Aangepaste CSS” aanpassingen invoeren. Deze aanpassingen werken dan alleen voor deze ingevoerde individuele module, op deze pagina of bericht.
Doe geen aanpassingen via de instellingen van een pagina of bericht (optie 3)
Wanneer u bijvoorbeeld een bericht aan het maken bent via de Divi visual builder, dan ziet u onderaan in het midden de volgend symbolen:
Als u hier op het tandwielte klikt, krijgt u ook een tabblad geavanceerd. Als u hier op klikt, kunt u ook weer “Aangepaste CSS” invoeren.
Werk met Divi Presets (optie 4)
In de onderstaande video wordt de Divi functie presets uitgelegd.
In de onderstaande video wordt de Divi functie presets wat langzamer uitgelegd.
Het is dus handig om een aantal presets te maken voor de verschillende onderdelen. Hierbij kunt u denken aan het volgende:
- presets voor een aantal knoppen
- presets voor een aantal tekst modules
- presets voor een aantal afbeelding modules
- presets voor een aantal blurbs
- presets voor een aantal video modules
Afhankelijk van de verschillende opties die u gebruikt binnen Divi, is het dus verstandig om van elke optie een aantal presets te maken.
Werk met Aangepaste CSS binnen Divi thema opties (optie 6)
Als u in het WordPress admin menu onder Divi naar thema opties gaat, kunt u hier uw css aanpassingen invoeren. U ziet dit invoerveld helemaal onderaan.
Werk met een Divi Child theme (optie 7)
U kunt van mijn website gratis een Divi Child theme downloaden. Vervolgens kunt u in het style.css bestand uw eigen css opnemen. Zo heb ik bijvoorbeeld in mij Divi Child theme ingesteld hoe groot mijn lettertype moet zijn op desktop, tablet en mobiel. Hiervoor heb ik de volgende code opgenomen in het style.css bestand van mijn Divi Child theme:
/* CSS Heading 1, 2, 3 e body tekst voor mobiel */
@media only screen and (max-width: 640px) {h1 { font-size: 20px !important; }}
@media only screen and (max-width: 640px) {h2 { font-size: 18px !important; }}
@media only screen and (max-width: 640px) {h3 { font-size: 16px !important; }}
@media only screen and (max-width: 640px) {h4 { font-size: 15px !important; }}
@media only screen and (max-width: 640px) {p { font-size: 14px !important; }}
/* CSS Heading 1, 2, 3 e body tekst voor tablets*/
@media only screen and (min-width: 641px) and (max-width: 949px) {h1 { font-size: 30px !important; }}
@media only screen and (min-width: 641px) and (max-width: 949px) {h2 { font-size: 19px !important; }}
@media only screen and (min-width: 641px) and (max-width: 949px) {h3 { font-size: 17px !important; }}
@media only screen and (min-width: 641px) and (max-width: 949px) {h4 { font-size: 16px !important; }}
@media only screen and (min-width: 641px) and (max-width: 949px) {p { font-size: 15px !important; }}
/* CSS Heading 1, 2, 3 e body tekst voor desktop*/
@media only screen and (min-width: 950px) {h1 { font-size: 30px !important; }}
@media only screen and (min-width: 950px) {h2 { font-size: 20px !important; }}
@media only screen and (min-width: 950px) {h3 { font-size: 18px !important; }}
@media only screen and (min-width: 950px) {h3 { font-size: 17x !important; }}
@media only screen and (min-width: 950px) {p { font-size: 16px !important; }}
U kunt deze code natuurlijk uitbreiden met ander instellingen, zoals bijvoorbeeld de kleur.