Om te beginnen, log je in op het WordPress dashboard van je WordPress website. Van daaruit ga je naar de WooCommerce instellingen. Je vindt deze door in het menu aan de linkerkant naar “WooCommerce” te gaan en vervolgens op “Settings” te klikken.

WooCommerce betaalmethodes

In de instellingen van WooCommerce zie je verschillende tabbladen. Klik op het tabblad “Betalingen”. Dit tabblad is waar je de betaalmethodes kunt beheren. Hier zie je een lijst met beschikbare betaalmethodes, zoals PayPal, creditcard, bankoverschrijving, en meer. Dit is afhankelijk van de betaalprovider die je kiest, bijvoorbeeld Mollie of Pay.nl.

Betalingen WooCommerce

Nu kun je de betaalmethodes naar wens instellen. Voor elke betaalmethode zie je een knop “Manage” of “Setup”. Klik op deze knop om de instellingen voor de betreffende betaalmethode aan te passen. Bijvoorbeeld, als je PayPal wilt instellen, klik je op “Setup” naast PayPal en voer je de benodigde accountgegevens in.

Activeren en deactiveren van betaalmethodes

Naast elke betaalmethode zie je een schakelknop waarmee je de methode kunt activeren of deactiveren. Schakel de betaalmethodes in die je wilt aanbieden aan je klanten, en schakel de methodes uit die je niet wilt gebruiken.

Nadat je de betaalmethodes hebt ingesteld, klik je op “Bewaren” onderaan de pagina om je wijzigingen op te slaan. Hierdoor worden de geselecteerde betaalmethodes beschikbaar voor je klanten tijdens het afrekenen in je WooCommerce webshop.

Google Lighthouse is een open-source tool van Google die wordt gebruikt voor het verbeteren van de kwaliteit van webpagina’s. Het biedt standaard audits voor prestaties, toegankelijkheid, progressieve web-apps (PWA), SEO, en meer.

Website ontwikkelaars kunnen Lighthouse gebruiken om hun WordPress websites te testen en om gebieden te identificeren waar verbeteringen nodig zijn.

Lighthouse

Hoe werkt Google Lighthouse?

Lighthouse voert een reeks tests uit op een webpagina en geeft scores voor verschillende categorieën. Deze categorieën gaat over zaken als laadsnelheid, gebruiksvriendelijkheid, optimalisatie voor zoekmachines, en meer.

De tool genereert een rapport met gedetailleerde inzichten en aanbevelingen, zodat website ontwikkelaars kunnen zien waar hun pagina’s goed presteren en waar ze moeten worden verbeterd.

Google Lighthouse is belangrijk omdat het helpt om de algehele kwaliteit van WordPress websites te verbeteren. Door te focussen op factoren zoals prestaties en toegankelijkheid, helpt Lighthouse ontwikkelaars om webpagina’s te creëren die snel, gebruiksvriendelijk, en zoekmachinevriendelijk zijn. Dit draagt bij aan een betere gebruikerservaring en kan de zichtbaarheid van een website in zoekresultaten verbeteren.

Hoe gebruik je Google Lighthouse?

Google Lighthouse kan worden gebruikt via verschillende methoden, waaronder de Chrome DevTools, de commandoregel, of als een node-module.

Het is eenvoudig te gebruiken via de Chrome-browser door naar “Inspect” te gaan, vervolgens het “Lighthouse” tabblad te selecteren, en een audit uit te voeren. Dit maakt het een toegankelijke en krachtige tool voor zowel ontwikkelaars als marketeers.

Het beste kun je een Google Lighthouse test uitvoeren in een incognito modus van Google Chrome. Dan heb je namelijk geen last van Google Chrome extensies en dergelijke die het beeld vertroebelen.

Los van het bovenstaande is een score indicatief. Uiteraard is het goed om de score zo hoog mogelijk te laten worden maar het is slechts een indicatie omdat het slechts vanaf één locatie getest wordt onder relatief perfecte omstandigheden.

Video widget toevoegen Elementor

Om een video toe te voegen in Elementor, begin je met het kiezen van de juiste video widget. Elementor biedt verschillende manieren om video’s toe te voegen, maar de meest gebruikte is de “Video” widget. Deze widget ondersteunt video’s van YouTube, Vimeo, of van je eigen mediabibliotheek.

Video toevoegen ElementorVideo widget plaatsen

Na het selecteren van de “Video” widget, sleep je deze naar de gewenste plek op je pagina. Dit kan in een bestaande sectie of een nieuwe sectie, afhankelijk van hoe je de lay-out wilt organiseren.

Video selecteren

In de widget-instellingen kun je nu de bron van de video selecteren. Als je een YouTube-video wilt gebruiken, hoef je alleen maar de URL van de video in te voeren. Voor Vimeo-video’s voer je ook de URL in, terwijl voor zelf gehoste video’s je het bestand uit de mediabibliotheek selecteert of uploadt.

Video instellingen aanpassen

Eenmaal toegevoegd, kun je de instellingen van de video aanpassen om deze naar wens te maken. In het “Content” tabblad van de widget-instellingen kun je onder andere de afspeelmodus, de begin- en eindtijd, en de volumeregeling aanpassen. Deze opties stellen je in staat om de video precies zo weer te geven als je wilt.

Video stylen in Elementor

Het “Style” tabblad biedt opties voor de visuele aanpassing van de video. Hier kun je de breedte van de video aanpassen, een overlay toevoegen, of de rand en schaduw van de video bewerken. Dit is handig om de video te integreren in de algehele stijl van je website.

Pagina publiceren

Als je tevreden bent met de video en de rest van de pagina, kun je de wijzigingen opslaan en publiceren. Klik op “Publiceren” of “Update” om je wijzigingen te bewaren. Zo wordt de video zichtbaar op je website voor bezoekers.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.

Popup Builder voor Elementor

Om een popup te maken met Elementor, begin je met het openen van de Popup Builder. Je vindt dit onder “Templates” in het WordPress dashboard, waarna je klikt op “Popups”. Dit brengt je naar de interface waar je je popups kunt beheren en nieuwe kunt aanmaken.

Elementor popup

Nieuwe popup in Elementor aanmaken

In de Popup Builder klik je op “Add New” om een nieuwe popup te maken. Geef je popup een naam en klik op “Create Template”. Je wordt vervolgens naar de Elementor Editor gebracht, waar je kunt kiezen uit verschillende vooraf gemaakte popup-ontwerpen of je eigen ontwerp kunt maken vanaf nul.

Eenmaal in de Elementor Editor kun je je popup ontwerpen zoals je wilt. Voeg secties, kolommen, en widgets toe om de inhoud en lay-out van je popup te bepalen. Je kunt bijvoorbeeld een formulier, een aanbieding, of een melding in de popup plaatsen. Gebruik de “Style” en “Advanced” tabbladen om de vormgeving en het gedrag van je popup aan te passen.

Popup instellingen

Klik op het tandwiel-icoon linksonder in de editor om de popup-instellingen te openen. Hier kun je instellingen zoals de grootte, positie, en animatie van de popup aanpassen. Je kunt ook trigger-instellingen configureren, zoals het openen van de popup na een bepaalde tijd of wanneer een gebruiker naar een bepaald deel van de pagina scrollt.

Elementor popup publiceren

Als je tevreden bent met je popup, klik je op “Publish”. Je wordt nu gevraagd om de “Display Conditions” in te stellen, waarmee je bepaalt waar de popup wordt getoond, zoals op specifieke pagina’s of op de gehele site. Vervolgens kun je de “Triggers” instellen om te bepalen wanneer de popup verschijnt, zoals bij het laden van de pagina of wanneer de gebruiker op een specifieke knop klikt.

Na het publiceren kun je je popup altijd beheren via de Popup Builder. Hier kun je je popups bekijken, bewerken, of verwijderen. Zo kun je je popups flexibel aanpassen aan de behoeften van je WordPress website.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.

Een countdown timer in een WordPress website kan handig zijn om bezoekers te informeren over aankomende gebeurtenissen, productlanceringen, of tijdelijke aanbiedingen.

Met de Elementor pagebuilder kun je eenvoudig een countdown timer toevoegen aan je website. Dit doe je zo.

Countdown timer ElementorVoeg de countdown timer toe

  1. Open je pagina: Open de pagina of het bericht waar je de countdown timer wilt toevoegen in Elementor.
  2. Sleep de countdown widget: Zoek in de Elementor widgetbibliotheek naar de “Countdown” widget en sleep deze naar de gewenste plek op de pagina.

Stel de countdown timer in

  1. Stel de einddatum in: Onder het “Content” tabblad, kun je de eindtijd instellen voor je countdown timer. Kies een datum en tijd waarop de timer moet aflopen.
  2. Kies de acties na afloop: Onder “Actions After Expire” kun je instellen wat er gebeurt als de countdown afloopt. Je kunt kiezen voor acties zoals “Hide”, “Redirect”, of “Show Message”.
  3. Stel de tijdseenheden in: Je kunt kiezen welke eenheden je wilt tonen (dagen, uren, minuten, seconden).

Pas de stijl aan

  1. Aanpassen: Onder het “Style” tabblad kun je de stijl van de timer aanpassen. Hier kun je de kleuren, typografie, en andere visuele aspecten van de timer instellen.

Publiceer de countdown timer

  1. Publiceer: Als je tevreden bent met de instellingen, klik je op “Publish” of “Update” om de countdown timer op je website te zetten.

Countdown timer gebruiken voor:

  1. Productlanceringen: Informeer bezoekers over de lancering van een nieuw product.
  2. Evenementen: Laat bezoekers weten hoeveel tijd er nog is tot een evenement, zoals een webinar of een feest.
  3. Verkoop en aanbiedingen: Gebruik de timer om aan te geven wanneer een tijdelijke aanbieding eindigt, wat urgentie kan creëren voor je bezoekers.
  4. Website lancering: Als je een nieuwe website lanceert, kun je de timer gebruiken om de tijd tot de lancering te tonen op een “Coming Soon” pagina.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.

Om een Google Map toe te voegen in Elementor op een pagina of bericht volg je de volgende stappen.

Google Maps ElementorVoeg de “Google Maps” widget toe

  1. Open de pagina of het bericht waarin je de kaart wilt toevoegen.
  2. Klik op “Bewerk met Elementor” om de Elementor-editor te openen.
  3. Zoek de “Google Maps” widget in het linker paneel.
  4. Sleep de “Google Maps” widget naar de gewenste positie op de pagina.

Stel de locatie in

  1. Voer het adres in:
    • In de “Content” tab van de widget, kun je het gewenste adres invoeren.
    • Dit zal de kaart updaten naar de opgegeven locatie.

Pas de instellingen aan

    1. Zoomen:
      • Je kunt het zoomniveau van de kaart aanpassen door de “Zoom” optie te gebruiken.
      • Een hogere waarde betekent een meer ingezoomde kaart.
    2. Kaarttype:
      • Je kunt het kaarttype aanpassen, bijvoorbeeld “Roadmap”, “Satellite”, “Hybrid”, of “Terrain”.

Stijl de kaart

  1. Ga naar het “Stijl” tabblad van de widget.
  2. Pas de breedte en hoogte van de kaart aan om deze goed te laten passen op je pagina.
  3. Pas eventuele extra stijlen aan die je wilt, zoals de randen of box-shadow.

Publiceer of update de pagina

  1. Klik op “Publiceren” of “Update” om je wijzigingen op te slaan en te publiceren.

Je hebt succesvol een Google Maps kaartje toegevoegd aan je WordPress website in Elementor.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.

Een FAQ widget is een handige toevoeging om de veelgestelde vragen te tonen, zoals op de naailes pagina op anydress.nl. Om een FAQ widget toe te voegen in Elementor, kun je gebruikmaken van de “Toggle” of “Accordion” widgets, die perfect geschikt zijn voor een FAQ-sectie. Hier is hoe je dat doet:

Open je pagina of bericht in Elementor

Accordeon Elementor
Screenshot

Accordion widget

    • Klik op het “Widgets”-icoontje linksboven om het Elementor widget menu te openen.
    • Zoek naar “Accordion” of “Toggle” in de zoekbalk.
    • Sleep de “Accordion” of “Toggle” widget naar de gewenste plek op je pagina.

FAQ items toevoegen

    • Standaard zijn er twee items in het “Accordion” widget.
    • Klik op het eerste item en voer de vraag in het “Title” veld in en het antwoord in het “Content” veld.
    • Klik op “Add Item” om meer vragen en antwoorden toe te voegen.

Styling

    • Ga naar het “Style” tabblad om de kleur, typografie, en andere visuele elementen aan te passen.
    • Je kunt de stijl van de titel en het antwoord afzonderlijk aanpassen.

Publiceer de wijzigingen:

    • Wanneer je tevreden bent met het FAQ gedeelte, klik je op “Publish” of “Update” om de wijzigingen op te slaan en te publiceren.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.

Om de footer in Elementor aan te passen, kun je de volgende stappen volgen in je WordPress website.

Maak of bewerk een footer template

  1. Open de Elementor Theme Builder:
    • Ga naar je WordPress dashboard.
    • Ga naar “Templates” > “Theme Builder”.
    • Klik op “Footer” om een bestaande footer te bewerken of klik op “Add New” om een nieuwe footer te maken.
  2. Kies of maak een footer template:
    • Als je een nieuwe footer maakt, wordt je gevraagd om een template te kiezen.
    • Je kunt een van de vooraf gemaakte templates kiezen of starten met een lege template.
  3. Bewerk de footer:
    • Gebruik de Elementor interface om de footer naar wens aan te passen.
    • Voeg widgets toe, zoals tekst, sociale media knoppen, of een navigatiemenu.
    • Pas de stijl en lay-out van de footer aan zoals je wilt.

Footer template Elementor

Publiceer de footer

  1. Publiceer de footer:
    • Klik op “Publish” wanneer je tevreden bent met het ontwerp.
    • Je wordt gevraagd om de “Display Conditions” te selecteren, waar je kunt kiezen waar de footer op je site wordt getoond.
    • Kies bijvoorbeeld “Entire Site” om de footer op alle pagina’s te tonen.

Bewerk de footer

  1. Bewerk een bestaande footer:
    • Om een bestaande footer te bewerken, ga je naar “Templates” > “Theme Builder” > “Footer”.
    • Klik op “Edit” naast de footer die je wilt bewerken.
  2. Gebruik Elementor om wijzigingen aan te brengen:
    • Gebruik de Elementor interface om wijzigingen aan te brengen.
    • Klik op “Update” om de wijzigingen op te slaan.

Met deze stappen kun je eenvoudig de footer aanpassen en beheren in Elementor.

Het kan gebeuren dat je aanpassingen aan je WordPress website wilt maken en dat je dit achter gesloten deuren wilt doen. Dan kun je ervoor kiezen om tijdelijk de coming soon modus te activeren, deze is al ingebakken in Elementor zelfs!

Het maken van een “Coming Soon” pagina in Elementor is heel simpel. Hier zijn de stappen die je kunt volgen, zelfs als je niet veel ervaring hebt met WordPress en Elementor:

Maak een nieuwe WordPress pagina

  1. Ga naar je WordPress dashboard.
  2. Klik op “Pagina’s” en selecteer “Nieuwe toevoegen”.
  3. Geef de pagina een naam zoals “Coming Soon” en klik op “Bewerk met Elementor”.

Ontwerp de “Coming Soon” pagina

  1. Voeg een sectie toe en kies een lay-out die je mooi vindt.
  2. Voeg widgets toe zoals een “Heading” widget voor de titel en een “Tekst” widget voor een korte boodschap.
  3. Voeg een “Button” widget toe als je bijvoorbeeld gebruikers wilt doorverwijzen naar een andere pagina of laten weten dat ze zich kunnen aanmelden voor updates.
  4. Personaliseer de pagina door kleuren, lettertypes, en achtergrondafbeeldingen aan te passen.

Publiceer de pagina

  1. Klik op “Publish” om de “Coming Soon” pagina op te slaan.

Activeer de “Coming Soon” modus in Elementor

Coming soon elementor

  1. Ga naar je WordPress dashboard en klik op “Elementor”.
  2. Ga naar “Tools” en kies het “Maintenance Mode” tabblad.
  3. Selecteer “Coming Soon” onder “Choose Mode”. Eventueel kun je ook de onderhoudsmodus hier activeren, het verschil is dat de pagina voor coming soon geïndexeerd zal worden door Google door de HTTP 200 status en de onderhoudsmodus niet door de 503 status.
  4. Kies je “Coming Soon” pagina uit het dropdownmenu.
  5. Klik op “Save Changes”.

Nu is je “Coming Soon” pagina actief. Bezoekers zien deze pagina terwijl je aan je website werkt, maar je kunt nog steeds aan je site werken als je bent ingelogd.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.