Inspiration Station

Blog

  • Themify review

    Themify review

    Mijn vaste lezers weten misschien dat ik moeilijk een goede lifetime deal kan weerstaan. Mijn lifetime lidmaatschap van Elegant Themes (het bedrijf achter Divi ) bleek één van mijn beste beslissingen ooit te zijn, dus toen ik een vergelijkbare deal tegenkwam van Themify hoefde ik niet lang na te denken. Nu eens kijken of die ook zijn geld waard is…

    Themify Builder

    Het eerste dat me aansprak, was de Themify Builder, hun eigen pagebuilder. Ik heb al veel page builders geprobeerd; Divi , Elementor , Brizy , Oxygen , Thrive Architect , WP Page Builder, Qubely, LiveCanvas, Avada … echt heel veel 😉

    Divi was mijn eerste liefde op het gebied van page builders, en het is nog steeds mijn favoriet.
    Kan Themify Builder Pro dat veranderen?

    Op het eerste gezicht is het antwoord nee. Het voelt gewoon niet zo intuïtief aan, maar het heeft een aantal leuke functies die het de moeite waard maken om wat dieper te verkennen.

    Wat ik NIET goed vind aan Themify Builder

    Normaal gesproken begin ik bij het schrijven van een recensie altijd positief door de sterke punten te benadrukken. Maar met Themify Builder was de eerste ervaring gewoon niet positief, dus in deze review begin ik met de negatieve punten. Maar geen zorgen, de sterke punten komen ook nog aan bod 😉

    Mijn slechte ervaring begon direct bij het toevoegen van een nieuwe pagina. Themify Builder wordt eerst geopend in de backend, in een wireframe weergave. Deze weergave kende ik al van Divi en Avada, en geeft een goed overzicht van je paginastructuur. Maar ik ben gewend aan de voorkant te bouwen, dus daar wil ik heen. Maar ik kan niet … Zo te zien moet ik de pagina eerst opslaan, dan bekijken aan de voorkant en dan pas kan ik ‘m ook aan de voorkant bewerken. Geen onoverkomelijk probleem, maar intuitief is anders. 

    Als ik dan eindelijk kan beginnen met bewerken aan de voorkant kan ik alleen een nieuwe rij helemaal onderaan de pagina toevoegen. Dus als ik een rij net onder de header wil toevoegen moet ik helemaal naar beneden scrollen, de rij toevoegen en naar de gewenste plek slepen.

    Wanneer ik die rij toevoeg, moet ik een kolom layout kiezen, maar ik kan alleen kiezen tussen gelijke kolommen. Ik kan maximaal 6 kolommen kiezen, maar ik kan geen 1/3 – 2/3 lay-out of een kiezen 1/4 – 3/4 enzovoort. Vreemd genoeg kan ik, nadat ik mijn rij heb toegevoegd, WEL een 1/3 – 2/3 layout en een 1/4 – 3/4 layout kiezen. Waarom heb ik die keuze niet meteen? Nu moet ik nog een keer klikken … Ik moet daar wel bij vermelden dat je de kolombreedte naar elke gewenste waarde kunt slepen, zodat je iedere combinatie kunt maken die je wilt. 

    Dus nu heb ik een kolom layout gekozen en wil ik tekst toevoegen. Wanneer ik een module toevoeg, wordt er een pop-up geopend waarin ik de inhoud kan toevoegen en de styling kan aanpassen. Ik kan die pop-up slepen naar waar ik maar wil, of vastzetten aan de linker of rechterkant van het scherm. Prima, maar als ik de tekst vervolgens wil bewerken kan ik dat alleen in hetzelfde pop-up venster doen. In andere builders kan ik gewoon op een tekst klikken en beginnen met typen, zonder pop-up dus. Ook dit voelt gewoon niet intuïtief aan.

    De styling opties staan ​​op een apart tabblad in dezelfde pop-up en zijn onderverdeeld in accordeon stijl koppen, wat vrij duidelijk is. Dat geldt ook voor de breadcrumbs boven de tabs, wat een mooie toevoeging is aan de overzichtelijkheid van de builder. De hele gebruikersinterface voelt voor mij echter vrij ouderwets en simpel aan. Dat hoeft echter niet perse negatief te zijn; misschien hou je juist wel van een “clean & simple” interface als deze.

    Wat ik WEL goed vind aan de Themify Builder

    Op het eerste gezicht ben ik dus geen fan van de Themify Builder. Maar nadat ik er wat dieper in dook kwam ik toch een aantal coole features tegen die echt wel de moeite waard zijn.

    De eerste feature die de moeite is zijn de achtergrondopties. Zoals bij de meeste page builders kun je een effen of verloop achtergrondkleur instellen, een achtergrondafbeelding en – voor rijen en kolommen – ook een video achtergrond. Maar wat ik nog niet eerder heb gezien, is de mogelijkheid om een eenvoudige fotoslider als achtergrond toe te voegen . Je kunt ook een kleur overlay instellen voor een leuk effect.

    Over kleuren gesproken, bij alle onderdelen in de builder vind je een standaard kleurenpalet dat je gemakkelijk kunt aanpassen aan de project kleuren. Je kunt kleuren aan dat kleurenpalet toevoegen of verwijderen in de builder. Er zijn ook kleurfilters en je kunt dingen als tint, verzadiging en sepia instellen.

    f d Je kunt ook kiezen uit fink wat animaties, zowel entry animaties als scroll animaties . En je kunt elk element instellen als sticky (fixed) , wat ook echt een gave functie is.
    Zo kun je bijvoorbeeld de tweede rij als sticky instellen. Wanneer een bezoeker dan bij die rij aankomt blijft deze bovenaan de pagina staan. Daarnaast kun je ook instellen dat de betreffende rij weer verdwijnt als de gebruiker op een ander punt aankomt, bijvoorbeeld op de vierde rij. 

    Voor bijna alle styling opties kun je ook een andere stijl voor hover instellen. Je kunt dus bijvoorbeeld een andere achtergrondafbeelding instellen als de bezoeker met de muis over een rij gaat, een filter gebruiken, de typografie wijzigen enzovoorts.

    Dat geldt ook voor responsive styling; je kunt veel elementen afzonderlijk aanpassen voor tablet (landscape en portrait) en mobiel. Een hele gave feature is ook dat je het aantal kolommen kunt instellen per device, iets wat bij de meeste builders niet mogelijk is. Je kunt natuurlijk ook instellen op welke devices je een element wilt tonen of verbergen.

    Een andere feature die de meeste builders nog niet hebben is een geavanceerd global styling systeem. Je kunt de styling van elke rij, kolom of module opslaan als een globale stijl.
    Als je bijvoorbeeld een knop met een paarse achtergrond en een witte tekstkleur maakt kun je die opslaan als een globale stijl met de naam “paarse knop”. Wanneer je vervolgens de achtergrondkleur van die knop aanpast naar blauw krijgen alle knoppen die de globale stijl “paarse knop” gebruiken ook een blauwe achtergrond. Je kunt eenvoudig een globale stijl toepassen op een bestaand element en je kunt ook     styling kopiëren / plakken tussen elementen.

    Net zoals de meeste builders biedt ook Themify een bibliotheek waarin je een rij of module kunt opslaan, zodat je deze overal op de site opnieuw kunt gebruiken. Je kunt het ook opslaan als een layout element, wat betekent dat het een globaal element wordt. Wanneer je een layout element bewerkt worden de wijzigingen die je aanbrengt automatisch overal op de site waar je het betreffende element hebt gebruikt doorgevoerd.

    Themify biedt ook een verzameling standaard blokken en volledige pagina layouts . Er zijn enkele tientallen standaard blokken, netjes verdeeld in categorieën zoals headers, footers, contact, prijzen, testimonials enzovoort. Je kunt ook een volledige pagina layout laden, waarbij je kunt kiezen uit meer dan 200 verschillende professioneel ontworpen layouts.

    Themify Builder Pro

    Alles wat ik hierboven heb beschreven zit in de gratis versie van de Themify Page Builder. Er is ook een premium versie, genaamd Themify Builder Pro, met een aantal extra features.

    De belangrijkste is de Theme Builder functionaliteit. Net zoals bij met de meeste gratis page builders kun je met de gratis versie van de Themify Builder alleen de inhoud van de pagina of het bericht bewerken, maar niet de header, footer, blog archief, 404-pagina, woocommerce-pagina’s enzovoort. Met Themify Builder Pro kun je ook al die onderdelen aanpassen. Een belangrijk onderdeel van elke theme builder is dynamische content , waarmee u automatisch inhoud uit de database kunt importeren.

    Bij de aankoop van Themify Builder Pro krijg je ook meer dan 25 add-ons gratis erbij. Elke add-on voegt een extra module toe aan de builder. De gratis versie biedt ongeveer 30 standaard modules, maar voor dingen als een voor & na afbeelding, een countdown, een contactformulier, een tijdlijn, een prijstabel, een productlijst of slider voor woocommerce,
    een typewriter effect etcetera heb je een add-on nodig.

    De prijs voor Themify Builder Pro is $ 69 , inclusief 1 jaar support en updates. Na 1 jaar moet je een nieuwe licentie aanschaffen als je nog updates en support wilt ontvangen.
    Je kunt Themify Builder Pro op een onbeperkt aantal websites gebruiken met slechts één licentie.

    Themify Post Type Builder

    De Page Builder is de belangrijkste plugin van Themify, maar het is zeker niet de enige. De Themify Post Type Builder is bijvoorbeeld ook zeer de moeite waard.

    WordPress heeft standaard twee berichttypen: pagina’s en berichten. Voor beiden kun je dingen instellen zoals de titel, een samenvatting en een uitgelichte afbeelding. Bij berichten heb je een paar extra opties; je kunt ze onderverdelen in categorieën en ze automatisch tonen op je blog pagina.

    Maar wat als je meer nodig hebt? Wat als je bijvoorbeeld een huizen site wilt bouwen? Dan moet je kunnen instellen hoeveel badkamers elk huis heeft, hoeveel slaapkamers, de prijs enzovoort. Of wat als je een film site wilt maken? Dan wil je dingen kunnen invoeren als de acteurs, de regisseur, de duur, het jaar waarin de film uitkwam enzovoorts. Voor dat soort dingen heb je custom post types nodig.

    Met de Themify Post Type Builder kun je die custom post types eenvoudig bouwen.

    Het eerste dat je doet wanneer je een nieuw berichttype toevoegt is het kiezen van de naam (bijvoorbeeld ‘Films’). Vervolgens kun je instellen welke van de standaard WordPress functies je wilt gebruiken met het nieuwe berichttype, zoals de titel, de content, de uitgelichte afbeelding, revisies enzovoorts. Dan is het tijd om de extra velden toe te voegen die je nodig hebt; in ons filmvoorbeeld zijn dat de acteurs, de regisseur, het jaar waarin het uitkwam, recensies enz.

    Nadat je alle benodigde velden hebt toegevoegd is het tijd om je templates te bouwen. Je kunt een archief template en een single post template bouwen met een eenvoudige drag & drop-editor. Je kunt meerdere rijen en kolommen gebruiken, een icoon en een tekst instellen die voor of na het betreffende veld wordt weergegeven (je kunt bijvoorbeeld een icoontje van een persoon en de tekst “acteurs:” instellen voor het veld acteurs). Er zijn echter geen styling opties, dus je kunt het lettertype, de kleur, de padding enzovoorts niet instellen.

    De Themify Post Type Builder wordt geleverd met 5 extra add-ons:

    • Map view: hiermee kunt je je vermeldingen op een Google-kaart weergeven, met een tooltip erbij
    • Search: hiermee kun je een aangepaste zoekfunctie instellen voor elk veld
    • Relation: hiermee kun je relaties instellen tussen twee berichttypen. Zo kunnen acteurs, regisseurs en films allemaal verschillende berichttypes zijn. In de sjabloon voor acteurs kun je de films vermelden waarin ze hebben gespeeld.
    • Extra fields: geeft je een aantal extra veldtypes, zoals sterren, sliders, galerij enz.
    • Submissions: hiermee kunt je front-end formulieren maken, zodat gebruikers zelf custom posts kunnen toevoegen of bewerken.

    De prijs voor Themify Post Type Builder is $ 49, inclusief alle extra add-ons. Net als bij de builder pro plugin is dat inclusief 1 jaar updates en support,  en een licentie voor een onbeperkt aantal websites.

    Andere Themify Plugins

    Naast de Page Builder en de Post Types Builder biedt Themify ook nog een aantal andere plugins, waaronder:

    • WooCommerce Shopdock: Toont alle producten in de winkelwagen, de totale prijs en een checkout button in een balk onderaan de pagina (prijs $ 19).
    • Themify Tiles: Hiermee kun je Windows 8 stijl tegel layout maken, met  flipbare tegels (prijs $ 29).
    • Announcement Bar: Toon mededelingen bovenaan de site, met custom styling, start en eind datum / tijd en meerdere mededelingen roteren (prijs $ 19).
    • Themify Popup: Bouw popups met de klassieke WordPress editor of met de Themify Builder and toon ze met een vertraging, bij exit intent, bij een bepaalde scroll positie etc (gratis).
    • WooCommerce Product Filter: Een drag &drop custom product filter builder voor WooCommerce producten, dat je overal kunt tonen met een shortcode (gratis).
    • Conditional menus: Gebruik verschillende menu’s voor verschillende pagina’s, berichten en categorieen etc (gratis).
    • Store locator: Toon meerdere vestigingen op Google Maps and in a lijst of raster weergave (gratis).
    • Event Post: Toon aankomende evenementen met een afbeeling, datum en locatie in een mooie rasterweergave (gratis).

    Themify Ultra en andere thema’s

    Naast hun plugins biedt Themify ook een collectie van meer dan 40 premium WordPress-thema’s , waarvan Themify Ultra het bekendste is. Alle thema’s zijn gebaseerd op hetzelfde framework, met flink wat instellingen om alles naar jouw wensen aan te passen.

    Zo kun je de standaard typografie voor zowat elk element instellen, evenals de standaard pagina, post- en blog lay-out, een aangepaste 404-pagina, links naar je sociale-media profielen (en de icoontjes en kleuren daarvoor), code in de header en footer enzovoorts.

    De meeste opties zijn voor alle thema’s hetzelfde (ik heb er 4 getest), maar sommige hebben meer opties dan andere. Het Ultra-thema lijkt de meest veelzijdige van allemaal te zijn; het geeft je de keuze uit 8 verschillende blog layouts (waaronder een masonry layout), maar liefst 19 header layouts, een megamenu en nog veel meer. De geanimeerde achtergrondkleuren verdienen een eervolle vermelding, die zijn echt gaaf en uniek.

    Elk thema biedt ook de mogelijkheid om een ​​demo website te importeren, zodat je website er in één klik precies uitziet als de live demo. Bij de meeste thema’s kun je kiezen tussen een paar verschillende skins, wat meestal betekent dat alleen de accentkleur verandert. Themify Ultra is echter een ander verhaal en laat je kiezen uit 30 verschillende designs, die zijn afgestemd op een bepaalde niche (bouw, restaurant, onderwijs, fitness, spa enzovoort).

    Natuurlijk zijn alle thema’s geoptimaliseerd voor de Themify Builder. De prijs voor één thema is $ 59, inclusief een jaar updates en ondersteuning.

    Themify Membership

    Eerlijk gezegd vind ik de prijzen voor individuele plug-ins en thema’s niet zo interessant. $ 59 voor één thema is een prima prijs, maar daarvoor krijg je maar één jaar updates en support. Na het eerste jaar moet je een nieuwe licentie kopen om updates te krijgen. Voor hetzelfde bedrag kun je ook een thema kopen zoals Avada dat minimaal even goed is als Themify Ultra, maar dan met levenslange updates (maar officieel slechts 6 maanden ondersteuning).

    Themify biedt echter ook een lidmaatschap, de Master Club, dat $ 89 per jaar kost. Dat is slechts $ 30 meer dan de prijs voor één thema en geeft je toegang tot alle thema’s en plugins. Dat is een prima prijs! Bovendien bieden ze ook een lifetime lidmaatschap aan voor $ 249.

    Conclusie

    De Themify Builder voelt voor mij dus wat minder intuïtief dan sommige andere builders, maar biedt wel wat features waarvan ik sommige nog niet eerder heb gezien bij de andere builders die ik heb geprobeerd. Zoals elke builder is ook de Themify Builder even wennen, maar na er een paar uur mee te hebben gespeeld ben ik er een stuk positiever over dan toen ik ‘m voor het eerst opende.

    Met name de Themify memberships bieden veel waar voor hun geld, met een flinke collectie aan plugins en premium WordPress thema’s.

    Wordt het mijn favoriete builder? Nee, voor mij persoonlijk is dat nog steeds Divi (die trouwens precies hetzelfde kost). Maar zou ik een klant aannemen die met Themify wil werken? Absoluut! Twijfel je of Themify Builder de juiste keuze voor jou is? Speel dan eerst wat met de gratis versie, en als het bevalt kun je altijd nog een (lifetime) lidmaatschap aanschaffen!

    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

    Dit artikel bevat affiliate links. Dat wil zeggen dat ik een vergoeding krijg als je iets 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 een Themify product wilt aanschaffen stel ik het zeer op prijs als je dat via deze pagina doet 😉

    Ga je voor de gratis versie van Themify of een andere oplossing maar wil je me toch bedanken voor dit artikel? Dan kun je eventueel ook een
    kleine eenmalige donatie doen via de button hiernaast 🙂

     

  • Zoekwoorden onderzoek : welke woorden typen je bezoekers in Google?

    Zoekwoorden onderzoek : welke woorden typen je bezoekers in Google?

    Natuurlijk moet de content van je website zo goed mogelijk aansluiten bij de behoeften van je bezoekers. Met een toptaken onderzoek kun je achterhalen wat die behoeften zijn, maar wat typt een bezoeker nu precies in bij Google als hij op zoek gaat naar (informatie over) jouw product of dienst? Dat leer je met een zoekwoorden onderzoek! (meer…)

  • Teksten schrijven voor je website

    Teksten schrijven voor je website

    to)Teksten schrijven voor je website is lastiger dan je denkt. In dit artikel vertel ik je hoe je teksten schrijft waar je bezoekers én Google blij van worden. (meer…)

  • Avada review

    Avada review

    Avada is al sinds de lancering in 2012 het meest verkochte WordPress thema op de populaire marktplaats ThemeForest. En niet alleen daar; met bijna 600.000 verkochte licenties is het sowieso één van de meest verkochte WordPress thema’s ter wereld. In dit artikel vertelt Bob je waarom Avada zo populair is, en welke alternatieven er zijn.

    Fusion Builder – front-end page builder in Avada Live

    De Fusion Builder is de eerste reden dat Avada zo populair is. De Fusion Builder is Avada’s eigen page builder, en was destijds één van de eerste page builders voor WordPress.

    Avada zorgde ervoor dat gewone WordPress gebruikers eindelijk ook een professioneel uitziende website bouwen, niet in de laatste plaats dankzij de tientallen demo websites waarmee je met 1 klik een complete website kunt importeren. Alleen nog even de teksten aanpassen en klaar is Kees 🙂

    In augustus 2019 is Avada 6.0 gelanceerd onder de naam Avada Live, waarbij de
    page builder van Avada eindelijk ook als front-end builder beschikbaar kwam.

    Hierdoor werd het eindelijk mogelijk om ook met Avada je website echt aan de voorkant te bewerken, zodat je direct je aanpassingen ziet zoals je bezoekers dat ook zien.

    Overigens is de oude “blokken” builder die Avada zo populair maakte ook nog altijd beschikbaar, nu onder de naam “wireframe weergave”. 
    Een slimme zet, al verwacht ik niet dat veel gebruikers de voorkeur geven aan die wireframe weergave. De front-end builder werkt namelijk erg prettig en intuitief, 

    Avada biedt een zeer ruime keuze aan modules, in Avada elementen genoemd.
    Er zijn meer dan 60 van die elementen beschikbaar.

    Naast de standaard dingen als een titel, tekstblok, afbeelding, galerij en knop element vinden we hier ook testimonials. prijstabellen, recente berichten, diverse counters, een flipbox element enzovoorts.

    De meeste elementen zien er “out of the box” prima uit, en dat is maar goed ook want het aantal (styling) opties is vrij beperkt.

    Veel meer dan de kleur aanpassen en een animatie instellen kun je bij de meeste elementen niet, al biedt een aantal elementen wel wat extra opties (kleurenfilters bij een afbeelding, keuze uit 2 stijlen bij de testimonials, instellen welke onderdelen je wilt weergeven bij het bericht overzicht).

    Het title element verdient een eervolle vermelding, aangezien je daarmee ook een roterende titel kunt maken (waarbij een of enkele woorden van de titel veranderen) evenals een geanimeerde titel (waarbij er bijv. een cirkel rondom 1 woord verschijnt).

    De structuur van de pagina wordt gevormd met containers, die kunnen bestaan uit 1 of meerdere kolommen. Op container of kolom niveau kun je wel dingen als een achtergrondafbeelding, schaduw, randen, padding en marge instellen (die je overigens gewoon naar de gewenste waarde kunt slepen), bij elementen zelf (meestal) niet.
    Het is natuurlijk de vraag of dat zo’n ramp is; de meeste dingen die ik regelmatig gebruik in mijn designs kan ik ook prima realiseren in Avada. 

    Ik moest wel even wennen aan de manier waarop Avada met tekstblokken omgaat. Ik ben gewend om een apart “styling” tabblad te hebben waarmee je de tekst een afwijkende opmaak kunt geven, maar dat ontbreekt hier. In plaats daarvan dien je de tekst te selecteren, waarna een toolbar verschijnt waar je de typografie, kleur ed kunt aanpassen (zie afbeelding verderop).

    Sliders

    Waar het titel element een eervolle vermelding verdient, verdienen de sliders die bij Avada geleverd worden een eigen tussenkop 😉 Niet dat de standaard slider in Avada zelf nu zo bijzonder is, maar zoals bij veel thema’s op ThemeForest krijg je er gratis 2 premium sliders bij – namelijk LayerSlider en Slider Revolution. Dat zijn 2 van de meest verkochte slider plugins ter wereld, waarmee je schitterende sliders kunt maken met tal van animaties, meerdere lagen enzovoorts. Een enorme meerwaarde dus, die bovendien samen al bijna evenveel kosten als Avada zelf.

    Avada theme options

    Een van de dingen die ik altijd gewaardeerd heb aan Avada zijn de zeer uitgebreide theme options. Daar kun je echt ongelooflijk veel instellen, waaronder:

    • De standaard typografie voor ieder onderdeel (paragraaf en headings, maar ook afwijkende typografie voor het menu of de footer headings)
    • De standaard opmaak van icoontjes, teksten enzovoorts van een groot aantal elementen
    • Dingen als het standaard aantal posts in een slideshow of gerelateerde berichten
    • Hoe de zoekresultaten pagina eruit ziet
    • Het aantal producten en kolommen voor de shop pagina
    • Enzovoorts

    Gelukkig zijn de theme options – net als de elementen overigens – voorzien van een zoekfunctie waardoor je makkelijk het onderdeel kunt vinden wat je zoekt.

    Ook de theme options zijn sinds Avada 6.0 verplaatst naar de front-end, zodat je direct het effect van je aanpassingen ziet.

    Demo websites en bibliotheek

    Ik noemde het in begin al even: Avada wordt geleverd met tientallen complete demo websites (bijna 80 op het moment van schrijven).

    Die demo websites zijn vrijwel allemaal gericht op een specifieke niche; zo is er een demo site voor een restaurant, taxi bedrijven, bakkers, kappers, rijscholen, podcasts, schoonmaakbedrijven, gezondheidszorg enzovoorts. Voornamelijk gericht op kleine zelfstandigen dus, en de meeste van die demo sites zijn werkelijk prachtig.

    Elke demo website bestaat uit meerdere pagina templates, maar in tegenstelling tot de meeste andere page builders is het bij Avada niet mogelijk om 1 bepaalde pagina template te importeren. Nou ja, het kan wel, maar dan importeer je alleen de layout zonder de afbeeldingen e.d. 

    Als je de afbeeldingen e.d. ook wilt hebben moet je de hele website importeren. Dat is op zich prima als je een compleet nieuwe website maakt; op die manier heb je met 1 klik je complete website klaar, inclusief alle pagina’s, contactformulieren enzovoorts. 

    Je kunt overigens ook elk(e) container, kolom of element opslaan in de bibliotheek zodat je dit later elders op de site kunt hergebruiken. Je kunt elk onderdeel ook opslaan als globaal, waarmee je aanpassingen op de ene pagina ook automatisch doorgevoerd worden op alle andere pagina’s waar het betreffende globale onderdeel gebruikt wordt.

    Avada Theme Builder

    Sinds versie 6.2 bevat Avada ook een heuse theme builder, waarmee het mogelijk wordt templates te maken. Met een template hoef je maar 1 keer het design van bijvoorbeeld je pagina’s of berichten te maken, en met behulp van dynamic content wordt dan per pagina de juiste gegevens ingeladen. Je maakt dus een design waarin je instelt waar je de titel wilt hebben, de uitgelichte afbeelding, de tekst zelf enzovoorts. Vervolgens kijkt WordPress in de database welke titel , uitgelichte afbeelding en tekst bij de huidige pagina hoort en vult deze in op de juiste plek.

    Daarnaast kun je ook dingen als je blogpagina, je zoekresultaten, je 404 pagina en je header en footer, en zelfs WooCommerce pagina’s helemaal zelf vormgeven.

    Responsive design opties

    Op zich ziet een Avada website er standaard prima uit op mobiel. In de toolbar vind je een desktop icoontje, waarmee je een pagina kunt bekijken op maar liefst 5 verschillende resoluties: desktop, tablet landscape en portrait en mobiel landscape en portrait. Je kunt zelfs het breaking point instellen voor verschillende onderdelen, bijvoorbeeld vanaf welke resolutie de mobiele header getoond wordt en vanaf welke resolutie kolommen onder elkaar komen in plaats van naast elkaar.

    Helaas houden de responsive instellingen daar ook wel zo’n beetje op. Waar je met andere page builders meestal per device dingen als de grootte van het lettertype, de achtergrond, de tekstuitlijning, padding en marge enzovoorts kunt instellen, kun je bij Avada alleen onderdelen tonen of verbergen op bepaalde devices. Nu kun je natuurlijk een kopie van het betreffende element maken en die kopie optimaliseren voor mobiel, maar als je dan iets aanpast moet je dat dus op 2 plekken doen. Niet onoverkomelijk, maar ook niet heel handig…

    Prijs en licentie

    De prijs voor een Avada licentie bedraagt $ 60,00. Dat is een eenmalige prijs inclusief levenslange updates, en daarmee mag je Avada op 1 website gebruiken.
    De support is beperkt tot 6 maanden na aankoop.

    Conclusie

    Avada was altijd al een zeer populair thema, maar kon zich de laatste jaren qua features niet meer echt meten met de nieuwe generatie page builders (zie hieronder).

    De nieuwe front-end page builder brengt daar echter verandering in; hoewel de styling opties vrij beperkt zijn krijg je behoorlijk wat waar voor je geld krijgt.
    Alleen al de 2 meegeleverde premium sliders zijn zeer de moeite waard, en alsof dat nog niet genoeg is krijg je er ook nog een licentie voor Advanced Custom Fields pro bij. 

    Zeker als je alleen een website voor jezelf wilt bouwen is Avada een prima keuze waarmee je snel een professioneel uitziend resultaat kunt krijgen.

    Voor professionele webbouwers zou ik Avada niet aanraden, aangezien je voor iedere website een nieuwe licentie nodig hebt en de mogelijkheden toch wat beperkter zijn dan bij sommige andere page builders (al kun je wel overal custom CSS toevoegen, evenals een class of ID). 

    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

    Welke alternatieven zijn er voor Avada?

    Lees mijn uitgebreide WordPress page builder vergelijking : Elementor vs Divi, Brizy, Thrive Architect en Gutenberg

    Avada vs Divi

    Divi is,net als Avada, een compleet thema met een ingebouwde front-end page builder. De Divi page builder is echter ook als losse plugin verkrijgbaar, waardoor je de Divi builder ook met een ander thema kunt gebruiken. Dit in tegenstelling tot Avada’s Fusion Builder, die echt alleen met Avada zelf te gebruiken is.

    Waar Avada relatief weinig (styling) opties heeft zit Divi juist boordevol innovatieve features, inclusief een uitgebreide theme builder die gelijkwaardig is aan die in Avada. 

    Ook kun je in Divi voor ieder onderdeel randen, schaduws, kleurenfilters, typografie en (scroll) animaties instellen.
    De meeste instellingen kun je apart aanpassen voor mouse over, en ook apart voor tablet en mobiel. Zelfs de content zelf kun je aanpassen: je kunt dus op mobiel een andere afbeelding of tekst tonen dan op desktop, zonder dat je het betreffende element moet kopieren enzo.

    Daarnaast bevat Divi nog een aantal andere handigheidjes die Avada (nog) niet heeft, zoals het kopiëren en plakken van stijlen en Global Presets, waarmee je met 1 klik de opmaak van een element – bijvoorbeeld een testimonial – kunt kopiëren naar alle andere testimonials in dezelfde rij, op de betreffende pagina of op de gehele site.

    Net als bij Avada wordt ook Divi geleverd met een flink aantal demo websites – op dit moment meer dan 200 – en iedere week wordt een nieuwe demo website toegevoegd.
    Deze demo websites zijn voorzien van custom afbeeldingen en illustraties die je vrij kunt gebruiken op je eigen website.

    Divi is wel een stuk duurder dan Avada – als je alleen een website voor jezelf wilt maken ten minste. Als je net als ik regelmatig websites bouwt is Divi juist een stuk gunstiger geprijsd; voor $ 89,00 per jaar of $ 249,00 eenmalig mag je Divi namelijk op zoveel sites gebruiken als je wilt. En met de knop hieronder krijg je daar ook nog eens 10% korting op 😉 

    Je kunt natuurlijk ook eerst mijn uitgebreide Divi review lezen.

    Divi kopen met 10% korting

    Avada vs Elementor

    Elementor is geen compleet thema maar een losse page builder die je met vrijwel elke WordPress thema kunt gebruiken en zit, net als Divi, boordevol innovatieve features. Sterker nog, Elementor is vaak de eerste om een belangrijke feature te introduceren zoals een theme builder, WooCommerce builder en popup builder.

    Met meer dan 5 miljoen installaties is Elementor de meest gebruikte page builder ter wereld, maar dat vergelijk is niet helemaal eerlijk omdat de basisversie van Elementor helemaal gratis is. Als je ook de theme builder. WooCommerce builder, popup builder en een aantal elementen zoals sliders, prijstabellen, flipboxen en een post element wilt heb je de Pro versie van Elementor nodig. Net als Avada en Divi is ook Elementor volledig front-end.

    Net als bij Divi kun je ook bij Elementor een flink aantal (styling) opties instellen voor ieder element, ook apart voor hover en mobiel (maar niet zoveel als bij Divi). Dat laatste geldt ook voor de standaard designs – bij Elementor kun je naast complete pagina layouts (alleen in Pro) ook een aantal secties (= containers) importeren, maar beiden zijn zowel qua aantal als qua design kwaliteit minder dan bij Avada en Divi.

    De pro versie is met een prijs van $ 49,00 per jaar voor 1 website op termijn natuurlijk wel een stuk duurder dan Avada. Elementor heeft ook diverse licenties waarmee je Elementor Pro op meerdere sites mag installeren, maar de prijzen daarvoor lopen snel op; voor $ 199 heb je een 25 sites licentie, wil je Elementor Pro op 100 sites gebruiken betaal je $ 499 en voor 1.000 sites betaal je $ 999 per jaar. 

    Lees mijn Elementor review

    Elementor details bekijken en downloaden
  • Elementor handleiding

    Elementor handleiding

    In deze handleiding legt Bob de webbouwer uit hoe de populaire Elementor page builder werkt. In deze handleiding lees je:

    De basis van Elementor

    Als je de Elementor geïnstalleerd hebt zie je op elke pagina een grote blauwe knop “bewerk met Elementor”. Klik daarop om de Elementor page builder te activeren. 
    Je krijgt dan een scherm zoals hiernaast te zien. Daarop vind je de volgende onderdelen: 

    • ln de linker sidebar (1) vind je de widgets, waarmee je diverse soorten content kunt toevoegen. Als je bijvoorbeeld tekst wilt toevoegen sleep je de “tekstbewerker” widget naar rechts, en als je een afbeelding wilt toevoegen sleep je de “afbeelding” widget naar rechts . Als je al content op de pagina hebt staan sleep je de widget simpelweg naar de plek waar je deze wilt toevoegen.
    • Als je op het plus icoontje (2) klikt kun je kiezen uit diverse kolom structuren.
      In elke kolom kun je dan een widget slepen. Je kunt de kolommen in Elementor overigens gewoon naar de gewenste breedte slepen waardoor je eenvoudig je eigen kolomstructuur kunt maken.
    • Als je op het map icoontje (3) klikt opent de layout bibliotheek van Elementor. Hierin vind je tientallen professioneel ontworpen templates die je als basis voor je pagina kunt gebruiken, en ook de templates die je zelf hebt opgeslagen vind je hier terug. Meer daarover hier.
    • Als je op het hamburger icoontje (4) links bovenin klikt kun je een aantal standaard dingen voor de gehele website instellen. Meer daarover hier.
    • Door op het icoontje met de vier blokjes (5) te klikken kom je weer terug bij het widget overzicht.
    • In de werkbalk links onderaan (6) vind je de pagina instellingen, de navigator, de geschiedenis, de responsive modus, de voorbeeld bekijken knop en de bijwerken knop.
      Alles over deze werkbalk lees je hier.

    Widgets : de bouwstenen van Elementor

    Elementors Widgets zijn de bouwstenen waarmee je je pagina opbouwt. Zoals je hierboven hebt kunnen lezen sleep je een widget gewoon vanuit de linker sidebar naar rechts om deze op de pagina toe te voegen. Elementor heeft standaard 30 van die widgets:

    • Inner sectie : Hiermee kun je 1 kolom verdelen in meerdere kolommen. Dit kan heel handig zijn als je bijvoorbeeld 2 knoppen, iconen of afbeeldingen naast elkaar wilt plaatsen.
    • Kop : Hiermee kun je een titel of tussenkopje toevoegen en deze voorzien van een heading tag (H1 t/m H6). 
    • Afbeelding : Hiermee kun je uiteraard een afbeelding toevoegen.
    • Tekstbewerker : Dit is de meest gebruikte widget, want hiermee kun je gewone tekst toevoegen zoals je dat ook in Word zou doen.
    • Video : Ook deze widget spreekt voor zich. Je kunt hier een video toevoegen vanaf YouTube, Vimeo, DailyMotion of op je eigen server. Indien gewenst kun je deze op een later punt laten starten, automatisch laten afspelen, het geluid dempen, herhalen en kiezen of je afspeelknoppen wilt weergeven.
    • Knop : Hiermee kun je uiteraard een knop toevoegen, bijvoorbeeld een contact knop of offerte aanvraag knop. Je kunt kiezen uit verschillende stijlen (of deze helemaal naar wens vormgeven), de link instellen en indien gewenst ook een icoontje toevoegen.
    • Scheiding : Hiermee kun je een lijn toevoegen, handig om bijvoorbeeld een scheiding aan te brengen tussen 2 onderwerpen in je tekst. Je kunt onder andere de stijl, dikte en kleur van je scheidingslijn instellen.
    • Afstandshouder : Hiermee voeg je een leeg blok in om witruimte te creëren. Je kunt zelf instellen hoe hoog dit blok moet zijn. 
    • Google Maps : Hiermee voeg je natuurlijk een Google Maps kaartje in. Voer simpelweg het adres in, stel eventueel het gewenste zoomniveau in en klaar.
    • Icoon : Hiermee kun je een Font Awesome icoon toevoegen. Uiteraard kun je instellen welk icoon je wilt, maar ook de kleur, uitlijnen en afbeelding kun je instellen.
    • Afbeeldingsbox : Hiermee kun je een afbeelding toevoegen met daaronder een koptekst en een tekstveld. Daarmee kun je bijvoorbeeld een referentie toevoegen,
      of je producten en diensten. 
    • Icoonbox : Dit is hetzelfde als bovenstaande afbeeldingsbox, maar dan met een icoon in plaats van een afbeelding.
    • Aantal sterren : Hiermee kun je een sterwaardering toevoegen, zoals je dit vaak bij reviews ziet. Je kunt o.a. de kleur en het aantal sterren aanpassen (ook halve sterren).
    • Afbeeldingsgalerij : Handig als je meerdere afbeeldingen naast elkaar wilt toevoegen. Kies o.a. welke afbeeldingen je wilt tonen en hoeveel afbeeldingen er naast elkaar komen.
    • Carroussel afbeelding : Hiermee kun je een slider met afbeeldingen toevoegen. Je kunt o.a. het formaat en aantal afbeeldingen naast elkaar instellen, of je pijlen en navigatie wilt tonen en of je de carroussel automatisch wilt laten lopen (en hoe snel). 
    • Iconenlijst : Hiermee kun je een lijstje toevoegen, waarbij je per item kunt bepalen welk icoontje daarvoor gebruikt wordt. Handig voor bijvoorbeeld een vergelijkingstabel of een opsomming van features. 
    • Teller : Hiermee voeg je een teller toe die oploopt tot een vooraf ingesteld getal. Dit wordt bijvoorbeeld vaak gebruikt om aan te geven hoeveel gebruikers een product heeft.
    • Voortgangsbalk : Hiermee voeg je een voortgangsbalk in die vol loopt tot een vooraf ingesteld percentage. Handig om bijvoorbeeld de voortgang van een project aan te geven.
    • Aanbeveling : Ook wel referentie of testimonial genoemd. Hiermee kun je een foto (van de klant of het project) kiezen, de naam en functie van die klant invoeren en natuurlijk ook de tekst van de aanbeveling toevoegen. 
    • Tabs : Hiermee kun je meerdere tekstbewerker velden als tabbladen naast elkaar weergeven.
    • Accordeon : Hiermee kun je meerdere tekstbewerker velden onder elkaar weergeven, en deze laten openen en sluiten als er op de titel wordt geklikt. Dit wordt bijvoorbeeld vaak gebruikt voor veel gestelde vragen.
    • Wissel : Dit is hetzelfde als de accordeon, maar nu sluit de huidige tekst automatisch als je een andere titel aanklikt.
    • Sociale iconen : Hiermee kun je links naar je social netwerk pagina’s toevoegen, zoals Facebook, Twitter, LinkedIn, Instagram en Pinterest.
    • Melding : Hiermee voeg je een tekstblok op dat is opgemaakt als een melding. Je kunt kiezen uit diverse stijlen, zoals een waarschuwing, succes of info melding.
    • SoundCloud : Hiermee voeg een SoundCloud speler toe op je website, waarbij je diverse knoppen kunt toevoegen of weglaten. Vooral handig voor artiesten.
    • Shortcode : Veel plugins – bijvoorbeeld contactformulier plugins – maken gebruik van shortcodes. Met deze widget voeg je die eenvoudig toe.
    • HTML : Met deze widget kun je eigen HTML code toevoegen op je pagina. Ook handig voor iframes.
    • Menu anker : Je kunt in je menu verwijzen naar een bepaalde positie op de pagina door het toevoegen van een ID. Met deze widget kun je die positie markeren. Je kunt echter ook gewoon een ID toevoegen in de instellingen van de betreffende sectie of widget (daarover later meer) net zo makkelijk. 
    • Sidebar : Hiermee kun je een widget area overal op de pagina toevoegen. 
    • Lees verder : Dit is eigenlijk alleen bedoeld voor archief pagina’s zoals het berichtenoverzicht, maar om dat te gebruiken heb je eigenlijk Elementor Pro nodig. Waarom deze widget in de gratis versie zit is me dan ook een raadsel… 
    • WordPress widgets : Een heel handig onderdeel van Elementor is dat je overal op de pagina widgets van WordPress zelf – maar ook widgets die zijn toegevoegd door plugins – kunt toevoegen. Normaal kan dit alleen in de widget areas van je thema (vaak alleen in een sidebar en footer), maar met Elementor kun je deze dus op iedere gewenste plek toevoegen.

    Elementor instellingen en effecten voor widgets, kolommen en secties

    Als je met de muis op een widget klikt openen de instellingen voor de betreffende widget in de sidebar (1).  Deze instellingen zijn verdeeld in 3 tabbladen: layout, stijl en geavanceerd.

    Onder het layout tabblad vind je de basis instellingen voor de betreffende widget.
    Bij een tekstbewerker widget kun je hier je tekst invoeren, bij een afbeelding widget kies je hier de afbeelding en stel je het formaat, de uitlijning en de link hier in en bij de Google Maps widget stel je hier het adres en het zoomniveau in.

    Onder het stijl tabblad kun je dingen als tekstkleur, typografie (lettertype en grootte), de kleuren van een knop enzovoorts instellen. Ook hier zijn de opties die je hebt afhankelijk van welke widget het is.

    Vreemd genoeg kun je onder het stijl tabblad geen achtergrond instellen, daarvoor moet je in het geavanceerd tabblad zijn. Onder dit tabblad kun je ook de marge en padding instellen (witruimte), een z-index opgeven en een CSS ID en class instellen. Als je geen idee hebt waarvoor dat allemaal dient heb je het ook niet nodig 😉

    Onder bewegingseffecten kun je een animatie selecteren zodat je een widget op een mooie manier in beeld kan laten verschijnen (zoals de blokken op mijn homepage) en bij
    rand kun je vanzelfsprekend een rand toevoegen, maar ook een schaduw effect en afgeronde hoeken instellen. 

    Onder aangepaste positie kun je door de breedte op “inline” in te stellen zorgen dat widgets niet onder elkaar, maar naast elkaar moeten verschijnen, en als je bij “positie” de optie “absoluut” kiest kun je een widget naar iedere gewenste plek op de pagina verslepen. Dit werkt erg gaaf, maar levert gegarandeerd problemen op met kleinere schermen dus pas daar mee op. 

    Over kleinere schermen gesproken: onder het kopje responsive kun je de betreffende widget verbergen op desktop, tablet en/of mobiel.

    Bij een aantal onderdelen zie je ook een lichtgrijs computer icoontje staan, als je daarop klikt kun je dat onderdeel apart instellen voor desktop, tablet en mobiel.
    Ook kun je bij sommige onderdelen een apart hover effect instellen, waarmee je bijvoorbeeld een andere achtergrondkleur kunt tonen als je bezoeker er met de muis over beweegt.

    Tenslotte zie je daar het kopje aangepaste CSS, maar daarvoor heb je de pro versie nodig. Persoonlijk gebruik ik dat onderdeel overigens toch nooit, ik geef de widget dan liever een CSS class of ID en voeg de CSS toe via de customizer zodat alle CSS op 1 plek staat.

    Sectie instellingen

    Als je op de met de muis over een widget heen beweegt worden er diverse icoontjes zichtbaar. Als je op het potloodje (4) klikt worden de instellingen van de betreffende widget geopend. Als je op de 6 blokjes in het blauwe balkje bovenin (2) klikt openen de sectie instellingen in de sidebar. Hier kun je o.a. de sectie uitrekken over de gehele breedte van het scherm (mooi voor achtergronden), instellen hoe breed de inhoud in die sectie moet zijn, de hoogte van de sectie bepalen en een vormscheiding (shape divider) en animatie instellen. 

    Kolom instellingen

    Als je op het donkergrijze blokje (3) klikt worden de instellen voor de betreffende kolom geopend. Je kunt hier o.a. de breedte instellen, evenals de horizontale en verticale uitlijning, de achtergrond en een rand of schaduw effect.

    Rechter muisknop in Elementor

    Er gaat in Elementor ook een aantal handige functies schuil achter de rechter muisknop. Zo kun je een onderdeel bewerken, dupliceren en de styling (instellingen) kopiëren en plakken. 

    Werkbalk onderaan de sidebar

    Onderaan de Elementor sidebar vind je een donkergrijze werkbalk met lichtgrijze icoontjes, en een grote groene knop “bijwerken”. Het zal geen verrassing zijn dat je op die knop moet klikken om je aanpassingen op te slaan 😉 Maar wat betekenen die andere icoontjes?

     

     

      Tandwiel icoontje (1) : Instellingen voor de huidige pagina

      Als je op het tandwieltje klikt openen de pagina instellingen voor de huidige pagina. Hier kun je:

      • De pagina titel aanpassen
      • De publicatiestatus aanpassen
      • Een samenvatting schrijven (sommige thema’s gebruiken deze voor de interne zoekfunctie en de archief pagina’s zoals het berichtenoverzicht)
      • Een uitgelichte afbeelding instellen (ook deze wordt gebruikt voor de interne zoekfunctie en archief pagina’s, maar ook als het bericht gedeeld wordt op social media)
      • De paginatitel verbergen (kan handig zijn als je deze bijvoorbeeld in een header afbeelding wilt toevoegen
      • Instellen of je standaard pagina layout van het thema wilt gebruiken of niet

      Onder het tabblad “stijl” kun je ook nog een pagina achtergrond instellen, evenals een aangepaste padding (witruimte) voor de huidige pagina. 
      Onder “geavanceerd” kunnen gebruikers van Elementor Pro nog custom CSS toevoegen.

      Navigator (2) : Overzicht van de paginastructuur

      Als je op het navigator icoontje (2) klikt opent een popup venster aan de rechterzijde van het scherm, waarmee je de structuur van de pagina duidelijk krijgt. Als je op een widget klikt zie je in de navigator in welke kolom en sectie deze valt, en als je (in de navigator) op de betreffende kolom of sectie klikt openen de instellingen daarvoor in de sidebar.

      Geschiedenis (3) : Herstel een eerdere status van de pagina

      Als je op het “geschiedenis” icoontje klikt krijg je een overzicht van alle wijzigingen van deze sessie. Klik op 1 van de vorige statussen om de pagina daarnaar te herstellen. Erg handig als je bijvoorbeeld per ongeluk een stuk tekst hebt verwijderd of een andere fout hebt gemaakt die je graag wilt herstellen. Bovenaan (onder het kopje “geschiedenis” zie je ook “revisies” staan, dat zijn oudere versies van je pagina die zijn opgeslagen door WordPress. Als je niet zeker weet welke versie je moet hebben kun je er gewoon een paar proberen, je kunt immers altijd terug naar een nieuwere versie. 

      Computer icoontje (4) : Bekijk hoe je pagina eruit ziet op tablet of mobiel

      Hiermee kun je kijken hoe je site er (ongeveer) uit ziet op een tablet en telefoon.

      Oog icoontje (5) : Bekijk je pagina zonder sidebar

      Door hierop te klikken kun je de pagina bekijken zonder de Elementor sidebar. Deze opent in een nieuw tabblad.

      Pijtje naast de knop “bijwerken” (6) : De pagina opslaan als template of concept

      Naast de knop “bijwerken” zie je een klein pijltje. Als je daarop klikt kun je ervoor kiezen de huidige pagina als template op te slaan, of als concept (dus nog niet zichtbaar voor publiek.

      Elementor bibliotheek

      De bibliotheek van Elementor is te vergelijken met de mediabibliotheek van WordPress. De Elementor bibliotheek bevat tientallen professioneel ontworpen templates die je zo kunt importeren op je pagina.

      Je kunt ervoor kiezen een complete pagina template te importeren die bestaat uit meerdere secties, maar als je op het kopje “blokken” klikt kun je ook kiezen uit een aantal secties zodat je zelf je pagina naar wens kunt samenstellen.

      Onder “mijn templates” vind je de templates die je zelf hebt gemaakt en hebt opgeslagen in de bibliotheek.

      In de gratis versie kun je alleen complete secties opslaan (met de rechter muisknop klikken op de 6 vierkantjes, zie (2) in de afbeelding hierboven), of volledge pagina’s opslaan door links onderin op het pijltje naast de knop “bijwerken” te klikken en te kiezen voor “als template opslaan.

      In de pro versie kun je ook individuele widgets opslaan in de bibliotheek.

      Elementor standaard instellingen

      Als je helemaal links bovenin op het hamburger icoontje klikt opent het menu hiernaast. Hierin vind je enkele opties:

      Standaardkleuren

      Hier kun je het standaard kleurenpallet voor de gehele website instellen.

      • De primary color wordt gebruikt voor kopteksten en icoontjes
      • De secundairy color wordt gebruikt voor lijsten, subkopjes, geanimeerde headers (pro) en prijstabellen (pro)
      • De text color voor alle andere teksten
      • De accent color voor links, knoppen en headings van de tab en accordeon widgets

      Je kunt kiezen uit een aantal standaard kleurenpalletten, maar als je op een kleur klikt kun je daar ook een eigen kleur instellen zodat je kleurenpallet perfect aansluit op je huisstijl.

       

      Standaard lettertypen

      Hier kun je de lettertypes instellen voor de kopteksten, body tekst (dat is alle andere tekst) en de accent teksten (links, knoppen en heading van tab en accordeon widgets).

      Kleurenkiezer

      Overal in Elementor wordt gebruik gemaakt van een kleurenkiezer, bijvoorbeeld om een tekst- of achtergrondkleur aan te passen. Hier kun je zelf bepalen welke kleuren in de kleurenkiezer worden getoond. Klik op een kleur om deze aan te passen. Helaas worden niet automatisch de kleuren van de hierboven ingestelde standaard kleuren gebruikt, maar het is uiteraard verstandig om diezelfde kleuren als basis voor je kleurenkiezer te gebruiken.

      Globale instellingen

      Deze instellingen zijn bedoeld voor developers. Hier kun je het standaard lettertype voor de gehele website instellen, de breedte van de inhoud (ik gebruik meestal 1200), de standaard witruimte tussen widgets, tot welk HTML element een uitgerekte sectie reikt (standaard “body”, wat even breed als het scherm is) en de standaard selector van de paginatitel.

      Lightbox

      Onder de globale instellingen vind je ook een kopje “lightbox”. Een lightbox is een popup venster waarin een grotere versie van een afbeelding verschijnt als je op die afbeelding klikt, zoals bij de afbeeldingen op deze pagina. Hier kun je instellen of je de ingebouwde lightbox van Elementor wilt gebruiken en welke kleur de achtergrond en de andere elementen moeten hebben.

      Dashboard instellingen

      Je kunt ook enkele dingen instellen in de backend van WordPress. Als je op “dashboard instellingen” klikt ga je daar naartoe. Je kunt hier o.a. selecteren voor welke berichttypes Elementor gebruikt wordt, of je de standaard kleuren en lettertypes van je thema wilt gebruiken in plaats van de hierboven beschreven standaardkleuren en lettertypes.

      Als je op het tabblad “stijl” klikt vind je dezelfde instellingen als bij “globale instellingen” en de mogelijkheid de lightbox in of uit te schakelen, en je kunt hier ook de breaking points voor tablet en mobiel instellen. Dat is de breedte waarop de responsive instellingen hun werk gaan doen. De standaard instellingen zijn prima (1025px voor tablet en 768px voor mobiel). 

      Onder het tabblad “geavanceerd” vind je nog enkele instellingen voor geavanceerde gebruikers.

      Over Elementor

      Als je hierop klikt ga je naar de website van Elementor

      Vinder

      De vinder in Elementor is wel een zeer handige tool. Als je daarop klikt krijg je een zoekvenster waarin je van alles kunt typen. Bijvoorbeeld de titel van een pagina, waar je vervolgens direct naartoe kunt. Elementor is dan ook al geopend, zodat je direct kunt beginnen met bewerken. Maar ook instellingen, templates of de WordPress customizer. Je kunt de vinder ook openen door CRTL + E (of CMD + E op de Mac) te typen.

      Pagina bekijken

      Als je hierop klikt opent de huidige pagina in een nieuw tabblad, zodat je deze kunt bekijken zonder de Elementor sidebar.

      Elementor Pro

      Alles wat beschreven is in deze handleiding vind je in de gratis versie van Elementor. Wil je nog meer features? Kies dan voor Elementor Pro en krijg o.a.:

      Theme Builder

      Met de theme builder van Elementor kun je niet alleen de inhoud van je pagina bewerken, maar ook alle andere onderdelen zoals de header en de footer, je blog overzicht enzovoorts.
      Ook kun je standaard templates maken voor speciale pagina’s zoals de 404 pagina en zoekresultaten pagina, maar ook voor berichten waarbij je zelfs een andere template kunt kiezen per categorie.

      WooCommerce Builder

      Heb je een webshop? Met Elementor Pro kun je zowel de individuele productpagina’s als het productoverzicht (de winkel en categorie pagina’s) helemaal naar wens vormgeven

      Popup Builder

      Hiermee kun popups maken met verschillende triggers, waardoor deze automatisch verschijnen nadat je bezoeker bijvoorbeeld 10 seconden op de pagina is, of als hij de muis richting het kruisje beweegt om de pagina te verlaten. Zeer geliefd onder marketeers voor o.a. nieuwsbrief inschrijvingen en speciale acties.

      Nog eens 22 extra widgets

      Met Elementor Pro krijg je nog eens 22 extra widgets, waaronder een widget waarmee je blogberichten op iedere pagina kan tonen, een aantal social media widgets (oa share knoppen en een Facebook feed), een aftel timer, geanimeerde titels, prijstabellen, review sliders, flip box enzovoorts.

      En nog veel meer…

      En dat allemaal vanaf slechts $ 49,00!

      Hulp nodig met je Elementor website?

      Als het goed is heb je de basis van Elementor nu aardig onder de knie. Heb je toch nog vragen?
      Stel ze gerust in de reacties hieronder!

      Je kunt mij natuurlijk ook inhuren om een Elementor website voor je te bouwen, of om een
      Elementor training te volgen.

      Vraag direct een vrijblijvende offerte aan

      Dit artikel bevat affiliate links. Dat wil zeggen dat ik een vergoeding krijg als je Elementor Pro 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 zelf Elementor Pro wilt aanschaffen stel ik het zeer op prijs als je dat via deze pagina doet 😉

      Houd je het bij de gratis versie van Elementor or heb je al een Pro licentie, maar wil je me toch bedanken voor dit artikel? Dan wordt een kleine eenmalige donatie via de knop hiernaast natuurlijk altijd zeer op prijs gesteld 🙂

    • 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…)