Handleiding Divi website met WPML als vertaalplugin

Met deze handleiding kun je zelf jouw door Buro RaDer gemaakte website up to date houden. Dit is een algemene handleiding, voor alle Buro RaDer websites die met het Divi thema gemaakt zijn en die voor de meertaligheid gebruikmaken van de WPML plugin.

Er kunnen in deze handleiding onderwerpen behandeld worden die niet van toepassing zijn op jouw website. Misschien heb jij wel geen testimonials op jouw website. Maar omdat testimonials op veel door ons gemaakte websites voorkomen, hebben we dit in deze handleiding opgenomen.

Voor zaken die echt heel specifiek zijn voor jouw website, zul je een link ontvangen naar een speciale, op jouw website van toepassing zijnde pagina.

Mocht er iets onduidelijk zijn, of je mist iets, laat dit weten! Dan leg ik het uit of pas ik de handleiding aan.

Over WordPress

Jouw website is gebouwd met WordPress. WordPress is het meest gebruikte content management systeem en geschikt voor een grote variëteit aan websites.

Themas

De vormgeving van je website wordt bepaald door het gebruikte thema. Voor jouw website is dat Divi van Elegant Themes. Dit thema is niet alleen een thema, maar ook een pagebuilder. Je kunt online een pagina aanmaken en vormgeven. Op de website van Elegant Themes kun je heel veel tutorials vinden.

Plugins

Plugins zijn eenvoudig gezegd, aan de website toegevoegde functionaliteiten. Behalve dat je ze up to date moet houden, heb je hier verder niets mee van doen. Wanneer er een update beschikbaar is, zie je dat niet alleen in het dashboard bij Updates, maar ook in het plugin overzicht.

Updates

Het is belangrijk om je website up to date te houden. Dit is iets wat je eenvoudig zelf kunt doen. Kleine WordPress updates worden vaak automatisch uitgevoerd. Voor grotere updates, zoals updates naar een echt nieuwe versie van WordPress wordt goedkeuring gevraagd. Dat is maar goed ook, want niet alle plugins en thema’s blijken gelijk al goed te functioneren met een nieuwe versie van WordPress. Wij raden dan ook aan om altijd even te wachten met het updaten naar een nieuwe versie van WordPress.

Het is ook belangrijk om je thema’s en plugins up to date te houden. Updates zorgen er voor dat je website veilig en stabiel blijft.

Voordat je updates uitvoert, maak je altijd eerst even handmatig een back-up. Ga hier voor of via het topmenu of via Instellingen in het dashboard naar UpdraftPlus Backups en klik op Nu een back-up maken. Na iedere back-up (en dus ook na iedere back-up van een plugin) check je altijd of de website nog goed functioneert. Mocht dat niet zo zijn dan kun je via één druk op de knop in UpdraftPlus Backups de website terugzetten na de opgeslagen versie.

Mocht je dit nu allemaal eng vinden; je kunt het via een onderhoudsabonnement ook aan ons overlaten.

Inloggen

Ga naar: https://typehierjouwdomein.com/verbinden/ en log in. Na het inloggen kom je in het Dashboard. Het dashboard is als het ware de achterkant van de website. Hier maak je blogberichten, hou je je website up te date en kun je functionaliteiten toevoegen.

Je kunt wanneer je ingelogd bent ook gewoon de website bekijken: wanneer je met je muis linksboven over het huisjes-icoon en websitenaam gaat, verschijnt er Site bekijken. Klik hierop en je ziet de website. Het voordeel van op deze manier je website bekijken, is dat jouw bezoek niet wordt meegenomen in de statistieken van Google Analytics.

Website bekijken wanneer je ingelogd bent

Gebruikers

Hier zie je de personen die toegang tot de website hebben en wat hun rechten zijn. Bij Je profiel kun je je wachtwoord aanpassen.

Gereedschap

Hier is voor jou alleen de Niet werkende links tab van belang. Wanneer er een interne of externe link niet werkt (dit kan ook tijdelijk zijn), wordt dat hier aangegeven en kun je hier aangegeven dat de link wel werkt of de link verbeteren.

Instellingen

In principe hoef je hier nooit te zijn.

SEO

Dit is het menu-onderdeel voor de zoekmachine optimalisatie plugin Yoast of Rank Math. Ook hier hoef je in principe nooit te zijn. Heel soms is er een mededeling, dit wordt aangegeven in een rood rondje in het menu. 

Cache

Een opmerking vooraf: mocht een wijziging niet direct zichtbaar zijn; leeg de cache (de in het geheugen opgeslagen versie van een pagina). Dit kun je doen door in het topmenu te klikken op Alle cache wissen.

Verwijder cache - Clear cache

SEO optimalisatie

Yoast en RankMath zijn hulpmiddelen voor SEO-optimalisatie en kom je bij blogberichten en op pagina’s tegen. De plugins werken hetzelfde, en in overleg met jou hebben we er één gekozen. In het SEO deel vul je de zoekterm in welke je voor de pagina / het bericht had bedacht. De plugin geeft je vervolgens feedback of je het goed hebt gedaan, waar je eventueel de zoekterm ook nog kan invullen etc.

In deze plugin voeg je ook de meta-omschrijving van de pagina toe. Waarom je dat doet staat in mijn blog Hoe een goede meta omschrijving je klanten kan opleveren.

Media

Media, zoals afbeeldingen, maar ook video’s en PDF-bestanden, worden in de Bibliotheek opgeslagen. De bibliotheek heeft 2 weergavemogelijkheden: tegels en lijst. De lijstweergave geeft meer informatie.

Keuze media bibliotheek weergave

Afbeeldingen toevoegen

Voordat je afbeeldingen toevoegt, zul je ze moeten optimaliseren voor je website. Eerst breng je de foto’s terug naar het formaat waarop je ze getoond wilt hebben en vervolgens optimaliseer je ze via TinyPNG. Meer informatie in mijn blog Over afbeeldingen op WordPress websites.

Op de website van Elegant Themes vind je goede informatie hoe groot afbeeldingen moeten zijn.

Ga bij Media naar Nieuw bestand (kan ook vanuit de mediabibliotheek) en selecteer het bestand op je computer. Na het uploaden wijzig je de titel (hier wordt automatisch de bestandsnaam – dus met streepjes – geplaatst, wat niet fijn leest) en vul je de Alt-tekst in. Sla op.

Afbeeldingen vervangen

Normaalgesproken moet je het nieuwe bestand uploaden, hernoemen en opnieuw op de pagina of in de blogpost plaatsen. Nogal bewerkelijk dus. Met de Enable Media Replace plugin die op de website is geïnstalleerd is dit een stuk eenvoudiger. Je kunt wanneer je de plugin activeert, afbeeldingen en andere mediabestanden gewoon vervangen. Je hoeft het bestand dus niet meer op de pagina of in de blogpost aan te passen!

Wanneer je naar de mediabibliotheek gaat, zie je in het menu onder de foto’s Vervang media staan. Klik hierop.

Afbeelding vervangen activeren

Nadat je op Vervang media hebt geklikt verschijnt er een scherm waar je de nieuwe foto kunt uploaden. Upload de nieuwe foto en vink Vervang het bestand, gebruik de nieuwe naam en werk alle links bij aan. Klik op bijwerken. De foto is nu automatisch vervangen overal waar de foto op de website gebruikt is. Bij meertalige websites zul je dit wel voor alle taalversies moeten doen.

Afbeelding vervangen

Heb je het idee dat je na vervangen nog steeds de oude versie ziet? Dit kan komen omdat de oude foto in je cache (geheugen) zit. Ververs de pagina door een aantal keren op F5 te klikken.

Afmeting foto’s aanpassen en uitsnedes maken in IrfanView

Ik maak zelf gebruik van het gratis programma IrfanView om de afmetingen van foto’s aan te passen en om uitsnedes te maken. Het programma is razendsnel en je kunt er ook batch-bewerkingen in uitvoeren.

 

Afmeting aanpassen

  • Open een afbeelding via Irfanview. Je kunt IrfanView instellen als standaardprogramma om foto’s in te openen.
  • CTRL-R
  • Geef de nieuwe hoogte of breedte aan.
    Let erop dat Preserve aspect-ratio (propotional) aangevinkt staat.
  • OK of enter
  • Afmeting goed? CTRL-Y en je uitsnede is klaar.
    Opslaan, door TinyPNG halen uploaden.
Afmeting aanpassen in irfanview

Uitsnede maken

  • Open een foto met IrfanView.
  • CTRL-R
  • Geef de nieuwe hoogte of breedte aan.
    Wanneer de foto niet deze verhoudingen zal behouden moet je er voor zorgen dat je wanneer je of de hoogte of de breedte instelt, je van degene die afwijkt, pixels – ofwel een deel van de foto – kunt verwijderen.
    Let erop dat Preserve aspect-ratio (propotional) aangevinkt staat.
  • OK of enter
  • Je kunt door met je muis op de foto te klikken en ingeklikt te houden een kader trekken. Indien de hoogte goed is, zorg je ervoor dat de kaderlijntjes helemaal onderaan en bovenaan komen te staan.
  • Je kan de kaderlijntjes verschuiven door de muisknop los te laten (je ziet dan het kader) en vervolgens met je muis naar de aan te passen lijn te gaan. Wanneer je muis op die lijn staat, verschijnt er een omhoog/omlaagpijl icoontje. Wanneer je dan klikt, kun je die lijn verslepen.
    Boven in de foto zie je dan ook de pixels veranderen.
  • Pas op die manier ook de breedte aan, totdat je bovenin de juiste afmeting ziet verschijnen.
  • Afmeting goed? CTRL-Y en je uitsnede is klaar.
  • Opslaan, door TinyPNG halen uploaden.

Het Divi thema

Zoals je al kon lezen is Divi niet alleen een thema, maar ook een Visual Page Builder. De webpagina’s worden daardoor op de pagina’s zelf opgebouwd en aangepast. Divi is een betaald thema, maar met mijn levenslange licentie kost deze je niets.

Divi heeft onderaan in het dashboard zijn eigen menu. Hier hoef je in principe nooit te zijn. Mocht je meer wil weten over Divi, kijk dan op de website van Elegant themes.

Blokkenstructuur van Divi

Om pagina’s te maken voeg je eigenlijk blokken toe. Er zijn 3 types:

  • Secties – de grootste en meest eenvoudige blokken, welke in blauw zijn vormgegeven. Secties bevatten een verzameling van andere bloktypes. Er zijn 3 types:
    • Regular: bevatten kolommen
    • Specialty: hiermee kun je geavanceerde sidebar lay-outs maken
    • Full width: voor vormgeving die de gehele breedte van het scherm behoeft
  • Rows – oftewel kolommen, bevinden zich in de secties en zijn groen vormgegeven. Een sectie kan een onbeperkt aantal kolommen bevatten. Een row bevat op zijn beurt weer modules.
  • Modules – bevinden zich in de kolommen en zijn zwart vormgegeven. Hierin bevindt zich de daadwerkelijke inhoud van je website. Divi heeft meer dan 40 verschillende soorten modules om zo verschillende functionaliteiten toe te voegen aan websites. Zo gebruik je voor het toevoegen tekst de tekstmodule, maar er zijn bijvoorbeeld ook modules om losse afbeeldingen, foto albums, toggles en call-to-action knoppen toe te voegen. Op de moduledocumentatiepagina van Elgegant Themes vind je informatie over alle modules.
Divi blokkenstructuur

De Divi bibliotheek

Bepaalde zaken komen op meerdere plekken op een website terug. Veel websites hebben onderaan elke pagina enkele blokken staan met bijvoorbeeld contactgegevens, een call-to-action om te reserveren of een verwijzing naar het blok. Na het maken van zo’n blok kun je deze als lay-out aan de bibliotheek toevoegen en vervolgens hergebruiken. Alle 3 de verschillende blokken (sectie, row en module) kun je toevoegen aan de bibliotheek.

Wanneer je bij het maken van een bibliotheekitem Global element aanvinkt, zal die element niet meer blauw (sectie), groen (row) of zwart (module) zijn, maar gifgroen kleuren. Wanneer je zo’n global element aanpast (die kan via de biblitheek, maar ook op de pagina waar het element gebruikt is) wordt dit element overal waar het gebruikt wordt ook aangepast.

Voorbeeld Divi bibliotheek

Lay-out vanuit Divi bibliotheek toevoegen

Zoals in bovenstaande afbeelding te zien is, kan een lay-out van een sectie, van een rij en van een module opgeslagen worden. Wanneer je een lay-out uit de bibliotheek wilt toevoegen, zul je goed moeten weten of die lay-out een sectie, een rij of een module is.

Wanneer je dit weet klik je in de Divi Builder of op het blauwe + icoontje (voor een sectie), of op het groene + icoontje (voor een rij) of op het zwarte + icoontje (voor een module).

Nadat je op zo’n icoon klikt opent zich een pop-up met 2 tabs: Nieuwe sectie/rij/module en Toevoegen vanuit bibliotheek. Klik op de laatste en de kunt een opgeslagen lay-out selecteren en toevoegen. Global items zijn ook hier duidelijk herkenbaar aan de gifgroene kleur.

Toevoeg icoontjes
Toevoegen vanuit bibliotheek

Divi Global Presets

Een andere handige functionaliteit om een bepaalde styling te hergebruiken is Divi Global Presets.

Een voorbeeld: je website maakt gebruik van knoppen in 2 verschillende uitvoeringen. Je kunt die uitvoeringen opslaan via de Global Presets functionaliteit. Wanneer je vervolgens nog een knop wilt toevoegen in een van die twee uitvoeringen, dan kun je in de knop module eenvoudig die uitvoering selecteren. Meer informatie over vind je op de Divi Global Presets pagina op de Elegant Themes website.

Pagina’s

Pagina’s zijn de webpagina’s. Je kunt dit overzicht op taal filteren. Dit doe je in de balk bovenaan de pagina door in plaats van Toon alle talen één van de talen van je website te kiezen.

Taalkeuze pagina-overzicht

Je kun de pagina’s ook in publicatievolgorde zetten door op Datum te klikken bovenaan het paginaoverzicht.

Wanneer je de meta-omschrijving wilt aanpassen klik je onder paginanaam op Bewerken en ga je naar het SEO-gedeelte van de pagina. Maar wanneer je de inhoud van een pagina wilt aanpassen zul je dat in de Visual Page Builder moeten doen. De snelste manier om daar te komen is door via het menu bovenaan de pagina naar Site bekijken te gaan en vervolgens naar de pagina te gaan die je wilt bewerken. Daar aangekomen klik je op Visual Builder inschakelen.

Teksten aanpassen

Open zoals hierboven beschreven de pagina in de Visual Page Builder. Wanneer je met je muis over de pagina gaat, zie je dat er gekleurde kaders ontstaan. Teksten pas je over het algemeen binnen zwarte kaders aan. Klik op het tekstdeel wat je wilt aanpassen en er verschijnt een balkje:

Tekstmodule openen

Door op het tandwieltje te klikken verschijnt de teksteditor. Door op het paarse icoontje bovenaan te klikken vergroot je hem.

Geopende tekstmodule

Je kunt de tekst nu aanpassen. Ben je klaar met dit deel, klik op het groene vinkje. Ben je met het aanpassen van de hele pagina klaar, klik dan onderaan de pagina op de paarse cirkel met 3 puntjes en vervolgens rechtsonderaan op Opslaan.

Overigens kun je door dubbel te klikken op een tekst ook direct teksten op de website aanpassen, maar ik vind dit persoonlijk minder fijn werken. Je slaat deze wijzigingen op dezelfde manier op.

Let op: ook hier geldt, wanneer je teksten vanuit bijvoorbeeld Word kopieert, doe dit via CTRL-Shift-v (plakken zonder opmaak). Op die manier blijft de juiste weergave (lettertype en grootte) behouden.

Tekstlink toevoegen

Je kunt een tekstlink toevoegen door op de link icoon in de tekstmodule te klikken. En vervolgens de informatie in de pop-up in te vullen.

Tekstlink toevoegen in Divi tekstmodule
Invulvelden tekstlink toevoegen in Divi tekstmodule

Ankerlink toevoegen

In mijn blog Het hoe en waarom van ankerlinks kun je lezen waarom je ankerlinks zou kunnen gebruiken. Het toevoegen van ankerlinks is eenvoudig. Geef de sectie waar je naartoe wilt verwijzen een id. En vervolgens voeg je die id toe aan de URL die je als link gaat ingeven, door achter de sluit / van die url een # en de id toe toe te voegen. Een en ander wordt met de 2 onderstaande afbeeldingen verduidelijkt.

Ankerlink ingeven in Divi sectie
Ankerlink ingeven in Divi tekst

Foto’s vervangen

Foto’s zijn over het algemeen toegevoegd in een afbeeldingenmodule (enkele foto), een gallerijmodule (fotoalbum) of een blurbmodule (foto met daaronder tekst en eventueel een link of een knop). Soms is de foto toegevoegd als achtergrond van een ander soort module, een row/rij of een sectie. Het vervangen van foto’s doe je door op het radertje van de module te klikken. Je ziet dan de foto(‘s) verschijnen. Door op de foto te klikken kun je hem vervangen. In de gallerij kun je de foto’s via drag en drop van volgorde doen veranderen.

Afbeelding vervangen in de afbeeldingmodule
Afbeelding vervangen in de gallerijmodule

Je kunt bij de instellingen er voor kiezen de afbeelding klikbaar te maken door bij Link de Openen in Lightbox optie te activeren.

Klikbaar maken afbeelding

Nieuwe pagina maken door bestaande pagina te kopiëren

Het kopiëren van een bestaande pagina is de meest eenvoudige manier om een pagina aan je website toe te voegen. Dit omdat je de pagina dan gelijk de juiste vormgeving heeft.

Ga in het dashboard bij Pagina’s naar Alle pagina’s en klik op Dupliceer (hiervoor moet de Yoast Duplicate Post plugin geactiveerd zijn). De gedupliceerde pagina heeft dezelfde naam (en taalversie) als de oorspronkelijke pagina, maar er staat – Concept achter. Klik in het pagina overzicht onder deze nieuwe pagina op Bewerken.

Je kunt nu de bovenaan de pagina titel aanpassen en direct hieronder de permalink. Vergeet niet om in het Yoast of RankMath gedeelte de zoekterm en de meta omschrijving aan te passen. Klik op updaten.

Vervolgens kun je in de Visual builder de inhoud van de pagina aanpassen en opslaan.

Berichten – oftewel blogs

Berichten is het bloggedeelte van de website. In tegenstelling tot webpagina’s, worden blogberichten niet met de Divi web builder gemaakt. Blogberichten maak je eigenlijk net zo als Word-documenten. Klik hier dan ook nooit op De Divi opbouwfunctie gebruiken! De vormgeving van de blogberichten is gedaan via de Divi Themabouwer en valt buiten de scope van deze handleiding.

Wanneer je in het tekstgedeelte bijvoorbeeld Kopje 2 aangeeft, komt het automatisch in de juiste vormgeving te staan. Hier zijn namelijk via de Divi Themabouwer lay-outs voor aangemaakt. Wijzigingen hierin aanbrengen vergt voorzichtigheid! Zo wordt de titel van je blog automatisch getoond (= zogenaamde dynamic content) en hier zul je dus van af moeten blijven. Mocht je meer willen weten over de vormgeving van blogs via de Divi Themabouwer dan kun je onderstaande video bekijken. 

Tussenkopjes selecteren

Er is overigens een aparte template gemaakt voor de verschillende taalversies (welke worden toegepast door het ingeven van de juiste tag – bijvoorbeeld: NLENFRITPT, enzovoorts).

Tip: zorg voordat je je tekst gaat toevoegen er eerst voor dat je foto’s geoptimaliseerd zijn en aan de website zijn toegevoegd. Hoe je dat doet, lees je verderop in deze handleiding.

Een blog maken

Klik op Berichten => Nieuw bericht, vul de titel van je blog in. Dit wordt automatisch de H1 van je blog en is dus belangrijk voor SEO. Type in het grote lege witte veld de tekst van je blog. De hoofdtaal van de website is Nederlands, begin dan ook altijd met het invoeren van de Nederlandse inhoud.

Wanneer je eerst in Word werkt, kopieer de tekst dan niet via CTRL-V, maar via CTRL-Shift-V. Dat is namelijk plakken zonder opmaak.

Je blog wordt beter leesbaar met tussenkopjes. Ook kun je mooi je zoekterm kwijt in zo’n tussenkopje. Iets wat Google zeer kan waarderen. Je kunt een tussenkopje ingeven door met je muis op het driehoekje naar paragraaf linksboven het tekst blok te klikken.

De kopjes worden automatisch goed vormgegeven. Let wel op dat je Koptekst 1 / Heading 1 niet gebruikt. Deze gebruik je maar 1 keer op een webpagina en deze wordt al gebruikt om de blogtitel vorm te geven.

Link icoonJe kunt in je blogs links toevoegen. Selecteer in de tekst het woord/de woorden die een link moeten krijgen en klik of op het linkicoontje in het tekstverwerkermenu of doe CTRL-K.

In de pop-up vul je de link in. Wanneer het om een interne link gaat (link naar andere pagina binnen eigen website) dan klik je vervolgens op het blauwe pijltje. Wanneer het om een externe link gaat die je in een nieuw scherm wilt openen, klik je op het zwarte radertje en vinkt Open link in een nieuw tabblad aan, alvorens de link op te slaan.

Link toevoegen

Afbeelding toevoegen

Je voegt een afbeelding toe door op Media toevoegen te klikken linksboven het tekstblok.

De afbeeldingen op de blogpagina’s kun je klikbaar maken om groter te worden weergegeven. Dit doe je door op de in het blog op de afbeelding te klikken en vervolgens op het potloodje te klikken:

Blogafbeelding bewerken

Vervolgens selecteer je bij Uitlijnen Geen, bij Link naar Mediabestand  en bij afmeting Volledige grootte.

Instellingen afbeelding bewerken

Categorieën

Weet je nog niet wat categorieën en tags zijn? Lees dan mijn blog Categorieën en tags in WordPress.

Je kunt je blogs indelen in categorieën. In de rechterkolom geef je dit aan. Hier kun je ook categorieën toevoegen, maar dat kan ook in het dashboard: Berichten => Categorieën.

Tags

Om er voor te zorgen dat blogartikelen de juiste vormgeving en de juiste taalversie van de footer krijgen, zul je de blogs een taal tag moeten geven: EN voor Engelstalige blogs, IT voor Italiaanse blogs, NL voor Nederlandstalige blogs, PT voor Portugese blogs en FR voor Franstalige blogs.

Uitgelichte afbeelding

Dit is de afbeelding die boven aan je blogpost verschijnt en die ook te zien is in het blogoverzicht. Klik op Uitgelichte afbeelding selecteren om de afbeelding toe te voegen. De template zorgt voor een goede uitsnede van deze uitgelichte afbeelding. Je kunt dus een foto uit het blog hiervoor hergebruiken.

Een blog bewerken

Een blogbericht bewerk je dus nooit  in Divi. Om een blogbericht te bewerken kun je

  1. naar het blogbericht gaan en in de zwarte balk bovenaan de pagina klikken op Pagina bewerken of
  2. naar de lijst met Alle berichten gaan en met je muis over het te bewerken blogbericht gaan, zodat je ook hier op Bewerken kunt klikken

Inhoudsopgave toevoegen - plugin instellen

Voor het toevoegen van inhoudsopgave op een pagina (zoals bovenaan deze pagina) of in een blog, wordt de Easy Table of Contents plugin gebruikt.

Bij de instellingen zal naar gelang waar je inhoudsopgave zou willen toevoegen, berichten en of pagina's aangevinkt moeten worden.

Let op: vink dit aan bij Ondersteuning inschakelen en niet bij Automatisch invoegen, tenzij je op al je pagina's of in al je berichten een inhoudsopgave wilt hebben.

Kies bij positie Boven.

De overigens instellingen kun je laten staan.

Inhoudsopgave toevoegen aan pagina en blog instellen
Inhoudsopgave toevoegen positie kiezen

Inhoudsopgave toevoegen - weergeven op een pagina of in een blog

Door het juist instellen van de plugin is er aan je pagina's en/of je blogs een veld toegevoegd, waar je kan aangeven dat je op die pagina of in dat blog een inhoudsopgave wilt tonen. Dit veld bevindt zich niet in de Divi pagebuilder, maar in de bewerk-versie van de pagina of de blog. Daar waar je bijvoorbeeld ook Yoast vindt.

Hier kun je aangeven welke tussenkopjes (h2, h3, enzovoort) je in de inhoudsopgave wilt opnemen, je kopjes een andere tekst wilt geven in de inhoudsopgave dan deze daadwerkelijk is en welke kopjes je eventueel wilt uitsluiten. Zie hiervoor ook onderstaande afbeelding.

Inhoudsopgave veld op pagina of bericht

Vertalen

Vertalen van een pagina’s en berichten (blogpost)

Wanneer je een pagina of een bericht (= blogpost) ook in een andere taal wilt publiceren ga je in het dashboard bij Pagina’s naar Alle pagina’s of bij Berichten naar Alle berichten. Klik op het +-teken om de pagina of het bericht in een andere taal toe te voegen

 

Taal selecteren

Wanneer je op het plusteken klikt, opent zich een nieuw scherm; de Advanced Translation Editor. Dit ziet er zo uit:

WPML Advanced Translation Editor

Je kunt nu de vertaling in het vakje Translation toevoegen. Vergeet niet om deze te bevestigen door op het groene vinkje te klikken.

De juiste vormgeving wordt automatisch meegenomen. Maar let op, de Translation Manager splitst paragrafen soms ten onrechte op. Je kunt deze samenvoegen door op het groene rondje met linkteken tussen de 2 kolommen te klikken.

Wanneer alle teksten vertaald zijn en je onderaan de pagina 100% complete hebt staan, klik je op de groene Complete knop. Na een paar minuten is de pagina ook in de vertaalde versie online.

Tip: Om een pagina eenvoudig terug te vinden kun je op in het pagina overzicht op Datum klikken, de nieuwste pagina verschijnt dan boven aan. Mocht je niet alle pagina’s zien, kijk dan of je wel alle talen hebt geselecteerd. Deze functie vind je in de bovenste balk van het WordPress dashboard. Zie onderstaande afbeelding.

Selectie van talen in het WordPress dashboard

Menu vertalen

Ga in Weergave naar Menu’s. Rechtsboven in het menustructuur kun je vervolgens op het plusteken klikken bij de taal welke je aan het menu wilt toevoegen. Je kunt vervolgens de pagina’s aan dit nieuwe menu toevoegen.

WPML handmatig menu toevoegen

Via drag & drop kun je menu items op hun juiste plek in het menu plaatsen. Door op het driehoekje rechts te klikken kun je bij Navigatielabel de naam van de link die in het menu verschijnt aanpassen. Zo was in het voorbeeld de tekst oorspronkelijk Onderhoudsabonnement website, maar omdat dit nogal lang is, veranderde ik dit in het menu in Onderhoud.

Pagina toevoegen aan menu
Menu item tekst aanpassen

Vertalen van categorieën en tags

Ga hiervoor in het dashboard naar WPML en vervolgens naar Taxonomievertaling. Selecteer vervolgens Categorie of Tag. Klik vervolgens op het plusteken achter de vertalen categorie of tag om deze te vertalen.

WPML taxonomievertaling van categorieën en tags

Afbeeldingen vertalen inclusief afwijkende afbeelding

Over het algemeen vertaal je de alt- en titelteksten tegelijkertijd met het vertalen van een pagina. Wanneer dit om de een of andere reden niet gebeurt, kun je via het WPML dashboard naar Media translation gaan. Daar kun je afbeelding zoeken en vervolgens via het plusteken achter de afbeelding de vertaling toevoegen

WPML afbeelding vertalen

Afwijkende afbeelding
Maar het kan natuurlijk ook zo zijn, dat je per taalversie een andere afbeelding wilt plaatsen. Ook dit kun je in het Media translation gedeelte doen. Wanneer je namelijk op het plusteken klikt opent zich een popup, zoals hiernaast te zien is. Wanneer je over de vertalen afbeelding hovert, verschijnt een uploadicoon. Klik en zoek op je pc naar de foto die je wilt plaatsen.

WPML afbeelding taalversie wijzigen

Testimonials

Testimonials kunnen op 2 manieren worden toegevoegd: handmatig (bijvoorbeeld overgenomen uit een papieren gastenboek) of door het versturen van link naar gasten.

Handmatig toevoegen van een testimonial

Ga in het dashboard naar Testimonials => Add new. Voeg toe:

  • Bovenaan: titel. Een pakkende tekst.
  • Het grote tekstvlak: de testimonial.
  • Client details: de naam van de gast(en).

In de rechterkolom kun je door bij Onmiddellijk publiceren op Bewerken te klikken, de datum aanpassen. Testimonials worden getoond in volgorde van meest naar minst recent.

Bij het SEO blok en bij Samenvatting hoeft niets ingevuld te worden.

Testimonials weergeven

Je voegt testimonials toe aan een pagina door een view aan te maken en door vervolgens de shortcode van de view als code aan een tekstmodule or direct als code in een codemodule te plaatsen. Ga hiervoor naar Testimonials => Views => Add nieuw.

Bij Display verschillende weergavemogelijkheden:

  • 1 of meer testimonials – door het toekennen van een categorie kun je bijvoorbeeld alle testimonials uit die categorie tonen, maar je kunt hier ook kiezen voor een bepaald aantal testimonials. Maar je kunt ook alle testimonials laten weergeven.
  • een specifieke testimonial – selectie door middel van een dropdown menu

Je kunt ook de volgorde kiezen: de oudste of juist de nieuwste eerst.

Ook is er de mogelijkheid om te kiezen welke informatie je wilt laten zien, of je een lees meer link wilt die bezoekers naar de pagina met al jouw testimonials kan leiden. Bij Style kun je de vormgeving bepalen en by lay-out de manier waarop de testimonials geplaatst worden (tegels, blokken onder elkaar. etc.). Je kunt hier ook de achtergrond kleur en de tekstkleur aanpassen.

Je kunt overigens een slideshow view maken. Ook hier kun je met categorieën werken en je eigen vormgeving bepalen.

Wanneer je de testimonial opslaat, zie een shortcode verschijnen. Deze staat nu ook in het overzicht van de views. Deze shortcode zul je als code moeten toevoegen op de plek waar je de testimonial wilt plaatsen. Je doet dit dus hetzij als code in een tekstmodule hetzij direct in een codemodule.

Link voor testimonial naar gasten sturen

Via een link kun je gasten uitnodigen een testimonial te schrijven. Wanneer een gast dit doet, ontvang je een berichtje en kun je aangeven of de testimonial gepubliceerd mag worden.

Ik maakte hiervoor een pagina aan die je in het pagina overzicht kunt terugvinden. Wanneer je onder deze pagina op Bekijken klikt, opent de pagina zich en kun je de URL kopiëren. Je kunt vervolgens jouw gast in een mailtje wijzen op deze URL om hem een testimonial te laten schrijven. Je krijgt een mailtje wanneer er een nieuwe testimonial is ingezonden. Teven zie je dit in het dashboard. Je kunt vervolgens de testimonial goedkeuren voor publicatie.

Formulieren met Caldera Forms

Voor het toevoegen van formulieren wordt gebruik gemaakt van de Caldera Forms plugin, terug te vinden in het dashboard.

Hier vind je een overzicht van de formulieren die op de website staan. Door met je muis over een formulier te gaan verschijnt een submenu met onder andere Bewerken. Klik daarop wanneer je iets in een formulier wilt wijzigen. De wijziging wordt na opslaan automatisch op de webpagina doorgevoerd.

Maar je kunt hier ook formulieren klonen, om een formulier te kopiëren en vervolgens aan te passen om elders op de website te gebruiken. Of om een andere taalversie van het formulier te maken.

Je plaatst een formulier door middel van een shortcode. Door in het overzicht op Shortcode opvragen te klikken, verschijnt de shortcode en kun je deze kopiëren. Vervolgens kun je hem als code toevoegen daar waar jij dit formulier op jouw website wilt tonen. Dat toevoegen kan in een codemodule en in het tekstgedeelte van een tekstmodule. 

Caldera Forms overzicht
Caldera formulier toevoegen in tekstmodule
Caldera formulier toevoegen in tekstmodule