In dit artikel willen we je leren werken met het Divi thema van Elegant Themes. Is Divi voor beginners? Er is een bepaalde leercurve maar moeilijk en technisch ingewikkeld is het zeker niet. Het is niet voor niets het meest populaire premium thema dat je op een WordPress website kan installeren.
We overlopen de installatie, weetjes, mogelijkheden, werkwijze en zetten de belangrijkste tips op een rijtje. Zo kan je al met de basis aan de slag. Daar kan je al heel wat knappe pagina’s mee opbouwen!
Wat is het Divi thema van Elegant Themes?
Divi is een premium WordPress thema. Er zijn heel wat gratis thema’s maar Divi is betalend. Een serieuze website zal al snel tegen de beperkingen van een gratis thema botsen. Uiteindelijk is het de investering meer dan waard.
Niet alleen is Divi een thema, het is een page en theme builder. Je kan er zo goed als alles mee maken, zonder dat je daarvoor code moet kennen. Met ‘drag and drop’ modules kan je alles snel naar je hand omzetten.
Lees alle voor- en nadelen in ons vorig artikel: Divi theme Review
Divi installeren
1. Hosting + domeinnaam
Eerst en vooral heb je een eigen website nodig. Een website bestaat uit hosting + domeinnaam. Zo krijgt je website een plaats op het internet en kan je het met een internetbrowser bezoeken.
Divi wordt steeds geïnstalleerd op een WordPress website. We stellen je dan ook voor om voor Managed WordPress hosting te kiezen. Dit is hosting die geoptimaliseerd is voor WordPress websites.
Onze aanbeveling: hosting van SiteGround
Hosting opzetten via SiteGround is helemaal niet moeilijk. Meld je aan, kies een domeinnaam voor je website en doorloop logischerwijs de stappen. Voor extra hulp bij de opbouw van uw website kan u steeds contact met ons opnemen.
2. Divi downloaden en installeren
Nadat WordPress geïnstalleerd is op uw hosting zal u een standaard thema toegewezen krijgen. Deze gaan we natuurlijk veranderen. Eerst en vooral moeten we naar we de Divi website surfen om deze aan te kopen en te kunnen installeren.
Link: Download Divi
Nadat uw account aangemaakt is, moeten we Divi downloaden. Dit doen we niet via onze WordPress website maar via de site van Elegant themes zelf. Meld je aan. Klik op account en vervolgens op my downloads. Tot slot klik je op de knop Download the Divi theme. U krijgt nu een zip-bestand op uw computer.
Bij Weergave -> Thema’s kiest u Thema uploaden. Selecteer het zip-bestand dat u eerder heeft gedownload. Na de installatie moet het Divi logo verschijnen. Klik op het logo en kies activeren. Divi is nu uw WordPress thema! Oudere thema’s kunnen nu gerust verwijderd worden.
Leren werken met Divi voor beginners
1. Divi theme options instellen
In je Dashboard is aan de linkerkant de optie Divi bijgekomen. Via deze knop kan u de back-end instellingen van uw thema regelen. We bekijken eerst de Theme options. Je krijgt nu een waaier aan opties te zien. De belangrijkste zie je meteen onder ‘General’ staan.
Laat je niet meteen overdonderen door de andere tabs en opties. Meeste van deze opties staan standaard al goed ingesteld of ga je waarschijnlijk niet veel meer naar kijken. We raden je aan om de mogelijkheden eens rustig door te nemen.
Wij raden je aan om volgende opties bij General te wijzigen:
- Kies een eigen logo
- Selecteer een eigen ‘Color Pickers Default Palette’
- Schakel de Social media uit die niet van toepassing zijn (Show Google+ Icon bijvoorbeeld)
- ‘Back To Top Button’ kan handig zijn
- Duid de opties aan die je zelf nog wil integreren
- Negeer de opties die onnodig zijn
- Klik onderaan op Save Changes
Al deze opties kunnen achteraf nog gewijzigd worden.
2. Divi API key
Deze stap is heel belangrijk om op lange termijn updates te ontvangen en Divi vlot te laten werken! We koppelen hier ons abonnement van Elegant Themes aan onze WordPress website, waar we Divi op installeerde.
Log je in op de website van Elegant Themes (waar je Divi kocht). Klik op Account, Username & API key. Links krijg je nu de tab API KEYS te zien, klik hier op. Kopieer je gebruikersnaam en API key. Je kan zelf zoveel mogelijk api keys aanmaken als je zelf maar wil. Dat is handig als je meerdere websites wil maken (zonder meerkost). Een Api key herken je vaak aan een lange reeks van verschillende tekens.
Deze gebruikersnaam en api key moeten we kopiëren en vervolgens plakken in onze eigen installatie van Divi. Ga naar je WordPress website en klik op de tab van Divi. Standaard komen we uit bij ‘General’ maar nu klikken we verder op updates. Plak bij Username je gebruikersnaam en bij API Key jouw Api key. Klik vervolgens op Save Changes.
3. Divi visual builder
Divi is een visual builder. Je ziet dus live de wijzigingen die je aan website doorvoert. Bezoek één van de pagina’s van je WordPress website. Bovenaan is er nu een knop bijgekomen: Enable Visual Builder. Je komt nu in een weergave waarin je de pagina met de Divi builder kan bewerken.
Om de omgeving te verlaten klikt u bovenaan op de knop Exit Visual Builder. Klik op ‘Discard & exit’ om alles ongedaan te maken. Klik op ‘Save & Exit’ om wijzigingen door te voeren.
Divi pagina’s worden opgebouwd in 3 vakken:
- Secties (blauw omlijnd)
- Rijen (groen omlijnd)
- Modules (zwart omlijnd)
Een sectie is een groter geheel dat verschillende rijen omvat. In elke rij worden dan weer enkele modules opgenomen. Deze modules kunnen verschillende vormen aannemen: teksten, afbeeldingen, sliders, …
Elke sectie, rij en module kent de tabbladen Content, Design en Advanced. U komt op dit venster door op het tandwieltje te klikken bij een van deze onderdelen. U kan steeds wijzigingen verwerpen door op het kruisje te klikken of bevestigen door op het vinkje te klikken.
- Content: Dit bepaalt de inhoud van uw module. De tekst, afbeelding, achtergrond, link, …
- Design: Verander hier met allerlei opties het uitzicht van het gekozen onderdeel.
- Advanced: Niet voor beginners. Hier worden extra code, CSS of andere instellingen bepaald.
AANRADER: De uitgebreide versie van dit onderdeel leest u in ons vorig artikel: Divi Theme Builder | Handig Pagina’s en Berichten bewerken
4. Divi theme builder
Sinds Divi 4.0 is Divi nu ook een theme builder! Dat is geweldig nieuws voor wie de volledige controle wenst te hebben over de totale website. In de theme builder kan u de header, body en footer volledig omvormen naar de eigen wensen.
Klik op het onderdeel dat u wil wijzigen. Dit brengt u in een aparte weergave. Alle opgeslagen veranderingen in de theme builder worden nu doorgevoerd over de hele website of voor de gekozen pagina’s.
- Header: Maak een eigen menu of ‘pimp’ de bovenkant van je website.
- Content: De inhoud van je website. Je kan hiermee een bijvoorbeeld eenvoudig een 404-pagina mee maken. In combinatie met dynamische content kan je ook het uiterlijk en styling van je blogartikels kiezen.
- Footer: Dit is de onderste laag of credits van je website. Vaak worden hier enkele links en info in opgenomen.
5. Divi plugins
Op de website van Elegant Themes heb je bij downloads Divi kunnen downloaden. Op diezelfde pagina vind je ook Bloom en Monarch terug. Je installeert deze op dezelfde manier als het thema maar dan wel bij je plugins.
Dankzij Monarch kan je handig social media integreren in je website. Onder de eerste afbeelding van deze pagina zie je ook social media knoppen staan. Dat is al een voorbeeld van de Monarch plugin. Zo kunnen bezoekers heel gemakkelijk content van de website delen. Test het maar eens uit…
Niet alleen kun je pagina’s laten delen maar je ook je eigen social media integreren. Via allerlei opties kan je het uiterlijk en de positie van deze knoppen instellen.
Met Bloom kan je een e-mailcampagne instellen. Koppel deze aan een e-maillijst (bijvoorbeeld Mailchimp of ConvertKit). Net zoals bij Monarch kan je alles met enkele klikken instellen en professioneel laten overkomen.
6. Divi voor mobiele toestellen optimaliseren
Bij het bewerken van Divi pagina’s zie je onderaan extra opties staan. Als je deze niet ziet staan kan je op de 3 puntjes ( … ) klikken. Nemen ze teveel plaats in? Klik dan opnieuw op het kruisje.
Een handige optie is om de weergave van je pagina voor desktop, tablet en smartphone te bekijken. Optimaliseer voor alle weergaven. Tegenwoordig bezoekt de helft (of meer) van je bezoekers je website via een mobiel toestel.
Let wel op: Wijzigingen die je doorvoert in deze weergave hebben enkel invloed op de desktop weergave.
Om het uiterlijk van mobiele weergaven wel correct te kunnen wijzigen moeten we bij een sectie, rij of module op het tabblad design klikken. Klik vervolgens op het onderdeel dat u wil wijzigen. In onderstaand voorbeeld willen we de lettergrootte veranderen.
Ga met je muispijl over de gewenste optie en er komt een smartphone icoon tevoorschijn. Klik hierop en je kan nu instellingen doorvoeren voor desktop, tablet en smartphone. Sla deze wijzigingen op. Alles zou nu geoptimaliseerd moeten zijn voor de verschillende toestellen.
Meestal is deze stap niet nodig maar soms kan het wel zijn dat er iets niet klopt op een mobiele weergave. Dan weet je nu hoe je dat kan oplossen.
7. Maak gebruik van de Divi templates
Bij het openen van de visual builder (Divi builder) op een nieuwe pagina, krijg je steeds 3 opties waaruit je kan kiezen:
- Build from scratch: Maak zelf je pagina vanaf 0
- Choose a premade layout: Start vanuit een al bestaand sjabloon
- Clone existing page: Kopieer een andere pagina van je website (wijzigingen hebben geen invloed op elkaar)
Een te overwegen optie is de premade layout. Je krijgt nu een waaier aan bestaande thema’s, templates en demo’s te zien. Je kan deze voorbeelden in je website laden. Deze zijn door professionele designers gemaakt. Het mooie is dat je deze volledig mag gebruiken en aanpassen voor je eigen site. Met je abonnement op Divi heb je de rechten gekregen om deze te gebruiken.
Je kan ook buiten de omgeving van je website een kijkje nemen naar deze layouts, via deze link: Divi layout packs
Blijf op de hoogte en leer meer over Divi
Met deze tips en links kom je als beginner al een heel eindje verder! De volledige omvang van de Divi builder valt niet simpelweg in 1 artikel samen te bundelen. Daarom reiken we je graag nog volgende officiële hulpmiddelen aan.
Via deze kanalen blijf je op de hoogte van de laatste ontwikkelingen van het Divi thema. Het belangrijkste blijft toch om er ervaring mee op te doen. Sla deze pagina op in je favorieten en herlees regelmatig de tips nog eens door.
Aarzel niet om contact met ons op te nemen. Divi valt binnen onze expertise en we helpen je graag verder. Eventuele diensten kunnen ook uitbesteed worden.
Aan de slag: Divi link
