Handleiding en stijlgids

BLOOM logo grijs - EN

In samenwerking met

anithe de haas websites

Inleiding

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

Kerngegevens

url: 

platform: WordPress 4.4.1

theme: Divi 2.5.9

domein en e-mail via: 

inloggen via: http://www.tobloom.nl/…

Screen Shot 2016-01-19 at 11.27.04

user:

password:

Hosting via:

ftp:


WordPress:

url: www.tobloom.nl/…

user: 

ww:

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. Stel dat er iets omvalt en je weet het niet te herstellen, dan kun je altijd nog je laatste versie terugzetten. Laat je informeren bij je hosting partij hoe je backups kunt inregelen. Handmatige download van de inhoud van pagina’s en berichten (niet van de database!) kun je doen met de WordPress export functie. Via Extra —> Exporteren in WordPress kun je een download maken van de huidige site. Vervolgens kun je dit bestand uploaden, ook weer via Extra —> Importeren.

Hoe werkt het thema?

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.

Screen Shot 2016-04-07 at 09.57.26

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

Berichten 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.

Gebruik van headers/kopjes

Dit stel je hier in

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

 

 

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

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 publicatie bericht

  1. Open bericht 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. Als je de video ter plekke in een raam wilt laten zien, kopieer je dit:Screen Shot 2016-02-04 at 10.58.07
  5. 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

Pagina’s aanmaken

Via zwarte balk: + Nieuw → bericht

of via Pagina’s → nieuwe pagina

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

Afbeeldingen

Let op: dit is specifiek voor deze website van Bloom! Afbeeldingen, foto’s, plaatjes, ze krijgen via de stylesheet allemaal automatisch afgeronde hoeken (8px).

Wil je dat niet, vul dan bij de instellingen van de afbeelding de css klasse img_no_border_radius in!!!

Referentie toevoegen

Van de referenties is een globaal item gemaakt, zodat je ze maar 1 keer hoeft aan te passen en dan veranderen ze over de hele website.

Stap 1: Ga naar de pagina de Divi bibliotheek

Screen Shot 2016-03-09 at 12.44.04

Stap 2: Kies voor Globaal en selecteer

Screen Shot 2016-03-09 at 12.44.33

Stap 3: Wijzig Referenties of Testimonials

Screen Shot 2016-03-09 at 12.44.49

Stap 4: Kopieer de laatste referentie (Rij klonen)

Screen Shot 2016-03-09 at 12.45.13

Stap 5: open de gekopieerde module

Screen Shot 2016-03-09 at 12.45.27

Stap 6: Pas de teksten en het logo aan en SLA OP

Screen Shot 2016-03-09 at 12.45.48 Screen Shot 2016-03-09 at 12.45.57

Stap 7: sla het globale item op

Screen Shot 2016-03-09 at 12.46.08

 

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

 

Footer aanpassen

1. Via Weergave -> Customizer -> Voettekst -> Layout kies je hoeveel kolommen je in de footer wilt.

2. Via Weergave → Widgets geef je aan wat je in de footer kolommens wilt hebben. Dit kan html tekst zijn, menu’s of andere widgets van de linkerzijde.

Social Media buttons

Social media buttons in de top regel en bodem footer toevoegen of veranderen doe je via Divi –> Thema Opties. Je komt dan in het ePanel. Blijf in het onderdeel Algemene Instellingen en scroll naar beneden. Je kunt kiezen voor Facebook, Twitter, Google+ en RSS. Enable wat je wilt tonen en vul de bijbehorende URLs in in de regels lager in het scherm.

Of je de buttons toont moet je weer ergens anders regelen, namelijk in de Systeemaanpasser van Thema, bij Koptekst en Navigatie – Koptekstelementen.

Logo aanpassen

Het logo plaatje staat in Divi –> Thema Opties. Je komt dan in het ePanel. Blijf in het onderdeel Algemene Instellingen en selecteer een plaatje uit je media bibliotheek. Hoe groot je het logo toont, hoever het verkleint of waar in de header je het plaatst moet je weer ergens anders regelen, namelijk in de Systeemaanpasser van Thema, bij Koptekst en Navigatie – Primaire menubalk en Vaste navigatieinstellingen.

Kleurgebruik

 

accentkleur: #ff961e

achtergrondkleuren: licht grijs #F3F2EF en wit #FFFFFF

headings: zwart #000000

body tekst: grijs #666666

Producten:

trends en behoeften: 7EC807

positionering: 6B6BD1

innovatie: 0099FF

communicatie: E818D7

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 worden afgebeeld in lettertype Abel.

De body tekst in Raleway.

Theme documentatie

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.

Toch nog een vraag?

Shares