Handleiding DIVI

Tip#1 Maak het jezelf makkelijk
Vlot de te wijzigen pagina vinden
Log in, en blader, via ‘Site bekijken’ (linksboven onder de websitenaam) door je website naar de pagina die je wilt bewerken. Klik boven in de adminbalk op ‘Bewerken met de Divi Builder’.

Learn by Doing

Inhoudsopgave:

Pagina voor bewerking kiezen, aanmaken of kopiëren 
Pagina aanpassen / Tekst bewerken
Wijzigingen opslaan en ongedaan maken met short-cuts
Afbeeldingen plaatsen
Link aanmaken
Berichten aanmaken
Formulieren
Verbergen van blokken & separate versies maken
Werken met kolommen
Globale blokken, modules en elementen
Video plaatsen

Pagina kiezen of aanmaken

Om een pagina aan te passen kun je op twee manieren deze pagina zoeken.
Via Dashboard > Pagina’s > Alle pagina’s

kom je op het paginaoverzicht.

Als de website meerdere taalversies heeft kies je bovenin een taalversie.
De actieve taal is zwart gekleurd en de overige blauw.
Kies de paginataal en vervolgens de pagina die je wilt bewerken.

(Niet openen via het pennetje, wat je ook op deze pagina onder de taalvlag tegenkomt.)


Als je de pagina gevonden hebt klik je ‘Edit with Divi’
Zo kom je direct in de Divi lay-out van de pagina.


Pagina Dupliceren

Als je een nieuwe pagina wil maken is deze methode, om een pagina te zoeken, ook geschikt om een pagina te dupliceren.

Zoek dan een pagina die je goed als basis voor je nieuwe pagina kunt gebruiken.
Klik dan op ‘Duplicate’.

Er wordt dan een duplicaat aangemaakt met eenzelfde titel en ‘Copy’ erachter.
Via ‘Snel bewerken’ kun je de paginanaam en slug aanpassen.

Gebruik bij de naamgeving, voor een goede werking, behalve het koppelteken ‘-‘ of underscore ‘_’  geen,  leestekens in de naam.

Pagina aanpassen

Na het aanklikken van ‘Edit with Divi’  opent een venster met een overzicht van de pagina.
Een pagina is opgebouwd uit secties.
Een sectie is een blok (rij) van de pagina die je kunt vullen met tekst of beeld  modules.
Je kunt veel blokken onder elkaar plaatsen en vullen met tekst en beeld.

Het aanmaken van nieuwe en globale blokken vind je hier.

Tekst bewerken

Let op: Tekstbewerkingen hebben consequenties voor de SEO.
Opmerking: Klik je op de module en werk je direct in de module, dan kan de tekst plotseling verspringen (browserdingetje) volg in dat geval de zekere methode hieronder.

Indien je een module wilt aanpassen, om bijvoorbeeld de tekst te veranderen, klik je op de module waarna je een blokje ziet met:
– pijltjes: om het de module of een heel blok te verplaatsen
– Radertje: om de inhoud van de module of blok aan te passen
– twee vierkantjes: om de module te dupliceren
– Pijltje in cirkel: om de module in de Divi bibliotheek op te slaan (om later weer op andere plekken en pagina’s te kunnen gebruiken).
– vuilnisemmer: weggooien van de module
– X: om venster te sluiten
– drie puntjes verticaal: voor overzicht en extra geavanceerde instellingen

Kies nu het radertje

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

Tekst  aanpassen
Als je in het bewerk venster zit kun je de tekst in laten lopen en bewerken in het ‘Visueel’ venster.
Onder de tab ‘Tekst’ kun je de html versie van de tekst aanpassen. Html codeer kennis is wel handig dan 🙂

Volgende regel / verschil enter en shift+enter
Een ‘Enter’ wordt gebruikt om een witregel te plaatsen in een tekst. Als er geen witregel geplaatst hoeft te worden maar de tekst moet toch op een nieuwe regel moet beginnen kunnen de ‘Shift’+’Enter’ toetsen worden gebruikt.

Wijzigingen tussentijds ongedaan maken en opslaan met short-cuts
Divi werkt ook met short-cuts. Als je tijdens het bewerken een fout maakt kun je met de toetscombinatie ‘Command Z’ een actie (meermaals) ongedaan maken. En ben je daarin te ver gegaan kun je met ‘Command Shift Z’ weer terug.
Opslaan van de wijzigingen doe je door de toestcombinatie ‘Command S’.

Afbeelding plaatsen

Klik op de knop ‘Media toevoegen‘ vervolgens opent de Mediabibliotheek.
Hier kun je een bestand uitkiezen of een nieuwe Uploaden.

Houd het afbeeldingsbestand klein, dat zorgt voor een snellere laadtijd en daardoor ook beter voor de Google zoekresultaatnotering.
Als je een een bestand upload is het van belang dat het, naast een goede kwaliteit, ook een kleine bestandomvang heeft, dus geen megabytes groot maar eerder kilobytes.

Een foto van een camera of smartphone kun je verkleinen via je eigen photo-editor app of programma of diverse websites. Wij  gebruiken nu de online app van: pixlr

Voorbeeld
We kiezen een foto, genomen op een camera.
De orginele foto heeft:
– een afmeting van: 6720 breed x4480 hoog pixels
( Voor een pagina header is 1920 breed genoeg om de hele pagina breedte te vullen, en voor een tekstkolom 600 tot 800 pixels breed)
– een bestandsgrootte van: 8.9 MB (MegaByte) (We willen uiteindelijk onder de 1 MB uitkomen)

We gaan naar: pixlr waar je in de openingspagina kunt kiezen voor een afbeeldingsformaat, let daarbij vooral op het eerste getal, dat is de breedte.
(Handig dat ook er meer mogelijkheden bijstaan zoals social media!)

Afhankelijk van welke voorkeuze je gebruikt, de flash versie of pixlrX, krijg je 1 van deze vensters te zien.

Je kiest nu een breedte waarvan jij denkt dat deze goed in de pagina past.
Wij kiezen 1280 x 720 (bxh).
Geven de foto, in blokje rechtsboven, een naam en kunnen eventueel het formaat daar nog aanpassen.
Daarna klikken we op de ‘CREATE‘ knop en zien het resultaat.

Ben je tevreden? Klik dan op ‘DOWNLOAD‘ en de verkleinde foto wordt naar de download map van je computer verzonden.

Vervolgens kun je deze, voor internet geoptimaliseerde, foto via de knop ‘Media toevoegen‘ in de mediabiblotheek en in je pagina plaatsen.

Link in een tekst maken

Een tekstlink maken doe je door het stuk tekst te selecteren en te klikken op het ‘linksymbool’ (schuine kettinkje).

Vervolgens verschijnt er een venster waar je een link kunt toevoegen of de pagina kan selecteren waar de link naar toe moet gaan.
Als je de link hebt opgeslagen zie je dat de link in de tekst blauw is geworden.

Extra over het ‘Insert link’ venster
Met ‘TargetNone blijft de link in hetzelfde browservenster en New window gaat de link naar een nieuw venster.

Berichten aanmaken

Indien je wil gaan werken met nieuwsberichten kun je deze aanmaken in het menu onder ‘berichten’.

Typo Dynamo kan een template voor een nieuwsbericht ontwerpen en die voor je in de bibliotheek zetten. Zo kan je eenvoudig nieuwsberichten aanmaken.

Om te starten ga je naar Dashboard > Berichten > Nieuw bericht.

Je geeft het nieuwe bericht een titel en klikt vervolgens op de paarse button ‘De Divi opbouwfunctie gebruiken’

Als je het nieuwsbericht klaar hebt, is het van belang dat je rechts op de pagina aangeeft in welke categorie en tag het bericht hoort zodat deze op de juiste manier ingedeeld wordt.

Een nieuwe categorie en tag kun je direct daar aanmaken.

 Uitgelichte afbeelding instellen
In de rechterkolom vind je de optie ‘Uitgelichte afbeelding’. Hier kan een afbeelding geupload worden en zal dat getoond worden in het overzicht van nieuwsberichten.

 Samenvatting invullen
De samenvatting (excerpt in de engelstalige versies) wordt gebruik als korte tekst om op de overzichtspagina’s van de berichten te tonen. Het is de bedoeling dat hier een korte tekst ingevuld wordt waardoor een bezoeker geprikkeld wordt om het bericht te lezen.

Bericht als opslaan als…
Om een bericht als concept op te slaan klik je niet op de blauwe knop ‘Publiceer’ maar op de knop ‘Concept opslaan’.
Het bericht is dan niet zichtbaar voor bezoekers van de website maar je kunt er wel gewoon aan werken.
Een concept is te bekijken door de knop ‘Voorbeeld’ te klikken.

 

 Zichtbaarheid nieuwsbericht later aanpassen

Vervolgens heb je al na publicatie altijd nog weer de keus of je het bericht openbaar maakt, een ander auteur toekent of het bericht laat wachten op de beoordeling van een andere webredacteur.

Berichten in de toekomst publiceren
WordPress biedt de mogelijkheid om berichten op een latere datum te publiceren. Zo is het dus mogelijk meerdere berichten te schrijven zonder dat deze direct op de website getoond worden.

Dit kan gedaan worden door rechts in het blok ‘Publiceren’ naast ‘ publiceren’ op ‘bewerken’ te klikken (bij een nieuw bericht staat daar ‘onmiddelijk’. Hierna kan er een datum en tijd aangegeven worden.
Handig bij vakanties of vooruitwerken van een aantal berichten!

 

Berichten instellingen Divi aanpassen
Om de pagina weergave van het nieuwsbericht aan te passen ga je in de rechterkolom naar ‘Pagina Layout’.

Er onder zit ook nog een optie om de titel van het bericht te verbergen.

 

 

Formulieren integreren

Bij het aanmaken van een tekstblok in Divi kan, door middel van een shortcode, in te voeren een formulier in de pagina worden geplaatst.
De code vind je in het dashboard > formulieren overzicht zelf en ziet er uit als [formidable id=4] of [wpforms id=”5368″] al naar gelang de formuliermaker van de website.

Tijdelijk verbergen van modules, rijen en secties

Als je een module, rij of sectie wil verbergen ga je, tijdens tekst of beel aanpassingen naar de tab ‘Geavanceerd’ en scrollt naar beneden tot ‘Zichtbaarheid’.
– Hier staan 3 aanvinkvakjes voor Telefoon, Tablet en Desktop.
– Vink en enkele of  alle 3 deze vakjes aan om de module, rij of sectie in voor de bezoeker te verbergen.

Hiermee is het dus mogelijk om aparte versies te maken voor een smartphone, tablet en desktop.

 

Werken met kolommen (pagina indeling)

De Divi builder werkt met kolommen. Zo kun je elke sectie en rij vrijelijk indelen.
Door op het plusje te te klikken komt er een popup tevoorschijn waar de verschillende indelingen gekozen kunnen worden.

Hieronder zie je een:
– blauwe om een sectie toe te voegen
– groene om een rij in te voegen (dit doe je meestal binnen in een rij)
– een grijze om een tekstmodule in te voegen

Per kolom kunnen er weer een aantal (tekst, beeld of andere) modules ingevoegd worden om de pagina  inhoud te geven.
Als je op het radertje klikt kun je deze ook weer vormgeven.

Dat werkt ook zo voor de (tekst, beeld of andere) modules.

 

 

Speciale sectie invoegen
Als je al wat langer werkt en vertrouwd bent met DIVI kun je Met de knop ‘specialiteit’ een layout maken met een doorlopende zijbalk.
In het keuzeoverzicht 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.

 

 

Globale blokken en modules (en ze zijn groen)

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 en modules vanuit de Divi bibliotheek op verschillende pagina’s kunt plaatsen en dat ze allen dezelfde informatie weergeven.
Erg handig voor vaak terugkomende elementen met identieke informatie.

Let wel op want;
Aanpassen van de informatie in zo’n element hoeft niet in de Divi bibliotheek te gebeuren maar kan ook op een pagina waar je op dat moment aan te werk hebt.

Als je een bepaald blok of module (bijv, tekstblokje of knop) op een pagina aanpast dan wordt dit ook doorgevoerd op alle andere pagina’s (en berichten) waar het betreffende blok op staat. Omdat het een ‘Globaal’ blok of module’ uit de bibliotheek is.

Toevoegen van globale blokken, modules  en elementen in de Divi bibliotheek

Het aanmaken van een globaal blok een sectie, rij of module op te slaan in de bibliotheek door middel van de knop ‘Opslaan en toevoegen aan bibliotheek’.

Je klikt eerst het cirkel/pijltje onder de sectie, rij of module.

Vul in het pop up venster 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.

 

Toevoegen van een globaal blok aan je pagina

Bij het toevoegen van een sectie, rij of module kan gekozen worden voor ‘Toevoegen vanuit bibliotheek’. Hier kan het globale blok (GROEN)  geselecteerd worden zodat deze toegevoegd wordt aan de pagina.

Video plaatsen

Een video van youtube of een zelf gemaakte video* plaatsen kan binnen Divi met de ‘Video’ module. Deze module is toe te voegen door op ‘+ Voeg module(s) in’ te klikken. Kies hierna voor ‘Video’.
*Voor zoekresultaten in Google en je voor je website (hosting) is het (veel) beter om de video te uploaden naar je Youtube kanaal en vanaf daar te streamen. Dan er 1 op je eigen website/hosting te plaatsen.

 

Hier kan bij ‘Video MP4-Url’ de url van een youtube video geplaatst worden.

 

Ga nu met de muis over het bovenste videovak (dus niet Video WEBM-bestand)
Klik op het witte radertje rechtsboven.

En vervolgens krijg je een popup venster waar je via ‘Invoegen via URL’ de Yuotube link kunt ingeven.

En voorbeeldvan zo een url is: https://youtu.be/T-Oe01_J62c
Je kunt die url verkrijgen door op Youtube naar het filmje te gaan en daar op  “DELEN” onder het filmpje te drukken.

In het vervolgscherm kun je eenvoudig de link kopieëren.


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