Tips en tricks over het WordPress thema Divi

Leer de fijne kneepjes van het thema Divi

Ik heb zelf al meer dan meer dan honderd websites gebouwd en ben uiteindelijk het meest fan van WordPress geworden. In wildernis van thema’s en plugins raak je soms het spoor een beetje bijster.

Voorheen werkte ik veel met het thema Enfold, een prachtig thema maar ik hoorde om mij heen door profs steeds vaker Divi van Elegant Themes vallen. Ik ben er zelf eens mee aan de slag gegaan en werd gelijk enthousiast.

In train regelmatig ondernemers om zelf sites te bouwen en behandel dan ook vaak Divi. Maar het is ook heel leuk om (als je de tijd hebt) er zelf in te duiken. Er zitten wel een hoop weetjes in Divi. Er zitten ook een aantal fouten in Divi waar je soms veel tijd door kunt verliezen.  Op deze pagina geef ik je gratis tips om meer uit het thema te halen. Ik ga je handvatten geven om zelf een mooie site te kunnen bouwen en ik laat ook de problemen zien die er zijn in Divi en hoe je deze zelf kunt oplossen.

Een grote voordeel van het thema Divi ten opzichten van Enfold is dat je bij Divi een licentie kunt kopen waarbij je eenmalig een bedrag betaald en je het thema voor al je klanten en sites mag gebruiken. Dat betekent dat je na vijf keer het geld er al uit hebt. Tel uit je winst!

En een groot voordeel is dat je bij Divi met de plug in Visual Builder aan de voorkant van de site kunt gaan bouwen. Je weet het dus altijd hoe de website er uit zou zien als je de Instellingen opslaat. Klanten zouden het heel fijn vinden om met dit is Tim te werken het maakt het een stuk makkelijker om websites te onderhouden. Enfold kan hier niet tegen op.

Je kunt zelfs gratis de Divi Builder proberen zonder dat je deze hoeft te installeren.

Twee knoppen naast elkaar

In Divi is het niet mogelijk om in een blok twee knoppen naast elkaar te plaatsen. Een knop wordt dan altijd boven elkaar weergeven. Wil je toch twee knoppen naast elkaar plaatsen dan kan dat alleen met een stukje css.

Stap 1: voeg twee knoppen toe in een grijs blok

Stap 2: Ga naar rij-instellingen (groene blok) / geavanceerd en voerbij CSS Klasse de tekst knop-naast-elkaar in en sla je instellingen op en sla ook de pagina op.

Stap 3:  Ga naar het backend:  Divi / Thema Opties / General / Eigen CSS

Stap 4: voer de volgende CSS in.

 

.knop-naast-elkaar .et_pb_button_module_wrapper {
display: inline-block;
margin: 0 10px;
}

.knop-naast-elkaar {
text-align: center !important;
}

 

En zie hier het resultaat (op desktop):

 

 

Hoe kan ik tekst onder in de socket / footer van de site mooi centeren?!

In Divi is het niet mogelijk om tekst onder in de footer / socket te centreren. Een voorbeeld van een Divi Webshop waar ik de tekst wilde centreren is antegenesis.nl

Je kunt proberen de volgende stappen uit tevoeren om het voorelkaar te krijgen.

Stap 1: Ga naar systeem aanpasser van het thema

Stap 2: Ga naar voet tekst en klik onderkant balk

Stap 3: Ga naar voettekstcredits bewerken

Stap 4: Voer hier de tekst in die je wilt weergeven. Denk aan privacy policy, Copyright info en vergeet niet je eigen bedrijfsnaam te noemen als de klant dat goed vind.

Stap 5: Ga naar het backend / Divi / Thema opties / scroll naar aangepaste  CSS en voer de volgende code in:

 

 

#footer-info {

text-align: center!important;

float: none;

}

Breedte van de verzendknop aanpassen

DIVI heeft een schitterend contact formulier dat heel goed af te stijlen is je kunt alleen de verzendknop niet zo goed stijlen. Om dit toch goed te krijgen heb je weer CSS nodig.

Stap 1: Ontwerp een formulier

Stap 2: Maak een verzendknop waarbij de tekst van de kop op een regel past.

Stap 3:  Ga naar het backend:  Divi / Thema Opties / General / Eigen CSS

Stap 4: Voer de volgende CSS in.

 

.et_pb_contact_form_0 .et_pb_contact_form_container .et_pb_module .et_pb_button 

   width: 300px;

}

Het kan zijn dat jouw formulier breder is, in dat geval moet je het aantal pixels van 300 verhogen totdat het even breed is als de kolom van het formulier. 

 

 

 

 

Een link maken naar een plaats in de pagina (anker)

Soms kan het slim zijn om vanuit het menu een link te maken naar een locatie op diezelfde pagina. Nu is dat in Divi een fluitje van een cent geworden. Volg de stappen hieronder beschreven en je kunt het zelf.

Stap 1: kies de locatie op de pagina waar de link naar moet verwijzen. Dit kan een sectie (blauw) een rij (groen) of een module (grijs) zijn.

Stap 2: ga naar geavanceerd / CSS-id en -klasse en vul bij ID een naam in die past bij het blok waarnaar je wilt verwijzen. Bijvoorbeeld “contact” als je een link wilt maken naar het contact blok.

Stap 3: Ga nu naar de plaats waar de link staat en voer een hekje (#) in en daarna direct de naam van de locatie die je in stap 2 hebt ingevoerd. In het voorbeeld van het contactblok voer je in #contact.

Versie terugzetten van een pagina

Een van de bugs / fouten in Divi is dat er geen melding wordt gegeven wanneer je iemand anders dezelfde pagina wilt aanpassen als degene waar jij in aan het werk bent. (Dit heb ik getest met de Visual Builder  versie 2.25.1 )

Dit geld alleen voor als je aan de voorkant van de site de pagina wilt aanpassen met de Visual Builder. Dus als via pagina bewerken de pagina aanpast wordt er wel een melding gegeven. Dit is de standaard melding van WordPress die ook bij veel andere thema’s werkt.

Mocht dit nu gebeuren dan kun je via onderstaande stappen een versie van de pagina terugvinden en terugzetten.

Stap 1: Open een pagina in de visual builder, doe een paar wijzingen. Zoals een stukje tekst toevoegen.

Stap 2: klik het paarse icoon met de puntjes en check dat het volgende menu wordt weergegeven:

Stap 3: Klik op het klokje en check dat er verschillende versie van de pagina worden weergegeven. Let op dat de laatste pagina wijziging onderaan staat.

Stap 4: met een klik kun je de gewenste versie terug zetten. 

Heb je de tijd of energie niet om het zelf te doen?

Kom dan eens een bakkie doen!

5 + 4 =