Blog

  • Bricks Builder review – een betaalbaar Elementor Pro alternatief

    Bricks Builder review – een betaalbaar Elementor Pro alternatief

    Bricks Builder is alweer een gloednieuwe WordPress page builder, waarvan de eerste versie is gelanceerd op 16 maart 2021. Het was eigenlijk de bedoeling dat Bricks al een jaar eerder werd uitgebracht, maar zoals ze zelf zeggen: excellence takes time. Laten we eens kijken of Bricks Builder excellent genoeg is om de concurrentie met gevestigde page builders als Divi en Elementor aan te kunnen…

    Over Elementor gesproken…

    Komt de user interface in het screenshot hiernaast jou ook zo bekend voor? 
    Als ik niet beter zou weten zou ik denken dat Bricks Builder gewoon een Elementor add-on met een andere skin was, zoals 10Web builder

    Dat is echter niet het geval – Bricks is niet eens een plugin, maar een thema.
    Een enorm snel thema, al helemaal als je kijkt naar alle features die Bricks biedt.
    Hun eigen homepage (ook gebouwd met Bricks) scoort 94/100 op mobiel in
    Google’s Pagespeed test.

    Dat is echt een uitstekende score, zeker aangezien er geen optimalisatie plugins zijn gebruikt om die score te behalen. Dat komt omdat Bricks Builder is gebouwd met Vue, een nieuwe Javascript bibliotheek die de browser het meeste werk laat doen.

    Bij de meeste WordPress sites doet de server waarop de website gehost wordt het meeste werk, maar zo’n server moet honderden bezoekers tegelijk bedienen. Jouw computer of telefoon hoeft dat alleen voor jou te doen, waardoor die een stuk sneller klaar is dan een server. 

    Elementor was overigens niet de enige inspiratiebron voor de ontwikkelaars van Bricks. Het canvas met gekleurde containers en elementen (modules in Divi en widgets in Elementor) lijkt weer heel erg op Divi, wat ook geldt voor de manier waarop je de rand van elk onderdeel kunt slepen om de gewenste padding in te stellen. 

    Het instellingen paneel lijkt juist weer erg op dat van Oxygen. Nu ben ik persoonlijk niet zo’n fan van Oxygen, en net als Oxygen gebruikt ook Bricks Builder vrij veel CSS terminologie,
    maar om een of andere reden voelt de interface van Bricks toch meer intuïtief. Ik ga hier zo nog wat dieper op in.

    Bricks Builder is dus een thema met een ingebouwde page builder, net als Divi en Avada. Of eigenlijk is het een thema met een ingebouwde theme builder, want je kunt ook je eigen header, footer, archief pagina’s, berichten template enzovoorts maken met Bricks. Maar goed, dat kan met alle andere premium page builders ook… Biedt Bricks Builder ook nog iets wat ik nog niet eerder heb gezien? 

    Bricks Builder features – wat maakt het anders dan anderen?

    Nou, ten eerste dus de snelheid. Zoals ik eerder al schreef is Bricks Builder extreem snel, zowel voor de bezoeker als tijdens het bouwen zelf. De builder laadt in een paar seconden en alles voelt erg snel en intuitief aan. Er zijn ook enkele instellingen waarmee je overbodige code in WordPress zelf kunt uitschakelen, zoals emojis en embeds.

    Thema stijlen

    Bricks beschikt ook over een uitgebreid thema stijl systeem, waarmee je een standaard waarde kunt instellen voor dingen als kleuren, typografie, margin en padding voor alle elementen. Nu is dat op zich niet zo bijzonder, er zijn meer thema’s die deze mogelijkheid bieden. Maar in Bricks kun je ook standaard stijlen instellen voor ieder element (widget of module dus). Dat is iets minder uitgebreid dan Divi’s Presets systeem, maar nog steeds erg bruikbaar. Je kunt zelfs meerdere thema stijlen instellen, en die conditioneel gebruiken voor bepaalde pagina’s, berichten enzovoorts. Je kunt deze thema stijlen zelfs exporteren naar een andere Bricks site.

    Pagina instellingen

    In de pagina instellingen kun je de header en footer uitschakelen, een punt navigatie toevoegen, de permalink, titel en meta description aanpassen, en zelfs instellen welke titel, omschrijving en afbeelding gebruikt worden wanneer de pagina gedeeld wordt op social media.

    Templates

    Net als iedere theme builder heeft ook Bricks een template bibliotheek waarin je templates voor je header, footer, archiefpagina, blogberichten enzovoorts kunt opslaan.
    Je kunt meerdere templates in 1 bundel stoppen zodat je gemakkelijk kunt vinden welke templates bij elkaar horen. Op die manier kun je meerdere headers, footers en andere templates ontwerpen in verschillende stijlen, en alle templates met dezelfde stijl bundelen. 

    Maar waarom zou je templates in meerdere stijlen ontwerpen? Nou, omdat je templates kunt delen met andere Bricks gebruikers, bijvoorbeeld met je klanten, waardoor jouw templates ook in hun template bibliotheek verschijnen. Je kunt templates ook gewoon exporteren als json file.

    Je kunt niet alleen complete pagina’s, maar ook containers opslaan als template. Individuele elementen kun je opslaan als globaal element. Dat wil zeggen dat als je op 1 plek iets aanpast aan een element, die aanpassingen ook automatisch wordt doorgevoerd op alle andere plekken waar dat globale element gebruikt wordt. 

    Bricks wordt geleverd met zo’n 70 standaard templates in 3 verschillende stijlen (bundles). Dat is wat weinig in vergelijking met de concurrentie maar dat aantal zal ongetwijfeld groeien in de toekomst.

    Containers en elementen

    Ik heb al een paar keer het woord “containers” gebruikt, maar wat zijn containers in Bricks Builder eigenlijk?

    Containers zijn te vergelijken met secties in andere page builders, maar waar je bij andere page builders rijen en kolommen toevoegt om de gewenste layout te bouwen voeg je bij Bricks gewoon meer containers toe. Containers zijn eigenlijk gewoon CSS flex elementen (en binnenkort kun je ook kiezen voor CSS grid). Dat zegt je wellicht helemaal niets, dus laat ik het even uitleggen 🙂

    Containers kunnen zowel verticaal (onder elkaar) als horizontaal (naast elkaar) worden weergeven. Wil je dus een layout met 3 rijen? Dan voeg je gewoon 3 containers in en stel je in dat deze verticaal moeten worden weergegeven. Wil je juist een layout met drie kolommen? Dan voeg je diezelfde 3 containers in, maar stel je in dat die horizontaal moeten worden weergegeven. 

    Je kunt ook containers invoegen in andere containers, waardoor je dus bijvoorbeeld 3 containers onder elkaar kunt hebben (3 rijen dus), waarvan 1 rij 3 kolommen heeft.
    Dat heb ik in het screenshot hieronder gedaan: container 1, 2 en 3 zijn verticaal uitgelijnd en staan dus onder elkaar, en container 3 bevat weer drie containers die horizontaal zijn uitgelijnd. Deze drie containers (3a, 3b en 3c) vormen dus 3 kolommen.  

    In elke container kun je ook elementen plaatsen. Zo bevat container 1 een heading element en container 2 bevat twee knoppen. Ook hiervoor kun je weer instellen of die elementen naast elkaar (zoals de knoppen) of onder elkaar moeten komen, en of ze links, rechts, boven, onder of in het midden moeten komen.

    De Bricks manier is even wennen, zeker als je al ervaring hebt met een andere page builder die met de traditionele rijen en kolommen structuur werkt.
    Maar deze manier geeft wel zeer veel flexibiliteit omdat je iedere layout kunt maken die je maar wilt.

    Die flexibiliteit vind je ook bij andere dingen; zo kun je bijvoorbeeld een ongelimiteerd aantal verloopkleuren toevoegen aan een overlay, achtergrond of tekst (inderdaad, je kunt (kop)teksten maken die bestaan uit meerdere kleuren 😮 ).

    Je kunt ook een onbeperkt aantal shape dividers gebruiken, en voor ieder element – zowel horizontaal als verticaal (nog eens 😮 ).

    Bricks Builder bevat zo’n 50 elementen, wat een prima aantal is. Alle basiselementen zijn aanwezig, zoals elementen voor het toevoegen van tekst, afbeelding (ook galerij of carousel), knop, slider, accordeon, referentie, prijstabel, een eenvoudig contactformulier, tabbladen, teller, Google Maps enzovoorts. Een leuke extra is dat je elementen die je vaak gebruikt bovenaan kunt vastzetten zodat je ze niet steeds hoeft te zoeken.

    Er zijn ook enkele meer geavanceerde elementen, zoals het post element waarmee je niet alleen berichten kunt weergeven, maar ook pagina’s of custom post types. Hierbij kun je ook bepaalde posts uitsluiten (of juist alleen bepaalde posts weergeven), en je kunt kiezen uit een lijst, raster, masonry of metro (remember Windows 8?) layout. Verder kun je kiezen welke onderdelen je wilt tonen (titel, samenvatting, afbeelding, meta) en in welke volgorde, en je kunt de afbeeldingen in een lijstweergave afwisselend links en rechts tonen. Wederom flink wat flexibiliteit om je layout aan te passen aan je wensen dus.

    Voor de single post pagina is er ook een element voor gerelateerde berichten, en een element waarmee je een navigatie naar het vorige en volgende bericht kunt  toevoegen.

    Bricks Builder biedt veel mogelijkheden dynamic data te gebruiken, zelfs inline (oké, nog 1 keer… 😮 ) Je kunt dus een tekstblok maken en de post titel, auteur of een ACF veld op elke gewenste plek in die tekst verwerken. Dat is iets wat ik nog niet ben tegengekomen in een andere page builder.

    CSS filters, animaties and transform

    De meeste page builders bieden wel CSS filters zoals brightness, contrast, blur, sepia enzovoorts. Maar de meeste builders bieden die filters alleen voor afbeeldingen (Elementor),
    of de filters worden toegepast op alle onderdelen in een sectie, rij of element (Divi). Dit terwijl die effecten juist heel handig zijn voor achtergrond afbeeldingen, maar de meeste builders bieden geen mogelijkheid om het effect alleen toe te passen voor achtergrondafbeeldingen.

    Als ik in Divi bijvoorbeeld de achtergrondafbeelding van een sectie wazig wil maken (met de blur filter) worden ook de tekst en alle andere onderdelen in die sectie wazig.
    Bricks Builder past het filter juist wel alleen toe op de (achtergrond) afbeelding, naar mijn mening een veel nuttigere benadering.

    Naast filters biedt Bricks Builder ook een flink aantal animaties en transform effecten zoals het schuintrekken, roteren of schalen van ieder element (maar nog niet on scroll helaas).

    Unsplash integratie

    Over nuttige dingen gesproken, Bricks biedt ook Unsplash integratie 🙂 Overal waar je een (achtergrond) afbeelding kunt toevoegen vind je ook een “browse unsplash” knop. 
    Als je daarop klikt opent er een popup venster waarmee je de volledige Unsplash catalogus kunt doorzoeken, die meer dan 1 miljoen rechtenvrije stockfoto’s bevat die je gratis op je website mag gebruiken.

    Developer vriendelijk, maar iets minder eindgebruikersvriendelijk

    Bricks Builder bevat dus flink wat features voor gebruikers die geen code kunnen schrijven, maar ook voor gebruikers die wel zelf kunnen coderen.

    Zo kun je aan elk onderdeel custom CSS, of een CSS class of ID toevoegen. 
    Dat is echter iets wat de meeste page builders bieden.

    Wat de meest page builders niet bieden is een JS blok om scripts toe te voegen aan de header, body en footer van de website. Je kunt scripts toevoegen voor de hele website (bijvoorbeeld Google Analytics code) maar ook per pagina. Je kunt zelfs je eigen elementen programmeren voor Bricks Builder!

    Er is ook een structure paneel aanwezig, waarmee je eenvoudig de structuur van een pagina kunt inzien (zie screenshot containers). Als je over een onderdeel gaat met de muis verschijnt er een rand omheen in de builder, zodat je direct ziet welk onderdeel het betreft.

    Zoals ik in het begin al schreef gebruikt Bricks veel CSS termen, zoals display (wat je op “none” moet zetten om bijvoorbeeld een onderdeel te verbergen op mobiel), positioning (relative, fixed of absolute), justify en direction (row of column, met reverse om de volgorde om te keren op mobiel) enzovoorts.

    Dat maakt Bricks wat minder gebruiksvriendelijk voor normale gebruikers dan een page builder als Divi, maar dat geldt eigenlijk voor vrijwel iedere page builder.
    Dat komt omdat Divi veel visuele elementen gebruikt in plaats van tekst,
    zoals Bricks (maar ook Elementor en andere builders).

    Om dat te illustreren heb ik hiernaast een screenshot geplaatst van de schaduw instelling in Divi (links) en Bricks (rechts). In Divi kies je eerst 1 van de 8 afbeeldingen bovenaan, waarna de andere opties verschijnen om de schaduw te fine-tunen. 

    In Bricks Builder zie je alleen een paar inputs waar je handmatig de waardes voor x, y, blur en spread moet invoeren. Dat geldt ook dingen als shape dividers, animaties, transformatie effecten enzovoorts. Als je bijvoorbeeld een shape divider wil instellen zie je in Divi gewoon een aantal afbeeldingen van de verschillende vormen, terwijl je in Bricks (en Elementor) alleen een lijst ziet met de namen van de verschillende vormen (golven, wolken, druppels enzovoorts). 

    Prijzen

    Omdat Bricks Builder pas net gelanceerd is hebben ze een zeer verleidelijke lifetime deal voor “early adapters”. Voor slechts $ 59,00 heb je een licentie voor 1 site met levenslange updates en support, en voor $ 149,00 mag je Bricks gebruiken op 1.000 websites.

    Conclusie

    Als je mij een beetje kent hoef ik je vast niet te vertellen dat ik direct een licentie voor 1.000 websites heb gekocht 😉  Bricks is dan wel wat minder gebruiksvriendelijk dan Divi,
    maar ze bieden wel een aantal zeer interessante en soms zelfs unieke features. Om er een paar uit te lichten:

    • De snelheid, zowel front-end als in de builder zelf – wat een belangrijke ranking factor in Google is.
    • Meerdere standaard stijlen instellen, ook voor elementen.
    • Zeer flexibel door het gebruik van containers in plaats van een vaste rij/kolom structuur.
    • Een ongelimiteerd aantal verloopkleuren.
    • Een ongelimiteerd aantal shape dividers, zowel horizontaal als verticaal, voor ieder onderdeel.
    • Lijst, raster, masonry of metro layouts voor berichten, galerijen enzovoorts.
    • Dynamic data, zelfs inline.
    • CSS filters voor (achtergrond) afbeeldingen.
    • Unsplash integratie.

    Naar mijn mening is Bricks Builder een prima keuze als je op zoek bent naar een betaalbaar alternatief voor Elementor Pro. Tuurlijk, op dit moment missen er nog wat populaire Elementor Pro features zoals een popup builder, WooCommerce builder (die als het goed is eind april wordt gereleased) en scroll animaties, maar Bricks is pas net uitgebracht and biedt nu al een aantal interessante features die Elementor niet heeft.

    Zoals bij alle nieuwe producten is het natuurlijk de vraag of het over 5 jaar nog bestaat en actief ontwikkeld wordt, maar met deze features voor die prijs ben ik zeker bereid die gok te wagen. En jij?

    Video overview van Bricks Builder

    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 Bricks Builder 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 Bricks wilt aanschaffen stel ik het zeer op prijs als je dat via deze link doet 😉

    Ga je voor Elementor of een andere gratis oplossing? Dan kun je eventueel ook een
    kleine eenmalige donatie doen via de button hiernaast 🙂

     

  • Core Web Vitals – website snelheid verbeteren

    Core Web Vitals – website snelheid verbeteren

    Vanaf mei 2021 is je positie in Google (nog meer) mede afhankelijk van je website snelheid. Vanaf dan telt je score op het gebied van Core Web Vitals namelijk ook mee als officiële ranking factor. Natuurlijk is het niet de enige ranking factor (Google gebruikt meer dan 200 factoren om te bepalen welke positie een website krijgt in de zoekresultaten), maar de verwachting is wel dat Core Web Vitals een belangrijke factor worden.

    In dit artikel lees je:

    Core Web Vitals, wat is dat?

    Core Web Vitals gaan over de gebruikerservaring die je bezoekers hebben op je website. Google wil voornamelijk websites tonen die een goede gebruikerservaring bieden, en hoe sneller de website, hoe beter die gebruikerservaring.

    Website snelheid meten met Google Pagespeed Insights

    Als je de snelheid van je website gaat optimaliseren is het belangrijk deze te meten met een objectieve tool, zodat het resultaat niet beïnvloed wordt door dingen als de snelheid van jouw computer en internetverbinding, of browsercache.

    Er zijn diverse gratis tools om de snelheid van je website te meten, zoals Pingdom en GT Metrix, maar eigenlijk is Google’s eigen Pagespeed Insights de enige die echt belangrijk is.

    Core Web Vitals zijn de 3 belangrijkste onderdelen die Google Pagespeed Insights meet:

    Largest Contentful Paint (LCP)

    De Largest Contentful Paint is de tijd die nodig is om het grootste zichtbare element in de viewport weer te geven.

    Dit gaat erover hoe lang het duurt voordat alles wat direct zichtbaar is in de browser van de bezoeker geladen is. Het grootste zichtbare element zal vaak een afbeelding of video zijn, maar kan ook een tekstblok zijn. Het gaat dus alleen om de elementen “boven de vouw”.

    First Input Delay (FID)

    De First Input Delay meet hoe lang het duurt voordat de bezoeker iets kan doen op je pagina, zoals klikken op een link, scrollen of iets typen in een zoekbalk of formulier.

    Bezoekers hebben nu eenmaal erg weinig geduld en scannen een pagina in eerste instantie op zoek naar iets wat ze interessant vinden. Vaak klikken ze daarvoor op links scrollen ze of maken ze gebruik van de zoekfunctie op je website. Maar ja, die moet het dan wel al doen natuurlijk… 

    Cumulative Layout Shift (CLS)

    Bij de Cumulative Layout Shift wordt gekeken in hoeverre elementen zich verplaatsen tijdens het laden.

    Zo kan het bijvoorbeeld gebeuren dat een tekst direct wordt weergegeven, maar een grote afbeelding (of video) die boven die tekst staat er wat langer over doet om te laden. Als die afbeelding dan uiteindelijk wordt weergegeven verschuift de tekst naar onder die afbeelding. Erg irritant natuurlijk als je die tekst al aan het lezen was.

    Snelheid website verbeteren (en daarmee ook je Core Web Vitals score)

    Nadat je de snelheid van je website hebt laten meten door Pagespeed Insights weet je dus hoe je ervoor staat. Zoals te zien in het screenshot hierboven geeft deze tool je een score op elk van de Core Web Vitals, en nog een paar andere elementen. Onderdelen met een groen bolletje zijn in orde (binnen de normen van Google dus), onderdelen met een oranje vierkantje zijn redelijk maar kunnen nog wel wat verbetering gebruiken, en onderdelen met een rood driehoekje scoren slecht en moeten dus verbeterd worden.

    Gelukkig vertelt Google je ook in detail welke onderdelen voor problemen zorgen, en wat je daaraan kunt doen. 

    Dat is echter gemakkelijker gezegd dan gedaan. Zo is er een kopje “Verwijder bronnen die de weergave blokkeren”. Als je daarop klikt krijg je te zien welke bronnen de weergave blokkeren… waarbij vaak ook dingen als Google Analytics, Google Site Tag, Google Fonts enzovoorts te vinden zijn. Ook jquery is een bekende “boosdoener”, maar dat is noodzakelijk voor veel functionaliteit in thema’s en plugins.

    Er zijn echter ook veel problemen die je wel relatief eenvoudig kunt verhelpen.

    Afbeeldingen optimaliseren

    Het optimaliseren van je afbeeldingen is een goed voorbeeld daarvan. Niet geoptimaliseerde afbeeldingen is op veel websites één van de belangrijkste oorzaken van traagheid,
    en iets wat vrij simpel te verbeteren is. Dat begint al met het uploaden van de afbeeldingen in het juiste formaat; als je ergens een afbeelding gebruikt van 300 x 200 pixels
    hoef je echt geen afbeelding van 3000 x 2000 pixels die 3MB groot is te uploaden.

    In een beeldbewerkingsprogramma zoals Photoshop (waar ook gratis alternatieven voor te vinden zijn) kun je een afbeelding eenvoudig resizen naar de benodigde afmetingen,
    en ook kiezen in welke kwaliteit je de afbeelding wilt opslaan. Een afbeelding die je resized van 3000 x 2000 pixel naar 300 x 200 pixel hoef je echt niet in de maximale kwaliteit
    op te slaan, die ziet er ook in een kwaliteit van 30 nog prima uit.

    Er zijn ook WordPress plugins beschikbaar die je afbeelding optimaliseren tijdens het uploaden, zoals ShortPixel, Smush, Imagify en Optimole. Al deze plugins hebben ook een gratis versie – uiteraard wel met wat beperkingen. Meestal geldt er een limiet op het aantal afbeeldingen dat je gratis kunt optimaliseren, en/of op de maximale grootte van een afbeelding
    (1 of 2MB). Nog een reden om de afbeelding al te optimaliseren voordat je deze upload dus.

    Een andere hele simpele optimalisatie is het omzetten van je afbeeldingen naar WebP. WebP is een bestandsformaat, net als JPEG en PNG, maar dan speciaal bedoeld voor webbrowsers. Net als bij JPEG en PNG wordt ook nu het bestand flink gecomprimeerd zonder zichtbaar kwaliteitsverlies.

    De bovenstaande optimalisatie plugins bieden allemaal een optie om je afbeeldingen te converteren naar WebP (Smush alleen in de pro versie), maar je kunt ook een gratis plugin als WebP Express gebruiken. Dit lost ook de melding “Lever afbeeldingen in moderne indelingen” in Pagespeed Insights op.

    Let er verder bij het kiezen van een thema of plugin op dat lazy loading ondersteund wordt. Dat zorgt ervoor dat afbeeldingen pas geladen worden op het moment dat ze in beeld komen, in plaats van dat alle afbeeldingen meteen geladen worden als de pagina wordt opgevraagd. Lazy loading functionaliteit is standaard ingebouwd in WordPress, maar je thema en plugins moeten dat wel ondersteunen.

    Gebruik een caching plugin

    Het installeren van een caching plugin zorgt ook voor een enorme snelheid boost (en ook een enorme boost in je Core Web Vitals score). Dat heeft verschillende oorzaken.

    Als een website voor het eerst geladen wordt moeten alle gegevens zoals teksten, afbeeldingen en code uit de database geladen worden.
    Dit proces kost tijd, en moet voor iedere bezoeker opnieuw worden uitgevoerd.

    Maar de meeste websites bevatten voor alle bezoekers exact dezelfde content, en die content verandert meestal ook niet elke 5 minuten (zoals bijvoorbeeld bij nieuwssites
    wel het geval is). Daardoor is het helemaal niet noodzakelijk om voor iedere bezoeker al die gegevens opnieuw uit te database te laden.

    Een caching plugin maakt een soort screenshot van de pagina als deze voor het eerst geladen wordt. De volgende keer dat die pagina wordt opgevraagd wordt dat screenshot getoond, wat veel sneller is dan het opnieuw laden van alle gegevens uit de database.

    Het nadeel van caching is dat je niet altijd de meest recente versie van de pagina ziet. De cache wordt automatisch regelmatig ververst (bijvoorbeeld als je een nieuw bericht publiceert), maar soms is het noodzakelijk de cache handmatig te wissen. Ook als je problemen ondervindt op je website is het wissen van de cache de eerste stap die je moet doen.

    Bekende gratis caching plugins zijn:

    Naast het maken van zo’n screenshot kan een caching plugin ook andere optimalisaties uitvoeren, zoals:

    • Optimaliseren van HTML, CSS en JavaScript code.
    • Combineren van verschillende CSS en JavaScript bestanden in 1 bestand zodat de server maar 1 bestand in plaats van tientallen kleinere bestanden hoeft te downloaden.
    • Verkleinen van dat bestand door middel van GZip compressie (hoe kleiner het bestand, hoe sneller het gedownload is natuurlijk).
    • Uitstellen van het laden van niet noodzakelijke bestanden totdat de rest van de pagina geladen is (wat render blocking meldingen in PageSpeed Insights kan oplossen).

    Voor dat soort taken gebruik ik echter ook vaak Autoptimize, in combinatie met een caching plugin.

    Gebruik zo weinig mogelijk plugins

    Eén van de voordelen van WordPress is dat er tienduizenden plugins beschikbaar zijn. Voor iedere functionaliteit die je kunt bedenken is er wel een plugin te vinden.
    Maar elke plugin is een stukje software, dat weer extra CSS code en JavaScript code toevoegt aan het pakket dat van de server gedownload moet worden.

    Soms is dat maar een paar kb aan code, maar soms ook heel veel, zoals bijvoorbeeld bij de webshop plugin WooCommerce, een page builder plugin zoals Elementor,
    een slider plugin, een uitgebreide contactformulier plugin etcetera.

    Het is dan ook aan te raden zo weinig mogelijk plugins te gebruiken. Overigens niet alleen in verband met de snelheid, maar ook in verband met het voorkomen van
    problemen als conflicten tussen plugins of veiligheidslekken.

    Elimineer bloat

    Dit is wat technischer dan de bovenstaande dingen. Bloat is code die wel op een pagina geladen wordt, terwijl die helemaal niet nodig is op die pagina.

    Een contactformulier plugin is daar een goed voorbeeld van. De meeste websites hebben alleen op de contactpagina een contactformulier staan.
    De code die nodig is om dat contactformulier te laten werken wordt echter op iedere pagina geladen. Dat is natuurlijk helemaal niet nodig.

    Dat is ook het grootste probleem met de meeste page builders. Die bevatten heel veel functionaliteit, zoals (wederom) contactformulieren, sliders, popups, animaties enzovoorts.
    De code voor al die functionaliteit wordt op iedere pagina geladen, zelfs voor dingen die helemaal nergens op de site gebruikt worden.

    Gelukkig heeft de Core Web Vitals update er wel voor gezorgd dat de bekende page builders (en andere thema en plugin ontwikkelaars) eindelijk wat gaan doen aan dit probleem.
    Bijvoorbeeld door bij iedere pagina te kijken welke code daadwerkelijk noodzakelijk is op die pagina, en alleen die code te laden.

    Zelf kun je ook wat doen aan dit probleem, met de Asset Cleanup plugin. Deze plugin voegt onderaan iedere pagina een vak toe met alle bestanden die op de betreffende pagina geladen worden. Vervolgens kun je voor ieder bestand instellen dat dit niet geladen moet worden op die specifieke pagina, of juist op de gehele website niet maar op die specifieke pagina wel. Hiermee kun je dus instellen dat de code voor je homepage slider alleen op de homepage geladen wordt, en de code voor je contactformulier alleen op de contactpagina. 

    Goede hosting

    De server waar je website op draait is natuurlijk ook een zeer belangrijke factor als je het hebt over de snelheid. Je wilt een hostingbedrijf dat:

    • Regelmatig investeert in nieuwe technieken, zoals de laatste generatie SSD schijven en HTTP/2.
    • Altijd de nieuwste MySQL en PHP versie aanbiedt, aangezien die sneller en veiliger zijn.
    • Niet teveel websites op 1 server zet, en het liefst iedere website eigen resources toekent.
    • Servers in Nederland heeft, of in elk geval dichtbij (Duitsland is ook prima bijvoorbeeld). *
    • Gratis SSL certificaten biedt (niet zoveel met snelheid te maken, maar wel ranking een factor).
    • Goede support biedt bij problemen.

    * Als je jezelf niet (voornamelijk) op Nederland richt kun je beter een server kiezen in het land waaruit je de meeste bezoeker krijgt.

    Idealiter kies je voor een hostingbedrijf dat gebruik maakt van Litespeed servers, aangezien die zeer snel zijn – maar vaak ook behoorlijk prijzig.

    Voor betaalbare hosting die voldoet aan alle bovenstaande criteria kan ik Siteground aanbevelen.
    Siteground is één van de grootste hostingbedrijven ter wereld, en hoewel het een Amerikaans bedrijf is hebben zij ook servers in Nederland en Duitsland.

    Hulp nodig met het verbeteren van je website snelheid?

    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 de snelheid van jouw website te verbeteren.

    Vraag direct een vrijblijvende offerte aan

    Sommige links in dit artikel zijn affiliate links. Dat wil zeggen dat ik een vergoeding krijg als je een betaald abonnement 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.

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

     

  • Contact form 7 handleiding – contactformulier voor je WordPress site

    Contact form 7 handleiding – contactformulier voor je WordPress site

    UPDATE 17-04-2021 : SINDS VERSIE 5.4 IS ER EEN PROBLEEM MET CONTACT FORM 7, WAARDOOR E-MAILS NIET VERZONDEN WORDEN.

    Gebruikers op het support forum geven aan dat het terugzetten van versie 5.3.x het probleem oplost. Hoewel de ontwikkelaar wel reageert op support vragen geeft hij op dit moment alleen het advies andere plugins te deactiveren en te switchen naar een standaard WordPress thema, maar dat is natuurlijk geen werkbare oplossing.

    Persoonlijk heb ik ervoor gekozen alle contactformulieren om te zetten naar Fluent Forms, een andere gratis contactformulier plugin die ook veel gebruiksvriendelijker is.

    Een contactformulier is één van de belangrijkste contactmogelijkheden op je website. De gratis plugin Contact Form 7 is één van de populairste contactformulier plugins voor WordPress en biedt enorm veel mogelijkheden, maar het is helaas niet de meest gebruiksvriendelijke plugin. Deze Contact form 7 handleiding is dan ook geen overbodige luxe 😉 (meer…)

  • Amelia review – Afspraken en evenementen plugin voor WordPress

    Amelia review – Afspraken en evenementen plugin voor WordPress

    Amelia is mijn favoriete plugin om afspraken te plannen. Ideaal voor kappers, restaurants, schoonheidsspecialisten, (groepslessen bij) sportscholen, consultants en reparatieservices, maar ook voor (kleinere) hotels, B&B’s enzovoorts. Als er bij jouw bedrijf iets gereserveerd kan worden voor een bepaalde datum en tijd is Amelia de plugin die je wilt hebben!

    Gebruiksvriendelijk en toch behoorlijk uitgebreid

    Er zijn natuurlijk heel veel plugins om afspraken te plannen, maar de meeste zijn erg ongebruiksvriendelijk en/of bieden niet voldoende mogelijkheden. Dat is gelukkig niet het geval bij WP Amelia; deze is zeer gebruiksvriendelijk (zowel voor medewerkers als voor klanten) en biedt desondanks meer dan genoeg features voor tal van bedrijven.

    Ook het instellen van Amelia is erg eenvoudig en zal in de meeste gevallen een half uurtje tot een uurtje van je tijd kosten. Je kunt meerdere medewerkers, diensten en locaties toevoegen, wat Amelia geschikt maakt voor tal van soorten bedrijven. 

    Zo kan een kapsalon in het winkelcentrum alle kapsters die in de salon werken invoeren, en meerdere diensten zoals knippen heren, knippen dames, knippen en kleuren dames enzovoorts. Per kapster kunnen de werktijden worden ingesteld, en het is zelfs mogelijk verlofdagen te plannen (bijvoorbeeld vakanties) waarop geen afspraken geboekt kunnen worden bij de betreffende kapster.

    Ook kunnen de diensten per medewerker gekoppeld worden. Zo kun je instellen dat de dienst “kleuren dames” alleen bij bepaalde kapsters geboekt kan worden. Als je meerdere locaties hebt kun je ook per medewerker instellen op welke locatie(s) hij of zij werkt.

    Je kunt per dienst de standaard tijdsduur instellen op 1 minuut nauwkeurig, en indien gewenst ook een “buffer tijd” instellen voor en na de afspraak. In het voorbeeld van de kapster kan zij bijvoorbeeld instellen dat een afspraak voor alleen knippen 20 minuten duurt, en een buffer instellen van 5 minuten na de afspraak voor het opvegen van de haren en schoonmaken van de werkplek. 

    Als er dan een afspraak gepland staat om 10:00 zal de volgende afspraak pas om 10:25 geboekt kunnen worden. In de kalender op de website (zie het bovenste screenshot hiernaast) worden alleen de beschikbare tijdssloten weergegeven. 

    Verder kun je ook instellen tot hoe lang van tevoren een afspraak gepland kan worden (bijvoorbeeld minimaal 24 uur vooraf) en tot hoe lang van tevoren een afspraak geannuleerd of verplaatst kan worden.
    Je kunt ook instellen of je een afspraak automatisch of handmatig wilt goedkeuren. 

    Daarnaast kun je ook terugkerende afspraken toestaan. Zo kan de klant bij de kapper bijvoorbeeld automatisch elke 6 weken een afspraak inplannen, of een maandelijkse afspraak bij de dietiste, of een halfjaarlijkse afspraak bij de tandarts enzovoorts.

    De kalender, en de bevestiging daarna die verschijnt als je onder de kalender op “ga verder” klikt, is overigens de standaard weergave van Amelia zelf, daar heb ik niets aan aangepast (behalve de labels “diensten” en “kapster”, die je in de backend zelf kunt aanpassen). Amelia biedt dus “out of the box” een zeer gebruiksvriendelijk 2 of 3 staps boekingsproces, dat er super professioneel uit ziet.

    Je kunt er overigens ook niet heel veel aan instellen, maar je kunt wel de kleuren aanpassen en zelf velden toevoegen (tekstvelden, checkboxes, radio buttons, selectie, bestand uploaden) zodat je meer informatie van de klant kan vragen in het boekingsformulier.

    Een andere belangrijke feature is dat je het aantal klanten dat gelijktijdig een dienst kan boeken in kunt stellen, zowel een minimaal aantal als een maximaal aantal.
    Zo kan een restaurant bijvoorbeeld een capaciteit van 100 gasten instellen. Als een gast dan voor 2 mensen reserveert (je kunt een minimum en maximum aantal mensen per reservering instellen) kunnen er nog 98 andere gasten hetzelfde tijdslot reserveren. Ook erg handig voor groepslessen!

    Daarnaast kun je ook extra’s toevoegen aan een dienst. Zo kan een kapster “wassen” toevoegen als extra bij een knipbeurt, een B&B kan als extra diensten lunch of diner aanbieden en een restaurant kan als extra een drankenpakket aanbieden. Bij iedere extra kun je desgewenst extra tijd en/of extra kosten instellen.

    Als je ZZP’er bent of niet wilt dat klanten een specifieke medewerker kunnen kiezen (bijvoorbeeld bij een B&B of restaurant) maak je gewoon maar 1 medewerker aan, dan verschijnt het selectievakje voor medewerkers niet.

    Verder kun je ook een aantal automatische e-mails instellen, bijvoorbeeld als de afspraak is goedgekeurd, afgewezen, geannuleerd of verplaatst, een herinnering een dag voor de afspraak, een evaluatie na de afspraak en zelfs automatisch een mailtje sturen als de klant jarig is.

    Je kunt aparte mails instellen voor de klant en voor de medewerker, en je kunt de tekst zelf aanpassen. Daarbij kun je gebruik maken van een flink aantal placeholders, waarmee je automatisch de juiste gegevens kunt invoegen. Daarmee kun je bijvoorbeeld de naam van de klant invoegen, de datum en tijden van de afspraak, de locatie, met welke medewerker hij een afspraak heeft enzovoorts.

    Als je wilt kun je klanten ook direct online laten betalen, waarbij PayPal en Stripe standaard beschikbaar zijn. Stripe is een grote Payment Service Provider waarmee je klanten ook met iDeal kan laten betalen, en alleen een vergoeding betaalt per transactie. Gebruik je liever een Nederlandse partij zoals Mollie? Dat kan ook, want Amelia integreert ook met WooCommerce. Indien gewenst kun je ook gebruik maken van kortingscodes (ook zonder WooCommerce).

    Zowel klanten als medewerkers kunnen inloggen op een eigen dashboard, waar zij hun afspraken kunnen inzien en beheren.

    Evenementen

    Naast het plannen van afspraken kun je Amelia ook gebruiken voor evenementen.

    Je kunt de datum en tijden instellen (waarbij meerdaagse en terugkerende evenementen ook mogelijk zijn), instellen vanaf en tot wanneer mensen tickets kunnen kopen en voor welke prijs, hoeveel tickets er beschikbaar zijn en op welke locatie het evenement plaats vindt.

    Aan de voorkant van de website kun je de evenementen als lijst weergeven, of in een kalenderweergave. In de backend kun je zien wie zich hebben aangemeld, en ook voor evenementen zijn er een aantal automatisch e-mails in te stellen.

    Uiteraard kun je ook reserveringen voor evenementen direct op de website laten betalen.

    Prijzen

    Amelia kost € 53,00 per jaar voor 1 website. Voor webbouwers is er ook een developer licentie, die € 217,00 per jaar kost. Naast de jaarlijkse licenties kun je ook kiezen voor een lifetime licentie (levenslange updates en support voor een eenmalig bedrag). Deze kost € 166,00 voor 1 website en € 513,00 voor een ongelimiteerd aantal websites.

    Amelia review conclusie

    Zoals ik in het begin van deze review al schreef is Amelia mijn favoriete plugin om afspraken te plannen. Zeer gebruiksvriendelijk voor zowel de beheerder als klanten, een zeer professioneel uiterlijk “out of the box” en toch behoorlijk wat features maken Amelia een uitstekende keuze. Qua prijs is het niet de goedkoopste optie, maar de prijs-kwaliteit verhouding is naar mijn mening zeker in orde.

    Website met afsprakensysteem laten bouwen?

    Wil je een website laten bouwen en je afspraken via Amelia laten lopen? Dan ben je bij mij aan het juiste adres! Bekijk hier mijn mogelijkheden en prijzen. Bij alle pakketten krijg je een lifetime licentie voor Amelia cadeau.

    Vraag direct een vrijblijvende offerte aan

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

    Ga je voor 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 🙂

     

  • Thrive Theme Builder review

    Thrive Theme Builder review

    In mijn Thrive Architect review schreef ik al dat het team van Thrive Themes al geruime tijd aan de Thrive Theme Builder werkte. Nu is deze eindelijk beschikbaar!
    Eens kijken of de Thrive Theme Builder het wachten waard was.

    Thrive Theme Builder settings

    De eerste indruk van de Thrive Theme builder is in elk geval goed. je moet eerst de Thrive Product Manager plug-in installeren en inloggen op je account. Vervolgens wordt automatisch het Shapeshifter thema – met daarin de Thrive Theme Builder -geinstalleerd en geactiveerd. 

    Je wordt verwelkomd door een installatiewizard, waarmee je het logo, de belangrijkste huisstijl kleur (die als accentkleur voor het thema wordt gebruikt) en standaard layouts voor de header, footer, blog (archief en single). pagina’s en homepage kunt instellen.

    Voor de homepage kunt je een bestaande pagina gebruiken, of kiezen uit enkele standaard layouts. Nadat je de basis hebt ingesteld leidt een video van 15 minuten je door de basis van de Thrive Theme Builder (die je natuurlijk ook weg kunt klikken)

    Het meest opvallende onderdeel van de Thrive Theme Builder is de linker sidebar, waar je de instellingen die je in de wizard hebt gemaakt kunt aanpassen, maar ook de standaard typografie voor de kopteksten, alinea’s, links enzovoort kunt instellen.

    Om het ontwerp van je site consistent te houden bevat het standaard kleurenpalet alleen verschillende tinten van de huisstijl kleur die je eerder hebt gekozen.

    Je kunt echter ook andere kleuren toevoegen en deze als globaal instellen. Het voordeel hiervan is dat als je die kleur in de instellingen verandert, deze overal verandert waar je hem hebt gebruikt. De eerder ingestelde huisstijl kleur is ook zo’n globale kleur.

    Onderaan de pagina vind je de revisies en undo / redo knoppen. Je kunt hier ook bekijken hoe de pagina er op mobiel en tablet uitziet.

    Bovenaan de pagina vind je de pagina instellingen. Daar kunt je dingen als publicatie instellingen aanpassen, welke template je op deze specifieke pagina wilt gebruiken (je kunt per pagina een andere template instellen als je wilt) en dingen zoals de header, footer, titel, uitgelichte afbeelding etcetera weergeven of verbergen.

    Thrive Theme Builder templates

    Op het moment van schrijven heb je de keuze uit 33 standaard pagina templates.
    Elke template bestaat uit meerdere onderdelen, zoals een header, hero sectie, content area, call to action, footer en sidebar.

    Je kunt eenvoudig elk onderdeel van een template aanpassen; klik gewoon op het onderdeel dat je wilt bewerken en de instellingen voor dat specifieke onderdeel worden geopend in de sidebar.

    Als je bijvoorbeeld op de header klikt kun je  de standaard header vervangen door een andere (je hebt de keuze uit 30+ header templates), een transparante of sticky header instellen, de typografie aanpassen, de achtergrond wijzigen en een schaduw of shape divider instellen.

    Verder kun je kiezen uit 37 hero designs, 23 call to action designs (ideaal voor bijvoorbeeld een nieuwsbrief inschrijfformulier), 28 footer designs enzovoort.
    Keuze genoeg dus.

    Ook de globale velden in het Thrive Dashboard zijn een goede toevoeging. Daar kun je dingen instellen als de contactgegevens van het bedrijf, links naar je social media profielen, privacybeleid, contactpagina enzovoorts.  Daarnaast kun je ook je eigen globale velden toevoegen.

    Die globale velden kunnen worden gebruikt in je templates. Als je een van die globale velden in het dashboard bewerkt (bijvoorbeeld omdat het telefoonnummer is gewijzigd) wordt het overal waar je dat veld gebruik hebt automatisch aangepast.

    Thrive Architect Light

    Voor het bewerken van content elementen (zoals tekst, afbeeldingen en knoppen) gebruikt de Thrive Theme Builder een light versie van Thrive Architect, Thrive’s eigen pagebuilder.

    Thrive Architect werd eigenlijk verkocht als een afzonderlijke plugin, maar omdat je ook met alleen de Thrive Theme Builder je content moet kunnen bewerken is er een basisversie met minder opties ingebouwd in de Thrive Theme Builder.

    Sinds 1 februari 2021 biedt Thrive echter alleen nog maar een lidmaatschap aan
    (Thrive Suite, zie hieronder) waarmee je ook toegang hebt tot de volledige versie van Thrive Architect.

    Thrive Suite

    Vroeger kon je alle Thrive producten los kopen, maar sinds 1 februari 2021 biedt Thrive alleen nog een lidmaatschap (Thrive Suite genaamd) aan waarmee je al hun producten op maximaal 25 sites mag gebruiken. Naast de Thrive Theme Builder en Thrive Architect vind je de volgende producten in Thrive Suite:

    • Thrive Leads is een geavanceerde opt-in formulier bouwer om meer nieuwsbrief inschrijvingen te krijgen
    • Thrive Ovation is een testimonial plugin die automatisch reacties verzameld van Facebook, Twitter en re blog. Ook kun je automatisch klanten mailen voor een referentie. 
    • Thrive Ultimatum is een plugin waarmee je tijdelijke aanbieding kunt laten zien aan individuele gebruikers.
    • Thrive Headline optimizer laat je A/B testen instellen voor je titels en kiest automatisch de beste variant.
    • Thrive Clever Widgets voegt conditional logic toe aan widgets, waardoor je bepaalde widgets wel of niet kunt tonen op een bepaalde pagina, in een bepaalde categorie enz.
    • Thrive Quiz Builder is een plugin om een quiz te maken (waarbij het uiteindelijke doel marktonderzoek, meer nieuwsbrief inschrijvingen en meer exposure op social media is)
    • Thrive Comments breidt de standaard WordPress reacties uit met de mogelijkheid reacties te liken, erop te stemmen en deze te delen op social media. 
    • Thrive Optimize is ook een A/B test plugin, maar dan voor complete pagina’s. Deze is echter wat duurder en kost $ 127,00 voor een 1 site licentie.

    Prijs

    Thrive Suite kost $ 228 per jaar ($ 19 per maand). Voor dat geld mag je alle Thrive producten dus op maximaal 25 sites gebruiken. 

    Thrive Theme Builder review conclusie

    De Thrive Theme Builder is een prima builder. Een sterk punt is dat je gewoon op een template onderdeel kunt klikken – bijvoorbeeld op de header, footer, hero sectie en sidebars –
    om deze aan te passen. Bij de meeste andere theme builders moet je eerst in de backend naar het betreffende onderdeel gaan om dit te bewerken, wat veel minder intuïtief werkt.
    Ook dingen als de installatie wizard, introductie video en globale kleuren vind ik sterk.

    De prijs vind ik wat minder sterk… Bij Elegant Themes (het bedrijf achter Divi) heb je voor hetzelfde geld een lifetime licentie voor al hun producten, voor een ongelimiteerd aantal websites en inclusief levenslange updates en support. Een van die producten is Bloom, een plugin met dezelfde functionaliteit als Thrive Leads (weliswaar iets minder uitgebreid),
    en Divi biedt standaard de mogelijkheid elk gewenst element A/B te testen. 

    Die prijs is absoluut de enige reden waarom ik Thrive niet zou aanraden, want hun producten behoren tot de top op hun gebied. Dus als jij vindt dat deze geweldige tools het geld wel waard zijn zou ik zeker zeggen “Ga ervoor!”.

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

    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 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 de Thrive Theme Builder wilt aanschaffen stel ik het zeer op prijs als je dat via deze link doet 😉

    Ga je de Thrive Theme Builder niet kopen maar wil je me toch bedanken voor dit artikel? Dan kun je eventueel ook een kleine eenmalige donatie doen via de button hiernaast 🙂

     

  • Thrive Architect review

    Thrive Architect review

    Thrive Architect is een premium page builder die prima past in het rijtje van Elementor en Divi. De user interface (de look & feel van de software) ziet er bijna hetzelfde uit als die van Elementor, dus wat onderscheid Thrive Architect dan van de concurrentie? Volgens Thrive Themes, het bedrijf achter Thrive Architect, is het de meest conversiegerichte page builder van dit moment en biedt deze een echte visuele web bouw ervaring. Laten we eens gaan kijken!

    Thrive Architect user interface

    Zoals ik al zei lijkt de user interface behoorlijk op die van Elementor. Dat is helemaal niet erg, want dat is de meest gebruiksvriendelijke user interface die ik ken. Er is een sidebar aan de linkerzijde met alle modules erin. Thrive Architect heeft een stuk of 40 van die modules, wat een prima aantal is (vergelijkbaar met de concurrentie). 

     Deze modules zijn verdeeld in 2 secties: “foundation” en “building blocks”. Onder “foundation” vind je de standaard modules die je vrijwel altijd nodig hebt als je een website gaat bouwen, zoals kolommen, tekstblokken, headings, afbeeldingen en knoppen. Ook vind je hier “background section”, “content box” en “templates and symbols” (later meer daarover). 

    Het toevoegen van een sectie in Thrive Architect werkt een beetje anders dan wat ik gewend ben vanuit Divi of Elementor. In die page builders kun je op een plus icoontje klikken onder een sectie om een nieuwe toe te voegen.

    In Thrive moet je echter een “background section” module toevoegen om dat te doen. Dat voelt wat minder intuïtief en is dus even wennen, maar daarna prima te doen.  

    Onder “building blocks” vinden we een hoop modules die andere page builders ook bieden. Je hebt een voortgangsbalk, een aftel module, Google Maps, custom code module, tabbladen, testimonial, toggle, video, een grid optie voor berichten, een contactformulier; zo’n beetje alles wat je van een premium page builder zou verwachten tegenwoordig. 
    Maar Thrive Architect heeft ook een paar modules die niet alle andere page builders ook hebben.

    Enkele modules die de moeite waard zijn:

    • Facebook comments
    • Een click to tweet box waar je een quote in kan zetten die eenvoudig gedeeld kan worden op Twitter 
    • Social share buttons, waarbij je kan kiezen uit een paar verschillende stijlen
    • Een nieuwsbrief inschrijf module (waarmee je bezoekers kan inschrijven op een externe service zoals Mailchimp, MailPoet enz)
    • Star rating, waarmee je de bekende review sterren kunt toevoegen waar je maar wilt
    • Credit Card logo’s

    Niet alle modules zijn even bruikbaar; de Facebook Comments, click to tweet en social share buttons zijn top, maar de review sterren zien er weliswaar geweldig uit maar sturen geen 
    “structured data” uit waardoor ze niet zullen verschijnen in Google, en de Credit Card logo’s zijn gewoon afbeeldingen zonder verdere functionaliteit.

     

    Elke module heeft een prima aantal styling opties. Deze verschijnen automatisch in de sidebar als je op een element klikt. 

    Je kunt o.a. randen toevoegen (met border radius), een animatie instellen, schaduw toevoegen (ook tekstschaduw), de padding, margin en uitlijning instellen en een achtergrond met meerdere lagen toevoegen (effen kleur, gradient, afbeelding, video en zelfs een paar patronen).

    Je kunt dus een achtergrond afbeelding instellen met een gradient overlay, daar kun je dan nog een patroontje overheen gooien en vervolgens kun je de opacity (doorzichtigheid) van elke laag instellen. Erg gaaf!

    De meeste modules hebben ook een aantal opties specifiek voor die module, zoals font settings voor de tekstmodule (met Google fonts, text transform, line height en letter spacing) en een paar effecten in de afbeeldingen module (grijstinten, opacity en blur). 

    Daarnaast kun je bij een aantal modules ook hover opties instellen, en bij de background section module kun je ook een shape divider instellen. Als je meerdere kolommen hebt kun je die gewoon naar de gewenste breedte slepen. Dit alles werkt erg goed en prettig. 

    Thrive Architect maakt het ook erg makkelijk om je website goed responsive te krijgen. Onderaan de sidebar vind je een button waarmee je kunt zien hoe je website eruit ziet op een tablet of smartphone. Deze optie hebben vrijwel alle page builders tegenwoordig wel, maar in Thrive Architect kun je ook alles aanpassen voor het betreffende apparaat. In de meeste page builders kun je wel de belangrijkste dingen aanpassen, zoals de font grootte, padding, marge en uitlijning, maar in Thrive kun je ook alle andere styling opties aanpassen zoals kleuren en randen. Waarschijnlijk zul je die extra opties niet vaak gebruiken, maar de manier waarop je bij Thrive dingen aanpast voor mobiel en tablet voelt veel natuurlijker dan bij andere page builders. Uiteraard kun je ook voor elk element instellen of het wel of niet getoond moet worden op het betreffende apparaat.

    Nog een hele gave en conversieverhogende feature is Thrive Lightbox, waarmee je een popup venster kunt maken. Je kunt elke module die je wilt in dat popup venster plaatsen, en je kunt ervoor kiezen om de popup te tonen na een zelf in te stellen tijd (bijvoorbeeld als de bezoeker 10 seconden op de pagina is) of als de bezoeker de site wil wegklikken (bijvoorbeeld “wacht, bekijk deze geweldige aanbieding voordat je gaat!”). 

    Net als de meeste andere premium page builders laat ook Thrive Architect je ieder element opslaan in een bibliotheek zodat je het ergens anders op je website weer kan hergebruiken. Je kunt alles opslaan, van een button tot een complete pagina. Je kunt ook iets opslaan als globaal item (Thrive noemt dat “symbols”). Als je bijvoorbeeld de kleur van een button die je als symbol hebt opgeslagen aanpast op pagina 1 zal de kleur ook worden aangepast bij diezelfde button op pagina 2, 3 en 4.

    Last but not least; met Thrive Architect kun je ook zelf de header en footer ontwerpen. Deze worden echter opgeslagen als symbolen en dienen handmatig te worden toegevoegd op iedere pagina. Je kunt ze ook toevoegen aan een complete pagina template, maar ook in dat geval moet je die pagina template op iedere pagina en in elk bericht handmatig importeren.

    Pre designed templates

    Thrive Architect biedt dus flink wat tools om je creativiteit om te zetten in een werkende website. Maar ja, a fool with a tool is… still a fool 😉 Als je geen webdesign- en conversie specialist bent wordt het lastig optimaal te profiteren van alle mogelijkheden die Thrive biedt.  

    Daarom biedt Thrive ook een flinke collectie professioneel ontworpen, conversie geoptimaliseerde templates. Deze templates zijn verdeeld in design sets; sets die bestaan uit meerdere templates met hetzelfde design, of dezelfde functie.

    Zo is er bijvoorbeeld een design set voor een fitness merk met templates voor de homepage, een nieuwsbrief inschrijf pagina, een bevestigingspagina en een download pagina. Al die templates hebben hetzelfde design. met dezelfde kleuren, zodat ze goed bij elkaar passen.  

    Er is ook een design set met een paar verschillende ontwerpen voor een coming soon pagina, en een design set met enkele verschillende homepage ontwerpen (bijvoorbeeld een homepage voor een bouwbedrijf, een homepage voor een restaurant en een homepage voor een beauty salon). 

    Klinkt goed, toch? Absoluut, maar de meeste van die design sets zijn heel erg gericht op het aantrekken van nieuwsbrief abonnees. 

    Dat is op zich prima natuurlijk, maar de meeste bedrijven hebben meer behoefte aan templates voor dingen als een contactpagina, een over ons pagina en een pagina waarop je je producten of diensten kunt presenteren. Dat soort templates vind je niet in Thrive Architect, zoals Divi wel heeft met zijn layout packs. Je kunt dat soort pagina’s natuurlijk prima zelf ontwerpen met Thrive maar het zou leuk zijn om ook een aantal professioneel ontworpen templates daarvoor te hebben. 

    Thrive Suite

    Vroeger kon je alle Thrive producten los kopen, maar sinds 1 februari 2021 biedt Thrive alleen nog een lidmaatschap (Thrive Suite genaamd) aan waarmee je al hun producten op maximaal 25 sites mag gebruiken. Naast Thrive Architect vind je de volgende producten in Thrive Suite:

    Thrive Theme Builder

    Je favoriet zal waarschijnlijk de Thrive Theme builder zijn.

    Met de Thrive Theme Builder kun je niet alleen de content op de pagina zelf bewerken, maar ook de header, footer, blog template, archief template, WooCommerce template enzovoorts. Dat is erg cool, zoals je kunt zien in de video hiernaast.

    Thrive Themes is niet de eerste die zo’n theme builder ontwikkelt;  Oxygen en Elementor hebben er ook al een tijdje een en ook Divi heeft enkele maanden geleden al een eigen theme builder uitgebracht.

    Een belangrijk onderdeel van een theme builder is dynamische content, wat betekent dat velden automatisch worden gevuld met content uit de database. Zo kun je bijvoorbeeld een blog template bouwen die de titel, uitgelichte afbeelding en tekst van ieder bericht uit de database haalt en automatisch op door jouw ingestelde plek zet.

    Andere Thrive producten

    Zoals ik al zei zijn er nog meer producten in de Thrive stal. I heb het al gehad over de Thrive Theme Builder en Thrive Architect, maar daarnaast zijn de volgende producten verkrijgbaar: 

    • Thrive Leads is een geavanceerde opt-in formulier bouwer om meer nieuwsbrief inschrijvingen te krijgen
    • Thrive Ovation is een testimonial plugin die automatisch reacties verzameld van Facebook, Twitter en re blog. Ook kun je automatisch klanten mailen voor een referentie. 
    • Thrive Ultimatum is een plugin waarmee je tijdelijke aanbieding kunt laten zien aan individuele gebruikers.
    • Thrive Headline optimizer laat je A/B testen instellen voor je titels en kiest automatisch de beste variant.
    • Thrive Clever Widgets voegt conditional logic toe aan widgets, waardoor je bepaalde widgets wel of niet kunt tonen op een bepaalde pagina, in een bepaalde categorie enz.
    • Thrive Quiz Builder is een plugin om een quiz te maken (waarbij het uiteindelijke doel marktonderzoek, meer nieuwsbrief inschrijvingen en meer exposure op social media is)
    • Thrive Comments breidt de standaard WordPress reacties uit met de mogelijkheid reacties te liken, erop te stemmen en deze te delen op social media. 
    • Thrive Optimize is ook een A/B test plugin, maar dan voor complete pagina’s. Deze is echter wat duurder en kost $ 127,00 voor een 1 site licentie.

    Prijs

    Thrive Suite kost $ 228 per jaar ($ 19 per maand). Voor dat geld mag je alle Thrive producten dus op maximaal 25 sites gebruiken. 

    Conclusie

    Thrive Architect is echt een uitstekende page builder die prima kan concurreren met andere page builders zoals Elementor en Divi. Thrive Architect biedt enkele leuke modules die anderen niet hebben, een flink aantal styling opties, achtergronden met meerdere lagen, prima responsive design mogelijkheden, de mogelijkheid je eigen header, footer en popup vensters te maken en nog veel meer. Zeker in combinatie met de andere producten die je in Thrive Suite vind heeft Thrive erg een zeer sterk productaanbod.

    De prijs vind ik wat minder sterk… Bij Elegant Themes (het bedrijf achter Divi) heb je voor hetzelfde geld een lifetime licentie voor al hun producten, voor een ongelimiteerd aantal websites en inclusief levenslange updates en support. Een van die producten is Bloom, een plugin met dezelfde functionaliteit als Thrive Leads (weliswaar iets minder uitgebreid),
    en Divi biedt standaard de mogelijkheid elk gewenst element A/B te testen. 

    Die prijs is absoluut de enige reden waarom ik Thrive niet zou aanraden, want hun producten behoren tot de top op hun gebied. Dus als jij vindt dat deze geweldige tools het geld wel waard zijn zou ik zeker zeggen “Ga ervoor!”.

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

    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 Thrive Architect of een ander product 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 Thrive Architect of een ander product wilt aanschaffen stel ik het zeer op prijs als je dat via deze pagina doet 😉

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

     

  • WP Bakery review

    WP Bakery review

    WP Bakery is al jaren één van de meest gebruikte WordPress page builders, niet in de laatste plaats omdat deze page builder gratis wordt meegeleverd bij bijna alle thema’s op de populaire WordPress themes marktplaats ThemeForest. Desondanks werken de meeste webbouwers liever niet met WP Bakery. Eens kijken of dat terecht is 😉

    WP Bakery elementen

    WP Bakery wordt geleverd met een dikke 40 elementen (in andere builders ook wel “modules”, “widgets” of “blokken” genoemd), wat een prima aantal is.

    De pagina layout wordt opgebouwd uit secties en rijen, waarbij de rijen kunnen bestaan uit meerdere kolommen. Dat is allemaal vrij standaard. In die kolommen kun je dus elementen toevoegen als een:

    • Tekst blok
    • Afbeelding
    • Icoon
    • Scheidingslijn
    • Facebook like knop
    • Knop
    • Video speler
    • Google Maps
    • Berichten grid
    • Berichten slider
    • Afbeeldingen grid
    • Afbeeldingen slider
    • Accordeon
    • Tabbladen
    • Diverse grafieken

    Hoewel het aantal elementen dus vergelijkbaar is met andere builders zitten er wel veel “dubbele” dingen tussen. Zo zijn er 3 verschillende elementen om een scheidingslijn toe te voegen: 1 voor een gewone scheidingslijn, 1 voor een zigzag lijn en 1 voor een scheidingslijn met tekst erin. Ook zijn er 3 verschillende elementen voor grafieken; een taartdiagram, een cirkeldiagram en een lijndiagram. Er is een berichten grid, maar ook een masonry berichten grid en een berichten slider. Verder kun je ook de standaard WordPress widgets gebruiken.

    De meeste elementen zijn nuttig en zullen regelmatig gebruikt worden, al missen er wel wat dingen zoals prijstabellen, testimonials, counters en een contactformulier. 
    Ook de instellingsmogelijkheden vielen me in eerste instantie niet tegen. Zo kun je:

    • Bij een rij een parallax of video achtergrond instellen, een achtergrondafbeelding schermvullend maken in de breedte en/of hoogte, en de kolommen een gelijke hoogte geven.
    • Bij kolommen de kolombreedte aanpassen op tablet en mobiel, of een kolom verbergen op bepaalde devices.
    • Bij een knop o.a. de kleuren instellen, een icoon toevoegen en de uitlijning instellen.
    • Bij een icoon kiezen uit flink wat iconen, waaronder alle font awesome iconen en materials icons, een achtergrond instellen (bijvoorbeeld een cirkel of vierkant), het formaat kiezen (maar alleen uit 5 standaard formaten) en een link instellen.
    • Bij een galerij uiteraard de afbeeldingen selecteren, maar ook kiezen uit 3 sliders of een raster weergave en wat er moet gebeuren als er op een afbeelding wordt geklikt (bijvoorbeeld een lightbox openen).
    • Bij een post grid kiezen wat er weergegeven moet worden (berichten, maar ook andere post types zoals pagina’s, producten of zelfs een custom post type), hoeveel items per pagina en in hoeveel kolommen, vrij uitgebreide sorteer opties, en je kunt zelfs een filter toevoegen. Ik kon echter geen instelling vinden voor het tonen van meta data als de auteur of datum, het aanpassen van de lengte van de samenvatting, het verbergen van de uitgelichte afbeelding of het wijzigen van de knopkleur.
    • Bij tabbladen ieder gewenst element toevoegen onder een tabblad en de kleur van de tabs instellen (waarbij je alleen kunt kiezen uit 17 standaard kleuren, dus geen custom kleur).

    Styling opties in WP Bakery

    De meeste page builders bieden een apart “styling” tabblad met voor ieder element (secties, rijen en modules) zo’n beetje dezelfde opties. WP Bakery heeft ook wel zo’n tabblad (CSS opties genaamd), maar de instellingen die je daar vind zijn zeer beperkt.

    Je kunt hier alleen een rand instellen (kleur, stijl en radius), een achtergrond en de margin en padding.
    Geen schaduw, typografie*, minimale en maximale breedte en hoogte, filters, transformatie effecten, positionering enzovoorts dus.

    Onder het general tabblad kun je nog wel een animatie voor ieder element instellen. 

    * Bij sommige elementen heb je wat meer typografie instellingen. Zo kun je bij het custom heading element wel zelf bepalen welk lettertype je wilt, waarbij je gebruik kunt maken van Google Fonts (met preview!), maar dingen als regelhoogte, letterafstand, tekst schaduw en tekst transformatie ontbreken.

    Bij moderne page builders kun je alles aan de voorkant van de site aanpassen, zodat je direct ziet hoe een bepaalde aanpassing eruit ziet voor een normale bezoeker van de site.
    Ook WP Bakery beschikt over een front-end editor waarmee je aanpassingen kunt doen aan de voorkant van je site, maar dit werkt wat minder prettig dan bij andere builders.

    Als je in een andere builder bijvoorbeeld een andere kleur instelt zie je die aanpassing live gebeuren. Dus terwijl je met de muis over de color picker gaat zie je de kleur veranderen.
    Bij WP Bakery openen de instellingen in een popup, kies je een kleur, moet je op de knop “opslaan” klikken en dan herlaadt de pagina automatisch zodat je het effect van je wijziging ziet. Bevalt de gekozen kleur niet? Dan moet je een andere kleur kiezen, weer op de “opslaan” knop klikken enzovoorts. 

    Dat is allemaal niet onoverkomelijk, maar als je een echte front-end builder gewend bent werkt het toch een stuk minder intuitief, en bovendien ook een stuk minder snel.

    Geen theme builder

    De bekende page builders bieden inmiddels ook vrijwel allemaal complete theme builder functionaliteit. Dat wil zeggen dat je niet alleen de inhoud van de pagina kunt bewerken,
    maar ook de header en footer, en templates kunt maken waarmee je helemaal zelf een standaard opmaak kunt ontwerpen voor dingen als berichten of producten.

    WP Bakery biedt GEEN theme builder functionaliteit, en je kunt hier dan ook uitsluitend de inhoud van de pagina mee vormgeven.

    WP Bakery prijs

    Een licentie voor WP Bakery kost $ 64 voor 1 site, inclusief levenslange updates en 6 maanden support. 

    Maar zoals ik in het begin al schreef wordt WP Bakery standaard meegeleverd bij de meeste thema’s op ThemeForest, en aangezien zo’n thema vaak goedkoper is dan een losse
    WP Bakery licentie kun je beter daarvoor gaan. Zeker omdat je bij veel van die thema’s ook nog andere premium plugins krijgt, zoals Slider Revolution.

    Conclusie

    Ik was positief verrast door de vele mogelijkheden van elementen als het post grid, en het feit dat je elke module kunt toevoegen onder een tabblad.
    Ook leuke elementen zoals de verschillende diagrammen zie je niet vaak in andere page builders.

    Dat weegt echter niet op tegen de nadelen, zoals het ontbreken van theme builder functionaliteit, de minder efficiënte front-end builder en de beperkte (styling) opties.
    Er zijn echt betere page builders verkrijgbaar (zie hieronder).

    Ik vind WP Bakery echter ook niet zo rampzalig als sommige webbouwers beweren, dus als je een mooi thema ziet op ThemeForest met deze builder hoef je dat nog niet
    meteen af te schrijven. Ik raad je echter wel aan eerst bij de alternatieven hieronder te kijken. 

    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 WP Bakery?

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

    WP Bakery vs Avada

    avada fusion builderAls je bekend bent met ThemeForest ben je ook Avada vast al eens tegengekomen, aangezien dit het meest verkochte thema allertijden op ThemeForest is. In tegenstelling tot de meeste ThemeForest thema’s maakt Avada echter geen gebruik van WP Bakery, maar van een eigen page builder, Fusion Builder genaamd.

    In tegenstelling tot WP Bakery is de page builder van Avada wel een echte front-end builder, waarbij je live het effect van je aanpassingen ziet. Daarnaast is Avada ook een echte theme builder, waarmee je ook je header en footer helemaal zelf naar eigen wens kunt bouwen, evenals templates voor dingen als pagina’s, berichten en zelfs WooCommerce pagina’s.

    Je kunt dus alles helemaal zelf vormgeven, maar dat hoeft niet; Avada wordt namelijk standaard geleverd met een stuk of 80 “demo sites” die je zo kunt importeren.

    Een van de beste onderdelen van Avada zijn de zeer uitgebreide thema opties, waar je letterlijk honderden dingen kunt instellen. Gelukkig beschikken die thema opties over een krachtige zoekfunctie waardoor je heel snel de gewenste optie vind. Ook die thema opties stel je front-end in, zodat je direct het effect van je aanpassingen ziet.

    De design opties van Avada zijn wel (veel) minder uitgebreid dan die van Divi of Elementor (zie hieronder) ; zo vind je in Avada geen kleurenfilters, shape dividers, transform opties enzovoorts, en hoewel je wel hover opties en animaties in kunt stellen zijn die wel behoorlijk beperkt.

    Avada is exclusief verkrijgbaar via ThemeForest, en een licentie kost $ 60,00 inclusief levenslange updates en 6 maanden support. Voor dat geld krijg je er ook nog een paar mooie premium plugins bij, zoals Slider Revolution en ACF Pro. Je hebt echter wel voor iedere website een nieuwe licentie nodig. Als je maar 1 website wilt bouwen is Avada dus erg aantrekkelijk, maar als je meerdere websites wilt maken is Divi al snel goedkoper.

    Het zal duidelijk zijn dat mijn keuze tussen Avada en WP Bakery absoluut zou uit gaan naar Avada. 

    Lees mijn Avada review

    WP Bakery vs Divi

    Divi is een premium WordPress theme, een compleet thema dus met een ingebouwde page builder.
    De Divi page builder is echter ook als losse plugin verkrijgbaar, net als WP Bakery dus. 

    Divi is al jaren mijn persoonlijke favoriet. Niet in de laatste plaats omdat Divi boordevol innovatieve features zit.
    Zo beschikt ook Divi over een echte front-end builder waarmee je direct het effect van je aanpassingen ziet, en over een complete theme builder waarmee je headers, footers en templates voor berichten, pagina’s, WooCommerce en archieven (blogoverzicht, zoekresultaten) kunt bouwen.

    Daarnaast beschikt Divi over allerlei handige functies, zoals globale kleuren, het aanmaken van meerdere presets voor elke module (bijvoorbeeld een rode knop en een groene knop), kopiëren en plakken van stijlen, zeer uitgebreide responsive design opties enzovoorts.

    Wat ik ook prettig vind is dat de interface van Divi veel visueler is ingesteld dan die van de meeste andere builders.  
    Als je in andere builders bijvoorbeeld een 
    shape divider toevoegt zie je de naam van die divider. Bij Divi zie je gewoon een voorbeeld van de betreffende vorm.

    Margins en paddings sleep je in Divi gewoon naar de gewenste breedte. Bij het instellen van een schaduw kun je kiezen uit 8 verschillende stijlen, die je vervolgens weer helemaal aan kunt passen aan je wensen. Dat geldt ook voor dingen als animaties, en naast de zogenaamde “entrance animations” heeft Divi ook scroll animations die reageren op de muisbeweging van de bezoeker.

    De color picker tool heeft – naast het standaard zelf in te stellen kleurenpallet – ook een kleurenpallet met globale kleuren en de laatst gebruikte kleuren. En net als Avada wordt ook Divi geleverd met – op dit moment zo’n 200 – complete demo website, waaraan er elke week 1 wordt toegevoegd.  

    En dan is er nog de prijs… Divi heeft geen gratis versie, en een thema als Avada is een stuk goedkoper dan Divi… als je maar 1 website hebt ten minste. Voor webbouwers en andere mensen die regelmatig websites maken is Divi veel aantrekkelijker geprijsd. Voor $ 89 per jaar mag je Divi op een onbeperkt aantal sites installeren, of je betaalt eenmalig $ 249 voor een lifetime licentie waarmee je levenslang updates en support krijgt. En met de knop hieronder krijg je daar ook nog eens 10% korting op 😉

    Je kunt natuurlijk ook eerst mijn uitgebreide Divi review lezen.

    WP Bakery vs Elementor

    Elementor is geen compleet thema maar een losse page builder die je met vrijwel elke WordPress thema kunt gebruiken, net als bij de WP Bakery plugin dus.

    Net als Divi en Avada is ook Elementor volop in ontwikkeling, en ze zijn vaak de eerste met belangrijke features als een theme builder, WooCommerce builder, popup builder, globale kleuren enzovoorts.

    Ook Elementor beschikt over een echte front-end builder, en ook Elementor wordt geleverd met een flink aantal standaard ontwerpen.

    Elementor is qua mogelijkheden en gebruiksgemak zeer gewaagd aan Divi, maar dan met 1 groot voordeel :
    Elementor is helemaal gratis! 

    Dat wil zeggen, de (zeer uitgebreide) basisversie dan. Er is ook een pro versie met nog veel meer mogelijkheden en modules. Zo heb je in de basisversie geen (contact)formulieren,  sliders, portfolio module of prijstabellen, dingen die in Divi wel standaard aanwezig zijn. Ook de theme builder, WooCommerce pagina builder, popup builder en nog een aantal andere features zijn alleen in de pro versie beschikbaar.  De pro versie is met een prijs van $ 49,00 per jaar niet heel goedkoop, maar zeker ook niet te duur.

    Voor dat bedrag mag je Elementor Pro wel maar op 1 site installeren. Elementor heeft ook licenties voor meerdere sites,  maar dan wordt het al snel fiks duurder.  

    Lees mijn Elementor review

    WP Bakery vs Brizy

    Brizy is, net als Elementor, een losse page builder die aan de voorkant van je website werkt, en net als Elementor heeft ook Brizy een hele uitgebreide gratis versie. 

    Brizy onderscheidt zich door een gebruiksvriendelijke interface met een toolbar die verschijnt boven het element dat je wilt bewerken, zodat je de meeste instellingen direct op die plek kunt bewerken. Bij Divi en Elementor doe je alle instellingen in een popup of sidebar. Dat lijkt misschien minder gebruiksvriendelijk, maar ik vind het wel wat overzichtelijker. Al moet ik zeggen dat ik ook snel gewend was aan de Brizy manier. 

    Net als bij WP Bakery missen er in Brizy nog wel wat elementen zoals testimonials en prijstabellen, maar in tegenstelling tot WP Bakery zijn er in Brizy wel een flink aantal standaard designs aanwezig. 

    Daartussen vind je o.a. 7 prijstabel templates en 9 testimonial templates. Deze kun je dus eenvoudig invoegen en aanpassen aan je eigen wensen. 

    Uiteraard moet er ook bij Brizy geld verdiend worden, en dus is er ook Brizy Pro. De pro versie bevat o.a. een volledige theme builder, popup builder, dynamic content, shape dividers, filters, premium designs enzovoorts.

    Lees mijn uitgebreide Brizy review

     

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

    Ga je voor Elementor of een andere gratis oplossing? Dan kun je eventueel ook een
    kleine eenmalige donatie doen via de button hiernaast 🙂

     

  • Elementor verhoogt prijzen voor webbouwers

    Elementor verhoogt prijzen voor webbouwers

    Elementor heeft vandaag aangekondigd de prijzen van Elementor Pro voor webbouwers flink te verhogen. Of althans, de limiet voor het huidige Expert plan wordt verlaagd van 1.000 naar slechts 25 websites voor $ 199,00 per jaar. Als je Elementor Pro wilt gebruiken op meer dan 25 websites kun je kiezen tussen het Studio plan, waarbij je $ 499,00 betaalt voor 100 websites, of het Agency plan, waarbij je $ 999,00 gaat betalen voor dezelfde 1.000 websites die je met het huidige Expert plan kunt toevoegen.

    VIP Support

    Dat is dus een fikse prijsverhoging. Krijg je daar dan helemaal niets voor terug? Nou, niet veel, maar wel VIP support. Dat houdt in dat je gebruik kunt maken van live chat support, of een ticket kunt aanmaken waarop je gegarandeerd binnen 30 minuten een reactie krijgt. 24 uur per dag, 7 dagen per week. Bij de andere betaalde Elementor Pro abonnementen krijg je nog steeds de huidige premium support, waarbij je binnen een dag een reactie mag verwachten. 

    Website kits

    Daarnaast krijg je vanaf het Expert plan toegang tot 100+ website kits. Elementor kits zijn complete standaard websites, met templates voor meerdere pagina’s (homepage, over ons pagina, product pagina, contact pagina enzovoorts) compleet met een header, footer, 404 pagina enzovoorts.

    Elementor Experts Network profiel

    Ook krijg je vanaf het Expert plan een eigen profiel op het nieuwe Elementor Experts platform, waar klanten een Elementor expert kunnen vinden om hun website te bouwen.

    Nieuwe Elementor prijzen vanaf 9 maart 2021

    Deze prijswijziging gaat in vanaf 9 maart 2021. Als je voor die tijd een Expert account hebt blijft dit actief onder de huidige voorwaarden: $ 199,00 per jaar voor 1.000 websites.

    Elementor alternatieven

    Ben je op zoek naar een betaalbaarder alternatief voor Elementor Pro? Mijn persoonlijke favoriet is altijd al Divi geweest, waar je voor $ 249,00 een levenslange licentie voor een onbeperkt aantal websites hebt. Ook Brizy is een erg leuke builder met zeer betaalbare prijzen.

    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

  • Afbeeldingen voor je website

    Afbeeldingen voor je website

    Een website moet vooral goede, unieke teksten bevatten, maar het oog wil ook wat natuurlijk. Daarom mogen ook afbeeldingen niet ontbreken op je website, maar je mag niet zomaar iedere afbeelding van internet plukken en op je website zetten. In dit artikel vertelt Bob waar je afbeeldingen vindt die je wel mag gebruiken. (meer…)

  • Divi Toolbox – Divi mobiele menu zoals het hoort en meer

    Divi Toolbox – Divi mobiele menu zoals het hoort en meer

    Als je mij een beetje kent weet je dat Divi mijn favoriete page builder is. Deze website is gebouwd met Divi, en de meeste websites van mijn klanten ook. Maar ondanks dat de Divi Builder geweldig is, geldt dat niet voor het Divi thema zelf… Er zijn veel betere thema’s beschikbaar, zelfs gratis thema’s. Natuurlijk zorgde de introductie van de Theme Builder voor een flinke verbetering, maar het is nog lang niet perfect.

    Waarom ik dan niet gewoon een ander thema gebruik? Nou, voor sommige dingen die ik graag gebruik heb je echt het Divi thema zelf nodig. Zo zet ik graag het paneel met module instellingen vast aan de linkerzijde van het scherm, dat kan niet in een ander thema. Verder pas ik altijd de standaard kleuren in de kleurenkiezer aan op de projectkleuren, ook dat kan niet met een ander thema. En ik voeg regelmatig code toe aan het Integratie tabblad in de Divi Theme Options, bijvoorbeeld voor Google Analytics zodat ik daar geen extra plugin voor nodig heb. Dus tja, ik zit eigenlijk wel een beetje vast aan het Divi thema.

    Divi’s mobiele menu zoals het hoort

    Een van de belangrijkste tekortkomingen van Divi is dat je geen fatsoenlijk navigatiemenu voor smartphones en tablets kunt maken. Oke, het standaard mobiele menu in Divi werkt op zich wel, maar je kunt er echt helemaal niets aan aanpassen (behalve wat kleurtjes dan). 

    Divi Toolbox geeft je echter het juiste gereedschap om het mobiele menu precies zo te ontwerpen als jij dat wilt. 

    Wil je dat je mobiele menu vanaf rechts naar binnen schuift , zoals bij de de meeste moderne thema’s? Geen probleem met Divi Toolbox. Liever een fade effect? Inzoomen vanaf onder? Bounce? Het kan allemaal, en je kunt zelfs een ander effect kiezen voor het sluiten van het menu.

    Je kunt ook een animatie instellen om het hamburger icoon te veranderen naar een kruisje, en je kunt dat icoon ook verregaand stylen; Niet alleen de kleur en grootte ervan, maar zelfs de dikte van de strepen en hoe ver die uit elkaar staan.

    Een ander probleem met het standaard mobiele menu van Divi is dat alle submenu items standaard zijn uitgeklapt. Als je veel submenu items hebt zorgt dat ervoor dat het menu totaal onoverzichtelijk wordt, eigenlijk gewoon onbruikbaar. Met Divi Toolbox kun je instellen dat submenu items standaard zijn ingeklapt, zoals ik heb gedaan in de schermafbeelding links. 

    Eén van mijn favoriete functies is echter dat je alles kunt toevoegen wat je wilt in het mobiele menu.
    Er zijn een paar populaire dingen die je gewoon kunt inschakelen, zoals een zoekbalk, social media icoontjes en een winkelwagen icoontje, maar je kunt ook een widgetarea toevoegen boven en onder het menu zelf 😮

    Dat brengt me bij de volgende Divi Toolbox-functie waar je dol op zult zijn … maar niet voordat ik je heb verteld dat je met Divi Toolbox je eigen mobiele breaking point kunt instellen
    (nogmaals 😮 ). Standaard schakelt Divi over naar het mobiele menu bij een resolutie van 980px breed, maar met Divi Toolbox kunt je dat op elk gewenst breaking point instellen.
    Op die manier kun je het mobiele menu bijvoorbeeld ook op tablet in landscape stand weergeven 
    (of zelfs op desktop als je dat wilt), of juist het desktop menu ook op een tablet in portrait stand.

    Gebruik Divi layouts overal

    Sinds de Divi Theme Builder kun je natuurlijk al je eigen layout maken voor je header, footer, blog template enzovoorts, waardoor deze functie misschien niet zo heel interessant lijkt op het eerste gezicht. Toch is dit een erg krachtige feature. Als je dit inschakelt wordt er een shortcode toegevoegd achter alle layouts in de Divi bibliotheek, waarmee je de betreffende layout kunt toevoegen op plekken waar dit meestal niet kan.

    Om te beginnen kun je hiermee elke Divi layout toevoegen aan een widget. En zoals je net hebt gelezen kun je widgets toevoegen aan je mobiele menu… wat wil zeggen dat je elke layout die je wilt kunt toevoegen aan je mobiele menu! Maar dat is niet alles… je kunt de shortcode ook gebruiken om een layout toe te voegen in een andere module, zoals de accordeon module of de tabbladen module!

    Verbeter de standaard header en footer

    Niet alleen het mobiele menu wordt een heel stuk beter met Divi Toolbox, ook voor de desktop header zijn er enkele verbeteringen ingebouwd. Zo kun je een mooi geanimeerd hover effect instellen, je submenu mooier maken, een ander logo voor de fixed header instellen, de content automatisch onder de fixed header plaatsen en een call to action knop toevoegen aan je navigatiemenu. 

    De footer kun je vastzetten aan de onderkant van het scherm, verbergen totdat de gebruiker scrollt en je kunt de “terug naar boven” knop aanpassen.

    Pimp je blog

    Bij de meeste moderne thema’s kun je kiezen uit een aantal verschillende blog layout, maar niet in Divi.
    Je kunt natuurlijk je eigen blog layout maken met de theme builder, maar veel meer keuze dan een grid (zoals ik gebruik) of alle berichten onder elkaar heb je niet.

    Divi Toolbox geeft je de keuze uit 9 verschillende blog layouts (waarvan 3 gewoon grids zijn met een verschillend aantal kolommen, maar toch). Vanzelfsprekend kun je de typografie en kleuren aanpassen, maar ook de samenvatting tonen of verbergen, de lees meer knop tonen en de tekst ervan aanpassen, 
    de sidebar verwijderen van de archiefpagina’s en uit de single post template (ik heb nooit begrepen waarom ik in de Divi theme opties niet kan kiezen voor een full width layout), een overlay en zoom effect voor de uitgelichte afbeelding instellen enzovoorts.

    Je kunt ook dingen toevoegen aan de single post template als een biografie van de auteur, gerelateerde berichten en links naar het vorige en volgende bericht. Je kunt zelf het reacties gedeelte stylen!

    Andere Divi Toolbox features

    De hierboven beschreven functies zijn mijn favoriete features van Divi Toolbox, maar de plugin biedt nog veel meer functies. Een paar functies die ook de moeite waard zijn:

    • Het aantal kolommen op mobiel en tablet aanpassen door een CSS class toe te voegen: In de mobiele weergave maakt Divi standaard alle kolommen full width. Dat is meestal een goed idee, maar soms wil je liever 2, 3 of 4 kolommen op mobiel en/of tablet. Met Divi Toolbox kun je gewoon een CSS class toevoegen aan de rij waar je meerdere kolommen wilt houden en klaar ben je.
    • Er is ook een CSS class om de volgorde van de kolommen om te draaien op mobiel in een bepaalde rij. 
    • Als je een parallax effect instelt op een achtergrond wordt dat standaard niet gebruikt op mobiel. Door wederom een CSS class toe te voegen maakt Divi Toolbox dat wel mogelijk.
    • Er zit een schakelaar in Divi Toolbox waarmee je het Projecten post type kan verbergen. Persoonlijk gebruik ik projecten toch nooit dus dat is een welkome toevoeging. Je kunt er ook voor kiezen om “projecten” te veranderen in een andere term.
    • Je kunt eigen lettertypes uploaden in Divi, maar om veiligheidsredenen is het standaard niet mogelijk om TTF en OTF bestanden te uploaden in WordPress. In Divi Toolbox kun je instellen dat je dit wel wilt toestaan.
    • Datzelfde geldt voor SVG bestanden.
    • Je kunt een gave particles achtergrond instellen die reageert op de muis of vinger van de bezoeker, evenals een mooi 3D tilt effect.
    • Divi Toolbox laat je de scrollbar stylen zodat die perfect past bij het design van je website.
    • Je kunt ook elke Divi layout als popup instellen, maar die kun je alleen activeren door te klikken; je kunt de popup dus niet automatisch tonen na een aantal seconden, of als de gebruiker scrollt, of als de bezoeker je website wil verlaten.

    Divi Toolbox Prijzen

    Divi Toolbox heeft 2 soorten licenties: met de regular licentie mag je Divi Toolbox op 1 website gebruiken en met de extended licentie mag je Divi Toolbox op een onbeperkt aantal websites gebruiken. De regular licentie kost € 49,00 inclusief levenslange updates en 6 maanden support, en de extended licence kost € 169,00 met dezelfde voorwaarden.

    Je kunt eventueel ook een licentie via de Divi Marketplace kopen voor $ 89 per jaar, inclusief onbeperkte websites en support.

    Conclusie

    De Divi Theme Builder heeft de meeste functies in dit soort plugin overbodig gemaakt. Ik kan ook een call to action knop toevoegen in de header met de theme builder, en ook de footer onderaan vastzetten is daarmee geen probleem. De custom blog template en single post template kan ik ook helemaal naar wens vormgeven.

    Voor de meeste websites zijn de standaard Divi header, footer en blog layouts echter wel prima, zeker als je een beetje kunt tweaken. En dat soort dingen tweaken met een plugin als Divi Toolbox is een stuk sneller dan ze zelf bouwen met de Divi theme builder.

    Voor mij persoonlijk was de Divi mobiele menu bouwer genoeg reden om Divi Toolbox aan te schaffen, de rest is een bonus wat mij betreft 🙂 En de user interface is al net zo mooi als de Divi Toolbox demo website (klik op de “view demo” link), die alleen met Divi en de Divi Toolbox plugin is gemaakt – zonder andere plugins of custom CSS dus.

    Hulp nodig met je Divi 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 te verzorgen.

    Vraag direct een vrijblijvende offerte aan

    Dit artikel bevat affiliate links. Dat wil zeggen dat ik een vergoeding krijg als je Divi Toolbox 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 Divi Toolbox wilt kopen stel ik het zeer op prijs als je dat via deze link doet 😉

    Ga je Divi Toolbox niet kopen maar wil je me wel bedanken voor dit artikel? Dan kun je eventueel ook een kleine eenmalige donatie doen via de button hiernaast 🙂