Divi

1. WordPress theme installeren: Divi

In dit hoofdstuk gaan we Divi installeren, een van ’s werelds meest populaire WordPress themes en websitebouwer.

1.1 Download het Divi theme

Niet meer nodig, allemaal reeds geregeld!

1.2 Installeer het Divi theme in je WordPress dashboard

Allemaal reeds geregeld! Divi is geïnstalleerd en geactiveerd.

Voordat we ons in de Divi builder gaan storten, gaan we eerst onze benodigde pagina’s toevoegen en daarna aan de slag met de WordPress theme customizer. Deze tool laat ons het lettertype instellen van de site instellen, een menu bouwen en je site naam en site tag aanpassen.

2. Voeg webpagina’s toe in WordPress

Laten we allereerst de pagina’s verwijderen die WordPress automatisch toevoegt aan je website.

Om dit te doen klik je op Pages (1) binnen het linker menu in de WordPress dashboard. Daarna klik je op de box naast Title (2) om alle pagina’s te selecteren. Vervolgens druk je op Bulk Actions (3) en dan op Move to Trash. Klik vervolgens Apply (4) om de pagina’s te verwijderen.

Klik nu op Add New om een nieuwe pagina toe te voegen.

Noem deze pagina Home bij de titel sectie (1) en klik daarna op Publish (2).

Keer nu terug naar de WordPress dashboard via de knop linksboven.

Herhaal dit proces vervolgens en voeg de volgende pagina’s toe:

Diensten
Over ons
Contact

Nu hebben we alle pagina’s aangemaakt die we voor deze tutorial gaan gebruiken.

3. Stel een homepage in voor je Divi website

De “Home” pagina die we zojuist maakten verandert niet automatisch in je homepage. Dit moeten we handmatig instellen.

Een homepage instellen gaat via de Theme Customizer. In het WordPress Dashboard, klik in het linker menu op Divi (1), en klik vervolgens op Theme Customizer (2).

Selecteer dan Homepage Settings (1), klik op Homepage (2), en kies vervolgens Home (3) uit het rijtje beschikbare pagina’s. Klik dan op Publish (4) om je instellingen op te slaan.

Je homepage is nu op de juiste manier ingesteld.

4. Kies een website titel en tagline

Je website titel en tagline verschijnen onder anderen in je browser tab bij je homepagina.

Om de website titel en tagline aan te passen, ga je terug (1) in het Theme Customizer menu, klik je op General Settings (2) en dan op Site Identity (3). Vul hier je gewenste titel en tagline (4) in en klik dan op Publish (5).

5. Stel een lettertype in voor je Divi site

Op het moment dat je je website aan het ontwikkelen bent wil je dit zo efficiënt mogelijk doen. Iets wat daarbij helpt is vooraf je gewenste lettertype instellen, zodat wanneer je een stuk tekst toevoegt aan je website je dit niet telkens opnieuw hoeft te doen.

Natuurlijk kun je nadien altijd nog individuele teksten van je website aanpassen naar elk gewenst lettertype.

In de WordPress theme customizer klik op General Settings en dan op Typography.

Nu je het lettertype instellen voor zowel je normale tekst (1) als je titels (2). Je kunt mijn instellingen volgen die je hieronder ziet, maar je kunt hier natuurlijk ook doen wat je eigen voorkeur heeft.

Let op: de grootte van je website’s lettertype komt niet overeen met dat van, zeg, Word. Een grootte van 12 is bijvoorbeeld veel te klein om prettig te kunnen lezen via een browser. Ik raad je aan minimaal 15 te kiezen. Ook zie je dat de meeste websites geen pikzwart lettertype hebben, maar vaker grijpen naar donkergrijs omdat dit prettiger oogt.

Wanneer je klaar bent, klik je op de Publish (3) knop.

Nu je het lettertype voor je website hebt ingesteld, is het tijd om een navigatie-menu te gaan ontwerpen.

6. Een navigatiemenu ontwerpen

Praktisch iedere pagina van iedere website beschikt over een navigatiemenu. Je kunt zo’n menu eenvoudig voor je WordPress website instellen, wederom via de Theme Customizer.

Om te beginnen gaan de we zoekknop uitschakelen die zich rechtsboven in je navigatiemenu bevindt. Eerst klik je op Header & Navigation (1), dan op Header Elements (2), en dan klik je het vinkje weg wat staat naast Show Search Icon (3). Je ziet dat het vergrootglas rechtsboven nu verdwenen is.

Vervolgens klik je op Menus (1), Create New Menu (2), en Primary Menu (3). Druk dan op Next (4) en daarna op de Add Items (5) knop.

Aangezien het logo in je navigatiemenu al linkt naar je homepage, is het niet nodig nog een keer naar je homepagina te navigeren.

Daarom klikken we alleen Diensten, Over ons en Contact aan voor ons navigatiemenu. Wanneer je deze pagina’s aanklikt, zie je ze automatisch onder het menukopje verschijnen. Je kunt deze items oppakken en in elke volgorde slepen die je maar wenst.

Wanneer je klaar bent klik je op Publish.

Nu we de basics van WordPress onder de knie hebben wordt het pas echt interessant. Het is tijd om in Divi te duiken en je site tot leven te laten komen!

7. Maak een homepage met Divi

Om je homepage te maken moet je eerst terugkeren naar de WordPress Dashboard. Hier klik je in het linkermenu op Pages (1) en vervolgens op Home (2).

Dan klik je op Edit with the Divi Builder.

We gaan de homepage zelf ontwerpen, daarom kies je nu voor de optie Build from Scratch door op Start Building te klikken.

7.1 Header ontwerpen

Je wordt nu gevraagd een kolom structuur te kiezen. Omdat we onze header image gaan maken, die bestaat uit tekst aan de linkerzijde en een plaatje aan de rechterzijde, kiezen we kiezen we de tweede optie.

Vul nu de tekst in die je onder je titel wilt weergeven (als je hier nog even over na wilt denken, volg dan gewoon onze tekst en verander het later) en druk op het groene vinkje.

Nu gaan we een knop toevoegen onder deze tekst die door linkt naar onze diensten pagina. Hiervoor kies je weer Add Module, en selecteer je de Button module.

Klik op Text (1) en verander de tekst van de knop naar Klik hier. Ga nu naar Link (2) en voeg hier de tekst [je domeinnaam]/diensten/ toe, om de knop naar de Diensten pagina te laten wijzen.

Omdat de kleur van de knop nogal wegvalt in de achtergrond gaan we de kleur aanpassen. Klik op Design (1), kies Yes (2) bij Use Custom Style for Button, en selecteer Wit (3) onder Button Text Color.

Selecteer nu Spacing (1) en kies 50px bij Top (2) Margin.

Nu gaan we onze header zelf wat meer vormgeven. Allereerst, klik op Row Settings.

Klik op Background (1) en vul daar de volgende kleur code in: #3c87f4 (2). Als je wilt kun je hier ook met de Gradient (3) functie experimenteren om je achtergrond net wat spannender te maken.

Selecteer nu Design (1), klik op Sizing (2) en volg de onderstaande instellingen: Custom Gutter Witdh (3) – yes, Gutter Witdh (4) – 1, Width (5) – 100%, Max Width (6) – 100%.

Onder Sizing, klik nu op Spacing (1) en stel de top en bottom padding (2) in op 0px.

Klik nu op Content, en selecteer vervolgens het tandwiel naast de eerste column.

Klik op Design (1), dan op Spacing (2) en stel bij Padding (3) de top en bottom in op 10% en left en right op 8%.

Ga nu terug, en klik op het tandwiel naast de tweede column. Ga naar Background en druk op het derde icoontje. Upload vervolgens hier een achtergrond foto. Pexels is een uitstekende site voor gratis foto’s.

Druk op Yes bij Parallax Effect.

Nu moeten we nog de tekst kleur aanpassen naar wit van onze titel en onderstaande tekst, zodat de tekst goed afsteekt tegen de achtergrond. Om dit te doen, kies je voor beide tekst modules de Module Settings. Je kunt de kleur van de tekst nu direct aanpassen in de tekst editor, of via Design.

Om onze header sectie af te ronden, gaan we nu naar Section Settings.

Klik op Design (1), ga naar Spacing (2) en volg de onderstaande instellingen (3).

Het lastigste deel van de tutorial zit erop! Via het ontwerpen van deze header ben je met aardig wat elementen van de Divi builder in aanraking gekomen. De rest van de tutorial zal hierdoor een stuk eenvoudiger zijn.

7.2 Blurbs toevoegen

Nu de header af is gaan we een stel blurbs toevoegen. Onder aan de header, klik op Add New Section en kies Regular.

Klik op de de Row met drie kolommen.

Bij Insert Module, selecteer nu de Blurb.

Voer nu je gewenste tekst in bij Title (1) en Body (2).

Klik nu op Image & Icon, druk op Yes en kies vervolgens een icoontje.

Ga nu naar Design (1) en bij Title Text en Body Text, centreer de alignment (2).

Druk op het groene vinkje om je module op te slaan.

Hoover met je muis over de blurb, klik onderaan op Add New Module en voeg een Button toe. Link deze button naar [je domeinnaam]/diensten/.

Klik nu op Design (1) en onder Button Alignment (2) druk op de middelste optie.

Herhaal deze stappen nu voor de tweede en derde kolom voor je sectie. Je kunt dit proces versnellen door de Duplicate Module (1) optie te gebruiken en daarna de module met de Move Module (2) knop te verslepen naar de aangrenzende kolommen.

Onze blurb sectie is nu afgerond. Dit is hoe het eruit zou moeten zien:

7.3 Testimonial toevoegen

Het is altijd krachtig om de bezoekers van je site aanbevelingen te laten lezen van je voorgaande klanten. Divi heeft hiervoor een handige module, de Testimonial.

Allereerst voegen we een nieuwe sectie toe, ditmaal met één kolom. Voeg nu de Testimonal module toe.

Vul hier de Text (1) sectie in en voeg vervolgens een foto toe bij Image (2).

Om deze sectie makkelijk te onderscheiden van de blurb, kun je de achtergrond kleur lichtgrijs maken via Section Settings en Background. Voer de kleurcode #f7f7f7 in.

Je Homepage staat er nu! Zorg dat je rechts onderaan de pagina op Save en Publish (dit zorgt dat de pagina live gaat, en dus gezien kan worden door bezoekers) drukt.

Nu is het tijd om de Diensten pagina in elkaar te gaan zetten.

8. Maak een diensten pagina met Divi

Keer terug naar het WordPress Dashboard. Hier klik je in het linker menu op Pages en vervolgens op Diensten.

Dan klik je op Edit with the Divi Builder.

Net als bij de homepage kies je weer voor de optie Build from Scratch.

Kies de enkele kolom structuur en selecteer de Text module.

Schrijf “Diensten” in het tekstveld en centreer vervolgens de module via Design, Heading Text, en Heading Text Aligment, net als in het vorige hoofdstuk.

Kies 48px bij Heading Text Size.

Druk nu op het groene vinkje om de module op te slaan.

Voeg nu weer een sectie toe, kies een enkele kolom, en selecteer de Text module. Vul hier de tekst in voor een van je diensten, zoals hieronder:

Klik nu op New Section, maar kies ditmaal Fullwidth.

Kies nu de Fullwidth Image.

Klik op Add Image en voeg vervolgens een afbeelding naar keuze toe.

Herhaal dit proces vervolgens een paar keer, klik op Save rechtsonder, en nu hebben we een goede opzet voor een diensten pagina afgerond!

9. Maak een Over Ons pagina met Divi

Volg allereerst de eerste stappen van hoofdstuk 11 om een titel toe te voegen aan je pagina. Noem je pagina ditmaal “Over Ons.”

Kies nu Add Section, ditmaal met een dubbele kolom structuur.

Bij Insert Module kies je voor Text. Vul hier in wat je over je bedrijf wilt vertellen.

Bij de tweede kolom kies je voor Image. Kies een afbeelding waarvan jij denkt dat die je onderneming goed representeert.

Dit is hoe je pagina er tot nu toe uit zou moeten zien:

Voeg nu weer een sectie toe met één kolom en kies weer de Text module. Vul hier in “Ons Team” en verander de tekstsoort in Heading 2.

Om deze sectie makkelijk te onderscheiden van de voorgaande, kun je wederom de achtergrond kleur lichtgrijs maken via Section Settings en Background. Voer de kleurcode #f7f7f7 in.

Nu gaan we ons team toevoegen aan de pagina.

Voeg een nieuwe Row toe onder de “Ons Team” tekst, en kies de 3 kolommen optie.

Bij Insert Module, kies Person.

Vul nu alle gewenste velden (1) in, zoals naam, positie en social media URLs. Je kunt ook nog een biografie toevoegen. Via Image (2) voeg je een foto toe.

Ga naar Design (3), Text (4), en stel de alignment op het midden (5) in.

Klik op het groene vinkje wanneer je klaar bent, en herhaal dit proces voor de overige twee kolommen.

Nu heb je een over ons pagina!

Als laatste pagina rest ons dan nog de contact pagina.

10. Maak een Contact pagina met Divi

Volg allereerst de eerste stappen van hoofdstuk 11 om een titel toe te voegen aan je pagina. Noem je pagina ditmaal “Contact.”

Verander de achtergrond van de sectie nu naar blauw (kleurcode) #2b87da, en voeg onder en boven je tekst 50px spacing toe.

Voeg een Section toe en kies de Regular variant. Selecteer nu één kolom, en kies vervolgens de Contact module.

Pas nu de Title, de Success Message en de Submit (1) button aan. Vul je email adres in waar je de berichten van je bezoekers wilt ontvangen bij Email (2).

Verder kun je nog de titels van je velden aanpassen door op de tandwieltjes (3) te klikken.

Druk nu op het groene knopje en… het zit erop! De hoofdpagina’s van je website staan. We hebben aardig wat Divi functionaliteit besproken en vertrouwen erop dat je zonder problemen verder kunt bouwen aan je website.

Ons volgende hoofdstuk gaat nog een paar belangrijke WordPress kwesties behandelen, zoals plugins, Google Search Console, hoe je gratis een logo voor je site kunt ontwerpen, en wat goede vervolg tutorials zijn om je WordPress website naar het volgende level te tillen.

11. De volgende stappen

11.1 WordPress plugins

Er zijn voor het gros van de WordPress websites uiteindelijk maar een paar plugins die je echt nodig hebt.

Op het moment dat je een plugin installeert, zorg dat je altijd kijkt hoe vaak de developer hem update. Een plugin die bijvoorbeeld een jaar terug voor het laatst is ge-update kan veiligheidsrisico’s bevatten en niet compatible zijn met je WordPress theme of andere plugins.

Je kunt je WordPress plugins managen in de Plugin sectie binnen je WordPress Dashboard.

De volgende plugins zijn een paar van de oneindig vele plugins:

Yoast SEO. Sinds 2008 heeft Yoast SEO al miljoenen websites wereldwijd geholpen om hoger te scoren in zoekmachines. Deze WordPress SEO-plug-in helpt je bij het optimaliseren van je SEO en zorgt dat je website beter gaat ranken. Voor elke post en pagina geeft Yoast aan hoe je je SEO kunt verbeteren.
Monarch. Social media plugin van Divi die je eenvoudig social share buttons en dergelijken aan je posts en pagina’s laat toevoegen.
Complianz. Zorgt dat je binnen no-time GDPR-compliant bent via een eenvoudig te volgen wizard. Deze plugin maakt ook automatisch een cookie-policy en een privacy-policy voor je aan. Bespaar je zelf veel kopzorgen en zorg dat je vanaf dag 1 GDPR-compliant bent.
Loginizer. Elke dag worden talloze WordPress websites gehacked. Loginizer is een WordPress-plug-in die je beschermd tegen bruteforce-aanvallen door het inloggen voor het IP-adres te blokkeren nadat het maximale toegestane aantal nieuwe pogingen is bereikt.

11.2 Google Search Console

Google Search Console is een webservice van Google waarmee je de indexeringsstatus kunt controleren en de zichtbaarheid van je website kunt optimaliseren. Deze tool is onmisbaar als het je doel is om veel gebruikers naar je website te brengen.

11.3 De beste Divi tutorials

Divi is een ontzettend krachtige tool waarmee je nagenoeg elke website je maar wenst in elkaar kunt zetten. De volgende tutorials zijn een goed startpunt: