Selecteer een pagina

Handleiding en stijlgids website Toonkunst Utrecht

Inleiding

In deze handleiding wordt beschreven hoe deze website is opgebouwd. Het is een werkdocument; houd de handleiding dus zelf up-to-date! Dan heb je er veel plezier van.

Kerngegevens

url: https://www.toonkunst-utrecht.nl/

platform: WordPress 4.7.3

theme: Divi 3.0.35

Hosting, domein en e-mail via: Antagonist

Locatie handleiding: pagina ‘Handleiding’ in WordPress. Opslaan als PRIVE

Voordat je gaat wijzigen

Het is verstandig om een backup te maken van je site voordat je grote wijzigingen gaat doen en voordat je updates van themes, plugins en WordPress gaat doen. Stel dat er iets omvalt en je weet het niet te herstellen, dan kun je altijd nog je laatste versie terugzetten. Bij Antagonist – direct admin (https://www.toonkunst-utrecht.nl:2223) kun je backups instellen.

Hoe werkt het thema?

Het thema van deze website is Divi, van Elegant Themes.

Via Systeemaanpasser van thema in de zwarte balk bovenin (als je bent ingelogd) kun je allerlei instellingen veranderen. Bijvoorbeeld de indeling van je home page, de kleuren van je letters, de layout van je header, enz.

Bovendien heeft Divi via dezelfde zwarte balk ook een Syteemaanpasser van module, waarmee je instellingen van modules kunt standaardiseren. Bijvoorbeeld de vormgeving van knoppen, balken, blogs, enz.

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). Aan de lay-out zie je welk onderdeel overeenkomt met het blok op de webpagina.

 Screen Shot 2016-04-07 at 10.08.32

Een live demo over alle Divi modules kun je vinden op http://www.elegantthemes.com/demo/?theme=Divi.

Uitgebreide documentatie vind je op http://www.elegantthemes.com/gallery/divi/documentation/

Voor andere Divi en WordPress vragen kun je terecht bij de blog van Elegant themes: http://www.elegantthemes.com/blog/

Heel nuttige info daar.

Berichten aanmaken

Berichten in WordPress kun je gebruiken voor artikelen, blogs. Ze wijken af van gewone pagina’s, omdat WordPress ze in een loop kan weergeven op een blogoverzicht. Dat wil zeggen dat er dan een overzicht van (samenvattingen) van de blogs op chronologische volgorde wordt gemaakt. Berichten hebben metadata: auteur, datum, categorie, aantal reacties. Berichten hebben standaard een andere WordPress pagina template. Met Divi kun je echter zelf bepalen of je wel of geen zijbalk wilt en je kunt de Divi Builder gebruiken voor blokken layout. Ook kun je met Divi module ‘blog’ zelf bepalen welke metadata je toont en hoeveel berichten tegelijk.

Nieuw bericht aanmaken via zwarte balk: + Nieuw → bericht of via Berichten → nieuw bericht

Screen Shot 2016-04-07 at 10.12.18 Screen Shot 2016-04-07 at 10.12.31

Altijd invullen en/of controleren:

  • Titel: voor SEO (=vindbaarheid in Google) handig als hier een zoekterm in zit, maar ga vooral voor een titel waar mensen nieuwsgierig van worden.
  • Permalink: dit is de url van je bericht. Verschijnt zodra je de titel hebt ingevuld en met de cursor in het tekstveld staat. Automatisch wordt de titel van je bericht overgenomen, maar voel je vrij om aan te passen. Ook dit is belangrijk voor SEO.
  • Categorie: vink Nieuws aan, als je wilt dat het bericht in je blogoverzicht komt. Kies daarnaast een andere categorie (optioneel).
  • Uitgelichte afbeelding: een blog zonder plaatje heeft niet zoveel smoel. Het plaatje dat je in uitgelichte afbeelding (featured image) zet, wordt getoond op het blogoverzicht.
  • Bij blokje Publiceren kun je instellen hoe en wanneer je de blog wilt publiceren.
  • Reacties wel/niet toestaan: standaard staat WordPress reacties toe op blogs. Wil je het uitzetten, ga dan naar het berichtenoverzicht → snel bewerken → Reacties toestaan uitzetten / Pings toestaan uitzetten
  • Je kan de blog sticky maken, dan blijft deze blog bovenaan staan en komt hij vast te staan op de homepage.

Pagina’s aanmaken

Via zwarte balk: + Nieuw → bericht

of via Pagina’s → nieuwe pagina

Voor deze website hoef je geen speciaal template te gebruiken.

Altijd invullen en/of controleren:

  • Titel: voor SEO (=vindbaarheid in Google) handig als hier een zoekterm in zit, maar ga vooral voor een titel waar mensen nieuwsgierig van worden.
  • Permalink: dit is de url van je pagina. Verschijnt zodra je de titel hebt ingevuld en met de cursor in het tekstveld staat. Automatisch wordt de titel van je pagina overgenomen, maar voel je vrij om aan te passen. Ook dit is belangrijk voor SEO.
  • Bij blokje Publiceren kun je instellen hoe en wanneer je de blog wilt publiceren.
  • Reacties wel/niet toestaan: standaard staat WordPress geen reacties toe op blogs. Wil je het aanzetten, ga dan naar het paginaoverzicht → snel bewerken → Reacties toestaan aanzetten

Ledenagina’s

Ledenpagina’s mogen niet toegankelijk zijn voor niet-leden. Daarom moet je op ledenpagina’s het hokje ‘Restrict Page’ aanvinken. De pagina zelf is wel openbaar. Privé pagina’s worden namelijk echt niet gevonden en dan krijg je ook geen inlogscherm.

Beschermde pdf bestanden

Ook sommige pdf bestanden moeten beschermd worden. Zelfs als je de link hebt, moet je ingelogd zijn om ze te kunnen inzien. Daarvoor is plugin ‘Downloads’ geïnstalleerd.

Bij Downloads –> Alle downloads vind je de beschermde bestanden. Daar kun je ook nieuwe bestanden toevoegen. Vergeet daar niet aan te vinken dat alleen ingelogde leden mogen downloaden.

Op pagina’s kun je vervolgens de downloadlinks toevoegen met deze knop:

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 Bijwerken om de gehele pagina op te slaan!Screen Shot 2016-01-19 at 11.41.36Screen Shot 2016-01-19 at 11.43.16

Gebruik van headers/kopjes

Zet eerst de volledige werkbalk aan.

Hier stel je body tekst en kopjes in per regel tekst. (De headers, lettertype, grootte enz. zijn ingesteld op hoofdniveau bij de Systeemaanpasser van het theme, zie thema).

Screen Shot 2016-04-07 at 10.17.24

  • Dit is alinea tekst
  • Dit is koptekst H1

  • Dit is koptekst H2

  • Dit is koptekst H3

  • Dit is koptekst H4

  • Dit is koptekst H5

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:Screen Shot 2016-02-04 at 11.33.29
  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.Screen Shot 2016-02-04 at 11.33.44
  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

Video toevoegen in pagina of bericht

Divi heeft een video module die je kunt gebruiken om een filmpje in een blok te laten zien. Maar je kunt video ook op de oldschool WordPress manier tussen tekst zetten.

Divi video module

  1. Bouw je pagina met de Divi Builder en kies het aantal kolommen. Voeg module in.
  2. Kies Video module 
  3. Vul de url van je video bestand in – meestal de link van Youtube of Vimeo. Desgewenst kun je een eigen afbeelding als startbeeld invullen (overlay). 

Youtube video tussen tekst (standaard WordPress)

  1. Open bericht of pagina of maak een nieuwe.
  2. Ga naar Youtube of Vimeo, op de plek waar de video staat: Screen Shot 2016-02-04 at 10.57.21
  3. Als je alleen de link wilt laten zien, kun je die hier vinden:Screen Shot 2016-02-04 at 10.57.58
  4. Deze link is bij de huidige WordPress versies genoeg om eenvoudigweg in je pagina te plakken. Op je pagina zal automatisch een raam verschijnen met het filmpje.
  5. Alternatieve methode: embedden. De embed-code vind je in hetzelfde scherm op Youtube.Screen Shot 2016-02-04 at 10.58.07
  6. De link of de code plak je vervolgens in je bericht in WordPress. Let op: dit moet in de Tekst modus gebeuren:Screen Shot 2016-02-04 at 11.09.24
  7. breedte en hoogte van het videoscherm doe je door de getallen bij width en height aan te passen.

Afbeeldingen

Als je een afbeelding in een bericht of pagina wilt plaatsen heb je daarvoor de link (locatie/url) nodig. Je kunt plaatjes laten zien die op je eigen webserver staan, maar ook op andersmans website, zolang de url maar klopt. Gebruikelijk binnen WordPress is dat je de Mediabiblioteek gebruikt om alle afbeeldingen te stallen (kunnen ook geluidsbestanden, pdf’s en video’s zijn).

Divi module Afbeelding

Met de Divi builder kun je kiezen hoe je afbeeldingen op je pagina plaatst. Met de module ‘Afbeelding’ kun je plaatjes gemakkelijk in een kolom plaatsen. De afbeelding neemt de ruimte in die die op dat moment ter beschikking heeft (afhankelijk van het scherm dus). Je kunt een linkje plaatsen achter de afbeelding en je kunt er een animatie aan koppelen (bijvoorbeeld inschuiven van rechts naar links).

 

Afbeeldingen plaatsen tussen tekst op de WordPress manier doe je alsvolgt.

  1. Ga met je cursor in de tekst staan waar je de afbeelding wilt plaatsen.
  2. Klik op Media toevoegen
  3. Selecteer of upload een afbeelding en stel in hoe groot die moet worden afgebeeld en voeg eventueel een externe link toe. 

 

Schaduwranden om blokken

In het oorspronkelijke ontwerp was de wens om schaduwranden om blokken te hebben. Soms is een blok gelijk aan een module, bijvoorbeeld een tekstblok. Maar soms wil je meerdere modules in 1 blok, bijvoorbeeld een knop en een tekstblok en een video. Dan is het niet gewenst om standaard een schaduwrand om alle modules te definieren. Daarom is het noodzakelijk om in elk blok: dat kan zijn een sectie of kolom/rij of een aparte module de schaduwrand aan te geven. Dat doe je bij tab “Aangepaste CSS”. Bij CSS-ID geef je aan: schaduw.

Menu’s aanmaken of aanpassen

Via Weergave → Menu’s of via de zwarte balk

Screen Shot 2016-04-07 at 10.30.33 Screen Shot 2016-04-07 at 10.30.49

Selecteer eerst het menu. Hoofdmenu heet ‘Main’.

Screen Shot 2016-04-07 at 10.33.14

Links kun je pagina’s, categorieën of links selecteren en toevoegen aan het menu.

Screen Shot 2016-04-07 at 10.35.26   Screen Shot 2016-04-07 at 10.36.26

Het nieuwe item verschijnt dan automatisch als laatste in de rij in je menu. Vervolgens sleep je het item naar de goede plaats.

Menu’s kun je plaatsen in menugebieden van je thema. Het hoofdmenu selecteer je via de Systeemaanpasser van thema, in de zwarte balk bovenin (als je bent ingelogd).

Screen Shot 2016-04-07 at 09.57.26

 

Screen Shot 2016-04-07 at 10.41.27 Screen Shot 2016-04-07 at 10.41.42

Of je plaatst een menu in widget gedeeltes via Weergave -> Widgets. Je sleept daar ‘Aangepast menu’ naar het gewenste widget gedeelte aan de rechterkant. Vervolgens selecteer je het gewenste menu.

Screen Shot 2016-04-07 at 10.45.04

 

Bovenkant foto header aanpassen

De foto aan de bovenkant van elke pagina is onderdeel van het menu.

Het logo is een link naar de home page en die kun je aanpassen via Weergave –> Menu, zie hierboven in deze handleiding.

De foto is de achtergrond van de menubalk en kun je aanpassen via Weergave –> Editor. Controleer of je in “style.css” zit van “Divi Child”. Hier kun je de url van de afbeelding wijzigen:

/*achtergrondfoto van de bovenkant balk hier wijzigen*/
#main-header {
background-image: url(https://www.toonkunst-utrecht.nl/wp-content/uploads/2017/02/MG_7691a.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position-y: center;
}

Vergeet niet op “Bestand bijwerken” te klikken om op te slaan.

Kleurgebruik

accentkleur: #F15200

achtergrondkleuren: #24428C

headings: blauw #24428C

body tekst: grijs #474747

Headers

 

Dit is header 1, voor pagina titels

Dit is header 2, voor hoofdkoppen op de pagina’s

Dit is header 3, voor subtitels en tweede niveau kopjes op de pagina’s

Dit is body tekst, voor artikelen

Lettertypes

Headers en body tekst staan in PT Sans.

Toch nog een vraag?