Handleiding Divi website

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 reviews op jouw website. Maar omdat reviews 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.

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 en Instellingen

In principe hoef je hier nooit te zijn.

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.

Verderop in deze handleiding kun je meer lezen over de Rank Math SEO plugin.

Media

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.

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.

Afbeeldingsformaten

Klikbare foto’s – dus foto’s die je schermvullend wil laten zien wanneer iemand erop klikt – moeten maximaal 1920 pixels breed of 1200 pixels hoog zijn. Blijf binnen die waardes.

Niet-klikbare foto’s wil je plaatsen op het formaat dat ze op de website getoond worden. Dat formaat is afhankelijk van de module waarin de afbeelding wordt geplaatst. Een afbeelding in een afbeeldingsmodule neemt een andere ruimte in dan een afbeelding in een blurbmodule. Ook speelt het een rol of zo’n module in een 1-kolomsrij (groen gedeelte) wordt gebruikt of wanner de rij in meerdere kolommen onderverdeeld is.

Op de website van Elegant Themes vind je goede informatie hoe groot afbeeldingen in welke module moeten zijn. Maar ik geef toe, die pagina is best overweldigend. Daarom hieronder een overzicht van de meest voorkomende modules waar afbeeldingen inzitten en welke afbeeldingsformaten daarbij horen.

• Afbeeldingsmodule gebruikt voor losse afbeeldingen
  1 kolom: 1080 pixels breed
  2 t/m 5 kolommen: 770 pixels breed
  6 kolommen: 370 pixels breed
• Uitgelichte foto van blogs
  795 pixels breed
• Blurbmodule veel gebruikt voor blokjes met een afbeelding met daaronder een kopje en tekst.
  1 kolom: 550 pixels breed
  2 kolommen: 510 pixels breed
  3 kolommen: 320 pixels breed
  4 kolommen: 225 pixels breed
• Fotogallerij module
  Deze afbeeldingen zijn klikbaar en dus maximaal 1920 pixels breed of 1200 pixels hoog

 Het kan ook zijn dat een afbeelding als achtergrond is toegevoegd. Dan gelden de volgende formaten:

• 1 kolom: 1280 pixels breed
  2 kolommen: 795 pixels breed
  3 kolommen: 700 pixels breed
  4 kolommen: 510 pixels breed
  5 kolommen: 320 pixels breed
  6 kolommen: 225 pixels breed

Twijfel je over welk formaat een afbeelding moet worden. Neem contact met me op. Ik kan het je snel vertellen!

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!

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

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 vervolgens op 2 manieren de uitsnede maken:

Handmatig uitsnede aangeven

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

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 rijen
  • Specialty: hiermee kun je geavanceerde sidebar lay-outs maken
  • Full width: voor vormgeving die de gehele breedte van het scherm behoeft
• Rows – oftewel rijen, bevinden zich in de secties en zijn groen vormgegeven. Een sectie kan een onbeperkt aantal rijen bevatten. Een rij bevat op zijn beurt weer modules.
• Modules – bevinden zich in de rijen 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.

De Divi bibliotheek

Bepaalde zaken komen op meerdere plekken op een website terug. Na het maken van zo’n element 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 door op het Toevoegen aan de bibliotheek icoontje te klikken. 

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.

Lay-out vanuit Divi bibliotheek toevoegen

Tip: door in een lay-out op het allerbovenste radertje te klikken en in het scherm welke dan opent op Admin label te klikken, kun je de lay-out in de Divi Builder herkenbaar maken. Vul hier de naam van de lay-out in. Bijvoorbeeld: Reserveerknop NL of Inschrijving nieuwsbrief IT. Of zoals ik voor het global item in bovenstaande lay-out deed: Meer reviews knop. Zo zie je ook dat je in een lay-out, een global item kunt opnemen.

Global item maken van gekopieerde lay-out

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

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

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 het woord of de woorden te selecteren die een link moet(en) vormen en vervolgens op de link icoon in de tekstmodule te klikken. En vervolgens de informatie in de pop-up in te vullen.

Hoverkleur selecteren

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.

Let op: de ankerlink voeg je toe aan de URL en kan daarom – net zoals een URL – geen spaties bevatten.

Kleur van een kop aanpassen

Er zijn 2 manieren om de kleur van een kop aan te passen.

1. Wanneer je de tekstmodule module geopend hebt en je met je muis over tekst gaat zoals deze op het scherm zichtbaar is (dus niet in de tekstmodule) zul je zien dat er overal potloodjes verschijnen.
   Klik op het potloodje welke voor de kop staat waarvan je de kleur (of bijvoorbeeld de grootte) wilt aanpassen. Je gaat dan automatisch naar de juiste plek in de Ontwerptab om de kop aan te passen. De linkerafbeelding hieronder laat zien hoe je op zo'n potloodje klikt.

1. Je kunt ook direct naar de ontwerptab gaan en daar bij het onderdeel Tekst ondertitel de juiste kop (h2, h3, etc.) selecteren en aanpassen. De rechterafbeelding hieronder laat zien hoe dit eruit ziet.

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.

Achtergrondafbeelding vervangen

Verloopraster over achtergrondafbeelding aanpassen

Google Maps kaart ingegreren op een pagina

Je kunt eenvoudig een Google Maps kaartje opnemen in een pagina. Zo kun je bijvoorbeeld de locatie van jouw Google Bedrijfsprofiel delen.

Zoek in Google Maps de locatie die je wilt laten zien. Dat kan de locatie zijn die je aanmaakte via Google Bedrijfsprofiel, maar ook jouw eigen huisadres, een leuk restaurant of iets heel anders.

Hieronder zie je wat er in Google Maps verschijnt wanneer je Buro RaDer intypt.

Wanneer de zoom niet naar je zin is, kun je deze in Google Maps aanpassen. Let op: kopieer wel opnieuw de code en vervang de code die je eerder op de website plaatste.

Video toevoegen op een pagina via Load Video On Click plugin

Om te voorkomen dat jouw website traag wordt, doordat je YouTube video's op een pagina plaatst, kan ik de Load Video On Click plugin toevoegen. Dan wordt het YouTube script namelijk pas geladen wanneer de bezoeker op de video klikt. Dit scheelt aanzienlijk in de initiële laadtijd van de video.

Je voegt de video toe door middel van een shortcode, waarin je zelf de URL van de YouTube video moet plaatsen. De code ziet er zo uit:

Daar waar urlYouTubeVideo staat, vul je de URL van de YouTube video in. Je plaatst deze code of in een code module.

Let erop dat je de juiste URL van de YouTube video kopieert. Klik onder de YouTube video op Delen en kopieer die code.

De plugin plaatst automatisch een afbeelding van de video, zodat het lijkt dat de video er al staat. Mocht je daar een andere afbeeldingen willen plaatsen, dan zul je deze naar jouw website moeten uploaden en de URL van de afbeelding moeten toevoegen aan de code.

Je vindt de URL van de afbeelding in de mediabibliotheek. Klik op de afbeelding. Rechts in het scherm - in het blokje waar je ook wijzigingen kan opslaan - staat de URL.

Met 1 muisklik kun je de URL kopiëren en in de code plakken.

De gewijzigde code:

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.

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

Pagina toevoegen aan het menu

Wanneer je een pagina hebt gemaakt, kun je deze toevoegen aan het menu. Ga hiervoor in het dashboard aan de linkerkant naar Weergave => menu’s.

In de linkerkolom zie je de pagina’s. Mocht je de pagina die je aan het menu wilt toepassen, hier niet zien staan, klik dan op de tab Alles tonen ernaast. Vink de toe te voegen pagina(‘s) aan en klik op Aan menu toevoegen. 

Het menu-item wordt onderaan het menu toegevoegd. Door middel van slepen (drag & drop) kun je het menu op de juiste plek krijgen. Wanneer je een menu-item naar rechts sleept, wordt het een sub-menu-item van het menu-item welke erboven staat. Zoals in onderstaand voorbeeld WordPress website laten bouwen dat is van Wat?.

Responsive – Juiste weergave op tablet en mobiel

De door mij opgemaakte pagina’s zullen geoptimaliseerd zijn voor weergave op tablet en mobiel. Wanneer je zelf een element toevoegt, kan het zijn dat deze er op een tablet en/of mobiel net niet helemaal uitziet, zoals jij zou willen. Dit kan gelukkig aangepast worden. Over het algemeen is het de mobiele weergave die aangepast moet worden en dan vooral de witruimtes.

Zie een wijziging niet. Leeg dan de cache. Over het algemeen kun je dat via het top admin menu doen. En ververs daarna de pagina op de tablet / mobiel.

Schakelen naar tablet of mobiele weergave

Wanneer je onderaan de pagina die je aan het bewerken bent op de 3 puntjes in de paarse cirkel klikt, verschijnt er linksonderaan een grijze balk met een aantal icoontjes.

Van links naar rechts:

• 3 puntjes: instellingen van deze balk (hier hoef je in principe niets te wijzigen.
• langwerpig met daaronder 2 vierkantjes: wireframe weergave. Deze kan handig zijn wanneer je een bepaald element lastig kan selecteren in de normale weergave
• vergrootglas: om uit te zoomen (gebruik ik nooit)
• desktop: de standaardweergave zoals het er op pc uitziet
• tablet: zo ziet de pagina er (ongeveer) uit op een tablet
• mobiel: zo ziet de pagina er (ongeveer) uit op een mobiel

Bij de tablet en mobiele weergave schrijf ik ongeveer tussen haakjes. Dit  om deze gesimulteerde weergave op een computer er in werkelijkheid op een tablet of op een mobiel toch net iets anders uit kan zien. Het is daarom belangrijk om de wijzigingen altijd even te checken op een mobiel (en eventueel op een mobiel).

Wanneer je op het tablet icoontje klikt zie je dat de pagina smaller wordt; de tablet weergave wordt gesimuleerd. En wanneer je op het telefoon icoontje klikt, zie je dus de mobiele weergave.

Uitvinden waar de witruimte ingegeven is

De meest voorkomende aanpassing is het verwijderen van te grote witruimtes. Hierbij is het belangrijk dat je eerst uitzoekt waar die witruimte vandaan komt. Dat kan soms lastig zijn. Kom je er niet uit, neem even contact met me op. Ik kijk dan even met je mee!

Soms kun je het ook gewoon zien, door met je muis over het element te bewegen waar teveel witruimte is. Secties (blauwe elementen) en rijen (groene elementen) krijgen standaard wat witruimte. In onderstaande afbeelding (links) zit er boven de rij (groene element) de standaardwitruimte, terwijl eronder geen witruimte meer is. De ruimte eronder is de standaard witruimte van de sectie.

Die witruimtes worden ingegeven als padding (buffer). Dit vind je in de tab Ontwerp en dan bij Afstand. In de rechterafbeelding zie je dat er aan de bovenkant van de rij geen getal staat; de standaard witruimte wordt gebruikt. Aan de onderkant staat 0; geen witruimte.

Je ziet hier ook margin staan. Het verschil tussen margin en padding: Padding is de ruimte tussen een element en de inhoud van dat element. Margin is de ruimte tussen een element en andere elementen.

Let op: om witruimte boven of onder knoppen aan te passen, pas je de margin aan. De padding/buffer wordt namelijk gebruikt om de grootte van de knop te bepalen (en is de afstand rondom de tekst van de knop).

Te grote witruimtes verwijderen op tablet en mobiel

Wanneer je weet waar het teveel aan wit op tablet en mobiel zit, kun je dit aanpassen. Ga hiervoor naar de tab Ontwerp en dan naar Afstand

Om dit te doen ga je met je muis over het woord Buffer, er verschijnen extra icoontjes. Mochten deze niet verschijnen, ga dan even over iets anders met je muis en probeer het opnieuw.

Klik hier op het mobiele telefoon icoontje. Er verschijnen dan 3 tabs tussen het woord Buffer en daar waar je de buffers ingeeft.

LET NU GOED OP! Je wilt namelijk alleen de witruimtes aanpassen op tablet en op mobiel, niet op de desktopversie.

Klik nu op de tablet of mobiel tab en pas daar de witruimte aan. Vergewis je er altijd van dat je in de tablet of mobiele tab aan het aanpassen bent! Anders pas je namelijk de desktop versie aan, terwijl die niet aangepast hoeft te worden!

Staat er niets, dan is de dus standaard witruimte gebruikt. Zet je deze op 0, dan verdwijnt die ruimte. Mocht het dan te weinig ruimte zijn, dan kun je ruimte toevoegen. De maat hiervoor is em. Type dus 1em of 2em of zelfs 3em.

In onderstaand voorbeeld is de buffer aan de onderkant op tablet nu als 0 ingesteld. Terwijl de buffer aan de onderkant op desktop niet wijzigde.

Wanneer het (/) teken tussen de waardes blauw is, zijn de waardes gekoppeld. Wanneer je er 1 aanpast, verandert de andere automatisch mee.

Grootte kopjes aanpassen op tablet en mobiel

In principe is dit goed ingesteld op jouw website. Maar het kan voorkomen dat je een heel lang woord gebruikt in een kop en dat deze niet op 1 regel op een mobiele telefoon past. Ook dit kun je apart voor desktop, tablet en mobiel invoeren. Ook hiervoor ga je naar de tab Ontwerp, maar dan van de tekstmodule. Selecteer hier de kop bij Tekst ondertitel en ga naar Titel Tekst Grootte. Ook hier verschijnt het mobiel icoontje wanneer je met je muis over Titel Tekst Grootte gaat. Klik op dit icoon om de extra tablet en mobiel tab te laten verschijnen. Klik op de tablet en/of mobiel tab om de lettergrootte aan te passen.

LET GOED OP! Je wilt namelijk alleen de lettergrootte aanpassen op tablet en op mobiel, niet op de desktopversie. Vergewis je er dus altijd van dat je in de juiste tab aan het aanpassen bent!

Berichten – oftewel blogs

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.

Links toevoegen in een blog

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

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:

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

Zoals je elders in de handleiding al kon lezen is het formaat voor klikbare afmetingen maximaal 1920 pixels breed of 1200 pixels hoog.

Fotogallerij toevoegen

In blogs kun je ook een fotogallerij toevoegen. De gallerij plaatst maximaal 3 foto's per rij naast elkaar en kan uit meerdere rijen bestaan. Het is het mooist om met een veelvoud van 3 foto's te werken.

Je kunt staande en liggende foto's door elkaar heen gebruiken, de foto's worden standaard standaard in een rechthoekige, liggende thumbnail getoond die voor alle afbeeldingen eenzelfde afmeting heeft. De hele foto is te zien wanneer een bezoeker op de foto klikt en deze groter wordt weergeven.

Klik boven in de blog op Media toevoegen en selecteer Galerij aanmaken en klik in de mediagallerij die verschijnt, op de foto's die je wilt toevoegen. Sla op door rechtsonder op Een nieuwe gallerij aanmaken te klikken.

Google Maps kaart ingegreren in een blog

Je kunt eenvoudig een Google Maps kaartje opnemen in een blog. Zo kun je bijvoorbeeld de locatie van jouw Google Bedrijfsprofiel delen.

Zoek in Google Maps de locatie die je wilt laten zien. Dat kan de locatie zijn die je aanmaakte via Google Bedrijfsprofiel, maar ook jouw eigen huisadres, een leuk restaurant of iets heel anders.

Hieronder zie je wat er in Google Maps verschijnt wanneer je Buro RaDer intypt.

Schakel van Visueel naar  Tekst en eventueel later weer terug, doe je rechtsbovenin de teksteditor. Daar waar in bovenstaande afbeelding een muishandje zichtbaar is.

Je kunt de hoogte en breedte van het kaartje beïnvloeden. Het is raadzaam om bij width tussen de aanhalingstekens 100% te zetten. 

Wanneer de zoom niet naar je zin is, kun je deze in Google Maps aanpassen. Let op: kopieer wel opnieuw de code en vervang de code die je eerder op de website plaatste.

Video toevoegen in een blog via Load Video On Click plugin

Om te voorkomen dat jouw website traag wordt, doordat je YouTube video's op een pagina plaatst, kan ik de Load Video On Click plugin toevoegen. Dan wordt het YouTube script namelijk pas geladen wanneer de bezoeker op de video klikt. Dit scheelt aanzienlijk in de initiële laadtijd van de video.

Je voegt de video toe door middel van een shortcode, waarin je zelf de URL van de YouTube video moet plaatsen. De code ziet er zo uit:

Daar waar urlYouTubeVideo staat, vul je de URL van de YouTube video in. Je plaatst deze code of in de teksttab van de tekstmodule of in een code module. En dus niet in de tab waar je normaalgesproken de berichten typt.

Let erop dat je de juiste URL van de YouTube video kopieert. Klik onder de YouTube video op Delen en kopieer die code. 

De plugin plaatst automatisch een afbeelding van de video, zodat het lijkt dat de video er al staat. Mocht je daar een andere afbeeldingen willen plaatsen, dan zul je deze naar jouw website moeten uploaden en de URL van de afbeelding moeten toevoegen aan de code.

Je vindt de URL van de afbeelding in de mediabibliotheek. Klik op de afbeelding. Rechts in het scherm - in het blokje waar je ook wijzigingen kan opslaan - staat de URL.

Met 1 muisklik kun je de URL kopiëren en in de code plakken.

De gewijzigde code:

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 Bericht 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

Automatische 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 Rank Math of 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.

Call to action knop toevoegen in blog

Natuurlijk wil je dat de lezers van jouw blog tot actie overgaan. Een call to action knop kan daarbij helpen. Zeker wanneer je weet dat bezoekers van een website eerder geneigd zijn om op een knop te klikken, dan op een tekstlink.

Om een knop toe te voegen klik je bovenaan op het icoontje Add ET Button.

Vervolgens vul je in de popup het volgende in:

• bij Link vervang je de hashtag door de URL waar de bezoekers naartoe gaan wanneer ze op de knop klikken
• Type (small) en Color (blue) niet aanpassen - via deze aanduidingen kan ik namelijk de vormgeving van de knop aanpassen aan jouw website. Wanneer je Type en/of Color verandert, worden mijn instructies genegeert en zal de knop dus niet meer de gewenst vormgeving krijgen
• bij Content vul je de tekst in die in de knop moet verschijnen. Deze tekst moet vanzelfsprekend oproepen tot actie
• Open link in new window:
  no wanneer het een link betreft binnen jouw website
  yes wanneer het een andere website betreft
• klik op Ok om de knop toe te voegen aan jouw blog

Hieronder kun je zien hoe de knop er in de tekstopmaak van een blog uitziet.

De Rank Math SEO plugin

Als hulpmiddel voor SEO is de Rank Math SEO plugin aan jouw website toegevoegd. Ik gebruik bewust deze plugin en niet de Yoast SEO plugin, omdat deze plugin gratis meer mogelijkheden biedt dan de plugin van Yoast. De werking is verder eigenlijk gelijk. Beide plugins geven feedback of de zoekterm die jij heb bedacht voor een pagina op de juiste plaatsen en juiste aantal, op de pagina voorkomt.

Let op: een SEO plugin is een hulpmiddel. Het helpt je niet om je positie in Google te verbeteren. Die positie wordt bepaald door het op de juiste plekken in zetten van de juiste zoekterm.

Veel mogelijkheden

Zoals geschreven, de plugin biedt veel mogelijkheden. Ik beperk me hier tot 4 zaken: wat verschijnt er in de zoekresultaten, feedback op het inzetten van een zoekterm, social media afbeeldingen en het toevoegen van 301 redirects. Voor deze functionaliteiten is de plugin aan jouw website toegevoegd. De andere functionaliteiten zijn een prettige bijvangst, maar waar jij normaal gesproken geen gebruik van hoeft te maken.

Wat verschijnt er in de zoekresultaten

Toen je de templates voor de teksten invulde moest je ook zaken als SEO titel en meta omschrijving invullen. Deze zaken zijn vervolgens ook ingegeven via de Rank Math SEO plugin.

Op nieuwe pagina's zul je dit dus ook moeten ingeven / aanpassen. Dit doe je voor blogberichten door naar Bericht bewerken en voor pagina's naar Pagina bewerken te gaan. Je doet dit dus niet in de Divi omgeving.

Overigens zit er wel een Rank Math SEO knop in de Divi omgeving. Deze geeft je in de Page Builder direct feedback op de wijzigingen.

Wanneer je op de pagina naar beneden scrollt kom je onderstaand blok tegen.

Informatie zichtbaar in Google

Om de informatie die zichtbaar is in de zoekresultaten van Google te bewerken, klik je op Fragment bewerken. Je kunt vervolgens de volgende velden invullen. Kunt, want niet alle velden zul je hoeven aan te passen.

Rank Math geeft feedback op het ingevulde door middel van kleurtjes. Rood is niet goed, groen is goed.

Titel: dit is de 2e tekstregel in het zoekresultaat en deze wordt automatisch gegenereerd. Wanneer deze te lang is, kun je hem aanpassen door bijvoorbeeld de %sep% %sitename% te verwijderen. Of door %title% of %page% te verwijderen en handmatig een kortere paginatitel in te geven. Zaken met een %-teken worden automatisch afgeleid. %sep% is daarbij het verticale streepje tussen de paginatitel en de naam van de website.

Permalink: dit is de bovenste tekstregel in het zoekresultaat en is als het ware de URL. Ook deze kun je indien nodig aanpassen, maar pas hier mee op. Wanneer andere pagina's naar deze pagina verwijzen, zul je de link moeten aanpassen. En wanneer de pagina al geïndexeerd is door Google (dus in zoekresultaten kan verschijnen), zul je een 301 redirect moeten aanmaken.

Beschrijving: die is de meta omschrijving. Je wilt dat deze tekst ervoor zorgt dat mensen op jouw link in de zoekresultaten klikken. Lees zeker mijn blog Hoe een goede meta omschrijving je klanten kan opleveren.

Feedback op inzetten zoekterm

In het gedeelte onder het fragment staat als eerste de zoekterm die je voor deze pagina hebt bedacht en wel in het veld Focus keyword.

De feedback vindt hier ook weer door middel van kleuren plaats, maar ook door middel van een score. 100/100 halen is zo goed als onmogelijk. Ik richt me altijd op een score van 80 of hoger. Er zijn 4 onderdelen. Het 1e onderdeel staat automatisch uitgeklapt, de overige 3 zul je zelf even moeten uitklappen.

In het overzicht zul je zien of je de door jou gekozen zoekterm op de juiste plaatsen en een genoeg aantal keren (niet te weinig, maar zeker ook niet teveel) hebt ingezet. Alle feedback is in het Nederlands, behalve Keyword Density. Dit is het aantal keer dat je de zoekterm hebt gebruikt.

In mijn voorbeeld zou ik de zoekterm WordPress website vertalen niet voldoende hebben gebruikt. Dit komt omdat ik soms het woordje te gebruikte tussen WordPress website en vertalen. Rank Math herkent dit niet, terwijl Google nog steeds begrijpt dat dit blog over WordPress website vertalen gaat. En soms komt het onnodig krom over om een zoekterm letterlijk toe te voegen. Dat kan, je schrijft nog altijd voor de bezoeker en niet voor zoekmachines.

Je kunt op het vraagteken achter de feedback klikken om meer informatie over deze bepaalde feedback te krijgen.

Een kleine kanttekening bij de feedback over Leesbaarheid titel. Bij blogs kan het handig zijn om een zogenaamd Power word te gebruiken, maar dit hoeft niet. Dit zijn woorden zoals bijvoorbeeld beste, mooiste en leukste. Idem voor het gebruik van een getal. Ook dit is eigenlijk alleen bij blogs van toepassing. Denk bijvoorbeeld aan 7 tips voor een opgeruimd huis.

Social media afbeeldingen

Wanneer je een blog of pagina deelt op social media, verschijnt daar een afbeelding bij. Je kunt in Rank Math instellen welke afbeelding dat moet zijn. Bij blogs wordt overigens automatisch de Uitgelichte afbeelding gekozen. Wanneer jouw website door mij is gemaakt, is die afbeelding over het algemeen de afbeelding die helemaal bovenaan een blog staat. 

Bij pagina's stel je over het algemeen geen uitgelichte afbeelding in en zal er een random afbeelding verschijnen wanneer je een pagina deelt op social media.

Om aan te geven welke afbeelding er bij je social media bericht moet komen, ga je naar Bewerken van de blog of de pagina (dus niet in Divi) en klik in het Rank Math deel op de Social tab. 

In de popup die verschijnt klik je op het zwarte vlak om de gewenste afbeelding te uploaden. Wanneer je naar beneden scrollt kun je ook nog een titel en beschrijving toevoegen. Vergeet niet op te slaan.

301 redirects

Wanneer je een URL wijzigt, zul je een 301 redirect moeten toevoegen. 301 redirects zijn als het ware verhuisberichten voor Google. Je kunt er meer in lezen in mijn blog Wat zijn 301 redirects?

Rank Math geeft een seintje wanneer je een URL wijzigt en wijst je erop dat je een 301 redirect kan instellen.

Als eerste zul je de redirect functionaliteit in Rank Math moeten aanzetten. Ga hiervoor in het dashboard bij Rank Math SEO naar Dashboard. Zoek het tegeltje met Omleidingen en wanneer deze nog niet geactiveerd is, activeer je deze. Wanneer de knop blauw is, is de functionaliteit geactiveerd.

Tip: activeer ook gelijk de 404 monitor functionaliteit. Mocht een bezoeker toch op een niet (meer) bestaande pagina van jouw website terecht komen, dan verschijnt die pagina in het Rank Math menu bij 404 monitor en kun je alsnog een 301 redirect aanmaken.

Om een 301 redirect toe te voegen ga ik in het Rank Math menu naar Omleidingen en klik je bovenaan de pagina op de knop Nieuwe toevoegen.

Bij Source URL vul je de oude URL in.

Bij Destination URL vul je de gewijzigde URL in.

Je laat 301 Permanant Move en Activate aanstaan en klikt op rechtsonder op de knop Add redirection.

Geen Rank Math op je website, toch 301 redirects?

Heb je geen Rank Math op je website, maar moet je toch 301 redirects aanbrengen, dan kun je gebruik maken van de Redirection plugin van John Godley.

Deze plugin werkt supereenvoudig:

• vul bij Source URL de URL in van de pagina die doorverwezen moet worden
• Title kun je leeglaten
• Match: URL only
• When matched: Redirect to URL with HTTP code 301 - Moved Permenantly
• vul bij Target URL de URL in van de pagina waar de bezoeker naartoe gestuurd moet worden
• Group en Position kun je leeglaten.

Vertalen

BELANGRIJK: Vertalen van in Divi bibliotheek opgeslagen lay-outs

Een aandachtspunt zijn de tags die WPML meegeeft aan vetgedrukte en cursieve teksten en aan links. Deze worden door middel van kleurcodes die het vakje staan waar je de vertaling plaatst aangegeven. Selecteer in de vertaalde tekst het woord wat in de vertaling ook cursief of vet moet worden getoond of waar een interne link aan moet worden toegevoegd.

Let op: je kunt de vertaling niet opslaan zonder dat je de code hebt toegevoegd. En tevens is kan het ook zo zijn dat de link die je toevoegt, zeker bij interne links, in de vertaling anders is, dan in het orgineel. Dat is geen probleem – je kunt de link aanpassen. Soms moet je dan wel het slotje van de link halen door op het slot icoontjes 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.

Wanneer je een pagina hebt vertaald, zul je daarna niet meer hoeven terug te keren in de WPML-omgeving. Wanneer je wijzigingen in de vertaalde pagina wilt aanbrengen, zul je dat in Divi doen.

Hetzelfde geldt voor blogberichten. Wanneer je een vertaalde blog wilt wijzigen, doe je dat door of in het blog overzicht op Bewerken te klikken of door wanneer je het blog geopend hebt op Bewerken te klikken.

Menu vertalen

BELANGRIJK: Afbeeldingen vertalen inclusief afwijkende afbeelding

Soms vertaal je de alt- en titelteksten tegelijkertijd met het vertalen van een pagina. Maar de meeste voor de meeste afbeeldingen zul je de belangrijke alt- en title teksten via Media translation moeten vertalen.

Ga hiervoorvia het WPML dashboard naar Media translation. Daar kun je afbeelding zoeken en vervolgens via het plusteken achter de afbeelding de vertaling toevoegen.

Zoeken kun je door een woord uit de bestandsnaam in te typen. Het is daarom ook heel belangrijk om je bestanden logische namen te geven!

Updaten van de footer – Bijvoorbeeld copyrightjaartal

Het updaten van de footer en het aanpassen van de andere talen  gaat in 2 stappen.

De footer is gemaakt via de Theme Builder. Om deze aan te passen ga je eerst in het dashboard naar Divi => Theme Builder. Door op (Wereldwijde) voettekst te klikken kun je de footer in de brontaal aanpassen. Over het algemeen is er 1 globale footer die voor alle pagina’s geldig is. Zoals alle globale items wordt dit via de gifgroene kleur weergegeven. Klik op het potloodicoontje om deze aan te passen. Het aanpassen werkt net zoals andere aanpassingen in Divi. Vergeet na het aanpassen niet om de wijziging via de knop rechtsonder op te slaan.

Het kan zijn dat je voor bepaalde pagina’s een afwijkende footer hebt. Deze zul je ook allemaal moeten aanpassen.

Aanpassen van de footer teksten in andere talen

Wanneer je de footer in de brontaal hebt aangepast, wil je de wijzigingen waarschijnlijk ook doorvoeren in de andere talen. Dit doe je niet in Divi, maar in WPML.

Ga hiervoor in het dashboard naar WPML => Stringvertaling. In het vakje Zoeken naar: type je een of meerdere woorden in die in de brontaal van de footer voorkomen.  Klik op het potloodje om de andere taal/talen aan te passen.

Een pop-up opent zich en je kunt hier de wijzigingen aanbrengen. Opslaan gebeurt door enter te doen. De tekst is in HTML, let er dus op dat je de HTML-codes niet verandert.

Reviews

Voor het toevoegen van Reviews wordt de Strong Testimonials plugin gebruikt. Reviews kunnen op 2 manieren worden toegevoegd: handmatig (bijvoorbeeld overgenomen uit een papieren gastenboek) of door het versturen van link naar klanten.

Handmatig toevoegen van een Reviews

Ga in het dashboard naar Aanbevelingen => Nieuwe aanbeveling toevoegen. Voeg toe:

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

In de rechterkolom kun je door bij Onmiddellijk publiceren op Bewerken te klikken, de datum aanpassen.

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

Reviews weergeven

Je voegt reviews 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 Aanbevelingen => Views => Nieuwe Aanbeveling.

Bij Query vind je de verschillende weergavemogelijkheden:

• 1 of meer reviews - door het toekennen van een categorie kun je bijvoorbeeld alle reviews uit die categorie tonen, maar je kunt hier ook kiezen voor een bepaald aantal reviews . Maar je kunt ook alle reviews laten weergeven.
• een specifieke review - 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 reviews kan leiden. Bij Style kun je de vormgeving bepalen en by lay-out de manier waarop de reviews 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 view 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 review wilt plaatsen. Je doet dit dus hetzij als code in een tekstmodule hetzij direct in een codemodule.

Bepaalde reviews op een pagina plaatsen met behulp van views en categorieën

Reviews kunnen we niet alleen op een reviewpagina plaatsen waar alle reviews staan. We kunnen een bepaalde reviews die over bijvoorbeeld een specifiek aanbod gaat, ook plaatsen op de pagina over dat aanbod. Dit gebeurt door middel van views en categorieën.

Een view is een weergave. Een weergave kan uit 1 review bestaan of uit meerdere review. Indien meerdere reviews dan kan dat een statische weergave zijn, zoals bijvoorbeeld op mijn reviewpagina, of een dynamische weergave in de vorm van een slideshow.

Je kunt een review of meerdere reviews een (of meerdere) categorieën toekennen. En in een view kun je weergeven welke categorieën weergegeven moeten worden.

Over het algemeen maakte ik reeds een aantal views voor je welke je op jouw website kan hergebruiken.

Een view kopiëren om een nieuwe view te maken

Er verschijnt een menu wanneer je in het dashboard naar Aanbevelingen => Views gaat en je met je muis over een view gaat. Selecteer de view die je wilt kopiëren en klik hier op Kopie. Let op dat je de juiste view kopieert. Sommige views zijn slideshows, andere views hebben maar 1 review en de review pagina heeft een heel grid aan reviews.

Vervolgens zul je in het scherm welke opent de volgende gegevens moeten invullen:

• Naam: geef deze view (weergave) een logische naam, bijvoorbeeld de naam van de pagina waarop deze gebruikt gaat worden
• Modus: in principe hoef je dit niet te wijzigen, aangezien je een view kopieert die je exact wilt hergebruiken
• Selecteer: wanneer je maar 1 review wilt plaatsen, kun je hier die specifieke review selecteren
• Categorieën: wanneer je een of meerdere reviews van een bepaalde categorie wilt plaatsen, kun je dat hier aangeven
• Volgorde: ik selecteer altijd nieuwste eerst
• Aantal: wijzig ik nooit
• Bij velden wijzig je niets; dit is al goed ingesteld bij de view die je kopieerde
• Ook bij Extra, Stijl, Lay-out, Achtergrond, Lettertypekleur hoef je niets te wijzigen
• Klik wel op Wijzigingen opslaan.

View op een pagina plaatsen

Wanneer je de nieuwe view opslaat, krijgt deze een shortcode. Die shortcode vind je terug in het dashboard bij Aanbevelingen => Views. Zie ook de afbeelding een stukje hierboven bij het onderdeel Een view kopiëren om een nieuwe view te maken. Je ziet daar helemaal rechts de shortcode staan.

Het kan zo zijn dat je een bestaande pagina kopieerde en daar een andere view moet plaatsen. Ga hiervoor op zoek naar de module waar de view staat, en pas de shortcode aan. Je kunt ook heel eenvoudig alleen het getal aanpassen.

Heb je een hele nieuwe pagina toegevoegd, dan is het het meest eenvoudig om de shortcode via een Code module toe te voegen.

Volgorde van reviews in een view

Over het algemeen heb ik de views zo ingesteld dat de meest recente review bovenaan getoond wordt. Je kunt de volgorde beïnvloeden door de datum van de review aan te passen.

Link voor review naar klanten sturen

Via een link kun je klanten uitnodigen een review te schrijven. Wanneer een klant dit doet, ontvang je een berichtje en kun je aangeven of de review 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 klant in een mailtje wijzen op deze URL om hem of haar een review te laten schrijven. Je krijgt een mailtje wanneer er een nieuwe review is ingezonden. Teven zie je dit in het dashboard.

Review goedkeuren voor publicatie

Je kunt vervolgens de review goedkeuren voor publicatie. Dit doe je door in het Aanbevelingen overzicht op de review te klikken. De review opent en vervolgens kun je rechts op de knop Publiceren klikken.

Na het zenden van de review krijgt de klant overigens automatisch een bedankbericht of bedankpagina te zien, waarop staat dat de review in afwachting van publicatie is.

Reviews importeren vanuit Google

Via een betaalde versie van de Strong Testimonials plugin kunnen Google reviews automatisch geïmporteerd worden. Je behoudt regie over welke reviews je wel of niet wilt publiceren.

Je zult hiervoor in Google een API sleutel moeten downloaden.

Google API sleutel voor Strong Testimonials

1. Ga naar de Google Cloud Console
2. Maak een nieuw project aan (of kies een bestaand project)
   Klik op "Select a project" en maak een nieuw project aan als je dat nog niet hebt.
   Geef het project een herkenbare naam, zoals "Google Reviews API".
3. Activeer de Google Places API
   Ga naar API's en services > Bibliotheek
   Zoek naar "Places API" en klik op "Inschakelen"
   Doe hetzelfde voor "Maps JavaScript API" (sommige plugins hebben dit ook nodig).
4. Genereer een API-sleutel
   Ga naar API's en services >
   En dan naar:
   Of: de enabled API
   Of: Keys and credentials
   Dan de desbetreffende api (places) Key kopiëren en aan Margriet doorgeven.

Formulieren

Een formulier dupliceren

Wanneer je je muis over een formuliernaam beweegt, verschijnt er een menu waar je op Dupliceren kan klikken. Nadat je op Dupliceren hebt geklikt, opent het gekopieerde formulier zich.

Wat staat waar ingevuld:

•  Naam: is de naam van de kennisgeving. Je kan namelijk meerdere kennisgevingen aanmaken. Ik gebruik hier standaard het onderwerp van de mail
• Verzenden naar: ontvangen van de mail
  Meerdere ontvangers mogelijk, door kommagescheiden, meerdere e-mailadressen in te geven.
• Onderwerpen: onderwerp van de mail
• E-mail body: Tekst die in de mail verschijnt. Hier worden door middel van de code {all_data} automatisch de ingevulden velden van het formulier overgenomen. Die code dus nooit verwijderen!

Vergeet ook niet onderaan op Geavanceerd te klikken. Daar vind je namelijk de instelling die het beantwoorden naar het e-mailadres van de inzender van het formulier mogelijk maakt:

• Naam afzender: dat kan jouw (bedrijfs)naam zijn
• Van e-mail: gelijk als mailadres waarop jij de mail ontvangt
• Antwoord aan: de code {inputs.email} zorgt ervoor dat wanneer je de formulierinzending beantwoord, deze naar het e-mailadres van de inzender gaat. 
• Die code dus nooit verwijderen!
• Bij BCC en CC kun je indien gewenst de mailadressen invullen waar jouw reactie op de inzending ook naar verzonden moet worden.

Aangepaste knop kleur

Er is een grote kans dat ik de kleur van de verzendknop aanpaste van de standaard Fluent Forms kleur naar een kleur die op jouw website wordt gebruikt.

Dit wordt gedaan door middel van een code die  helaas voor elk formulier even bijgewerkt moet worden. Dit omdat elk formulier een eigen nummer heeft, waarin de code naar verwezen wordt.

Fluent Forms shortcode toevoegen via codemodule

Fluent Forms formulieren in andere talen toevoegen

Fluent Forms formulieren kunnen niet via WPML vertaald worden. Om een formulier in een andere taal toe te voegen kun je het oorspronkelijke formulier kopiëren en vertalen en vervolgens de nieuwe shortcode toevoegen op de pagina waar het formulier moet komen.

Denk er ook hier aan om het formulier naar de juiste bedankpagina te laten verwijzen. Je kunt dit instellen in de Instellingen & integraties tab in het Confirmation settings gedeelte. Selecteer in de allerbovenste werkbalk van jouw scherm Alle talen of de juiste taal om eenvoudig de bedankpagina terug te vinden.

WPForms shortcode toevoegen via codemodule

WooCommerce instellen

In WooCommerce moeten een aantal zaken door jou worden ingesteld. Denk aan adresgegevens, maar ook belastingtarieven.

Ga daarvoor in het dashboard naar WooCommerce => Instellingen en vul de verschillende tabs die van toepassing zijn in:

• Algemeen – gegevens omtrent waar je bedrijf zich bevindt, aan welke landen je levert en welke in welke munteenheid de winkel moet zijn. Aan de hand daarvan worden belastingtarieven bepaald.
• Producten – spreekt voor zich.
• Belasting – hier kun je het belastingtarief dat van toepassingen is / die belastingtarieven die van toepassing zijn ingeven.
• Verzending – alleen invullen wanneer je fysieke producten verkoopt.
• Betalingen – niets aanpassen tenzij je PayPal betalingen accepteert. Wanneer je betalingen via Mollie en/of Stripe accepteerd, komt die betaalmogelijk / komen die betaalmogelijkheden hier automatisch bij te staan.
• Accounts en privacy – spreekt voor zich.Voorbeeldtekst Privacybeleid registratie: Je persoonlijke gegevens worden gebruikt om je ervaring op deze site te ondersteunen, om toegang tot je account te beheren, voor facturatie (indien van toepassing), en voor andere doeleinden zoals omschreven in onze <a href=”https://urlwebsite/privacyverklaring/”>privacyverklaring</a>.Voorbeeldtekst Privacybeleid afrekenen: Je persoonlijke gegevens worden gebruikt om je bestelling te verwerken, voor de facturatie, en voor andere doeleinden zoals beschreven in onze <a href=”https://urlwebsite/privacyverklaring/”>privacyverklaring</a>.
• E-mails – hier kun je de standaard e-mails van WooCommerce instellen. Wanneer we gepersonaliseerde mails gaan verzenden, omdat er voor verschillende producten verschillende, gepersonaliseerde e-mails nodig zijn, hoef je hier niets te doen.
• Integratie – doen wanneer je internationale klanten hebt.
  Met deze integratie kan automatisch de locatie van klanten bepaald worden om zo de belastingtarieven en verzendmethoden weer te geven die specifiek zijn voor hun locatie. Om dit te bepalen, integreert WooCommerce met MaxMind GeoLite2-geolocatiegegevens.
  Volg de instructies op deze pagina waar je onder andere leest hoe je de benodigde, gratis MaxMind account aanmaakt.
• Site zichtbaarheid: niet aanpassen. Pas wanneer de website / shop af is en online gaat, zetten we deze op Live.
• Verkooppunt: adresgegevens invullen.
• Geavanceerd: hier hoef je niets te doen.

Informatie nodig om product toe te voegen in WooCommerce

Om het te verkopen product te kunnen toevoegen heb ik in ieder geval nodig:

• Naam product
• Prijs
• Beschrijving – er zijn 2 soorten beschrijvingen:
  korte beschrijving
  lange beschrijving
  Je kunt, maar hoeft niet, beiden gebruiken
• Afbeelding

Er kunnen ook andere modules / worden toegevoegd. Denk bijvoorbeeld aan aanverwante producten.

​Op de productpagina van mijn Google Analytics tutorial is Haal meer uit jouw website door met Google Analytics aan de slag te gaan. de korte beschrijving en onder Beschrijving staat de lange beschrijving.

Mollie instellen

Wanneer je betalingen via Mollie laat doen, zul je een account bij Mollie moeten aanmaken. Vervolgens zul je de Mollie Payments for WooCommerce plugin die op je website staat, moeten instellen. Dit om Mollie te koppelen aan de website en de betaalmethode(s) toe te voegen.

Een goede handleiding hiervoor staat op de website van hostnet.

Mollie toevoegen aan tweede website

Wanneer je al een bestaande website met Mollie hebt en er een nieuwe website wordt gemaakt, is het mogelijk om Mollie ook te koppelen aan de nieuwe website.

• Log in bij Mollie en klik op het persoon icoontje rechtsboven aan.
• Klik op Instellingen.
• Klik op Profielen
• Klik op de knop (rechtsboven) + Profiel aanmaken en voeg de nieuwe website toe en vul de rest van de gegevens in zoals je die invulde voor de huidige website.

CleanTalk antispam plugin

Mocht je ondanks de StopSpammers plugin toch nog veel spammails, ontvangen, dan kan de CleanTalk antispam plugin een oplossing zijn. Deze plugin kun je gratis 7 dagen testen. Je zult hiervoor wel een account moeten aanmaken. Ga daarvoor naar de website van CleanTalk, vul je e-mailadres en de url van je website in en klik op Create account. 

Stuur mij vervolgens de code die in het gele scherm verschijnt. Ik voeg die code dan toe aan de plugin die ik op jouw website heb geïnstalleerd.

De plugin zal een week lang gratis werken. Na die week hebben we contact. Wanneer de plugin zijn werk goed doet, kun je een abonnement afsluiten. Let daarbij goed op dat je geen abonnement voor allerlei extra afsluit; de prijs voor 1 jaar zal rond de $ 12 moeten zijn.

Je zult nog wel je account moeten bevestigen. Dit doe je door op de Confirm the account te klikken in de mail die je automatisch ontvangt van CleanTalk.

Draw attention tekengereedschap

Met Draw attention kun je delen van een afbeelding op jouw website klikbaar maken. Wanneer een bezoeker op zo’n gedeelte klikt, verschijnt er naast de afbeelding informatie over dat gedeelte van de afbeelding.

Intekenen van klikbare delen in Draw Attention

Ga hiervoor in het dashboard naar Draw Attention – Edit Image. Geef de afbeelding een naam.

In de rechterkolom voeg je in het vakje Afbeeling, de foto toe waaraan de klikbare gedeeltes toegevoegd moeten worden. 

In het veld Highlight styling kun je vormgeven hoe de klikbare delen op de afbeelding eruit moeten zien. Het veld More Info Box Styling kun je negeren, die styling wordt door Divi gedaan. Als dit al wordt gebruikt, want je kunt er ook voor kiezen dat wanneer men op een bepaald gedeelte klikt, men naar een andere pagina van de website gaat.

Bij het onderdeel Hotspot areas geef je de klikbare gedeeltjes aan. Je kunt kiezen of er na klikken informatie naast de afbeeldingen moet verschijnen of dat de bezoeker na klikken naar een andere pagina van de website gaat.

Hoe je het gebied intekent wordt in onderstaande video goed uitgelegd (vanaf 10:27). Let op: de video is gemaakt met een eerdere versie van de plugin en sommige zaken werken nu anders. Maar het intekenen van het gebied niet. Bekijk de video dus alleen vanaf 10:27 om te zien hoe het intekenen werkt.

Aanvullende informatie invullen in Draw Attention

Vul vervolgens de volgende velden in:

• Title: Lot gevolgd door het nummer van de lot
• Action: laten staan op Show More Info
  • Description: vul hier de tekst in die verschijnt wanneer iemand op de lot klikt. Let op: doe speciaal plakken (dus plakken zonder code).
    Tip: kopieer de info van reeds toegevoegd lot, om gelijke vormgeving (vette tekst 1e woord(en) van regel te behouden.
    Vergeet niet de link naar de pagina met video en foto’s van de lot aan te passen. Klik hiervoor op de tekstlink en vervolgens op het potloodje en vervolgens op het zwarte radertje. Pas in het URL veld in het Linktekst veld het getal aan.
• Detail image: klik op Add or Upload File en selecteer hier de reeds naar de media bibliotheek geuploade Google Earch afbeelding van de lot.

Wanneer dit allemaal gedaan hebt klik je rechtsboven op Updaten.