Selecteer een pagina

Handleiding website

 

Het Divi thema dat op je site staat, wordt veel gebruikt. Er is daarom veel informatie op het web te vinden over het gebruik van Divi, voorbeelden en tips & tricks. De officiële documentatie staat hier.

Divi opbouwfunctie

Alle pagina’s op je site zijn gemaakt met de Divi Builder. Dat is een onderdeel waarmee je pagina’s kunt opbouwen in blokken, (noodzakelijk voor lay-out, uitlijning, mobiele versies). Aan de lay-out zie je welk onderdeel overeenkomt met het blok op de webpagina.

 Screen Shot 2016-04-07 at 10.08.32

Voorbeeld. Je pagina ‘Persoonlijk’ ziet er aan de voorkant zo uit:

en aan de achterkant zo:

Blog opmaken

Als je een nieuwe blog wilt schrijven ga je naar Berichten –> Nieuw bericht.

  1. De cursor staat dan links bovenin. Daar vul je de titel van je blog in.
  2. Daarna kies je of je de Divi opbouwfunctie gaat gebruiken (voor blokken, mooie layout, knoppen e.d.) of dat je met de klassieke WordPress methode gaat schrijvern (ook niks mis mee). Voor de Divi opbouwfunctie klik je op de paarse knop. Voor de WordPress manier begin je te schrijven in het grote vak eronder.
  3. Na verloop van tijd verschijnt bovenin de permalink. Dat is de url van je toekomstige blog. Wil je die anders hebben, dan kun je die daar aanpassen.
  4.  
  5. Gebruik kopjes in je teksten om structuur aan te geven. Liever met headings dan met vetgedrukte tekst. Headings H1 en H2 worden beter opgepakt door Google namelijk.
  6.  
  7. Plaatjes toevoegen via Media toevoegen (of met een Afbeelding module in de Divi opbouwfunctie).
  8. Sla op als concept als je nog niet meteen wilt publiceren.
  9. Kies een uitgelichte afbeelding. Deze wordt getoond op het blog overzicht op de blog-pagina. Deze functie vind je rechts onder. 
  10. Vergeet niet op te slaan! Dat is publiceren of bijwerken.

 

Teksten aanpassen

  1. Log in. 
  2. Open een tweede tabblad in je browser en ga naar de pagina die je wilt aanpassen.
  3. Bovenin zie je een zwarte balk. Dat betekent dat je bent ingelogd. Klik op ‘Pagina bewerken’. Zo weet je zeker dat je de juiste pagina te pakken hebt.Screen Shot 2016-01-19 at 11.28.59
  4. Alle pagina’s zijn gemaakt met de Divi Builder. Dat is een onderdeel waarmee je pagina’s kunt opbouwen in blokken, (noodzakelijk voor lay-out, uitlijning, mobiele versies). In de lay-out zoek je het onderdeel dat je wilt aanpassen. Open het onderdeel door op de drie streepjes te klikken.Screen Shot 2016-01-19 at 11.30.09
  5. Binnen een onderdeel – ‘module’ in Divi termen – zie je alle opties. Alle modules waar tekst in verwerkt kan worden hebben een tekstblok onderin. Pas daar de teksten aan. Vergeet niet op te slaan in de de module, maar klik ook op Bijwerkenom de gehele pagina op te slaan!Screen Shot 2016-01-19 at 11.41.36Screen Shot 2016-01-19 at 11.43.16

Links toevoegen aan tekst of plaatjes

  1. Ga naar het bericht of de pagina waar je een link wilt toevoegen.
  2. Voeg tekst of plaatje in waar je een link (url) aan wilt koppelen.
  3. Selecteer de tekst en klik op het link symbool: 
  4. Bij URL plaats je de link. Vink ‘Open link in een nieuw tabblad’ als je niet wilt dat mensen je eigen pagina kwijt zijn. 
  5. Als je een plaatje wilt linken, klik dan op het plaatje en kies voor Bewerken:Screen Shot 2016-02-04 at 11.34.40
  6. Bij Weergave-Instellingen kies je voor ‘Aangepaste URL’ en vul je de link in.Screen Shot 2016-02-04 at 11.35.03

Afbeeldingen tussen tekst

Je kunt in tekstmodules afbeeldingen plaatsen zoals je gewend bent bij het schrijven van blogs. Via de knop “Media toevoegen”.


Afbeelding als module

Je kunt ook in een kolom de module ‘Afbeelding’ gebruiken om plaatjes toe te voegen. Standaard wordt dan de grootte van het plaatje zelf getoond op het scherm. Of, als de afbeelding groter is, dan dat er ruimte is, de maximale breedte van de kolom.

Standaard zal de afbeelding niet bewegen. Wil je dat wel, kijk dan bij:


Afbeelding als achtergrond

Op jouw site worden heel vaak foto’s gebruikt in blokken. Deze afbeeldingen zijn achtergrondfoto’s, op de achterste laag van de site. ( Je kunt je webpagina zien als een achtergrond (normaal wit) en daarop papiertjes met tekst.) Dit heb ik gedaan, omdat de foto dan altijd dekkend is over het blok, ongeacht hoe lang of breed het blok is. De maat van een blok is namelijk afhankelijk van de breedte van je scherm en hoe lang de teksten ernaast zijn.

De achtergrondafbeeldingen zitten niet in modules, maar in de rij-instelling. Hier het voorbeeld van je pagina ‘Persoonlijk’, de eerste rij. De achtergrondfoto zit in de meest rechtse, de derde, kolom.

Ga naar de instellingen van de rij:

Dan zie je dat er een achtergrondfoto zit bij de derde kolom:

En zo werkt het ook voor achtergrondkleuren, zie de eerste kolom:

Inleiding

De overzichtspagina’s Klanten en Portfolio zijn hetzelfde opgebouwd. Titel – plaatje – uitleg – items. Deze items heten in WordPress (Divi) ‘projecten’. Ik heb twee categorieën aangemaakt voor projecten: klanten en portfolio. Op de klanten-pagina worden alleen de klant-projecten getoond. Op de portfolio-pagina worden alleen de portfolio-projecten getoond.

Divi bibliotheek

Ik een template gemaakt voor de klanten- en portfolio-items. Deze template vind je in de Divi bibliotheek.

Je ziet dat de template niet ‘global’ is en dat betekent dat je deze lay-out op elke nieuwe pagina anders kunt invullen.

Lay-out ‘kriebel’ is wel global en dat betekent dat als je deze op meerdere plekken op de website gebruikt en je verandert er iets aan, dat de verandering overal zichtbaar is (global).

Project toevoegen

Als eerste vul je de titel in van je klant of portfolio-project.

Daarna klik je op Divi opbouwfunctie.

Dan ga je naar Opladen vanuit bibliotheek.

En kies je ‘template portfolio’. Zorg ervoor dat het vinkje bij ‘Vervang de bestaande content met de nieuwe layout’ aan staat.

Eenmaal geladen, dan zie je de template staan. Verander alle teksten en plaatjes naar wens.

Daarna vul je bij ‘Categorieën’ in of het een klant of een portfolio-item is.

En je voegt een uitgelichte afbeelding toe. Deze afbeelding zie je later terug op de overzichtspagina (klanten/portfolio).

Tot slot, vergeet niet op te slaan. Dat doe je door te publiceren (of bijwerken als het om een wijziging gaat).

Introductie

Divi heeft voor eindgebruikers ook een gebruiksvriendelijke tool om aan de voorkant van de website te werken. Je kunt er in principe alle onderdelen (secties, rijen en modules) wijzigen, verwijderen en toevoegen. Het verschil met ‘aan de achterkant’ werken is, dat je met de Visual Builder ziet wat je doet. Je ziet de webpagina live veranderen.

Visual builder aanzetten

Aanpassingen doen

Als je voor het eerst de visual builder gebruikt, komt er een popup met het voorstel om een rondleiding te doen. Ik raad je aan om die te volgen. Ook op de site van Elegant Themes staat goede documentatie.

Voorbeeld: tekstgrootte aanpassen

Visual builder uitzetten

Per onderdeel/module kun je allerlei settings aanpassen voor groot scherm, tablet en mobiel. Veel dingen gaan direct goed op mobiel, omdat het thema standaard rekening houdt met andere schermen. Maar het kan misgaan als er afgeweken wordt van de standaard. Dus als er settings zijn aangepast, kijk dan ook even hoe het er op mobiel uitziet.

Voorbeeld: witruimte in kolom aanpassen.

Vooraf:

Nu past de ‘r’ er niet op. Er kan best wat witruimte minder.

Ga naar de rij instellingen van dit element.

Bij Ontwerp – Afstand zie je dat er een buffer is ingevuld. Deze geldt standaard voor alle schermen. Maar nu willen we voor mobiele schermen iets anders. Klik op het mobieltje rechts.

dan zie je dit:

Klik op SMARTPHONE

buffers aanpassen en voila.