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
Responsive, optimaliseren voor tablet en smartphone
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.
Tekst opmaak probleem?
Bij het kopieren en plakken van teksten uit MS Word of andere documenten, wordt de opmaak van MS Word in de achtergrond meegenomen.
Dat zorgt voor afwijkingen in de opmaak van de webpagina.
Simpel truukje om die opmaak te verwijderen is na het plakken de tekst te selecteren en Tx button te gebruiken. Dan wordt alle MS Word opmaak en code, verwijderd! 🙂
Responsive weergave
Je kunt DIVI pagina’s of blokken optimaliseren voor weergave op desktop, tablet of smartphone (responsive weergave).
Over het algemeen tonen de pagina’s automatisch goed op elk apparaat.
Voor de keren dat het niet helemaal gaat is er de volgende oplossing.
Methode 1: Gebruik de responsive knop
Opmerking: Als je met je muis over het vlak naast ‘corps’ gaat, komen nieuwe functies tevoorschijn. Het kleine icoon met beeldschermpje laat je naar de instellingen voor de verschillende apparaten gaan.
Klik nu op het apparaat, tablet of smartphone, waarvan je de weergave wil aanpassen.
De weergave van de pagina veranderd direct mee, waardoor je je aanpassingen kunt doen én controleren.
Bewaar dit en controleer het vervolgens ook op je smartphone, want de browsers willen ook nog wel eens hun eigen ding doen.
Methode 2: Maak een apart blok voor smartphone aan.
Als het met de eerste methode niet helemaal werkt kun je ook het bestaande blok dupliceren. Je hebt dan twee identieke blokken die je elk voor een apparaat kunt toekennen.
Het eerste blok optimaliseer je bijvoorbeeld voor Desktop en Tablet. En het tweede blok voor Smartphone.
Je kunt de zichtbaarheid per blok instellen, ga daarvoor in naar het menu ‘Geavanceerd’ en klik daar het apparaat aan waarop dit blok zichtbaar moet zijn.
Zo kun je de weergaves op de verschillende apparten bijna 100% optimaliseren.
Ook handig als je specifieke teksten, bijvoorbeeld kortere tekst, voor smartphone wil schrijven.
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 ‘Target‘ None 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: “gebruik de standaard Editor” je krijgt dan de klassieke editor waar je snel:
– Teksten en beelden in kunt plakken
– In de rechterkolom van de editor, een “Uitgelichte afbeelding kunt instellen”. Dat is de afbeelding die in het nieuwsberichten-overzicht bij het het bericht komt te staan.
Als je het nieuwsbericht klaar hebt, is het van belang dat je rechts op de pagina aangeeft in welke categorie en tag (zoekwoorden) het bericht hoort zodat deze op de juiste manier ingedeeld wordt.
Als deze er nog niet zijn: een nieuwe categorie en tag kun je direct daar dan 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.