Inspiration Station

Categorie: De top van Bob

  • WordPress thema kiezen: Astra, OceanWP, Neve, Kadence of Blocksy?

    WordPress thema kiezen: Astra, OceanWP, Neve, Kadence of Blocksy?

    Het thema is de basis voor het uiterlijk van elke WordPress site, en het kiezen van een theme is dan ook één van de eerste dingen die je doet als je een website gaat bouwen. Persoonlijk gebruik ik meestal Divi, maar in dit artikel vergelijk ik een aantal populaire thema’s voor de standaard WordPress editor – Gutenberg – die ook zeer geschikt zijn voor andere page builders zoals Elementor en Brizy.  Al deze thema’s hebben zowel een gratis versie als een betaalde versie.

    In dit artikel zet Bob zeer populaire WordPress thema’s als Astra (meer dan 1 miljoen actieve installaties) en OceanWP (zo’n 700.000 actieve installaties) letterlijk naast veelbelovende nieuwkomers Kadence en Blocksy. Ook Neve ontbreekt niet in deze uitgebreide WordPress Theme vergelijking.

    Ik heb alleen gekeken welke features het thema zelf biedt, al dan niet aangevuld met een officiele “add-on plugin”. Zo heeft Blocksy voor bepaalde functionaliteiten de Blocksy Companion plugin nodig, Neve hun eigen Orbit Fox plugin en OceanWP heeft zelfs meerdere add-on plugins beschikbaar. Ook de premium features zitten bij ieder thema in een plugin.

    Veel features die niet standaard beschikbaar zijn in het thema of de officiele add-on plugin kunnen natuurlijk wel worden toegevoegd met plugins van derden of custom code (bijvoorbeeld Google Analytics of custom sidebars), maar daar is in onderstaande vergelijking geen rekening mee gehouden.

    Legenda

     

     

    Inbegrepen in de gratis versie
    Inbegrepen in de premium (betaalde) versie
    Niet inbegrepen
    D Divi
    E Elementor
    B Brizy
    T Thrive Architect
    G Gutenberg

    Basis Astra OceanWP Neve Kadence Blocksy
    Maximale breedte contentgedeelte instellen
    Globale instellingen overschrijven per pagina (sidebar, header, footer enz)
    Globale kleuren
    Andere kleur bij hover
    Instellen van padding en margin
    Keuze uit meerdere eenheden zoals px, (r)em, %, vw, vh
    Social media volgknoppen
    Social media deelknoppen
    Breadcrumbs

    Sidebars Astra OceanWP Neve Kadence Blocksy
    Keuze tussen sidebar links, sidebar rechts of geen sidebar
    Aparte sidebar instellingen voor blog, pagina’s, berichten en woocommerce
    Positie sidebar instellen voor mobiel (boven of onder content)
    Sticky sidebar (blijft in beeld bij scrollen)
    Custom sidebars toevoegen
    Conditionele sidebars (bijv alleen tonen bij berichten in bepaalde categorie)

    Header Astra OceanWP Neve Kadence Blocksy
    Header builder waarmee je zelf je header kunt ontwerpen
    Keuze uit meerdere header templates
    Sticky header (blijft staan wanneer je scrollt)
    Shrinking header (verkleint de header als gebruiker scrollt)
    Transparante header
    Mega menu
    Icons toevoegen aan menu items
    Aparte builder voor het mobiele menu (off canvas)
    Meerdere menu elementen (bijv #1 voor hoofdmenu en #2 voor utilities menu)
    Button widget
    Overlay zoekfuctie (vergrootglas icoontje ipv zoekvak)
    Live zoekresultaten tonen terwijl je typt
    Contactinfo widget (adres, telefoonnummer, e-mail)
    Off canvas menu op desktop (hamburger knop zoals op mobiel)
    Meerdere conditionele headers (bijv een andere header instellen op blog pagina’s)
    Login / my account widget
    Recaptcha voor Login widget
    Custom HTML widget
    Widgetarea toevoegen (voor widgets van WordPress of plugins)

    Footer Astra OceanWP Neve Kadence Blocksy
    Footer builder waarmee je zelf je footer kunt ontwerpen
    Keuze uit meerdere footer templates
    Sticky footer (blijft altijd vast onderaan staan)
    Meerdere conditionele footers (bijv een andere footer instellen op blog pagina’s)
    Scroll to top widget
    Shortcuts widget (balk met nuttige links die vast onderaan staat)

    Typografie Astra OceanWP Neve Kadence Blocksy
    Globale typografie instellen
    Aparte typografie instellingen voor H1 t/m H6
    Uitgebreide typografie instellingen (regelhoogte, letterafstand, transformatie)
    Aparte instellingen voor tablet en mobiel
    Google Fonts
    Google Fonts lokaal laden (opslaan op eigen server)
    Custom fonts uploaden
    Adobe Typekit fonts
    Font Awesome icoontjes

    Blog Astra OceanWP Neve Kadence Blocksy
    Keuze uit meerdere layouts voor de blog pagina
    Masonry blog layout
    Inifinite scroll (nieuwe berichten worden automatisch geladen)
    Keuze uit meerdere layouts voor single blog berichten
    Afmeting uitgelichte afbeelding aanpassen
    Specifieke meta data tonen of verbergen (auteur, datum, categorieen)
    Volgorde aanpassen van meta data
    Laatst geupdate meta data
    Custom fields gebruiken als meta data (bijv ACF, Toolset, Metabox)
    Bericht titel tonen in hero (met uitgelichte afbeelding als achtergrond)
    Gerelateerde berichten
    Volgende / vorige bericht navigatie
    Author box (widget met informatie over de auteur)
    Reading progress balk
    Leestijd indicatie

    WooCommerce Astra OceanWP Neve Kadence Blocksy
    Meerdere layouts voor de shop en categorie pagina’s
    Meerdere layouts voor de single product pagina
    Infinite scroll op shop en categorie pagina
    Ajax add to cart
    Winkelwagen icoontje in header
    Off canvas cart / mini cart
    Wishlist
    Quick view
    Off canvas filters (filter knop)
    Floating add to cart (blijft bovenaan staan als gebruiker scrollt)
    Productafbeeldingen tonen als carrousel (op productpagina)

    Geavanceerde features Astra OceanWP Neve Kadence Blocksy
    Nieuwsbrief inschrijfformulier
    Cookie notice balk
    Facebook tijdlijn widget
    Instagram widget
    Custom 404 pagina
    Templates invoegen mbv hooks
    Templates weergeven in popup (bijv door te klikken op button)
    Automatische triggers voor popup (na x seconden, scroll %, exit intent)
    Extra Gutenberg blokken
    Extra Elementor widgets
    Google Analytics integratie (zonder plugin)
    Anonimiseren van Google Analytics data (ivm AVG)
    Custom code snippets toevoegen aan head, body en footer
    Aparte instellingen (layout ed) voor custom post types
    White label
    Instellingen exporteren / importeren

    Demo templates / sites Astra OceanWP Neve Kadence Blocksy
    1 pagina demo layouts
    Complete site layouts met meerdere pagina’s
    Demo templates voor Gutenberg
    Demo templates voor Elementor
    Demo templates voor Brizy
    Demo templates voor Beaver Builder

    Support Astra OceanWP Neve Kadence Blocksy
    Uitgebreide documentatie aanwezig
    Video documentatie aanwezig
    Support voor gratis gebruikers

    Snelheid Astra OceanWP Neve Kadence Blocksy
    Google Pagespeed mobile score 99 87 99 98 100
    Google Pagespeed mobile laadtijd (time to interactive) 1.1 s 2.7 s 1.1 s 1.2 s 1.1 s
    Google Pagespeed desktop score 100 100 100 100 100
    Google Pagespeed desktop laadtijd 0.3 s 0.4 s 0.3 s 0.3 s 0.3 s
    WordPress core scripts uitschakelen (bijvoorbeeld emoji’s)

    Prijzen premium versie Astra OceanWP Neve Kadence Blocksy
    1 website, per jaar $ 59 $ 54 € 59 $ 79 $ 49
    5 websites, per jaar $ 59 $ 109 € 59 $ 79 $ 69
    Ongelimiteerd aantal websites, per jaar $ 59 $ 179 € 59 $ 79 $ 99
    1 website, lifetime (geen jaarlijks terugkerende kosten) $ 249 $ 222 $ 699 $ 149
    5 websites, lifetime (geen jaarlijks terugkerende kosten) $ 249 $ 445 $ 699 $ 199
    Ongelimiteerd aantal websites, lifetime (geen jaarlijks terugkerende kosten) $ 249 $ 725 $ 699 $ 299

    Snelheidstest

    Voor het meten van de snelheid heb ik enkele standaard Gutenberg blokken gebruikt: een hero sectie met een heading, achtergrondafbeelding en een button, daaronder een blok met 3 kolommen, elk met een afbeelding, tekstblok en een button, en een gallery blok met 7 foto’s en 2 buttons. 

    Vervolgens heb ik steeds de gratis versie van een ander thema geactiveerd (met steeds diezelfde Gutenberg blokken) en een snelheidstest gedaan via Google Pagespeed Insights in een nieuw incognito venster (zodat dingen als browsercache ook geen rol kunnen spelen). 

    Daarbij was er geen enkele plugin actief, en ook geen caching of andere optimalisatie. 

    Bob’s favoriet: Blocksy theme

    Blocksy is mijn persoonlijke favoriete WordPress thema. Zowel de gratis versie als de betaalde pro versie bieden enorm veel features, de interface is zeer gebruiksvriendelijk, alles ziet er top uit en de prijzen van de pro versie zijn redelijk. Daarnaast worden zeer regelmatig nieuwe features toegevoegd en is de support uitstekend.

    Alleen het aantal demo sites is nog vrij beperkt, maar ook die worden regelmatig aangevuld en zijn beschikbaar voor verschillende page builders. 

    Astra theme

    Met meer dan 1 miljoen actieve installaties is Astra één van de populairste WordPress thema’s allertijden. Desondanks blijkt uit bovenstaande vergelijking dat Astra wat minder features biedt dan sommige andere thema’s. Aan de andere kant is er wel heel veel documentatie beschikbaar over hoe je een feature die niet standaard in het thema zit kunt toevoegen, maar daarvoor moet je meestal wel een stukje code of een plugin gebruiken.

    Verder heeft Astra een enorm aantal demo sites, waarmee je met 1 klik een complete website importeert die je alleen nog maar aan hoeft te passen aan je wensen. En dat ook nog voor verschillende page builders: de standaard Gutenberg editor, Elementor, Brizy en – als enige uit de lijst – Beaver Builder. Dat, in combinatie met de aantrekkelijke prijzen, verklaart waarom Astra zo populair is.

    OceanWP theme

    Ook OceanWP is met zo’n 700.000 actieve installaties behoorlijk populair, maar zoals je ziet bevat de kolom van OceanWP behoorlijk wat rode kruisjes.
    Toch zijn veel dingen wel mogelijk, maar vereisen ze een omweg. Een aantal voorbeelden:

    – OceanWP heeft geen ingebouwde header / footer builder. Maar je kunt wel een custom template maken en die instellen als header / footer. Er zijn echter (nog) geen standaard widgets in WordPress voor dingen als een navigatiemenu, dus er is een extra plugin nodig om een custom header te kunnen maken.

    – OceanWP biedt een gratis mega menu optie, waarin je ook een widgetarea kunt toevoegen. OceanWP biedt een aantal custom widgets waaronder een contactgegevens widget en een login widget. Deze kunnen echter niet worden toegevoegd aan de header zelf, alleen aan een dropdown submenu waardoor ze dus niet altijd zichtbaar zijn. Vandaar de rode kruisjes in het overzicht hierboven.

    – Ook kun je een aantal dingen apart aanpassen voor het mobiele menu, maar dat is minder flexibel dan in Astra en Blocksy.

    In de snelheidstest viel OceanWP op vanwege de wat lagere score op mobiel. Ik heb de test meerdere keren gedaan, maar OceanWP bleef “slechts” 87 op mobiel scoren.
    Dat is natuurlijk helemaal geen slechte score, maar wel beduidend lager dan de andere thema’s. Ook de laadtijd op mobiel is met 2.7 seconden een stuk hoger dan die van de andere thema’s.

    Neve Theme

    Ook Neve is een behoorlijk populair thema met flink wat features. Een aantal van die features (zoals de social sharing knoppen en het nieuwsbrief inschrijfformulier) werkt echter alleen met Elementor en/of de gratis Orbit Fox plugin (van dezelfde maker). Andere dingen (zoals de popup) werken weer uitsluitend in Gutenberg.

    Alle licenties zijn voor een onbeperkt aantal websites, maar als je uitgebreide WooCommerce instellingen wilt betaal je € 149,00 per jaar en voor white label betaal je zelfs € 259,00.

    Kadence Theme

    Veel mensen in de WordPress community zijn lyrisch over het Kadence theme en de bijbehorende Gutenberg plugin Kadence blocks. En ik snap ook wel waarom; ook het Kadence thema heeft behoorlijk wat groene vinkjes, wat betekent dat het behoorlijk wat features biedt in de gratis versie van het thema. Maar… niet zoveel als Blocksy.

    Ook de premium versie kan zich niet meten met Blocksy Pro naar mijn mening. Zo bevat de Kadence WooCommerce Shop Kit een aantal interessante functies, maar “basis” dingen als quickview en een wishlist functie lijken te ontbreken. Ik zeg met opzet “lijken”; ik heb geen Kadence Pro licentie en de documentatie is zo beperkt en onoverzichtelijk dat ik geen goed beeld kan vormen van welke features wel en niet zijn inbegrepen.

    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 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 Gutenberg of de gratis versie van Elementor of Brizy? Dan kun je eventueel ook een kleine eenmalige donatie doen via de button hiernaast 🙂

     

  • WordPress page builders vergeleken : Divi vs Elementor vs Brizy vs Thrive vs Gutenberg

    WordPress page builders vergeleken : Divi vs Elementor vs Brizy vs Thrive vs Gutenberg

    Als je vroeger een WordPress site maakte had je een tekstvlak in de admin omgeving waarin je teksten kon invoeren. Je kon dan een tekst dik drukken, schuin zetten, een kleurtje geven en zelfs een afbeelding invoegen, maar daar hield het wel mee op. De rest van het uiterlijk van je site werd volledig bepaald door een thema, en je moest echt verstand van PHP, HTML en CSS hebben om daar invloed op te hebben.

    Rond 2012 / 2013 verschenen de eerste thema’s met een ingebouwde page builder op de markt, zoals Avada en Divi. Met deze WordPress page builders kon de gewone gebruiker ook zelf een pagina verdelen in meerdere rijen en kolommen, en beschikken over verschillende modules om bijvoorbeeld een afbeelding, tekst of een slider toe te voegen. Toen in 2016 Elementor gelanceerd werd, en later dat jaar Divi 3.0 met hun Visual Builder, werd het zelfs mogelijk om je aanpassingen live aan de voorkant van je website te doen, zodat je direct het effect van je aanpassingen ziet zoals je bezoekers dat zien!

    Op 6 december 2018 kregen alle WordPress gebruikers een cadeau van Sinterklaas in de vorm van Gutenberg, een visuele page builder die vanaf dan de standaard manier werd om pagina’s in WordPress aan te passen. Maar daar was – en is – niet iedereen even blij mee; de Classic Editor plugin waarmee je Gutenberg kunt uitschakelen is inmiddels meer dan
    5 miljoen keer geïnstalleerd.

    In dit artikel gaan we enkele populaire WordPress page builders vergelijken: Elementor, Divi, Thrive Theme Builder, new kid on the block Brizy en de standaard page builder van WordPress zelf, Gutenberg. We kijken alleen naar de features die in de page builder zelf zitten, dus niet naar wat er met plugins van externe partijen mogelijk is.

    Legenda

      
    Divi Divi
    Elementor page builder Elementor
    Brizy Brizy
    Thrive Theme Builder Thrive Theme Builder
    Gutenberg Gutenberg
    Inbegrepen in de gratis versie
    Inbegrepen in de premium (betaalde) versie
    Niet inbegrepen
    D Divi
    E Elementor
    B Brizy
    TThrive Architect
    G Gutenberg
    Basis Divi Elementor Page Builder Brizy WordPress Thrive Theme Builder Gutenberg
    Drag & drop editor
    Front-end editor (aanpassingen live aan de voorkant van je site doen)
    Layout Divi Elementor Page Builder Brizy WordPress Thrive Theme Builder Gutenberg
    Meerdere kolommen
    Kolommen slepen naar de gewenste breedte
    Padding en margin instellen
    Padding en margin instellen door te slepen
    Max-width, max-height en min-height instellen
    Styling Divi Elementor Page Builder Brizy WordPress Thrive Theme Builder Gutenberg
    Basis styling opties (kleuren, uitlijning, font grootte)
    Geavanceerde styling opties (randen, regelhoogte, schaduw)
    Achtergrond afbeeldingen en videos
    Shape dividers
    Animaties
    Filters / blend mode
    Hover effecten
    Transformatie effecten
    Scroll effects
    Google Fonts integratie
    Custom Fonts (eigen lettertypes uploaden)
    Font Awesome integratie (icons)
    Modules Divi Elementor Page Builder Brizy WordPress Thrive Theme Builder Gutenberg
    Slider module
    Contactformulier module
    Nieuwsbrief inschrijf module (voor MailChimp en andere providers)
    Social media knoppen die linken naar je profielen
    Social media deel knoppen
    Facebook berichten embedden
    Facebook comments
    Font Awesome integratie (icoontjes)
    Geavanceerde features Divi Elementor Page Builder Brizy WordPress Thrive Theme Builder Gutenberg
    Popup builder
    Conditionele weergave
    Mega menu
    A/B test mogelijkheid
    API (daarmee kunnen externe ontwikkelaars extra modules maken)
    Theme builder Divi Elementor Page Builder Brizy WordPress Thrive Theme Builder Gutenberg
    Header en footer builder
    Sticky header (header blijft in beeld als je scrollt)
    Templates maken voor pagina’s, berichten, archiefpagina’s, 404 pagina enzovoorts
    Dynamische content (teksten, afbeeldingen en andere data ophalen uit de database)
    Eigen WooCommerce pagina’s vormgeven
    Workflow Divi Elementor Page Builder Brizy WordPress Thrive Theme Builder Gutenberg
    Laatste wijziging(en) ongedaan maken of opnieuw doen
    Secties, rijen en modules / widgets kopieren en plakken
    Stijlen kopieren en plakken op dezelfde pagina
    Standaard stijl instellen voor een sectie, rij of module op de hele site
    Globale kleuren (als je een kleur op 1 plek aanpast wordt deze overal aangepast)
    Wireframe / layer view
    BibliotheekDivi Elementor Page Builder Brizy WordPress Thrive Theme Builder Gutenberg
    Bibliotheek met standaard designs
    Eigen designs opslaan in de bibliotheek voor hergebruik elders op de site
    Global designs (aanpassingen worden automatisch overal op de site doorgevoerd)
    Opgeslagen designs exporteren voor hergebruik op een andere site
    Responsive designDivi Elementor Page Builder Brizy WordPress Thrive Theme Builder Gutenberg
    Bekijken hoe je design eruit ziet op tablet en mobiel
    Onderdelen verbergen op desktop, tablet of mobiel
    Bepaalde eigenschappen aanpassen voor mobiel en tablet (padding, margin, font size)
    Andere content tonen op mobiel en tablet (andere teksten, afbeeldingen enzovoorts)
    PrijzenDivi Elementor Page Builder Brizy WordPress Thrive Theme Builder Gutenberg
    Gratis versie beschikbaar
    Premium versie voor 1 website (prijs per jaar) $ 89 $ 49 $ 45 $ 228
    Premium versie voor 25 websites (prijs per jaar) $ 89 $ 199 $ 89 $ 228
    Premium versie voor een ongelimiteerd aantal websites (prijs per jaar) $ 89 $ 999 $ 179
    Levenslange premium licentie voor een ongelimiteerd aantal websites $ 249 $ 349
      download download download download  

    Bob’s favoriet: Divi

    Divi is al jaren mijn persoonlijke favoriet. Zoals je kunt zien in de bovenstaande tabel is de Divi Builder één van de meest complete page builders voor WordPress, met enorm veel features. Divi is ook volop in ontwikkeling, waardoor er steeds weer nieuwe features bij komen. 

    Het grote aantal features in Divi zorgde er vroeger voor dat Divi behoorlijk zwaar was (en daardoor traag), maar sinds augustus 2021 wordt uitsluitend de code geladen voor modules en effecten die daadwerkelijk op een pagina gebruikt worden.

    Divi biedt ook heel veel styling opties, die bovendien voor elke module, rij en sectie beschikbaar zijn (dat is bij andere builders weleens anders).

    Daarnaast vind ik de user interface van Divi het meest gebruiksvriendelijk van allemaal. Dat komt door de visuele weergave van alles. Als je in Divi bijvoorbeeld een schaduw wilt instellen kun je eerst kiezen uit een aantal presets, die je daarna kunt fine-tunen.

    Andere builders zoals Elementor bieden geen presets, daar moet je de schaduw zelf naar wens zien te krijgen (zie het screenshot hiernaast). 

    Daarin zie je ook het verschil bij het toevoegen van shape dividers; waar je in Elementor en andere builders alleen de naam van de vorm ziet (bergen, golven, wolken) zie je in Divi gewoon een afbeelding van de betreffende shape divider zodat je direct ziet hoe het eruit ziet. Daarnaast wordt Divi geleverd met honderden voorbeeld sites, die allemaal bestaan uit meerdere pagina’s. Elke week wordt er weer een nieuwe voorbeeld site in een bepaalde niche toegevoegd, die je vervolgens gratis kunt downloaden.

    Ook Divi Presets is een ongeëvenaarde feature. Dit is een gebruiksvriendelijke versie van CSS classes. Hiermee kun je bijvoorbeeld een preset maken voor een knop met een blauwe achtergrond en witte letters, die je “knop blauw” noemt. Vervolgens kun je een nieuwe preset maken voor diezelfde knop, maar dan met een gele achtergrond en zwarte letters die je “knop geel” noemt. Je kunt dan de blauwe preset instellen als standaard voor alle nieuwe knoppen, maar ook eenvoudig een andere preset selecteren waardoor de betreffende knop alle styling kenmerken van de betreffende preset krijgt (niet alleen kleuren, maar ook padding, fonts, schaduws enzovoorts).

    Verder biedt Divi als enige responsive content. Bij de meeste builders kun je elementen verbergen op bepaalde apparaten, en meestal kun je ook wel dingen als de lettergrootte aanpassen per resolutie, maar alleen bij Divi kun je ook de content zelf aanpassen per resolutie. Je kunt dus een knop maken met “vraag direct een vrijblijvende offerte aan”, maar op mobiel de tekst aanpassen naar “offerte aanvragen”.

    Tenslotte is ook de licentie van Divi erg gunstig voor webbouwers: voor een eenmalige investering van $ 249 heb je een levenslange licentie, waarmee je zonder extra kosten levenslang recht hebt op updates en (uitstekende) support. Als je liever per jaar betaalt kan dat ook, de kosten bedragen in dat geval $ 89 per jaar.

    Als je maar 1 website hebt is Divi wat prijziger dan de andere builders in dit artikel, maar ook dan zeker de moeite waard!

    Elementor : Bobs keuze voor een gratis page builder

    Elementor is actief op meer dan 5 miljoen websites en is daarmee veruit de populairste page builder voor WordPress. Dat is ongetwijfeld te danken aan het feit dat Elementor de eerste gratis page builder was waarvan de gratis versie zich kan meten met de betaalde versie van andere pagebuilders.

    De gratis versie van Elementor biedt zelfs zoveel features dat ik me in het begin af vroeg wat de betaalde pro versie nog zou kunnen toevoegen, maar ook daar wist het Elementor team nog flink wat waarde toegevoegd te hebben.

    Zo kun je met de gratis versie van Elementor alleen de inhoud van de pagina zelf aanpassen, maar niet de header, footer, blog template, WooCommerce templates enzovoorts. Met de theme builder van Elementor Pro kun je al deze onderdelen wel aanpassen.

    Ook kun je in de gratis versie van Elementor alleen complete secties als globaal element opslaan in de bibliotheek. Als je een element als globaal opslaat worden wijzigingen overal op de website automatisch doorgevoerd. Dus als je bijvoorbeeld de achtergrondkleur van een knop aanpast wordt de achtergrondkleur van alle andere globale knoppen op de site ook automatisch aangepast.

    In de gratis versie van Elementor kun je echter geen losse knop opslaan in de bibliotheek, dat kan alleen in de pro versie.

    Verder bevat de pro versie onder andere een popup builder, een formulier widget, diverse social media widgets (social share buttons, een facebook comment box, een facebook embed widget en een click to tweet box), een prijstabel widget, een prijslijst widget, een flipbox widget, een animated headline widget, scroll effects enzovoorts. Daarnaast krijg je met de pro versie van Elementor toegang tot flink wat extra voorbeeld sites en secties (al zitten er ook al een aantal in de gratis versie).

    Elementor kan gebruikt worden met vrijwel ieder thema, en vanwege de populariteit wordt het ook vrijwel altijd ondersteund. Er zijn ook veel plugins van derden beschikbaar.

    Voor mensen die maar 1 website hebben is Elementor ook behoorlijk gunstig geprijsd: voor slechts $ 49 per jaar heb je toegang tot de volledige versie van Elementor Pro.
    Voor webbouwers en andere mensen die meerdere websites beheren loopt de prijs echter snel op, tot wel $ 999 per jaar als je meer dan 100 websites beheert.

    Als je gaat kijken naar de prijs per website valt dat natuurlijk best mee, maar toch… Divi doet echt niet onder voor Elementor en daar heb je een levenslange licentie voor een onbeperkt aantal websites voor slechts $ 249,00.

    Brizy

    Brizy is gelanceerd in 2018 en dus nog een vrij jonge page builder. Desondanks hebben ze inmiddels al zo’n 90.000 actieve installaties. Dat komt omdat de gratis versie van Brizy nóg uitgebreider is dan die van Elementor.

    Zo bevat de gratis versie van Brizy o.a. een contactformulier widget, diverse WooCommerce widgets, diverse social media widgets enzovoorts.

    Uiteraard heeft Brizy ook een pro versie, waarin features als een theme builder (voor het aanpassen van header, footer en andere templates), een WooCommerce builder en een popup builder te vinden zijn. 

    Brizy onderscheidt zich echter vooral door de manier waarop je de styling opties instelt. In plaats van het openen van deze opties in een sidebar zoals bij de meeste andere builders verschijnt er bij Brizy een subtiele toolbar boven het element wat je op dat moment wilt bewerken, met alleen de opties die je op dat moment nodig hebt.

    Dat zorgt er wel voor dat het allemaal vrij compact is, en er wordt dan ook veel gewerkt met icoontjes om ruimte te besparen. Dat is even wennen natuurlijk. Geavanceerdere opties openen overigens wel in een sidebar.

    Een andere leuke feature van Brizy is “block conditions”, waarmee je kunt instellen dat je een element wilt tonen of verbergen voor bepaalde gebruikersrollen (dat noemen ze “membership”) of op bepaalde pagina’s. Dat is echter een stuk minder uitgebreid dan de conditionele weergave van Divi, waarbij je er ook voor kunt kiezen een element alleen te tonen op bepaalde dagen, of als er bepaalde producten in de winkelwagen zitten, of als er een bepaalde pagina bezocht is enzovoorts.

    Ook voor andere features geldt vaak dat Brizy de betreffende feature wel heeft, maar dat de (instel) mogelijkheden vrij beperkt zijn. Aan de andere kant zijn er ook dingen die Brizy juist heel goed doet; zo kun je bijvoorbeeld elke gewenste module toevoegen aan een popup, het mega menu of de tabs module. Ook de kwaliteit van de designs van de voorbeeld sites is bovengemiddeld goed.

    De pro versie van Brizy kost ongeveer hetzelfde als die van Elementor, wat op zich prima is. Elementor biedt wel wat meer waarde in de pro versie, maar Brizy is natuurlijk nog een jonge builder. Dat zorgt er ook voor dat er nog vrijwel geen plugins van derden voor Brizy te vinden zijn.

    De prijzen voor webbouwers en andere mensen die meerdere websites beheren zijn een stuk gunstiger dan die van Elementor, maar wel wat hoger dan die van Divi. Divi biedt daarbij ook nog eens een stuk meer features, dus mijn keuze tussen die twee gaat voorlopig echt uit naar Divi.

    Desalniettemin is Brizy ook een erg leuke builder die je zeker moet proberen om te zien of het wat voor je is. En ook interessant: Brizy heeft ook een cloud versie, vergelijkbaar met Wix of Jimbo. Daarbij hoef je jezelf dus geen zorgen te maken over dingen als hosting en updates, want dat is bij Brizy Cloud allemaal inbegrepen.

    Thrive Theme Builder

    Thrive is een beetje een vreemde eend in de bijt. Thrive Themes, het bedrijf dat de Thrive Theme Builder maakt, heeft namelijk nog een aantal andere plugins.

    Eén daarvan is bijvoorbeeld Thrive Optimize, waarmee je hele uitgebreide A/B tests kunt doen. Een tweede is Thrive Leads, waarmee je inschrijvingen voor je nieuwsbrief kan verzamelen op allerlei manieren. 

    Ook een quiz builder en een learning management systeem (LMS) genaamd Thrive Apprentice maken onderdeel uit van het aanbod.

    En met hun nieuwste plugin, Thrive Automator, kun je processen automatiseren zoals het toevoegen van een gebruiker die net iets heeft gekocht in je webshop aan je mailinglist, of het starten van een countdown timer met een aanbod voor een cursus als een gebruiker een bepaald resultaat heeft behaald in een quiz.

    Met de producten van Thrive is weinig mis, maar de prijzen zijn echter wel aan de hoge kant. Vroeger viel dat reuze mee; een levenslange licentie voor 1 van hun producten kostte toen $ 59, en voor het dubbele had je 15 licenties. Maar sinds februari 2021 biedt Thrive alleen nog een lidmaatschap (Thrive Suite genaamd) aan waarmee je al hun producten op maximaal 25 sites mag gebruiken voor $ 228,00 per jaar ($ 19 per maand).

    Persoonlijk vind ik dat dus vrij prijzig, maar je krijgt er wel prima producten voor terug en ik ken geen andere aanbieder die zo’n uitgebreid productaanbod heeft in deze prijsklasse.

    Gutenberg

    Gutenberg is de standaard blok editor van WordPress zelf. En hoewel Gutenberg steeds beter wordt is het toch echt nog niet te vergelijken met de page builders hierboven, zoals ook wel blijkt uit het enorme aantal rode kruisjes.

    Er komen wel steeds meer blokken (= modules / widgets) bij, en vanaf 2022 wordt Gutenberg zelfs een heuse theme builder waarmee je ook je header, footer en templates kunt bouwen, maar met name het vrijwel totale gebrek aan styling mogelijkheden – je kunt nog net de kleuren aanpassen maar daar houdt het wel zo’n beetje mee op – maakt Gutenberg naar mijn mening leuk voor het schrijven van blog posts, maar zeker niet geschikt om echt een website mee te bouwen.

    Echter, juist omdat het de standaard page builder van WordPress is zijn er wel steeds meer plugins zoals Qubely, Kadence Blocks en Stackable die extra functionaliteit toevoegen aan Gutenberg. Bekijk hier mijn Gutenberg Blocks plugin vergelijking.

    Hoewel dit soort plugins enorm veel mogelijkheden toevoegen aan Gutenberg blijft het voorlopig toch een backend builder die geen goed beeld geeft van hoe de website er voor bezoekers uit ziet.

    Maar goed, het is wel de toekomst van WordPress… en met een goed thema kom je al een heel eind 😉

    Ben je benieuwd naar een eigenschap die nog niet in de tabel hierboven staan? Laat dan gerust een reactie achter hieronder, dan zoek ik het voor je uit!

    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 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 Gutenberg of de gratis versie van Elementor of Brizy? 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 🙂

     

  • WordPress handleiding door Bob de webbouwer

    WordPress handleiding door Bob de webbouwer

    WordPress is een zeer gebruiksvriendelijk CMS (Content Management Systeem) waarmee je heel gemakkelijk de teksten en afbeeldingen op je website kunt aanpassen. Maar zoals met alles moet je wel eerst even weten hoe het werkt. Daarom heeft Bob de webbouwer deze handleiding voor WordPress geschreven. (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…)

  • Usability tips – zo bouw je een gebruiksvriendelijke website

    Usability tips – zo bouw je een gebruiksvriendelijke website

    Mijn eerste SEO tip in het artikel van vorige maand was “maak websites voor bezoekers,  niet voor zoekmachines”. SEO is immers slechts een middel om bezoekers naar je website te krijgen. Goed nieuws echter: een gebruiksvriendelijke website is vaak ook een zoekmachinevriendelijke website! In dit artikel lees je hoe je een gebruiksvriendelijke website bouwt. (meer…)