Inspiration Station

Categorie: WordPress

  • WordPress website vertalen met WPML

    WordPress website vertalen met WPML

    Als je website zich niet uitsluitend op Nederlandstalige bezoekers richt is een meertalige site natuurlijk een must. Dé standaard plugin om je WordPress website te vertalen is WPML.
    WPML staat voor WordPress MultiLingual en is de enige vertaal plugin die door alle grote thema’s en plugins ondersteund wordt.

    Met WPML kun je vrijwel ieder onderdeel van je WordPress site vertalen. Vanzelfsprekend je teksten, maar ook de permalinks (url), widgets, teksten van plugins en thema’s, menu’s, WooCommerce producten, custom post types enzovoorts. Daarnaast kun je met WPML bijhouden hoe ver je bent met vertalen, of een vertaler inhuren en zijn vorderingen bijhouden.

    In deze WPML review en tutorial lees je dat:

    WPML kopen

    WPML is een premium plugin. Je zal deze dus eerst moeten kopen, hij is helaas niet gratis te downloaden. Je kunt de plugin kopen op de officiele website.

    De goedkoopste versie, Multilingual Blog, kost $ 39,00 voor het eerste jaar en daarna $ 29,25 per jaar voor support en updates, maar die versie is vrij beperkt qua mogelijkheden.
    Zo kun je er geen widgets of WooCommerce producten mee vertalen, en ook pagina’s en berichten die gemaakt zijn met een page builder als Elementor of Divi kun je niet vertalen met de  Multilingual Blog versie van WPML.

    Je hebt dan ook al snel de Multilingual CMS versie nodig, die $ 99,00 kost voor het eerste jaar en daarna $ 74,25 per jaar voor support en updates.

    Je bent overigens niet verplicht je licentie te verlengen, als je dat niet doet zal WPML voorlopig gewoon blijven werken maar krijg je geen updates en support meer.
    Je zal echter begrijpen dat je eigenlijk niet zonder updates kunt, dat levert vroeg of laat altijd problemen op.

    Een pagina of bericht vertalen met WPML

    Heb je WPML nog niet geinstalleerd of ingesteld? Klik dan hier.

    Als je WPML geïnstalleerd hebt en je gaat naar het overzicht van alle pagina’s of berichten zul je zien dat er achter de titel vlaggetjes met daaronder plusjes, potloodjes of tandwiel icoontjes staan (1).

    Een plusje betekent dat er nog geen vertaling aanwezig is, een potloodje betekent dat er al wel een vertaling is en een tandwiel icoontje betekent dat er een gewerkt wordt aan een vertaling, maar dat die nog niet compleet is.  

    Klik op het plusje om een vertaling toe te voegen, en het potloodje of tandwieltje om een bestaande vertaling te bewerken.

    Je krijgt dan twee kolommen naast elkaar te zien. In de linker kolom zie je de teksten in de originele taal, en in de rechter kolom de vertaalde teksten. Bij een nieuwe vertaling is de rechter kolom uiteraard nog leeg, daar typ je dus de vertaalde tekst.

    Elk onderdeel heeft een apart vak, dus bijvoorbeeld een vak voor de titel, een vak voor de inhoud en bij een page builder als Divi of Elementor heeft elke module ook een eigen vak. Lekker overzichtelijk!

    Bovendien zie je hier alleen de onderdelen die per taal kunnen verschillen, zoals teksten en afbeeldingen. 

    Als je een onderdeel vertaald hebt vink je “vertaling is voltooid” aan. Je ziet dan onderin hoever je al bent, en ook in het menu “vertalingen” zie je nu dat eraan gewerkt wordt, of dat de vertaling van de betreffende pagina voltooid is als het balkje onderin op 100% staat. 

    Met het icoontje tussen de kolommen in kun je de inhoud kopiëren van het origineel naar de vertaling. Dat kan heel handig zijn; zo kun je bijvoorbeeld een andere foto instellen voor iedere taal, maar meestal zul je dezelfde foto gebruiken voor alle talen. Met deze knop kun je dan eenvoudig de URL van de foto kopiëren naar de vertaalde pagina.

    Er zijn overigens nog meer manieren om je pagina’s en berichten te vertalen met WPML, o.a. vanaf de pagina zelf, onder het kopje “taal” in de rechter kolom, maar bovenstaande methode is het makkelijkst. 

     

    WPML maakt voor iedere taal een kopie

    WPML maakt voor iedere taal een kopie van de originele pagina of bericht. Als je dus 20 pagina’s in 2 talen hebt vertaald zijn er in totaal 60 pagina’s (bijvoorbeeld 20 in het Nederlands, 20 in het Engels en 20 in het Duits). Bovenaan zie je hoeveel pagina’s er in elke taal zijn (2). Klik op een taal om alleen de pagina’s in die taal te zien. Het werkt het makkelijkst om op “Nederlands” te klikken en vanuit daar met de plusjes, tandwieltjes of potloodjes naar de vertaalde pagina’s te gaan.

    Permalinks (de URL) vertalen

    Het is ook aan te raden de permalink (de URL van je pagina of bericht) per taal aan te passen.
    Zo kun je een pagina “over ons” hebben, met als URL jouwwebsite.nl/over-ons/, maar het is natuurlijk beter als je de URL van de Engelse pagina jouwwebsite.nl/en/about-us/ is. 

    Als je direct de titel mee vertaalt als je een vertaling aanmaakt (voordat je op “publiceren” klikt dus)
    zal deze automatisch gebruikt worden voor de URL. Dat is uiteraard de makkelijkste manier, maar als je dat vergeten bent kun je de URL gelukkig ook achteraf nog aanpassen. 

    Daarvoor klik je eerst op de gewenst taal bovenaan het overzicht van alle pagina’s of berichten (2) en vervolgens op de titel van de pagina of het bericht dat je wilt bewerken. Daarna klik je in de rechter kolom op “permalink”, daar kun je de URL naar wens aanpassen. 

    Je navigatiemenu vertalen met WPML

    Natuurlijk moet ook je navigatiemenu vertaald worden. Als je via weergave –> menu’s naar je menu instellingen gaat zie je rechts bovenin een blokje waarmee je je menu’s kan vertalen. 

    Je kunt hier handmatig een nieuw menu aanmaken door op het plusje te klikken, maar je kunt ook op de link daaronder klikken “menu’s tussen talen synchroniseren” om dit automatisch te doen.

    WPML laat je dan zien welke pagina’s al vertaald zijn. Als je op de “sync” button kikt kun je vervolgens selecteren welke pagina’s je wilt synchroniseren. Klik op “apply changes” om de wijzigingen door te voeren. 

    Verder hoef je niets te doen, nu wordt automatisch het juiste menu bij de juiste taal getoond.

     

     

     

    Widgets vertalen met WPML

    Ook je widgets kun je eenvoudig vertalen met WPML. Je kunt namelijk per widget instellen in welke taal deze getoond moet worden. Zo kun je bijvoorbeeld een tekst widget met een Nederlandse tekst alleen tonen op Nederlandse pagina’s, en een tekst widget met een Engelse tekst alleen op Engelstalige pagina’s.

    Je kunt er ook voor kiezen om een bepaalde widget te tonen in alle talen, handig bij een afbeelding bijvoorbeeld. 

    Het is helaas niet mogelijk om een bepaalde widget in meerdere talen te tonen, bijvoorbeeld alleen in het Nederlands en Engels wel, maar niet in het Duits. Als je dat wilt zul je dezelfde widget meerdere keren moeten toevoegen (1 keer met weergave in Nederlands en 1 keer met weergave in Engels). 

     

    Teksten in je thema en plugins vertalen

    Thema’s en plugins voegen ook vaak teksten aan je website toe. Sowieso in de admin, maar vaak ook aan de “voorkant” van je website zoals op buttons en in formulieren. Gelukkig kun je ook deze teksten vertalen met WPML, want het staat immers zo slordig als je een Nederlandse website hebt en op de zoek button staat “search”, of “name” in je contactformulier.

    Nu zijn de meeste grote plugins en thema’s standaard al wel vertaald in het Nederlands, maar niet altijd en ook lang niet altijd even goed.  

    Om thema’s en plugins te vertalen klik je op “stringvertaling” (1) onder WPML in het admin menu. Hier vind je alle vertaalbare teksten in plugins en thema’s. Bovenin kun je deze filteren op het thema of de plugin die je wilt bewerken (2), alleen de teksten tonen die nog niet vertaald zijn of zoeken naar een bepaalde tekst. 

    Klik achter de tekst die je wilt vertalen op “vertalingen” (3) en vul de vertaalde tekst in bij het vak van de juiste taal. Als je klaar bent vink je “gebruik mijn vertaling” of “vertaling voltooid” aan (4), en vervolgens klik je op “opslaan”. 

    WPML installeren en instellen

    Voordat je kunt beginnen met het vertalen van je WordPress website moet je WPML natuurlijk nog wel installeren en instellen.
    Ik ga er echter van uit dat de meeste lezers van dit artikel WPML al geïnstalleerd hebben, vandaar dat deze informatie op een wat onlogische plek staat.

    Als je WPML voor het eerst installeert krijg je een melding “U dient WPML in te stellen voordat u kunt beginnen met vertalen”, met daaronder een button “WPML instellen”.
    Als je daarop klikt krijg je een wizard die je door de belangrijkste instellingen leidt:

    • De eerste stap is het instellen van de huidige taal. Dat zal dus meestal Nederlands zijn.
    • De tweede stap is het selecteren van de talen die je wilt gebruiken op je site.
    • In de derde stap stel je in waar je de taalwisselaar (de vlaggetjes waarmee je bezoekers de taal kunnen kiezen) wilt laten verschijnen.
      Persoonlijk zet ik die meestal in het navigatiemenu, maar je kunt deze ook tonen in een widget of in de footer.
    • In de vierde stap bepaal je of je gegevens naar WPML wilt verzenden zodat ze je sneller kunnen helpen bij problemen.
    • De laatste stap in de wizard is het invoeren van je licentiecode.  WPML werkt met een eigen licentiecode voor iedere site, ook als je meerdere sites onder 1 account registreert.
      Met de Multilingual CMS versie mag je WPML bijvoorbeeld op maximaal 3 sites installeren, en elke site heeft zijn eigen licentiecode nodig. Die kun je in deze stap automatisch genereren.

    Klik daarna op “voltooien” om de wizard af te sluiten. Alles wat je met de wizard instelt kun je later overigens weer aanpassen in de instellingen. 

    WPML instellingen

    Als WPML geïnstalleerd is maakt deze een nieuw menu item aan (1).

    WPML analyseert automatisch welke thema’s en plugins je hebt geïnstalleerd en welke aanvullende modules je daarvoor nodig hebt (2). Zo heb je voor het vertalen van teksten in thema’s en plugins bijvoorbeeld de “string translation” module nodig.

    Geen zorgen, deze extra modules zijn standaard inbegrepen (vanaf de Multilingual CMS versie tenminste). Klik op 1 van de linkjes om naar de plugin installer te gaan, vink de genoemde modules aan en klik onderaan op “downloaden”. Vink ook “activeren na het downloaden” aan.

    Het volgende blok “Aan het doorgeven aan wpml.org” is hetzelfde als stap 4 van de wizard, maar dan in lekker krom Nederlands 😉

    Bij het blok “talen voor deze site” kun je talen toevoegen of verwijderen. Spreekt voor zich.

    Het blok “Taal URL-formaat” (3) is wel een belangrijke instelling. Hier stel je namelijk in hoe de talen moeten worden weergegeven in de URL. Ik gebruik zelf altijd de instelling “Verschillende talen in bestandsmappen”, en vink “Bestandsmap gebruiken voor standaard taal” NIET aan.

     

    Taalwisselaars (de vlaggetjes waarmee bezoekers de taal kunnen kiezen)

    Op deze pagina kun je ook instellen waar je de taalwisselaars wilt hebben. Zoals hierboven vermeld kies ik meestal voor een taalwisselaar in het menu, en hier kun je aanpassen hoe die eruit moet komen te zien. Zelf kies er meestal voor om de taalwisselaar als laatste menu item toe te voegen, als dropdown en alleen de vlaggetjes te tonen. 

    Als je al een taalwisselaar hebt kun je de instellingen aanpassen door op het potloodje te klikken. Dat geldt voor alles binnen WPML, dus daarom maar even dik gedrukt.

    De meeste andere instellingen op deze pagina spreken vrij voor zich. Je kunt instellen of je links naar de andere talen wilt weergeven boven en onder de content, of je bepaalde talen wilt verbergen voor bezoekers als je nog bezig bent met vertalen, instellen of je thema ook meertalig moet zijn (altijd aan te raden), of je bezoekers automatisch naar de juiste taal wilt doorsturen op basis van hun browsertaal (ik kies hier meestal de tweede optie “Bezoekers doorsturen op basis van de browsertaal enkel indien er vertalingen bestaan”) en nog een paar meer geavanceerde opties die je gewoon op de standaard instelling kunt laten staan. 

     

    Lokalisatie van thema’s en plugins  / stringvertaling

    Bij het tweede menu onderdeel van WPML kun je instellen hoe je thema’s en plugins wilt vertalen. Hiermee kun je bijvoorbeeld de teksten op buttons en in formulieren vertalen. 
    Het staat immers zo slordig als je een Nederlandse website hebt en op de zoek button staat “search”, of “name” in je contactformulier. Nu zijn de meeste grote plugins en thema’s standaard al wel vertaald in het Nederlands, maar niet altijd en ook lang niet altijd goed.  

    Als er vertaalbare teksten in een thema of plugin zijn zie je dat op deze pagina (er staat dan een cijfertje achter). Klik vervolgens op de link (naam) om alle vertaalbare strings (= teksten) te zien. Klik achter de tekst die je wilt vertalen op “vertalingen”. Als je klaar bent klik je op “gebruik mijn vertaling” of “vertaling voltooid” en vervolgens op “opslaan”. 

    Vertaalbeheer

    Hier kun je instellen wie je site gaat vertalen, en of je daar de klassieke vertaaleditor of de nieuwe geavanceerde vertaaleditor voor wilt gebruiken.

    De nieuwe geavanceerde editor biedt een paar mooie features zoals een vertaalgeheugen (als je een woord al eerder vertaald hebt onthoudt WPML dat zodat je het niet nog eens hoeft te vertalen) en automatische vertalingen. Uiteraard moet je die automatische vertalingen nog wel handmatig  checken, maar het scheelt een hoop werk! Maar let op: op dit moment is deze nieuwe editor nog gratis te gebruiken, maar dat zal in de toekomst nog maar zeer beperkt het geval zijn. Dit wordt een betaald abonnement.

    Als je dit eenmaal ingesteld hebt vind je op deze pagina het vertaaldashboard, waar je snel kunt zien welke content al vertaald is en welke nog moet gebeuren. 

    Vertalingen

    Als je vertaalopdrachten uitbesteed hebt (aan een gebruiker van je site, of aan een externe vertaaldienst) zie je hier de status van hun werkzaamheden.

    Sync van WP-menu’s

    Hier kun je de menu items automatisch laten synchroniseren tussen verschillende talen zodat je ze niet allemaal handmatig hoeft toe te voegen. Je moet ze daarna nog wel vertalen.
    Zie daarvoor “Je navigatiemenu vertalen met WPML”.

    Taxonomievertaling (categorieën en tags)

    Taxonomieën zijn dingen als categorieën en tags. In dit menu kun je die vertalen. 

    Pakketten

    Dit onderdeel is bedoeld voor developers en kun je dus overslaan.

    Instellingen

    Onder instellingen vind je nog een hele hoop opties, maar die kun je in principe gewoon op de standaard instellingen laten staan.

     Meertalige WordPress website laten maken?

    Dit artikel is geschreven door Bob de webbouwer. Ik ben een officieel erkende WPML contractor en ik bouw graag een meertalige website voor je, maar kan ook alleen WPML voor je installeren en instellen op je bestaande website.

    De kosten voor het installeren en instellen van WPML bedragen € 175,00 exclusief BTW, inclusief een levenslange licentie waardoor je geen jaarlijks terugkerende licentiekosten hebt. Deze levenslange licentie wordt niet meer aangeboden door WPML zelf, dus een licentie aanschaffen via mij is al snel voordeliger 🙂

    Het “addertje onder het gras” bij deze deal is dat support niet is inbegrepen. Indien gewenst kun je via Bob een support licentie kopen voor $ 39,00 per jaar, waarmee je gebruik kunt maken van de officiële WPML support. Verder zijn er geen credits voor automatische vertalingen inbegrepen, deze kun je los aanschaffen.

    Vraag direct een vrijblijvende offerte aan

    Dit artikel bevat affiliate links. Dat wil zeggen dat ik een vergoeding krijg als je WPML koopt via een link op deze pagina. Dat kost jou verder niets extra’s, maar zorgt er wel voor dat ik jou kan blijven helpen met dit soort gratis artikelen. Dus als je WPML wilt  aanschaffen stel ik het zeer op prijs als je dat via deze pagina doet 😉

    Heb je WPML al maar wil je me toch bedanken voor mijn hulp in dit artikel?
    Dan kun je ook een kleine eenmalige donatie doen via de button hiernaast 🙂

     

  • Oxygen Builder review (Oxygen 3.0 update)

    Oxygen Builder review (Oxygen 3.0 update)

    Als je een beetje actief bent in de WordPress community heb je vast al wel eens gehoord van Oxygen, een nieuwe drag & drop page builder die de strijd aan gaat met o.a. Divi en Elementor. In deze review lees je wat je allemaal kunt met Oxygen en of het iets voor jou is.

    Oxygen : een krachtige site builder

    Op 20 juni 2018 is Oxygen 2.0 gelanceerd, en ik lees steeds vaker dat mensen overstappen op deze nieuwe builder.
    Dat is niet zonder reden, want Oxygen is een hele krachtige tool. Oxygen is niet zomaar een page builder, maar een complete site builder. Je kunt namelijk niet alleen de content van je website aanpassen, maar ook de header, footer, sidebars enzovoorts. Je kunt dus zelf bepalen waar dingen als het logo, de zoekfunctie, en het navigatiemenu  komen.

    Al die onderdelen zijn beschikbaar als module zodat je ze eenvoudig kunt toevoegen. Oxygen biedt je de keuze uit meer dan 60 modules, die duidelijk zijn onderverdeeld. Naast modules voor het navigatiemenu, een loginformulier en een zoekbalk zijn ook alle standaard dingen aanwezig, zoals secties, kolommen, tekstblokken, buttons, links, afbeeldingen, galerijen,  prijstabellen, testimonials, voortgangsbalken, tabs, accordeons en icons van font awesome.

    Als je op een module klikt zie je 2 tabs: primary en advanced. Onder de primary tab vind je de basisinstellingen voor de betreffende module. Bij een tekstmodule kun je hier bijvoorbeeld de tekstkleur, font family, lettergrootte en font weight aanpassen en bij een voortgangsbalk stel je hier het te tonen percentage, de animatie en de kleuren in.

    Die kleuren kun je instellen als global color; als je zo’n global color wilt aanpassen hoef je dat maar op 1 plek te doen, waarna die kleur ook op alle andere plekken op de website waar deze gebruikt wordt automatisch wordt aangepast. De tekst pas je altijd in de visual builder zelf aan, simpelweg door er op te klikken en te typen.

    Onder het advanced tabblad vind je vervolgens diverse styling opties. Hier stel je dus bijvoorbeeld de achtergrond in, padding en margin (die laatste kun je ook gewoon slepen naar de gewenste hoogte in de visual builder), randen, box- en tekstschaduw en enkele leuke filter effecten zoals blur, sepia en grijstinten. Tot slot kun je hier ook custom CSS en javascript code invoeren.

    Daarnaast kun je templates maken die je kunt toewijzen aan pagina’s, berichten, archiefpagina’s, WooCommerce pagina’s, je 404 pagina etcetera. Je kunt per template bepalen voor welke type posts deze gebruikt worden (bijvoorbeeld alleen voor berichten, of voor berichten en pagina’s), en je kunt zelfs instellen dat je een template alleen wilt gebruiken bij een bepaalde categorie. Berichten uit de categorie “nieuws” kunnen dus bijvoorbeeld een ander uiterlijk krijgen dan andere berichten.

    Oxygen is niet de enige page builder waarmee dit kan; Elementor en Beaver bieden deze optie al langer. Maar waar je bij Elementor en Beaver die onderdelen aanpast in een bestaand thema bouw je met Oxygen een compleet nieuw thema, zonder afhankelijk te zijn van een ander thema dus. Sterker nog; je bestaande thema wordt volledig vervangen door Oxygen.

    Een andere hele krachtige feature van Oxygen is Dynamic Data. Daarmee kun je automatisch dynamische content invoegen, wat met name erg handig is bij het bouwen van een template. Als je bijvoorbeeld de template voor berichten wilt maken kun je met dynamic data de titel, publicatiedatum, uitgelichte afbeelding en natuurlijk de tekst zelf automatisch invoegen op de door jou gewenste plek. Daarnaast kun je ook widgets op iedere gewenste plek toevoegen – ook degene die door andere plugins worden aangemaakt.

    Net als bij de meeste andere page builders kun je ook bij Oxygen elk onderdeel van je design opslaan in een bibliotheek zodat je deze ergens anders op de site kunt hergebruiken.
    Zo kun je bijvoorbeeld een call to action button maken die je op iedere pagina kunt invoegen.

    Deze bibliotheek bevat ook een aantal zogenaamde design sets; standaard designs die je zo kunt importeren. Zo is het meeste werk al voor je gedaan en hoef je alleen nog maar de kleuren en content hoeft aan te passen. Op dit moment zijn er nog maar een stuk of 10 van deze design sets, maar elke design sets bevat weer tientallen templates om uit te kiezen.
    Zo kun je binnen 1 design set bijvoorbeeld kiezen uit verschillende headers, footers, blog designs, contactpagina’s enzovoorts. Alle onderdelen uit zo’n design set passen prima bij elkaar, dus je kunt bijvoorbeeld header #1 prima combineren met footer #3 en blog design #5 en toch een samenhangend geheel krijgen.

    Al deze designs zijn standaard responsive, dus ook geoptimaliseerd voor tablets en smartphones. Ook je eigen designs kun je gemakkelijk optimaliseren voor kleinere schermen,
    waarbij je alle eigenschappen per device kunt aanpassen. Je kunt dus bijvoorbeeld voor een smartphone een andere achtergrondkleur instellen dan voor een desktop, of een kleinere lettergrootte, of een onderdeel überhaupt verbergen.

    Update: Oxygen 3.0 met WooCommerce builder, Gutenberg integratie en conditionele weergave

    Op 3 september 2019 werd Oxygen 3.0 gelanceerd, met daarin o.a. de lang verwachte WooCommerce builder waarmee je zelf je hele WooCommerce webshop kunt vormgeven.
    Zo kun je o.a. instellen hoeveel kolommen je winkelpagina moet hebben en welke kleur de buttons moeten hebben, maar ook of die buttons een schaduw moeten hebben, welk lettertype ze moeten hebben enzovoorts. Zelfs elementen als de “sorteer op” dropdown kun je helemaal naar wens vormgeven.

    Ditzelfde geldt ook voor andere WooCommerce pagina’s, zoals de winkelwagen pagina, de checkout pagina en zelfs de mijn account pagina. Hoewel je de inhoud van die pagina’s niet kan aanpassen kun je wel de vormgeving helemaal naar wens aanpassen.

    De inhoud van je productpagina kun je wel helemaal naar wens aanpassen. Je kunt dus zelf bepalen waar je de productafbeelding wilt hebben, de “in winkelwagen” knop, de prijs, de reviews, de gerelateerde producten enzovoorts. Elk element kun je zelf toevoegen – of juist weglaten – en natuurlijk helemaal naar wens vormgeven. 

    De tweede belangrijke functie in Oxygen 3.0 is de mogelijkheid om iedere sectie of pagina bewerkbaar te maken met Gutenberg, de standaard editor van WordPress.
    Dit is met name handig voor webbouwers die websites bouwen voor klanten, maar die klanten geen toegang willen geven tot Oxygen (dat is per gebruikersrol in te stellen).

    Zo’n webbouwer ontwerpt dan een pagina en vinkt aan dat die pagina (of sectie) bewerkt moet kunnen worden in Gutenberg. Vervolgens kan de klant zelf dingen als teksten en afbeeldingen aanpassen in Gutenberg. De mogelijkheden die de klant heeft zijn in dit geval wel behoorlijk beperkt; hij kan bijvoorbeeld geen kleuren aanpassen, animaties toevoegen, de volgorde van elementen wijzigen enzovoorts, en Gutenberg werkt in de backend. Maar goed, veel webbouwers willen ook niet dat de klant teveel kan aanpassen – en veel klanten ook niet trouwens. 

    Een derde belangrijke toevoeging – die overigens al in enkele maanden eerder toegevoegd is in versie 2.4 – is conditionele weergave. Hiermee kun je heel precies bepalen wanneer een bepaald element moet worden weergegeven. Hiermee kun je bijvoorbeeld een element alleen weergeven voor ingelogde gebruikers met een bepaalde gebruikersrol, of alleen op een bepaalde pagina, of juist niet op een bepaalde pagina, of alleen in een bepaalde categorie, of alleen op maandag… een hele krachtige toevoeging dus.

    Scherp geprijsd

    Oxygen is behoorlijk scherp geprijsd; voor slechts $ 99,00 heb je een licentie met levenslange update en support, en dat ook nog eens voor een onbeperkt aantal websites.

    Men heeft er wel voor gekozen om de WooCommerce builder en de Gutenberg integratie als aparte modules uit te brengen. Dat is enerzijds om de basisversie van Oxygen zo licht mogelijk te houden; als je geen WooCommerce website hebt is het ook niet nodig om de code van de WooCommerce builder te laden, dat zou de builder en de website alleen maar onnodig langzamer maken. Datzelfde geldt voor de Gutenberg integratie.

    Deze modulaire opbouw geeft Oxygen echter ook de mogelijkheid de prijzen te verhogen; als je de WooCommerce builder erbij wilt betaal je daar meer voor, en dat geldt ook voor de Gutenberg integratie. Dat geldt overigens alleen voor nieuwe klanten: als je al een licentie had voor Oxygen 2 krijg je deze nieuwe modules er gratis bij. 

    Gebouwd voor developers

    De Oxygen builder biedt dus flink wat mogelijkheden tegen een zeer aantrekkelijke prijs, maar toch zal deze relatief nieuwe page builder de markt voorlopig nog niet gaan veroveren. Dat komt vooral omdat de interface simpelweg (nog) niet gebruiksvriendelijk genoeg is voor “gewone” WordPress gebruikers. Zo wordt er erg veel gebruik gemaakt van CSS termen zoals “float”, “overflow”, “clear”, “position” en “text-transform”, kun je met classes werken om gemakkelijk meerdere elementen tegelijk aan te passen en moet je een element op display: none instellen om het te verbergen op smartphones.

    Dat is allemaal prima voor ervaren webbouwers en andere mensen die redelijk thuis zijn in CSS, voor hen is Oxygen een enorm krachtige tool die hun werk een stuk eenvoudiger maakt, want je kunt vrijwel alles instellen zonder zelf 1 regel code te hoeven schrijven. Aangezien Oxygen dus zelf de CSS code toevoegt – net als elke andere page builder overigens – kun je het ook best gebruiken zonder CSS kennis, maar leren werken met Oxygen zal wel een stuk lastiger zijn dan leren werken met een meer gebruiksvriendelijke page builder als Elementor of Divi.

    Overigens is de documentatie voor Oxygen prima in orde, inclusief uitgebreide video tutorials.

    Conclusie

    Oxygen is een enorm krachtige tool als je een beetje thuis bent in CSS termen, maar waarschijnlijk niet gebruiksvriendelijk genoeg voor de gewone WordPress gebruiker.
    De nieuwe Gutenberg integratie maakt Oxygen echter wel een stuk meer geschikt voor webbouwers waarvan de klant zelf teksten en afbeeldingen wil kunnen aanpassen.

    Als je alleen de inhoud van je pagina’s wilt kunnen aanpassen – bijvoorbeeld kolommen maken, kleuren aanpassen, animaties toevoegen – kun je waarschijnlijk beter voor een wat meer gebruiksvriendelijke page builder als Elementor of Divi kiezen.

    Wil je echter volledige controle over je website en zelf kunnen bepalen hoe de header, footer en elk ander onderdeel eruit komt te zien, en ben je bereid wat tijd te investeren om de werking van Oxygen onder de knie te krijgen? Dan is het echt een enorm krachtige tool die ook nog eens super scherp geprijsd is.

    Twijfel je nog of Oxygen iets voor jou is? Je kunt het gratis uitproberen op https://oxygenbuilder.com/try/. Daarnaast is er ook een 60 dagen niet goed, geld terug garantie 🙂

    Hulp nodig met Oxygen of een andere page builder?

    Heb je hulp nodig met Oxygen of een andere page builder zoals Divi of Elementor? Of zoek je iemand die een website voor je kan maken hiermee? Dan ben je bij Bob de webbouwer aan het juiste adres!

    Vraag direct een vrijblijvende offerte aan

    Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
    Een kleine eenmalige donatie wordt altijd zeer op prijs gesteld 🙂

  • Zita WordPress thema review

    Zita WordPress thema review

    Als je Elementor, Brizy of een andere WordPress page builder gebruikt heb je een thema nodig dat daar goed mee omgaat. Als iemand op Facebook of een forum vraagt naar een uitgebreid thema dat goed werkt met page builders worden vaak thema’s als Astra en OceanWP genoemd. Maar de laatste tijd zie ik ook steeds vaker een nieuwe naam: Zita.
    Dus besloot ik Zita eens te checken 🙂 In deze Zita theme review vertel ik je of Zita een goede keuze is of je volgende Elementor of Brizy project, en of de pro versie zijn geld waard is. 

    Zita theme header and footer builder

    Zita is een gratis thema, dat is altijd een goed begin natuurlijk. 😉 Nog beter is dat de gratis versie van Zita een hele hoop mooie features bevat, waaronder een header en footer builder!

    Zita’s header builder geeft je behoorlijk wat design vrijheid, met een above header area, main header area en below header area. Dat wil zeggen dat je header eigenlijk uit 3 rijen bestaat, die je weer kunt onderverdelen in meerdere kolommen.

    Zo kun je de above en below header areas verdelen in maximaal 3 kolommen, en je kunt bij elke kolom zelf bepalen welke content je daarin wilt tonen. In mijn screenshot heb ik bijvoorbeeld custom tekst in de eerste kolom geplaatst, social media icoontjes in de tweede kolom en een zoek icoontje in de derde kolom.

    Je kunt ook een menu in een kolom plaatsen (handig voor een zogenaamd utilities menu, zoals login links enzo), maar het gaafste is nog dat je ook een widget area in elke kolom kunt plaatsen.

    Dat geeft je een hele hoop nieuwe mogelijkheden; want nu kun je bijvoorbeeld een afbeelding widget in de header plaatsen, een zoekvenster, een WooCommerce widget of zelfs een custom HTML widget zodat je werkelijk alles erin kunt plaatsen wat je maar wilt. En onthoud, dit zit dus allemaal in de gratis versie van Zita!

    De above en below header areas bieden dus een hele hoop flexibiliteit en design vrijheid. De main header area biedt wat beperktere mogelijkheden, maar heeft toch een aantal mooie features. Om te beginnen kun je kiezen uit
    8 verschillende header layouts; een klassieke layout met het logo links en het menu rechts, maar ook een layout met het logo in het midden en het menu eronder, alles in een sidebar links of rechts, en zelfs een “mobile style” menu op de desktop met een menu knop die een sidebar links tevoorschijn tovert als je erop klikt.

    Daarnaast kun je kiezen wat je als laatste menu item wilt instellen. Je kunt daar bijvoorbeeld een zoekicoontje toevoegen, of een knop, maar je kunt ook eigen tekst of social media icoontjes toevoegen.

    Je kunt ook een lijn tussen de header en de inhoud toevoegen en daar de kleur en dikte van aanpassen, evenals enkele opties voor het mobiele menu. Verder kun je kiezen tussen een licht of donker kleurenschema. In Zita Pro heb je meer opties en kun je alle kleuren, lettertypes enzovoorts instellen.

    Je kunt wel een transparante header instellen in de gratis versie van Zita, iets dat normaal alleen in de pro versie van een thema mogelijk is. 

    Naast een header builder biedt Zita ook een footer builder, die ongeveer dezelfde mogelijkheden biedt. Je hebt dus een above en below footer area die je kunt verdelen in 3 kolommen, en in elk van die kolommen kun je tekst, widgets enzovoorts toevoegen. De below footer area is de ideale plek voor je copyright tekst, voorwaarden en privacy statement. 

    De footer zelf biedt je de keuze uit 8 verschillende layouts: naast de traditionele 1, 2, 3 en 4 koloms layout kun je ook kiezen voor een 2/3 – 1/3 layout of een 1/4 – 1/2 – 1/4 layout. Elke kolom is een widget area waarin je alles kunt zetten wat je maar wilt. 

    Zita sidebar, blog, woocommerce en andere instellingen

    Het Zita thema laat je een standaard sidebar layout instellen (links, rechts of geen sidebar). Je kunt de breedte van de sidebar instellen in %, en je kunt een afwijkende standaard layout instellen voor pagina’s, blog posts en WooCommerce pagina’s. 
    Je kunt de instellingen zelfs per pagina aanpassen, en je kunt ook de (above en below) header en footer per pagina tonen of verbergen. Lekker flexibel dus!

    Het Zita WordPress thema biedt ook flink wat blog instellingen. Zo kun je instellen of je 1, 2, 3 of 4 kolommen wilt, en je kunt ook kiezen welke elementen je wilt tonen (auteur, categorie, datum, uitgelichte afbeelding, samenvatting) en zelfs de volgorde van die elementen aanpassen door ze simpelweg naar een andere plek te slepen. Dit zowel voor het blog overzicht als voor de individuele blog posts (berichten). 

    Alsof dat nog niet genoeg is biedt Zita ook een flink aantal WooCommerce instellingen. Ook hiervoor kun je instellen welke elementen je wilt tonen (afbeelding prijs, review sterren, de in winkelwagen knop enzovoorts), en hoe de winkelwagen widget in de header eruit moet zien.

    thdeNet als bij de blog instellingen kun je ook nu de elementen in de gewenste volgorde slepen, waardoor je behoorlijk wat controle hebt over hoe je WooCommerce pagina’s eruit zien.
    En niet alleen voor de shop pagina, maar ook voor de product pagina zelf. Daarnaast kun je instellen hoeveel gerelateerde en upsell producten je wilt tonen,en er zijn zelfs wat instellingen voor de checkout pagina.

     

    Andere Zita thema instellingen zijn:

    • Global colors, waarmee je o.a. de standaard accent kleur, titel kleur, tekst kleur en link kleur kunt instellen.
    • Styling voor het hamburger menu icoon, de terug naar boven knop, het zoek icoontje en standaard knoppen. 
    • Basis typografie voor de body, titel en content (font family, font size, text transform, line height en letter spacing)
    • Links naar je social media

    Alle instellingen doe je in de WordPress customizer, zodat je het effect van je aanpassingen in real time ziet. Bij elke instelling staat een link naar de help pagina over dat onderwerp op de Zita website, erg handig! 

    Zita theme templates

    Alsof dit alles nog niet genoeg is krijg je ook een aantal gratis demo templates die er standaard bij zitten. Momenteel kun je kiezen uit zo’n 20 van die templates voor Elementor, en nog maar een stuk of 4 voor Brizy, maar er worden regelmatig nieuwe templates toevoegt. 

     

     

     

    Zita Pro review (Premium Zita)

    Nogmaals, alle bovenstaande features zitten in de gratis versie van Zita. Voor degenen die nog meer functionaliteit willen is er Zita Pro, de premium versie van het Zita thema.
    Laten we eens kijken wat Zita Pro te bieden heeft in deze Zita Premium review!

    Op de Zita website is te lezen dat Zita Pro op dit moment de volgende onderdelen bevat: 

    • White label
    • Sticky header / footer / sidebar
    • Kleuren en achtergrond opties
    • Geavanceerde typografie opties
    • Meer blog layouts
    • Spacing instellingen
    • Meer WooCommerce opties
    • Meer controle over containers
    • Meer menu stijlen
    • Mega menu (coming soon)
    • Meer header en footer layouts
    • Ingebouwde social sharing
    • Pagination styling

    Klinkt goed, laten we er eens wat dieper induiken!

     

    White label

    Het eerste item op de lijst is white label. Dat biedt webdesigners zoals mij de mogelijkheid om alle Zita branding te verwijderen en het thema een eigen naam te geven, zodat het lijkt alsof je het thema zelf gemaakt hebt. Dat werkt redelijk, maar in de customizer staat nog steeds Zita als actief thema en die handige links naar de documentatie op de Zita website zijn natuurlijk ook niet zo handig meer als je niet wilt dat je klanten weten dat je eigenlijk Zita gebruikt.

    Sticky header / footer / sidebar

    In Zita Pro kun je instellen dat de header, footer en/of sidebar sticky zijn. Een sticky header zie je regelmatig: als je scrollt blijft de header bovenaan het scherm staan. Zoals eerder besproken kun je een aparte above, main en below header area instellen, en je kunt dan ook voor ieder deel apart instellen of je dit sticky wilt maken of niet. Je kunt er zelfs voor kiezen om de sticky header alleen te tonen als de gebruiker omhoog scrollt, en deze te verbergen als er omlaag gescrollt wordt.

    De sticky footer werkt een beetje anders – de footer blijft niet standaard onderaan de pagina staan, maar er verschijnt een subtiel pijltje waarop je kunt klikken om de footer tevoorschijn te toveren. Dat is slim, want anders zou de footer waarschijnlijk veel te veel ruimte innemen op het scherm. De sticky sidebar staat wel altijd in beeld, wat met name handig kan zijn bij WooCommerce shops enzo.

    Kleuren en typografie

    Zita Pro geeft je een stuk meer controle over kleuren en typografie. In de gratis versie van het thema kun je alleen enkele global colors instellen, maar met Zita Premium kun je elk element apart stylen: de titel, meta informatie, deel icoontjes, WooCommerce prijzen enzovoorts. Zo kan een producttitel bijvoorbeeld een andere kleur en lettertype hebben dan je blog titel. 

    Meer blog layouts

    Zita Pro voegt 3 extra blog layouts toe. In de gratis versie staan alle elementen onder elkaar, maar in Zita Pro kun je de uitgelichte afbeelding ook links of rechts van de content plaatsen, of een zig zag layout instellen waarbij de uitgelichte afbeelding om en om links en rechts staat. Eerlijk gezegd had ik wat meer verschillende layouts verwacht, zoals en mansonry layout (zeker omdat die op de afbeelding op de website staat) dus dat viel me een beetje tegen.

    Spacing

    Zita Pro laat je spacing instellen voor een behoorlijk aantal elementen, zoals het menu, de header, footer, blog, producten enzovoorts. Je kunt dit instellen in px, % of em, en je kunt andere instellingen gebruiken voor tablet en telefoon.

    Meer WooCommerce opties

    Zita Pro voegt ook wat extra WooCommerce opties toe, zoals een off canvas sidebar (een sidebar die verborgen is en tevoorschijn komt als de gebruiker op een pijl icoontje klikt) en quick view (een popup waarin de productdetails te zien zijn zodat je niet naar de productpagina hoeft te navigeren).

    Meer header en footer layouts

    Nou… nu even niet. Door wat technische problemen zijn deze momenteel verwijderd, maar volgens de ontwikkelaar zullen ze snel weer worden toegevoegd. 

    Pro templates

    Tenslotte krijg je ook nog enkele extra templates bij Zita Pro, maar op dit moment zijn dat er maar een stuk of 5. 

    Elite addons for Elementor

    Je hebt waarschijnlijk niet op die knop hierboven geklikt he? Snap ik, dat deed ik in eerste instantie ook niet. De Zita Pro features zijn oke, maar ook niet meer dan dat. Ze konden me niet overtuigen om het premium Zita thema te kopen. De WOW factor ontbreekt gewoon nog. Kleuren, typografie, spacing… dat zijn allemaal dingen die je ook in Elementor of Brizy kunt instellen. De blog layouts zijn simpelweg net goed genoeg en de extra header en footer layouts ontbreken momenteel uberhaupt. Sticky header is leuk maar niet bepaald uniek; elk betaald WordPress thema biedt die optie. Dan blijft eigenlijk alleen de WooCommerce opties over, maar dat alleen is niet genoeg. Dus ik had al besloten dat de gratis versie van Zita een prima thema is, maar de pro versie de investering nog niet waard is. En toen ontdekte ik Elite Elementor addons…

    Elite Addons voor Elementor geeft je 12 nieuwe widgets voor deze populaire page builder. Op de Zita site vind je demo’s van elke widget, en sommige zijn echt heel gaaf!

    De Advance Heading widget laat je schitterende (sub)headings maken, met (icon)  dividers en headings waarbij de achtergrondafbeelding door de tekst heen komt. 

    De Content Switcher widget is een soort van flip box met twee content areas; een voor de linker optie van de schakelaar en een voor de rechter optie. Door de schakelaar om te zetten kunnen je wisselen tussen de twee content areas.

    Het gaafste is echter dat je niet alleen tekst in die content areas kan zetten, maar ook opgeslagen secties of zelfs complete opgeslagen pagina’s! Op de manier kun je er echt alles in zetten wat je maar wilt.

    Hetzelfde geldt voor de Tabs widget. Er zit standaard een tabs widget in Elementor, maar daarmee kun je alleen maar content met een text editor toevoegen. In de tabs widget van Elite Addons kun je ook complete Elementor templates toevoegen, dus wederom alles wat je maar wilt. 

    De Image Animation widget is ook erg gaaf. Je moet echt even de demo bekijken om te zien hoeveel mogelijkheden deze widget biedt. Je krijgt flip box effecten, zoom effecten, kleuren overlays, enkele filter effecten… en je kunt ze allemaal naar wens combineren.

    De Image Pointer widget is ook een goed idee, maar de uitvoering heeft nog wel wat werk nodig. Deze widget laat je icoontjes op een afbeelding plaatsen met een tooltip erbij. Je kunt ervoor kiezen de tooltip alleen te tonen bij mouse over, en je kunt ook een animatie instellen. 

    Je kunt echter geen link instellen voor zo’n icoontje, en je kunt het incoontje ook niet simpelweg naar de gewenste positie slepen (terwijl dat wel mogelijk is in Elementor). Dus zoals ik al zei, een goed idee maar het heeft nog wat werk nodig.

     

    Ik schreef eerder dat de extra blog layouts in Zita Pro me een beetje teleur stelden, maar de Posts & Page Pro widget in Elite Elementor Addons maakt het weer goed 🙂  Deze widget biedt enkele hele gave opties om je blog pagina te pimpen, zoals randen en schaduws rondom je posts, achtergronden (je kunt per kolom een andere achtergrond instellen en je kunt kleuren, gradients en afbeeldingen instellen), een datum box enzovoorts. 

    Je kunt zelfs een andere bron kiezen, dus je kunt ook een grid maken met je pagina’s of WooCommerce producten in plaats van je blogberichten. Een hele gave widget dus!

     

    Elite Addons voor Elementor niedt ook enkele widgets die normaal alleen in Elementor Pro beschikbaar zijn, zoals een Countdown widget en Prijstabel widget. Dingen als een Instagram widget zorgen ervoor dat je weer een plugin minder hoeft te installeren. Alle widgets bieden een flink aantal styling opties, en ook de standaard geavanceerde opties in Elementor zoals motion effects, animaties, margin en padding enzovoorts zijn beschikbaar.

    Je krijgt Elite Addons voor Elementor als een gratis bonus als je Zita Pro koopt! Naar mijn mening biedt Elite Addons voor Elementor meer waarde dan de Zita Pro features zelf, en dat was dan ook meer dan genoeg reden voor mij om de lifetime licentie toch te kopen 🙂 Ben jij ook klaar om op de knop hieronder te klikken?

    Conclusie

    De gratis versie van Zita is een prima en uitgebreid thema, maar de pro versie alleen is nog niet goed genoeg naar mijn mening.
    De Elite Addons voor Elementor zijn echter wel zeer de moeite waard, en aangezien je deze gratis krijgt bij Zita Pro maakt dat de prijs meer dan waard!

    Onthoud ook dat Zita pas in september 2018 is uitgebracht, dus het is nog een heel nieuw thema dat volop in ontwikkeling is. De ontwikkelaar staat ook echt open voor suggesties van gebruikers, dus ik verwacht flink wat verbeteringen de komende maanden. Ik heb een uitgebreid gesprek met de ontwikkelaar gehad en hij beloofde mijn suggesties zo snel mogelijk te implementen dus ik ben benieuwd!

    Al het bovenstaande was meer dan genoeg reden voor mij om voor de lifetime deal te gaan. Als je zo vroeg in de ontwikkeling van een thema instapt is dat nog zeer betaalbaar; op dit moment betaal je slechts $149,00 voor een ongelimiteerd aantal websites! 

    Beetje bindingsangst? Geen probleem, want Zita biedt ook een jaarlijkse licentie voor $49,00 per jaar. Koop Zita Pro nu!

    Zelf je website bouwen, maar dan wel met wat hulp van een expert?

    Kies dan voor Bobs Website in 1 dag pakket! Met dit pakket gaan we samen een hele dag achter de computer zitten (kan eventueel ook online via Zoom) en is aan het einde van de dag (de basis van) je nieuwe website klaar!

    Van tevoren regelt Bob alle technische zaken zoals het instellen van WordPress en het installeren van alle benodigde plugins, zodat we die dag meteen aan de slag kunnen met het leukste gedeelte; het ontwerpen en vullen van de website 🙂 .

    Doordat we de website samen bouwen leer je precies hoe WordPress werkt en hoe je alles kunt aanpassen.

    En kom je er toch even niet uit? Dan mag je Bob altijd even bellen of mailen, want je krijgt 3 maanden support!

    Bekijk alle details van Bobs Website in 1 dag pakket

    Dit artikel bevat affiliate links. Dat wil zeggen dat ik een vergoeding krijg als je Zita Pro of andere software koopt via een link op deze pagina. Dat kost jou verder niets extra’s, maar zorgt er wel voor dat ik jou kan blijven helpen met dit soort gratis artikelen. Dus als je Zita Pro wilt aanschaffen stel ik het zeer op prijs als je dat via deze pagina doet 😉

    Ga je voor de gratis versie van Zita? Dan kun je eventueel ook een
    kleine eenmalige donatie doen via de button hiernaast 🙂

     

  • WordPress 5.0 met de Gutenberg editor is gelanceerd!

    WordPress 5.0 met de Gutenberg editor is gelanceerd!

    Zoals je weet wordt er regelmatig een update voor WordPress uitgebracht. In de laatste paar updates werd er steeds meer ingezet op de customizer, en in WordPress 4.8 en 4.9 werden we opeens getrakteerd op enkele nieuwe widgets die het een stuk makkelijker maken om content als afbeeldingen en video in bijvoorbeeld de sidebar of footer van je site te plaatsen. Vandaag exact een jaar geleden schreef ik hier echter dat de grootste verandering nog moest komen…

    (meer…)

  • SEO tips – zoekmachine optimalisatie tips door Bob de webbouwer

    SEO tips – zoekmachine optimalisatie tips door Bob de webbouwer

    Een website maken doe je natuurlijk niet alleen voor jezelf. Nee, je wilt je content vooral delen met anderen en je wilt dus ook zoveel mogelijk bezoekers op je website. De meeste mensen beginnen hun zoektocht naar informatie tegenwoordig op Google, dus je wilt natuurlijk zo hoog mogelijk scoren in Google. Met deze SEO tips van Bob de webbouwer heb je de basis van je zoekmachine optimalisatie in elk geval op orde! (meer…)

  • WordPress AVG update 4.9.6

    WordPress AVG update 4.9.6

    WordPress heeft op 17 mei 2018 versie 4.9.6 gepubliceerd, waarmee naast enkele bugfixes ook nieuwe hulpmiddelen zijn geïntroduceerd om te voldoen aan de AVG wet. Onder het kopje “hulpmiddelen” vind je nu twee nieuwe opties.

    Persoonlijke data exporteren

    De eerste nieuwe optie is “persoonlijke data exporteren”. Hiermee kun je een gebruiker die daarom vraagt een overzicht mailen van welke gegevens in het systeem staan. De procedure is als volgt:

    1. De gebruiker vraagt om zijn gegevens in te zien.
    2. De admin voert de gebruikersnaam of het e-mail adres van de betreffende gebruiker in bij hulpmiddelen → persoonlijke data exporteren. De aanvraag wordt in een overzicht geplaatst.
    3. Vervolgens wordt er een e-mail naar de gebruiker gestuurd om de aanvraag te verifiëren. Daarin wordt de gebruiker gevraagd om op een link te klikken om zijn aanvraag te bevestigen.
    4. Daarna krijgt de admin een mailtje dat deze gebruiker zijn gegevens wil ontvangen. In het overzicht staat nu een button waarmee je de gebruiker een mailtje kunt sturen.
    5. De gebruiker ontvangt een link naar een gezipt HTML bestand dat hij kan downloaden. Daarin staan gegevens zoals zijn naam, gebruikersnaam en e-mailadres. Sommige plugins voegen hier ook door de betreffende plugin verzamelde gegevens aan toe; zo voegt WooCommerce de klantgegevens en orderhistorie toe aan de mail.

     

    Persoonlijke gegevens wissen

    De tweede optie is “persoonlijke gegevens wissen”. Dit werkt hetzelfde, maar nu worden alle persoonlijke gegevens van de betreffende gebruiker verwijderd. Andere plugins kunnen echter nog wel gegevens bewaren. WooCommerce wist bijvoorbeeld niet standaard de klantgegevens bij een order (je kunt wel instellen dat dit wel gebeurd). 

    Privacy verklaring

    Daarnaast vind je onder instellingen een nieuwe optie “privacy”. Daar kun je de pagina selecteren waarop je privacy verklaring te vinden is. Er wordt automatisch een link naar deze pagina getoond op login en registratiepagina’s.

    Als je nog geen privacy verklaring hebt kun je ook op de button “maak een nieuwe pagina” klikken, waarmee WordPress volledig automatisch een AVG compatible privacy verklaring voor je aanmaakt (die je uiteraard nog wel even moet aanpassen aan je eigen situatie). 

    Opslaan gegevens bij reageren

    Bij de reacties is een vinkje toegevoegd wat gebruikers moeten aanvinken als ze willen dat hun naam, e-mail adres en website bewaard blijft voor de volgende keer (dmv een cookie).

    Bron: https://wordpress.org/news/2018/05/wordpress-4-9-6-privacy-and-maintenance-release/

    Hulp nodig met je website?

    Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen, jouw website te verbeteren of een training over dit onderwerp te verzorgen.

    Vraag direct een vrijblijvende offerte aan

  • AVG voor je website of webshop in begrijpelijke taal

    AVG voor je website of webshop in begrijpelijke taal

    Je hebt het vast wel gehoord, op 25 mei 2018 gaat de AVG in. AVG is een afkorting voor Algemene Verordening Gegevensbescherming, een nieuwe Europese privacy wet.
    Er is heel veel informatie te vinden over dit onderwerp, maar veel kleinere bedrijven en organisaties weten nog steeds niet precies wat dit nu voor hen betekent, en wat
    er bijvoorbeeld aangepast moet worden aan de website. In dit artikel lees je de belangrijkste dingen voor kleine bedrijven of organisaties.

    Disclaimer: Bob is geen jurist en er kunnen dan ook geen rechten aan dit artikel ontleend worden.

    In dit artikel lees je:

    Geldt de AVG ook voor mij?

    Waarschijnlijk wel. De AVG geldt voor iedereen die persoonsgegevens verwerkt. Onder persoonsgegevens worden alle gegevens verstaan die naar een natuurlijke persoon te herleiden zijn. Dat zijn onder andere:

    • Naam
    • E-mail adres
    • Telefoonnummer
    • Woonadres
    • IP adres
    • Bestelhistorie

    De AVG is dus al vrij snel van toepassing; als je een contactformulier op je website hebt staan verwerk je immers minimaal een naam en e-mail adres, en als je een webshop hebt komt daar ook nog een adres en bestelhistorie bij. Maar zelfs als je alleen maar Google Analytics op je site hebt verwerk je al gegevens (namelijk IP adressen).

    Je hebt een grondslag nodig om persoonsgegevens te mogen verwerken

    Je mag alleen persoonsgegevens verwerken als je daar een geldige grondslag voor hebt. Er zijn in totaal 6 grondslagen mogelijk, maar de grondslagen die meestal van toepassing zullen zijn bij een normale website of webshop zijn “toestemming” , “uitvoering van een overeenkomst” en “nakomen van een wettelijke verplichting”.

    Toestemming

    De eerste grondslag is de meest veilige: zorg dat je toestemming hebt van degene van wie je de persoonsgegevens wilt verwerken (meestal je klant), en dat je kunt bewijzen dat je die toestemming hebt. Verder moet je voldoen aan de volgende regeltjes:

    • Je mag iemand niet onder druk zetten om toestemming te geven, of iemand benadelen als hij geen toestemming geeft. Je ziet nu bijvoorbeeld nog regelmatig een cookiewall waardoor je een website alleen kunt bezoeken als je toestemming geeft om cookies te plaatsen, dat soort dingen mag dus niet meer.
    • De toestemming moet expliciet gegeven zijn. Je klant moet dus een actieve handeling verrichten om jou toestemming te geven. Bijvoorbeeld door het aanvinken van een checkbox met de tekst “ik ga akkoord met de privacyverklaring” bij je webshop of contactformulier. Deze moet hij echt zelf aanvinken, automatisch vooraf aangevinkte vakjes mogen dus niet meer. 
    • Je moet de klant informeren over wie je bent, welke gegevens je verzamelt, waarvoor je de gegevens gaat gebruiken (bijvoorbeeld voor het afhandelen van de bestelling of voor het versturen van een nieuwsbrief), hoe lang je de gegevens gaat bewaren en dat de klant het recht heeft de toestemming ook weer in te trekken. Dit kun je allemaal in je privacyverklaring kwijt. Lees hier wat er nog meer in je privacyverklaring moet staan.
    • De toestemming wordt gegeven voor een specifiek doel en je mag de gegevens dan ook alleen daarvoor gebruiken. Als iemand dus je contactformulier invult om een offerte aan te vragen mag je hem wel bellen als je daar vragen over hebt, maar je mag hem niet op je mailinglist zetten en nieuwsbrieven sturen. 

    Noodzakelijk voor de uitvoering van een overeenkomst

    De tweede grondslag stelt dat je niet perse toestemming nodig hebt als je persoonsgegevens moet verwerken om de overeenkomst uit te kunnen voeren. Als een klant bijvoorbeeld een bestelling plaatst in je webshop heb je zijn adres nodig om de bestelling te kunnen versturen, dus daar hoef je niet expliciet toestemming voor te vragen. Maar het opslaan van de bestelhistorie is niet noodzakelijk om de bestelling te kunnen versturen, dus daar heb je wel toestemming voor nodig. 

    Noodzakelijk voor het nakomen van een wettelijke verplichting.

    De derde grondslag is het nakomen van een wettelijke verplichting. Zo verplicht de belastingdienst je bijvoorbeeld alle facturen 7 jaar te bewaren. Persoonlijk heb ik in mijn privacy verklaring staan dat ik ook alle andere persoonlijke gegevens, kopieën van e-mails en telefoonnotities 7 jaar bewaar, tenzij een klant daar bezwaar tegen maakt.

    Alleen noodzakelijke gegevens vragen

    Een belangrijk onderdeel van de AVG is “privacy by design”, wat betekent dat je alles zo privacy vriendelijk mogelijk ontwerpt. Dat betekent onder andere dat je alleen de gegevens vraagt die absoluut noodzakelijk zijn. Bij je nieuwsbrief inschrijfformulier is dat bijvoorbeeld alleen het e-mail adres, en bij een webshop zijn de naam, het e-mail adres en het postadres de enige gegevens die je echt nodig hebt.

    Nu is het geen probleem als je bij je nieuwsbrief inschrijving ook een “naam” veld hebt of bij je webshop naar het telefoonnummer vraagt, als je maar uitlegt waarom je die gegevens nodig hebt. Dus dat je graag hun naam wilt hebben zodat je ze persoonlijk kunt aanspreken in de nieuwsbrief, of het telefoonnummer zodat je gemakkelijk contact kunt opnemen als je vragen hebt.

    Je mag geen bijzondere persoonsgegevens verwerken

    Natuurlijk kunnen er nog meer gegevens echt noodzakelijk zijn om een offerte te kunnen maken of een order uit te voeren, maar er zijn ook een aantal gegevens waar je zeker niet zomaar naar maar vragen. Dit zijn de zogenaamde bijzondere persoonsgegevens. Daaronder vallen:

    • Godsdienst of levensovertuiging
    • Ras
    • Politieke voorkeur
    • Gezondheid
    • Seksuele leven
    • Lidmaatschap van een vakbond
    • Strafrechtelijk verleden
    • BSN nummer

    Naar deze gegevens mag je nooit vragen, tenzij je onder 1 van de 10 uitzonderingen valt.

    Beveilig je website

    In de AVG staat dat je persoonsgegevens goed moet beveiligen. Dat houdt o.a. het volgende in: 

    • Zorg voor een SSL certificaat, dus een https verbinding. Dit is de absolute basis van websitebeveiliging.
    • Zorg dat je WordPress zelf, alle thema’s en alle plugins up to date houdt.
    • Gebruik sterke wachtwoorden. Zeker voor de WordPress admin, maar ook voor de hostingomgeving, FTP, database en e-mail accounts.
    • Gebruik een goede beveiligingsplugin, bijvoorbeeld WordFence.
    • Zorg voor backups waarmee je de beschikbaarheid van en de toegang tot de persoonsgegevens tijdig kunt herstellen.
    • Zorg ook op je computer(s) en smartphone voor up to date software, sterke wachtwoorden (of andere beveiliging) en een virusscanner hebt.

    Zorg voor een SSL certificaat

    De meeste hostingproviders bieden tegenwoordig een gratis SSL certificaat aan (Let’s Encrypt). Als jouw hostingprovider geen Let’s Encrypt aanbiedt kost een SSL certificaat meestal een paar tientjes per jaar. Vraag even aan je hostingprovider hoe dat je dat hun kunt regelen als je nog geen SSL certificaat hebt.

    Zorg dat WordPress zelf, alle thema’s en alle plugins up to date blijven

    WordPress zelf, alsmede de thema’s en plugins daarvoor worden zeer regelmatig geupdate (vaak meerdere keren per maand). Veel van die updates zijn bedoeld om beveiligingslekken te dichten, dus het is zeer belangrijk dat je deze regelmatig update. Als je daar zelf geen tijd of zin voor hebt kun je ook een onderhoudsabonnement bij mij afsluiten.

    Gebruik sterke wachtwoorden

    WordPress maakt zelf standaard al een sterk wachtwoord voor je aan, maar biedt ook de mogelijkheid een eigen wachtwoord in te stellen. WordPress controleert weliswaar of het een sterk wachtwoord is, maar biedt ook de mogelijkheid om een zwak wachtwoord toch op te slaan. Hoewel het altijd aan te raden is om sterke wachtwoorden te gebruiken is dat extra belangrijk als je persoonsgegevens opslaat in je database (bijvoorbeeld bij een webshop).

    Gebruik een goede beveiligingsplugin

    Een goede beveiligingsplugin maakt je site een stuk veiliger. Persoonlijk gebruik ik altijd WordFence, een zeer uitgebreide, gratis plugin die je website beveiligd met o.a. een malware scanner, firewall, brute force blokkering, controle op niet meer onderhouden plugins enzovoorts.

    Zorg voor backups

    Ook het maken van backups is altijd een goed idee, maar als je persoonsgegevens opslaat in je database is het onder de AVG ook verplicht. Je moet namelijk zorgen dat je de beschikbaarheid van en toegang tot gegevens bij incidenten kunt herstellen. Ik gebruik persoonlijk altijd UpdraftPlus, een uitgebreide gratis backup plugin waarmee je automatische backups kunt instellen die je eventueel ook op een externe clouddienst kunt opslaan (zoals OneDrive, Google Drive of Dropbox). Deze eis geldt ook als je de gegevens op je eigen computer bewaard (dus niet online), dus zorg ook in dat geval voor een dagelijkse backup.

    Beveilig ook je computer(s) en smartphones

    Naast de website zelf zorg je natuurlijk ook dat alle andere aparaten waarop je toegang hebt tot persoonsgegevens veilig zijn. Dat is sowieso je (werk)computer, maar bijvoorbeeld ook je smartphone als je daarop toegang hebt tot je zakelijke e-mail.

    Register van verwerkingsactiviteiten

    Naast bovenstaande zaken brengt de AVG ook een aantal administratieve verplichtingen met zich mee. Ten eerste moet je een “register van verwerkingsactiviteiten” opstellen.
    Dat klinkt ingewikkelder dan het is, want in feite is het een alleen document waarin je vastlegt:

    • Welke gegevens je verwerkt (bijvoorbeeld naam, e-mail adres, postadres en telefoonnummer)
    • Voor welke categorie(en) personen je dat doet (klanten, personeel)
    • Wat je doel daarmee is (afhandelen bestellingen, leads opvolgen, nieuwsbrief sturen)
    • Wie verantwoordelijk is voor de gegevensverwerking (gegevens van je organisatie en de verantwoordelijke medewerker(s)

    Een gedetailleerd overzicht van wat er in zo’n register van verwerkingsactiviteiten moet staan vind je op deze pagina.

    Verwerkersovereenkomst

    De tweede administratieve verplichting is het opstellen van een verwerkersovereenkomst met alle partijen die in opdracht van jou persoonsgegevens verwerken. Bijvoorbeeld:

    • Je boekhouder
    • Het hostingbedrijf
    • Google (ivm Gmail, Drive, Analytics)

    Wat er in zo’n verwerkersovereenkomst dient te staan lees je op deze pagina.

    WordPress AVG hulpmiddelen

    Op 17 mei is WordPress 4.9.6 uitgebracht, waarin naast enkele bugfixes ook enkele hulpmiddelen zijn toegevoegd om te kunnen voldoen aan de AVG wetgeving. Onder hulpmiddelen vind je nu de mogelijkheid om de gegevens van een bepaalde gebruiker te exporteren of te wissen, en bij instellingen → privacy kun je automatisch een AVG compatible privacy verklaring aanmaken (die je uiteraard nog wel even moet aanpassen op je eigen situatie). 

    Neem nu een onderhoudsabonnement en krijg een gratis AVG check!

    Zoals je hebt gelezen is het onder de AVG belangrijker dan ooit dat je site up to date blijft, goed beveiligd is en dagelijks gebackupt wordt. Heb je daar zelf geen tijd voor, of vind je het te ingewikkeld? Kies dan voor Bobs onderhoudsabonnement! Voor € 240,00 exclusief BTW per jaar heb je er zelf geen omkijken meer naar.
    Als je nu een onderhoudsabonnement afsluit checkt Bob gratis of je website aan alle AVG eisen voldoet!  

    Ja, ik wil Bobs onderhoudsabonnement en een gratis AVG check!

    Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
    Een kleine eenmalige donatie wordt altijd zeer op prijs gesteld 🙂

    Bronnen en andere interessante links

  • Booster for WooCommerce plugin review

    Booster for WooCommerce plugin review

    Ik bouw regelmatig WooCommerce webshops, en één van de eerste plugins die ik dan installeer is WooCommerce Booster.  
    (meer…)

  • Woocommerce productsortering – volgorde aanpassen

    Woocommerce productsortering – volgorde aanpassen

    In WooCommerce kun je de volgorde waarin je producten standaard worden weergegeven op meerdere manieren aanpassen. Standaard worden producten alfabetisch op naam gesorteerd, maar je kunt ze ook op diverse andere manieren sorteren.

    De standaard productsortering instellen

    Om de standaard sorteerweergave in te stellen ga je in het WordPress admin menu naar
    Weergave → Customizer → WooCommerce → Product Catalog.

    Daar vind je het kopje “Standaard productsortering” waar je de volgende mogelijkheden hebt:

    • Standaard sorteervolgorde : Bij deze optie worden de producten automatisch alfabetische op naam gesorteerd.
      Als je deze optie kiest kun je ook handmatig de productvolgorde aanpassen (zie hieronder).
    • Populariteit (verkoop) : De meest verkochte producten bovenaan.
    • Gemiddelde waardering : De best beoordeelde producten bovenaan.
    • Meest recent : De laatst toegevoegde producten bovenaan.
    • Prijs (oplopend) : De goedkoopste producten bovenaan.
    • Prijs (aflopend) : De duurste producten bovenaan.

    PS in oudere versies van WooCommerce ( voor versie 3.3 ) vind je deze instelling onder
    WooCommerce → Instellingen → Producten → Weergave (of display).

    WooCommerce productvolgorde handmatig aanpassen

    Als je bij de instellingen de optie “standaard sorteervolgorde” hebt gebruikt kun je de productvolgorde ook handmatig aanpassen. Dat doe je als volgt:

    • Ga naar naar “producten” in het admin menu
    • Klik op “sortering”
    • Klik nu met de linker muisknop ergens op een “leeg” gedeelte in de rij van een product en sleep dit naar de gewenste plek.

    Als het goed is staat het betreffende product nu ook in je winkel op de gewenste plek (mits je “standaard sorteervolgorde” als standaard productsortering hebt ingesteld dus).

    Hulp nodig met je Woocommerce webshop?

    Bob de webbouwer is een allround website expert die al tientallen WooCommerce websites heeft gebouwd.
    Heb je hulp nodig met jouw WooCommerce webshop?

    Vraag direct een vrijblijvende offerte aan

    Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
    Een kleine eenmalige donatie wordt altijd zeer op prijs gesteld 🙂

  • Divi Nederlandse vertaling door Bob de webbouwer

    Divi Nederlandse vertaling door Bob de webbouwer

    Het populaire Divi thema van Elegant Themes is standaard in het Nederlands beschikbaar, maar de vertalingen zijn soms erg krom en onbegrijpelijk. Klik op de buttons hieronder om het .mo en .po bestand gratis te downloaden.

     Daarom heeft Divi expert Bob de webbouwer het Divi taalbestand helemaal handmatig gecontroleerd en de bezem er flink doorgehaald. Dus geen corps, boordbreedte, doos schaduw en ineenstorting meer, en in plaats van 4  keer “animatie” gewoon een duidelijke omschrijving van elk onderdeel  😉 

    Bob heeft letterlijk honderden aanpassingen gedaan zodat alles in Divi eindelijk gewoon in duidelijk en begrijpelijk Nederlands is. Sommige dingen zijn juist weer teruggezet in het Engels, bijvoorbeeld termen die ook in Nederland vaak gebruikt worden (Dropdown menu, Divi Builder, Drag & Drop, Content), sommige CSS termen (Padding, Margin, Container, Ease) en de namen van de Layout Packs.

    Daar is Bob natuurlijk wel een flink aantal uren zoet mee geweest en daarom vraagt hij een kleine bijdrage van € 10,00 om het bestand te downloaden. Je mag Bobs vertaling dan gebruiken op zoveel websites als je maar wilt, zolang je het maar niet doorverkoopt of gratis beschikbaar stelt aan anderen. Je mag het natuurlijk wel gebruiken op websites van je eigen klanten.

    Divi-nl_NL.mo dien je via FTP te uploaden naar de map /wp-content/languages/themes.

    Divi-nl_NL.po kun je indien gewenst gebruiken om zelf wijzigingen aan te brengen in het taalbestand met behulp van een .po editor als PoEdit.
    Dit een bewerkte versie van het taalbestand dat te vinden is in de map /wp-content/themes/Divi/lang/. Helaas is dit taalbestand alleen van toepassing op de instellingen, dus de kromme vertalingen in de Divi builder modules worden hier niet mee opgelost. Wordt aan gewerkt, maar dit is in elk geval een goed begin 😉

    Hulp nodig met je Divi website?

    Je kunt mij natuurlijk ook inhuren om een Divi website voor je te bouwen, of om samen met jou aan
    je Divi website te werken.

    Vraag direct een vrijblijvende offerte aan

    Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
    Een kleine eenmalige donatie wordt altijd zeer op prijs gesteld 🙂