WEBWERKPLAATS

Wordpress en Divi specialist

Wordpress Divi theme cursus 1 Nederlands

Als je gewend bent aan een conventioneel WordPress thema, dan zal Divi een verademing zijn. Nu bewerk je datgene wat de website bezoeker ook ziet. “Aan de voorzijde” noemt men dat in Divi.

Voordat we starten… We gaan eerst pagina’s aanmaken. (Nog) geen berichten. Het verschil is eigenlijk dit: In WordPress zijn berichten eigenlijk ook pagina’s maar die worden op volgorde van datum geplaatst op bijvoorbeeld het blog. Het laatst geschreven bericht komt boven aan het blog. Het rangschikken/groeperen gebeurt met Categorieën.

Een pagina is wel vergelijkbaar, maar met dat onderscheid dat een pagina “vaster” is. Ik bedoel hiermee dat pagina’s vaak de vaste structuur zijn van een website. Ook is een pagina vrijwel altijd in een menu zichtbaar.

Kies in het WordPress menu Pagina’s > Nieuwe Pagina

 

pagina-nieuwe-pagina

Vul dan eerst de titel in en ga vervolgens naar

knop-de-divi-opbouw-functie-gebruiken

Je krijgt nu 3 keuzes:

pagina-nieuwe-pagina
pagina-nieuwe-pagina
pagina-nieuwe-pagina

Laten we om netjes bij het begin te beginnen kiezen voor “Build from Scratch”. Helemaal zelf opbouwen.

Klik daarvoor op de button  

Een korte introductie tot de basics: Sectie, Rij en Module Als je het heel simpel wilt zien is de pagina opbouw in Divi een soort blokken doos maar in 3 lagen. Onderste: Sectie Middelste: Rij Bovenste: Module Als voorbeeld maken we een Sectie met daar in (op) 2 Rijen onder elkaar, ieder met 2 kolommen. In de bovenste Rij hebben we 2 kolommen. Links is een tekst module geplaatst, rechts een afbeeldings module Zie afbeelding hier onder

Toevoegen

Iedere Sectie, iedere rij en iedere module kan apart worden bewerkt. Maar daarover straks meer. Eerst even de uitleg van de + tekens. Niet moeilijk te raden dat dit toevoegen betekent.

Sectie toevoegen
Rij toevoegen
Module toevoegen
Kolom toevoegen

de 7 Icons in de linker bovenhoek

Links boven in de Secties, Rijen en modules zie je altijd een balk met 7 verschillende icons.
Middelste: Rij


Van links naar rechts kun je:

Het blok verplaatsen.
Bewerken.
Kopieren.
Kolom toevoegen
Layout opslaan in de Divi Bibliotheek
Uitwissen
Uitgebreid menu
Blok verplaatsen

Klik op het icon met 4 pijlen en houd de muisknop ingedrukt. Nu sleep je het betreffende blok naar de plaats waar hij moet komen. Experimenteer er maar eens mee. Met CTRL+Z kun je altijd een stap terug als het mislukt.

Bewerken

Als je hier op klikt opent een popup scherm waarin je vrijwel alles kunt wijzigen van dat blok. Te veel om op te noemen. Gewoon eens in rondkijken is het advies.

Kopiëren

Spreekt voor zich. Klik je bijvoorbeeld op dat kopiëren icon van een module, dan krijg je exact dezelfde module nogmaals. Heel handig want dat scheelt werk en de kans dat bijvoorbeeld de layout van een button anders is dan degene daarnaast.

Kolom toevoegen

Spreekt ook voor zich maar toch wat uitleg want dit is heel krachtig. Stel je hebt gekozen voor 2 kolommen (horizontaal) en je wilt er toch later 3. Dan klik je op dit icon en je krijgt de keuze uit heel veel verschillende kolom opmaken.
Nog mooier is als je terug wilt. Kies gewoon in plaats van 3 kolommen de 2 kolommen en dat is het. Er gaat niets verloren. De inhoud van de verdwenen derde kolom wordt gewoon in de 2e er bij geplaatst. Aan jou wat je er mee wilt. Dit is voor zover ik weet uniek.
divi kolom layout kiezen

Layout opslaan in Bibliotheek

Stel je hebt een Rij gemaakt met inhoud (een contact formulier bijvoorbeeld) die je op meerdere pagina’s wilt gebruiken. Je hoeft dit niet in iedere pagina apart te construeren. Sla simpelweg dit blok op. Let op! Stel je hebt het “Contactformulier” (uit de bibliotheek) in 3 pagina’s. Als je het in 1 pagina bewerkt dan worden automatisch ook de andere gewijzigd.
divi opmaak opslaan in bibliotheek

Geef het een naam, maak het “globaal”, opslaan en klaar. Het blok kleurt nu fel groen. (zie hier onder)
Dat betekent dat dit blok in de bibliotheek beschikbaar is. In iedere pagina als kant-en-klaar bouwblok beschikbaar.

divi opmaak uit bibliotheek

Uitwissen

Lijkt me ook duidelijk. In welk blok dan ook. Klik op dit vuilnisbakje en het desbetreffende blok verdwijnt. Ook hier: verkeerd gedaan ? CTRL+Z gaat 1 stap terug.

Uitgebreid Menu

Enkele keuzes hier zijn dubbel. Zeer bruikbaar zijn het kopiëren en plakken van stijlen. Zo kun je makkelijk een stijl van een bepaald module bijvoorbeeld toepassen op een andere plek in deze pagina maar ook in andere pagina’s. Zo houd je snel en gemakkelijk de stijl vast in alle pagina’s. Scheelt erg veel tijd in plaats van steeds weer “het wiel uitvinden”.
(zie ook het artikel Presets gebruiken. Ook daarmee kun je een standaard layout maken van een Sectie, Rij of Module)

Een hele aparte is “Splittest”. Een zeer krachtige tool om uit te proberen. Uitproberen of een rode of groene knop meer gebruikt wordt. Klikken mensen meer op “Korting 20%” of “Hosting Gratis”? Dat is pas echt optimaliseren. Mijn marketing hart gaat hier sneller door slaan. Dus heb ik een apart artikeltje over Splittesting met Divi gemaakt

Ik hoop dat zo de basics van Elegantthemes’ Divi duidelijk is. Download Divi en maak gewoon een pagina. Loop aan de hand van deze uitleg eens systematisch alle mogelijkheden door en maak een simpele pagina. Er kan niks mis gaan. Met CTRL+Z kom je altijd een stap terug en als het helemaal is gaat wis je gewoon de pagina uit en probeer je opnieuw.

Door naar Divi Cursus 2 van 5