Om een nieuwe pagina aan te maken, klik je op ‘Pagina’s’. Klik vervolgens op ‘Nieuwe pagina toevoegen’. 

Nu opent er een nieuw venster. Hier voer je eerst de gewenste titel voor de pagina in. Dit kun je later nog veranderen. Klik daarna op de knop ‘Divi Builder gebruiken’. Deze functie zorgt ervoor dat de pagina in blokken ingedeeld kan worden.

Vervolgens krijg je drie opties te zien: ‘Build from scratch’, ‘Layout kiezen’ en ‘Clone bestaande pagina’. Kies voor ‘Clone bestaande pagina’ en kies een bestaande pagina waarvan je de layout goed vindt. Je hoeft dan alleen nog elementen zoals tekst en afbeeldingen aan te passen; de layout staat al vast.

Als je een pagina aan het maken bent, kan het handig zijn om deze is te controleren voordat je de pagina live zet. Dit kun je doen door de pagina te publiceren als concept. De pagina is dan alleen zichtbaar als je bent ingelogd op de website.

Klik op de knop ‘Concept opslaan’.

Als je concept is opgeslagen, kun je de pagina als voorbeeld bekijken. Om dit te doen, klik je op het laptop icoontje. 

Ben je tevreden over de pagina of het bericht? Dan kun je het publiceren door op de knop ‘Publiceren’ te klikken. Nu kan iedereen de pagina of het bericht bekijken.

Wil je nieuwsberichten delen op je website? Dan kun je deze aanmaken onder het menu ‘Berichten’. Ga over het menu ‘Berichten’ heen of klik erop en klik vervolgens op ‘Nieuw bericht toevoegen’. Geef een titel op voor het bericht en klik op ‘Divi Builder gebruiken’.  Kies daarna voor ‘Clone bestaande pagina’.

Nu kun je de tekst en afbeeldingen van het bericht aanpassen. Als dat klaar is, is het belangrijk dat je aangeeft in welke categorie en tag het bericht hoort zodat deze op de juiste manier ingedeeld wordt.

Dit is hoe je een categorie toevoegd.

Door het vakje aan te kruizen voeg je hetgene toe.

Dit is hoe je een tag toevoegd.

Uitgelichte afbeelding instellen in de Divi Builder
In de rechterkolom staat de optie ‘Uitgelichte afbeelding’. Je kunt hier een afbeelding uploaden die getoond zal worden bij het bericht in het overzicht.

Samenvatting invullen
Je kunt een korte tekst schrijven die getoond zal worden bij het bericht in het overzicht. Met een samenvatting kun je bezoekers prikkelen om verder te lezen. Een samenvatting schrijven is optioneel.

Bericht als concept opslaan
Wil je een bericht niet direct live zetten, bijvoorbeeld omdat je er nog aan wil werken? Dan kun je het bericht als concept opslaan. Klik hiervoor op de knop ‘Concept opslaan’ en niet op de blauwe knop ‘Publiceren’. Je kunt de pagina in concept bekijken door op het laptop icoontje te klikken.

Berichten in de toekomst publiceren
Het is ook mogelijk om berichten in te plannen en ze op een later moment te publiceren. Hierdoor kun je meerdere berichten schrijven en inplannen, zonder dat ze allemaal tegelijk op de website wordt getoond. 

Om dit te doen klik je op ‘Publiceren’; er opent dan een nieuw blok. In dit blok staat ‘Publiceer: datum‘. Klik op de datum om de publicatiedatum en tijd aan te passen. Als je het gewenste moment hebt geselecteerd, klik je op de blauwe knop ‘Publiceren’.

Berichten over volledige breedte tonen
Om berichten in Divi over de volledige breedte te tonen, moet je twee dingen aanpassen: de pagina layout en de berichttitel. Klik rechts in het menu op ‘Pagina-instellingen Divi’. Selecteer bij Pagina Layout de optie ‘Volledige breedte’ en bij Titel bericht de optie ‘Verbergen’.

Layout opslaan en inladen
Soms wil je dat alle pagina’s dezelfde uitstraling en opbouw hebben. Het is dan handig om een layout te kunnen opslaan en in te laden bij een nieuwe pagina. Zo kun je in dezelfde layout werken en overbodige blokken verwijderen.

Layout opslaan in bibliotheek
De layout van een pagina opslaan in de bibliotheek doe je door op het ronde icoontje met een pijltje naar beneden te klikken. Deze staat onder aan de pagina.

Geef de layout vervolgens een herkenbare naam en klik op de knop ‘Opslaan in bibliotheek’.

De opgeslagen layouts zijn te bekijken door links op ‘Divi’ > ‘Divi Bibliotheek’ te klikken. Hierna toont een overzicht van de items in de bibliotheek.

Layout inladen vanuit bibliotheek
Voor het inladen van een layout klik je op het plusje bovenaan (opladen van uit bibliotheek) Hierna opent er een scherm en klik je op het tweede tabje bovenaan. Hier staan al je opgeslagen layouts.

Er is ook nog een optie om alles te vervangen op de pagina met een nieuwe layout, dan vink je in het zelfde venster bij alle layouts het blokje “Replace existing content” aan.

Het exporteren van een lay-out is zeer nuttig. Je kunt dezelfde lay-out die je hebt gecreëerd gebruiken op een andere website die het ‘Divi’ thema gebruikt.

Om deze stappen uit te voeren, moet je eerst een lay-out opgeslagen hebben in de Divi-bibliotheek. 

Stappen voor het exporteren van een layout

• Om een lay-out te exporteren, ga je eerst naar de “Divi Bibliotheek”. Selecteer alle items die je wilt exporteren.
• Klik vervolgens op de knop ‘Import & Export’, die je bovenaan vindt.

• Er verschijnt nu een pop-up waarin je de naam van het exportbestand kunt invoeren.
• Nadat je een naam hebt ingevoerd, vergeet dan niet om het vakje bij ‘Alleen geselecteerde items exporteren’ aan te vinken. Anders worden alle items (ook de niet-geselecteerde) geëxporteerd.
• Klik daarna op de blauwe knop “Export…” onderaan. Het bestand zal nu gedownload worden.

Stappen voor het importeren van een layout in een andere site.
Voor het importeren van een lay-out moet je een “.json” bestand te gebruiken. Dit zijn de exportbestanden van Divi. Het gaat om bestanden die je eerder hebt gedownload uit de Divi-bibliotheek. De geïmporteerde bestanden zullen vervolgens in de bibliotheek verschijnen en kunnen dan worden ingeladen in de pagina’s.

• Om te importeren ga je naar de “Divi Bibliotheek”, waar je bovenaan op de knop “Import & Export” klikt.
• Er verschijnt dan een pop-up. Bovenaan deze pop-up vind je twee tabbladen: export en import. Klik voor het importeren op het tabblad “import”.
• Klik vervolgens op “Kies bestand”. Er opent dan een venster met al je bestanden. Zoek naar een “.json” bestand; dit zijn Divi exportbestanden die je kunt importeren.
• Tot slot klik je op “Importeer Divi Builder lay-outs”.

Het gebruik van de geimporteerde layout

• Maak een nieuwe pagina aan.
• Klik daarna op de paarse knop “Gebruik de Divi builder”
• Klik daarna op layout kiezen.

• Klik boven in op “Layout laden”

• Vervolgens zie je de lay-outs die je hebt opgeslagen in de bibliotheek of hebt geïmporteerd. Selecteer de lay-out die je hebt geïmporteerd.

Nadat je op de knop klikt, verschijnt er een pop-up venster. In dit venster kun je bij het veld ‘Video MP4-bestand of YouTube-URL’ de URL van een YouTube-video invoeren. Je hebt ook de optie om zelf een MP4-bestand te uploaden.

Hierna opent een pop up. Hier kan bij ‘Video MP4-bestand of YouTube-URL’ de url van een youtube video geplaatst worden. Het is ook mogelijk zelf een MP4 bestand te uploaden door de knop grijze knop.

Let op: Youtube urls moeten beginnen met https://www.youtube.com/watch?v=

Bij het onderdeel ‘Overlay afbeeldings-URL’ kan een afbeelding geselecteerd worden welke als eerste getoond wordt voordat de bezoeker op afspelen klikt.

Modules kun je toevoegen door op het grijze plusje te klikken.

Na het klikken opent er een lijst, hier kun je een module uitkiezen.

Design
Je kunt een module stijlen door naar het tweede tabje “Ontwerp” te gaan. Hierin kun je de kleuren, font, etc. aangeven..

DIVI bied een aantal verschillende modules, dit zijn ze.

Als je pagina helemaal klaar is en je wilt kleine wijzigingen maken zoals teksten bewerken of een kleur aanpassen, kun je dit gelijk doen in de Visual Builder. Je leert in dit gedeelte van de Divi manual alles over de Visual Divi Builder.  De Visual Builder laat ter plekke je aanpassingen zien voordat het is opgeslagen, voor kleine correcties is dit erg handig.

Je kunt naar Visual Builder schakelen door op het computer icoontje te klikken bovenaan je pagina, boven de paarse balk.

Je kunt weer terugschakelen door op het eerste icoontje te klikken.

Om een element te kunnen bewerken ga je met je muis over een item, daarna zullen er een aantal opties getoond worden. Klik op het tandwieltje om de module te kunnen bewerken.

Daarna opent het instellingen pop-up scherm. Hierin kun je dus kleine wijzigingen maken, en zul je het ook gelijk zien.

Als je tevreden bent met je wijziging kun je de pagina opslaan door op de groene knop onderin je pagina “opslaan” te klikken.

Je kunt de weergave van je instellingen venster aanpassen naar een andere weergave. Leer hier alles over in dit hoofdstuk van de Divi manual.

Vergroten
Je kunt er voor kiezen om het venster te vergroten, dit kun je doen op 2 manieren.

De eerste manier is om op het eerste icoontje te klikken in de paarse balk van het venster. Je kunt ook weer terug door op hetzelfde icoontje te klikken

De tweede manier is om te slepen met het grijze pijltje rechts onderin je venster.

Venster vastmaken aan de zijkant
Dit kun je doen door op het middelste icoontje te klikken in de paarse balk van het venster. Om dit los te maken klik je weer op het middelste icoontje.

Om de achtergrondkleur van een sectie te kunnen aanpassen klik je op het tandwieltje in de blauwe sectie.

Hier staat de optie “Achtergrond” deze klik je open.

Je hebt hier ook de opties om een afbeelding of video te plaatsen als achtergrond, hiervoor klik je op het tabje ernaast.

Als je kiest voor een video, dan is het het beste om een youtube linkje te plaatsen als dat mogelijk is. Als dit niet mogelijk is is het het beste om de video in een kleine bestandsgrootte te uploaden. Hierdoor verstoor je de snelheid van de website niet.

Als je op het grijze plusje klikt opent de media bibliotheek. Links van je scherm heb je de optie “Invoegen via URL” hier plaats je de url.

Als je dit allemaal hebt aangepast klik je op het groene vinkje onderaan om op te slaan.

Door op de drie streepjes aan de linkerkant van een module, rij of sectie te klikken komt er een pop-up. Klik hier op ‘Geavanceerd’ en scroll naar beneden tot ‘Zichtbaarheid’. Hier staan 3 aanvink vakjes voor telefoon, tablet en desktop. Vink alle 3 deze vakjes aan om de module,rij of sectie in zijn geheel voor de bezoeker te verbergen.

De Divi builder werkt met kolommen. Zo kun je elke sectie en rij indelen in verschillende layouts. Door op het blauwe rondje met + teken te klikken wordt er een nieuwe sectie toegevoegd. Klik je op het groene rondje met een + teken wordt er een nieuwe rij toegevoegd. Na het klikken op één van deze knoppen komt er een popup tevoorschijn waar de verschillende indelingen gekozen kunnen worden. Op dit moment is er keuze uit 20 verschillende indelingen. Per kolom kunnen er weer een aantal modules ingevoegd worden om de pagina naar wens in te delen.

Speciale sectie
Met een ‘speciale sectie’ kun je een layout maken met een doorlopende zijbalk. In het keuze overzicht wordt de doorlopende balk aangegeven met een oranje kleur. In de kolom ernaast is het dan mogelijk verschillende rijen met verschillende kolom layouts te maken (volle breedte, 2 koloms of 3 koloms). De zijbalk zal ongeacht de hoeveelheid kolommen door blijven lopen zonder onderbrekingen.

De speciale sectie is in te voegen door op het blauwe rondje te klikken en dan te kiezen voor ‘specialiteit’.

Globale blokken binnen Divi zijn blokken met een groene kleur. Dit kunnen gehele secties en rijen zijn maar ook losse modules.

Globaal wil zeggen dat je deze blokken op verschillende pagina’s kunt plaatsen en door deze op een pagina te wijzigen worden dit ook doorgevoerd op alle andere pagina’s (en berichten) waar het betreffende blok op staat. Dit is erg handig voor vaak terugkomende elementen.

Aanmaken van globale blokken
Het aanmaken van een globaal blok doe je door een sectie, rij of module op te slaan in de bibliotheek door middel van de knop ‘opslaan in bibliotheek’.

Vul een herkenbare naam in en zet een vinkje bij ‘Van dit een globaal item maken’. Klik daarna op de knop ‘Opslaan in bibliotheek’ om het blok op te slaan. Hierna wordt het pop-up venster gesloten en het betreffende blok krijgt een groene kleur zodat te zien is dat het gaat om een globaal blok.

Vaak wordt dit veroorzaakt door een grote marge of buffer op de module, kolom, rij of sectie. Dit is aan te passen door een module, kolom rij of sectie te bewerken en in het tabblad ‘Onderwerp’ naar het kopje ‘Afstand’ gaan. Hier kan de marge en buffer aan de bovenkant, onderkant, links en rechts aangepast worden. Er moet een cijfer ingevuld worden. Dit cijfer staat voor het aantal pixels, de tekst px hoeft niet ingevoerd te worden, dit zal het systeem zelf doen.

Bij marge betekent een leeg veld 0 pixels afstand. Bij buffer betekent een leeg veld 15 pixels afstand.

In het voorbeeld een marge van 192 pixels (px) met daaronder een voorbeeld van de witruimte. In het voorbeeld kan 192px dus weggehaald worden om de witruimte met 192 pixels te verminderen.

Soms komen de blokken (layout) die je hebt gemaakt op de mobiel en tablet er niet mooi uit te zien of de fontgrootte is te groot voor mobiele weergave. Hiervoor heeft Divi een extra optie om blokken voor de mobiel en tablet weergave apart aan te passen.

Je kunt bijna alle modules aanpassen voor mobiel en tablet. Tijdens het aanpassen van een module naast de titel staat er dit icoontje:

Als je hier op klikt kun je de groottes aanpassen voor tablet en telefoon weergave. Als je hier niets invult zal de module de instellingen overnemen die staat ingesteld voor de computer.

Dit geldt ook voor blokken waar veel wit ruimtes omheen zitten, die kun je dan ook weer via het telefoon icoon aanpassen.

Je kunt blog berichten aan je pagina toevoegen door de blog module van Divi te gebruiken. Deze kun je toevoegen door op het grijze plusje te klikken > Blog.

Content
Bij het eerste tabje content kun je aangeven hoeveel berichten je wilt tonen.

Elementen
Bij elementen kun je verschillende opties aan-en uitklikken.

Design
Bij het tabje ontwerp kun je de module stijlen. Hier kun je de kleuren, font, etc. aangeven.

Module
Je kunt een knop toevoegen aan je pagina. Dit kun je doen door op het grijze plusje te klikken > knop.

Je kunt bij het eerste tabje “Content” de knop tekst en URL toevoegen.

Stijlen
Bij het tweede tabje kun je de styling van je knop aanpassen. Vink de knop “Aangepaste stijlen gebruiken voor knop” aan. Daarna zullen er opties voor het stijlen getoond worden.

Divi heeft de mogelijk om verschillende soorten animaties toe te voegen aan modules, secties en kolommen. De animaties zijn te zien wanneer je op een pagina komt. Je zult dan beweging zien in de elementen waar je een animatie aan hebt toegevoegd.

De soorten animaties:
– Vervagen
– Dia
– Bounces
– Uitzoomen
– Tikken
– Vouwen
– Rollen

Let op: Tekstbewerkingen hebben consequenties voor de SEO.
Indien je een module wilt aanpassen, om bijvoorbeeld de tekst te veranderen, klik je op het tadwielicoontje van die module.

Er opent dan een venster waarin je de content kan aanpassen.
Bovenin het venster kan de tekst aangepast worden bij het veld ‘Tekst’.

Tekst grootte aanpassen
Als je in het bewerk venster zit kan in het tabje ‘Ontwerp’ bij ‘Tekst Tekst Grootte’ gekozen worden hoeveel pixels groot de tekst moet zijn. Standaard wordt dit alleen voor de platte tekst gedaan. Bovenin kan naast tekst ook nog gekozen worden voor o.a. linkjes en lijsten.

Scroll je een stukje naar onderen dan naar ‘Heading text’ is het ook mogelijk om lettergrootte van de verschillende kopteksten aan te passen.

Een linkje maken in de tekst doe je door het stukje tekst te selecteren en te klikken op het ‘link invoegen; icoontje: Vervolgens verschijnt er een venstertje waar je een link kan toevoegen of de pagina kan selecteren waar de link naar toe moet gaan (tandwieltje).

Als je de link op hebt geslagen zie je ook dat de link in de tekst blauw is geworden.

Interlinie is de afstand tussen regels tekst. Deze zijn in divi aan te passen door bij het bewerken van de tekst in het tabblad ‘Ontwerp’ de slider bij ‘Tekst lijnhoogte’ te verslepen naar de gewenste positie (hoe verder naar links hoe minder afstand en hoe verder naar rechts hoe meer afstand).

Net als in een Word-document kun je in de tekst kopteksten aangeven. H1 is de eerste koptekst (heading tag) van een pagina, deze word ook maar één keer gebruikt. Kopjes H2, H3 enz. zijn tussen kopjes. Het gebruik van heading tags is goed voor de SEO. Zo kan er snel gelezen worden waar de pagina over gaat.

Hoe gebruik je heading tags?
Heading tags gebruik je net als je ze in Word-document gebruikt. Je moet het zien als een inhoudsopgave.

H1: Titel
H2: Hoofdstuk
H3: Hoofdstuk onderwerp

Je kunt een heading toevoegen door de tekst te selecteren en op “paragraaf” te klikken boven in de tekst editor.

Letterafstand is aan te passen via het tweede tabje “Ontwerp” van de tekst instellingen.

Als je dit voor de platte tekst wilt aanpassen dan klik je op “Tekst”. Als je de kopteksten wilt aanpassen dan klik je op “Tekst ondertitel”.

Als je iets naar beneden scrolt kom je “Letterspatiëring” tegen. Hier kun je een aantal pixels invullen voor de letterafstand.

Afbeeldingen kun je toevoegen aan je pagina door de module “Afbeelding” te gebruiken.

Via het vlak kan je een nieuwe afbeelding aan de media bibliotheek toevoegen of een afbeelding gebruiken uit de bibliotheek.

Je kunt ook nog de afbeelding doorlinken. Onder het plusje zit het tabje “Link” hier kun je de url invoeren waar de afbeelding naar toe moet. Je kunt ook nog aangeven of dit in een nieuw tabblad geopend moet worden of niet.

Je kunt er ook voor kiezen om de afbeelding te vergroten. Hiervoor vink je de knop “Openen in LightBox” aan. Deze optie staat ook in het tabje “Link”. Dit zorgt ervoor dat de afbeelding klikbaar wordt. Als je op de afbeelding klikt zal het vergroot worden.

Om de afbeelding uit te lijnen ga je naar “ontwerp”, het tweede tabje naast content. Hieronder vind je de optie “Uitlijning”. Dit kun je ook nog aanpassen voor tablet en telefoon door op het telefoon icoontje te klikken naast de titel (je moet er eerst met je muis over heen scrollen tot het verschijnt).

Het is ook mogelijk om een afbeelding toe te voegen in een tekstvak. Hiervoor gebruik je de module tekst.

Boven aan het invoervak van de tekst staat er een knop “Media toevoegen”. Als je hier op klikt zal de mediabibliotheek openen en kun je een afbeelding selecteren (of een nieuwe uploaden).

Afbeelding in tekst bewerken
Om de afbeelding te kunnen bewerken klik je op de afbeelding in de tekst. Hier krijg je een aantal uitlijn opties en een potlood icoontje. Via het potlood icoontje kun je je afbeelding bewerken.

Afbeeldingen moet je eerst bijsnijden in Photoshop of in de mediabibliotheek van WordPress. Met Photoshop kun je de functie “exporteren voor web” gebruiken. Dit zorgt ervoor dat de afbeelding qua bestandsgrootte zo klein mogelijk wordt. Het is namelijk belangrijk dat je geen grote afbeeldingen upload. Dit zal de snelheid van je website verstoren.

Om een afbeelding te bewerken via de bibliotheek ga je naar de mediabibliotheek van WordPress (dit staat in de linker kolom van je dashboard) en klik je de afbeelding aan die je wilt bewerken of je upload een nieuwe via de knop “nieuw bestand”.

Hierna opent er een scherm met de afbeelding en de gegevens. Hier kun je zien hoe groot de afbeelding is. Onder de afbeelding zit er een knop “Afbeelding bewerken”.

Vervolgens opent er een scherm met een aantal opties. Om het kleiner te maken ga je naar de optie “Afbeelding schalen” dit staat rechts boven aan de scherm. Hier voer je de benodigde pixel afmetingen in. Als je dit hebt gedaan klik je op de blauwe knop schalen om het op te slaan.

Dit is erg handig voor als er meerdere afbeeldingen naast elkaar staan met dezelfde hoogte en vervangen moeten worden.

Om te kunnen zien hoe groot een afbeelding in een kolom is klik je met je rechtermuisknop op een afbeelding. Hierna klik je op “inspecteren”

Wanneer je hierop hebt geklikt zal er een popup verschijnen zoals deze:

Hier klik je op het tooltje “select” links bovenin de popup.

Daarna selecteer je met je muis de afbeelding en zul je zien dat er een stukje blauw. geselecteerd wordt in de popup.

Als je met je muis over de url (link) van de afbeelding gaat zullen de afmetingen verschijnen.

Wat achter “intrinsic” staat zijn de pixelafmetingen van de afbeelding.

Om een link achter een afbeelding te zetten ga je naar afbeelding instellingen via het tandwiel icoontje.

Hierna ga je bij het tabje content naar de optie “link”.

Hier zie je de optie verschijnen “URL afbeelding” hierin plaats je de url.

Je kunt ook nog aangeven of dit in een nieuw tabblad geopend moet worden of niet. Dit doe je bij de optie eronder “Titel van de afbeelding”.

Je kunt er ook voor kiezen om de afbeelding te vergroten. Hiervoor vink je de knop “Openen in LightBox” aan. Deze optie staat ook in het tabje “Link”. Dit zorgt ervoor dat de afbeelding aanklikbaar wordt. Als je op de afbeelding klikt zal het vergroot worden.

Klik op het tandwiel icoontje van de afbeelding module.

Hierna ga je bij het tabje content naar de optie “link”.

Hier klik je op “Openen in Lightbox”.

Hierna klik je op opslaan en kun je de afbeelding vergroten wanneer je er op klikt.

Bovenliggend beeld
Je kunt er als extra nog een bedekking aan toevoegen (bovenliggend beeld). Dit doe je bij het tweede tabje “ontwerp”. Hier vind je de optie “Bedekking”.

Hier vink je het aan.

Om de afbeelding uit te lijnen ga je naar “ontwerp”. Het tweede tabje naast content. Hieronder vind je de optie “Uitlijning”.

Dit kun je ook nog aanpassen voor tablet en telefoon door op het telefoon icoontje te klikken naast de titel (je moet er eerst met je muis over heen scrollen tot het verschijnt). Als je dit niet aanpast voor telefoon of tablet dan neemt het de instellingen over voor desktop.

De Divi thema builder is te vinden in WordPress onder ‘Divi’ > ‘themabouwer’.

Met de Divi Themabouwer is het mogelijk om op specifieke pagina’s de header en/of de footer uit te schakelen. Dit kan handig zijn voor bijvoorbeeld conversiepagina’s.

Om dit te doen ga je naar Divi > Themabouwer en klik je op het plus icoontje ‘Sjabloon toevoegen’.

Ga hierna met de muis over Specifieke pagina’s en selecteer de pagina waar je de header en/of footer wilt uitschakelen. Klik hierna op de blauwe knop ‘Maak een sjabloon’.

Het sjabloon is opgeslagen en hierna kan door op de knop naast ‘Aangepaste koptekst toevoegen’ (header) en ‘Aangepaste voettekst toevoegen’ (footer) het onderdeel uitgeschakeld worden.
Als het onderdeel ingeschakeld is, is het icoontje donker grijs. Als het onderdeel uitgeschakeld is, dan is het icoontje lichtgrijs met een streep erdoor.

Dashboard > Divi > Themabouwer

Voor het aanmaken van het menu klik je op “wereldwijde koptekst”.

Hierna klik je op “Build global header”.

Hierna opent er een standaard divi builder scherm. Klik hier dan op ”build from scratch”

Klik vervolgens op “Build from scratch” en voeg een kolom toe.

Hierna zoek je de divi menu module op

Styling
Nu kun je beginnen met het stylen zoals; achtergrondkleuren aanpassen, typografie etc. Als je wilt dat het menu mee scrollt op de pagina zou je een aangepaste css aan de sectie moeten toevoegen.

Volgorde van menu items zijn aan te passen via WordPress zelf:
Dashboard > weergave > menu’s

Hier vink je aan welke pagina’s je wilt toevoegen aan het menu.

De layout van de menu items kun je bewerken via menu-instelling > klik op het tandwiel icoontje van de module

Hierna kun je het logo toevoegen en aanwijzen welke menu er in moet komen te staan.

Bij “Elementen” kun je nog kiezen om het zoekpictogram weer te geven

Bij het tweede tabje “ontwerp” kun je het menu gaan vormgeven. (kleuren, font, fontgroottes etc.)

Via de sectie instellingen kun je de achtergrondkleur aanpassen

Via het tabje ontwerp zou je de witruimtes kunnen aanpassen.

Dit doe je bij de optie “Afstand” en vul je een hoeveelheid pixels in bij de buffer.

Bij het tabje “geavanceerd” kun je bij het kopje “Aangepaste CSS” nog CSS toevoegen voor het menu. (zodat het “fixed” wordt)

Als je dit allemaal hebt gedaan klik je op opslaan >
Onderin je scherm staat een paarse knop met 3 stippen.

Hier klik je op en verschijnt er rechts onderin een groene knop met “Opslaan”
en verlaat je de builder door op het kruisje te klikken.

Daarna kom je weer terug in het startscherm van de themabouwer en zie je dat het blokje groen is. (groen staat voor globaal)

Hierna klik je op de grote groene knop bovenin “wijzigingen opslaan”

Voor het aanmaken van een footer is het proces bijna hetzelfde als voor het aanmaken van het menu. De footer zou je wel handmatig zelf moeten bouwen ipv. een menu module te gebruiken.

Voor het aanmaken van een footer klik je op “Algemene voettekst toevoegen”.

En klik je op “bouw een wereldwijde voettekst”.

Hierna opent de divi builder en klik je “build from scratch”.

Hierna kun je beginnen met het bouwen van een footer. Het meest standaard voor een footer is 4 kolommen.

Je kunt verschillende modules toevoegen. Het meest standaard is een tekstmodule met linken die je doorsturen naar andere pagina’s binnen je website. Je zou natuurlijk ook een afbeelding kunnen toevoegen. Voor meer styling kun je de achtergrondkleur van de sectie aanpassen.

Als je de footer eenmaal hebt gestyled klik je op opslaan via de paarse knop onderin.

Rechtsonderin verschijnt een groene knop “opslaan” en verlaat je de builder door op het kruisje te klikken rechtsboven.

Daarna kom je weer terug in het startscherm van de themabouwer en zie je dat het blokje groen is. (groen staat voor globaal)
Hierna klik je op de grote groene knop bovenin “wijzigingen opslaan”.

Dashboard > divi > themabouwer
Om een bestaand menu/footer te kunnen aanpassen moet het menu/footer wel gemaakt zijn in de divi thema bouwer.

Je kunt het menu bewerken door op het potlood icoontje te klikken.
Hierna opent de divi builder en kun je het bewerken net zoals alle andere pagina’s, dit geldt ook voor de footer.