Nederlandse Divi Handleiding

Transcriptie

1 Nederlandse Divi Handleiding

2 Hartelijk dank dat je deze handleiding gaat gebruiken. Ik hoop van harte dat het je werk aan je website zal vereenvoudigen. Mocht je op en of aanmerkingen hebben op deze handleiding hoor ik dat graag. Mail me dan op: Met vriendelijke groeten, Henk van Dongen

3 Inhoudsopgave 1 Divi Instellingen Stel je standaard kleurenpalet in Stel de thema accentkleur in Stijl de koptekst Stijl de Voettekst De iconen die worden gebruikt Hoe Divi werkt De Basis Een header maken en de meest gebruikte modules Een klassieke header maken met een sectie op volle breedte De twee meest gebruikte modules De modules Tekst en Afbeelding De afbeelding De Homepage We gaan een Homepage maken Over ons De modules Persoon, Social Media, Tabbladen, Map en modules uit de vorige hoofdstukken Blog Een blog pagina maken waar je berichten op getoond worden Contactformulier De module contactformulier heeft veel meer mogelijkheden dan je in eerste instantie zou denken. Vandaar dat ik er een heel hoofdstuk aan wil wijden Overige modules In voorgaande hoofdstukken zijn de meest voorkomende modules besproken, de overige modules bespreek ik in dit hoofdstuk...49

4 Hoofdstuk 1 1 Divi Instellingen Stel je standaard kleurenpalet in Ik vergeet vaak deze stap te doen en betreur het altijd. De standaardinstelling van het kleurenpalet maakt het heel handig om kleuren te bewerken met de Divi-Builder. Ik kan je niet vertellen hoe vaak ik terug moet gaan naar een andere module om een kleurcode te vinden. Doe dit jezelf niet aan! Je kunt het standaardkleurenpalet instellen door naar je WordPress Dashboard te gaan en naar Divi > Thema-opties te navigeren. En daar vindt je in het algemene tabblad de genoemde optie. Voeg daar de kleuren toe die je nodig hebt. Het is altijd een goed idee om de kleur wit (#ffffffffff) en een paar donkere kleuren (zoals # ) toe te voegen. Zelf gebruik ik graag de kleurenkiezer op deze site: Deze gratis te gebruiken kleurenkiezer werkt heel eenvoudig. Druk op de spatiebalk tot je een

5 mooie kleur ziet. Zet deze vast met het slotje en druk weer op de spatiebalk tot je de volgende mooie kleur gevonden hebt. Zet ook deze vast. Enzovoort, uiteindelijk heb je vijf kleuren die je gaat gebruiken op je website. Sla dit schema op en download het Stel de thema accentkleur in Ga in je dashboard naar: Weergave ->Customizer en navigeer naar Algemene instellingen > Layout instellingen en vind de optie Thema Accent Color onderaan. Hier staan nu nieuwe kleuren die je in het kleurenpalet hebt ingesteld Kies hier de accent kleur die u wilt gaan gebruiken en vergeet niet om op Publiceren te klikken. De bijgewerkte Thema Accent Kleur zal automatisch worden toegepast op ongeveer 20 andere elementen en daarom is het belangrijk om deze eerst te in te stellen. Enkele van de elementen die automatisch worden bijgewerkt omvatten: Body Link Kleur Widget Header Kleur Widget Bullet Kleur Footer Social Icons Hover kleur Standaard kleur voor icons Footer Menu Actieve Link kleur Secondary menu achtergrond kleur Slide In and Fullscreen Header Style achtergrond kleur Hamburger Menu Icon voor mobiele menu kleur Primary Menu Actieve Link kleur Dropdown Menu Line kleur Secondary Menu achtergrondkleur Secondary Dropdown Menu achtergrond kleur Active Primary Menu Link kleur Footer Menu Actieve Link kleur Als je niet ziet dat de wijzigingen onmiddellijk van kracht worden op deze elementen, kun je de customizer opslaan en verlaten, de pagina vernieuwen en teruggaan naar de customizer.

6 1.1.3 Stijl de koptekst Je kunt de koptekst in het Thema Customizer stylen. Ga naar je WordPress Dashboard en navigeer naar Weergave -> Customizer -> Koptekst & Navigatie. Eerst zou ik beslissen over de formaat koptekst (standaard, gecentreerd, etc...), maar wat je ook kiest, zorg ervoor dat de stijl van je koptekst overeenkomt met de rest van de lay-out. En zorg ervoor dat de items in je menu gemakkelijk te lezen en te navigeren zijn. Je hebt opties voor uw primaire, secundaire en vaste navigatiemenu' s. Neem de tijd om alles wat van toepassing is op uw site te stylen. Als je je algemene accentkleur instelt, worden sommige kleurinstellingen van de kopregel voor je gewijzigd. Daarom was het belangrijk om eerst die kleur in te stellen Stijl de Voettekst Je kunt de voettekst ook stylen vanaf de Thema Customizer. Ga naar uw WordPress Dashboard en navigeer naar Weergave -> Customizer > Voettekst > Onderkantbalk. De bodembalk mag niet worden verwaarloosd. Gecombineerd met de navigatiebalk aan de bovenkant van uw pagina, wordt het een noodzakelijke onderdeel voor de hele pagina. Zeker, de standaard zwarte achtergrond kan op elke site best "werken", maar ik zou er wat meer mee experimenteren. Soms geef ik de onderste balk graag een achtergrondkleur die een iets donkerdere tint geeft van de achtergrondkleur van het voetgedeelte die er direct boven staat.

7 Tot zover de standaardinstellingen. Vergeet niet de instellingen op te slaan door op Publiceren te klikken!! De iconen die worden gebruikt De iconen van de secties/kolommen/modules: Klik en houd ingedrukt om sectie/kolom/module te verplaatsen. Klik hierop om in pop-up instellingen te komen Klik hierop om de sectie/kolom/module te kopiëren Klik hierop om het aantal kolommen te wijzigen. Klik hierop om sectie/kolom/module op te slaan in de bibliotheek Klik hierop om de sectie/kolom/module te verwijderen.

8 De iconen onderaan de pagina: Klik hier op om de pagina opties te tonen. Je krijgt dan links onderaan je pagina het volgende te zien Klik hierop voor de Builder instellingen Klik hierop om te wisselen naar het draadmodel Klik hierop om in en uit te zomen Klik hierop voor de desktopweergave (dit is de standaard instelling) Klik hierop voor de tabletweergave Klik hierop voor de telefoonweergave Onderaan in het midden verschijnt: Klik hierop om een pagina uit de bibliotheek te laden Klik hierop om de pagina in de bibliotheek op te slaan Klik hierop om de pagina te verwijderen

9 Klik hierop om het pagina opties menu te sluiten Klik hierop voor de pagina instellingen klik hierop om de wijzigingsgeschiedenis te zien. Klik hierop voor de draagbaarheid. Dat is een beetje een rare vertaling, maar je kan er een.json bestand mee maken om dat vervolgens op een andere site te importeren. Je kan dus een kopie van de pagina maken en die op een totaal andere site gebruiken.