Aan de slag met Elementor

Wil je zelf pagina’s bouwen of aanpassen in WordPress, zonder code te schrijven? Dan raden we aan om gebruik te maken van Elementor.

Elementor is een page builder voor WordPress waarmee je pagina’s visueel kunt opbouwen. Je ziet direct wat je aanpast en kunt teksten, afbeeldingen, knoppen, kolommen en secties eenvoudig wijzigen met een drag-and-drop editor.

Wij raden Elementor aan omdat het gebruiksvriendelijk, flexibel en breed ondersteund is. In tegenstelling tot builders zoals Divi of Visual Composer blijft Elementor voor de meeste gebruikers overzichtelijker en prettiger te beheren.

Wat kun je met Elementor?

Met Elementor kun je bijna alle visuele onderdelen van je website aanpassen. Denk aan pagina’s, landingspagina’s, call-to-actions, afbeeldingen, formulieren, knoppen en complete layouts.

Je hoeft hiervoor geen HTML, CSS of programmeerkennis te hebben. Je opent een pagina, klikt op het onderdeel dat je wilt aanpassen en voert je wijziging direct door.

Veelgebruikte toepassingen zijn:

1. Teksten aanpassen op pagina’s
2. Afbeeldingen vervangen
3. Knoppen toevoegen of wijzigen
4. Kolommen en secties indelen
5. Nieuwe landingspagina’s maken
6. Mobiele weergave aanpassen
7. Formulieren toevoegen
8. Templates hergebruiken
9. Headers en footers beheren met Elementor Pro

Elementor bestaat uit een gratis versie en een betaalde Pro-versie. De gratis versie is geschikt voor eenvoudige pagina’s. Elementor Pro biedt extra mogelijkheden zoals Theme Builder, formulieren, popups, WooCommerce widgets en meer professionele templates. Volgens Elementor zelf kun je met Pro onder andere headers, footers, templates en andere theme parts aanpassen via Theme Builder.

Elementor installeren

Volg onderstaande stappen om Elementor te installeren.

Stap 1: Log in op WordPress

Stap 2: Ga naar plugins

Ga links in het menu naar: Plugins → Nieuwe plugin

Stap 3: Zoek Elementor

Typ in de zoekbalk: Elementor

Klik daarna op Nu installeren.

Stap 4: Activeer Elementor

Zodra de plugin is geïnstalleerd, klik je op Activeren.

Elementor is nu actief op je website. Elementor noemt de gratis plugin “Elementor Core”; deze kun je rechtstreeks via WordPress installeren en activeren.

Elementor Pro installeren

Heb je Elementor Pro aangeschaft? Dan installeer je deze naast de gratis Elementor plugin.

Stap 1: Download Elementor Pro

Log in op je Elementor account en download het Elementor Pro .ZIP bestand.

Stap 2: Upload de plugin

Ga in WordPress naar: Plugins → Nieuwe plugin → Plugin uploaden

Upload het .ZIP bestand.

Stap 3: Activeer Elementor Pro

Klik op Nu installeren en daarna op Activeren.

Stap 4: Koppel je licentie

Ga naar: Elementor → License

Log in met je Elementor account en activeer je licentie.

Elementor Pro werkt als uitbreiding op de gratis Elementor plugin. De gratis plugin moet dus actief blijven.

Secties, containers en kolommen

Elementor werkt met onderdelen waarmee je pagina’s structureert. Afhankelijk van je versie en instellingen werk je met secties/kolommen of containers.

Een pagina bestaat meestal uit meerdere blokken. Elk blok bevat bijvoorbeeld een titel, tekst, afbeelding of knop.

Gebruik deze structuur logisch:

1. Bovenaan een duidelijke titel
2. Daaronder korte introductietekst
3. Daarna inhoudsblokken
4. Onderaan een duidelijke actie, zoals contact opnemen

Probeer niet te veel verschillende layouts door elkaar te gebruiken. Rust en consistentie zorgen voor een professionelere website.

Een pagina bewerken met Elementor

Wil je een bestaande pagina aanpassen?

Stap 1: Ga naar pagina’s

Ga in WordPress naar:

Pagina’s → Alle pagina’s

Stap 2: Open de pagina

Beweeg met je muis over de pagina die je wilt aanpassen.

Klik op: Bewerken met Elementor

Stap 3: Pas de inhoud aan

De Elementor editor opent. Links zie je het bewerkpaneel, rechts zie je je pagina.

Klik op een tekst, afbeelding, knop of sectie om deze aan te passen.

Stap 4: Sla je wijzigingen op

Klik linksonder op Bijwerken.

Je wijzigingen staan nu live.

Teksten aanpassen in Elementor

Tekst aanpassen is één van de meest voorkomende acties in Elementor.

Klik op de tekst die je wilt wijzigen. Links opent het tekstvenster. Hier kun je de inhoud aanpassen.

Je kunt meestal ook direct in de pagina klikken en typen. Dit werkt vooral prettig bij koppen en korte teksten.

Let bij tekstwijzigingen goed op:

1. Behoud dezelfde schrijfstijl
2. Maak teksten niet onnodig lang
3. Gebruik duidelijke koppen
4. Controleer mobiele weergave na grote wijzigingen
5. Klik altijd op Bijwerken

Afbeeldingen aanpassen in Elementor

Wil je een afbeelding vervangen?

Klik op de afbeelding. Links verschijnt het instellingenpaneel. Klik op de huidige afbeelding en kies een nieuwe afbeelding uit de mediabibliotheek of upload een nieuw bestand.

Gebruik bij voorkeur afbeeldingen die:

1. Niet te groot zijn
2. Een duidelijke bestandsnaam hebben
3. Geen speciale tekens bevatten
4. Geoptimaliseerd zijn voor snelheid
5. Passend formaat hebben voor de plek waar ze staan

Een veelgemaakte fout is het uploaden van veel te grote afbeeldingen. Dit kan je website traag maken. Verklein afbeeldingen daarom vooraf of gebruik een optimalisatietool.

Knoppen aanpassen

Knoppen worden vaak gebruikt voor acties zoals contact opnemen, offerte aanvragen of een product bekijken.

Klik op de knop die je wilt aanpassen. Links kun je meestal wijzigen:

1. Knoptekst
2. Link
3. Uitlijning
4. Kleur
5. Grootte
6. Icoon

Controleer altijd of de link goed werkt. Klik na het opslaan op de knop aan de voorkant van je website om dit te testen.

Mobiele weergave aanpassen

Een website moet goed werken op desktop, tablet en mobiel. Elementor heeft hiervoor responsive instellingen.

Onderaan of bovenin de editor kun je wisselen tussen:

1. Desktop
2. Tablet
3. Mobiel

Controleer altijd je pagina op mobiel nadat je grote wijzigingen hebt gedaan.

Let vooral op:

1. Tekstgrootte
2. Afstand tussen onderdelen
3. Knoppen
4. Afbeeldingen
5. Kolommen die onder elkaar vallen

Soms ziet een pagina er op desktop goed uit, maar op mobiel te druk of rommelig. Pas dan de mobiele instellingen apart aan.

Templates gebruiken

Met Elementor kun je templates gebruiken. Dit zijn vooraf gemaakte layouts of opgeslagen onderdelen die je opnieuw kunt gebruiken.

Dit is handig voor:

1. Landingspagina’s
2. Contactblokken
3. Call-to-actions
4. Hero secties
5. Veelgestelde vragen
6. Productblokken

Elementor biedt een Template Library met kant-en-klare pagina’s en blokken die je kunt gebruiken als startpunt.

Wat kun je met Elementor Pro?

Elementor Pro is vooral interessant als je meer controle wilt over je hele website.

Met Elementor Pro kun je onder andere:

1. Headers ontwerpen
2. Footers ontwerpen
3. Blog templates maken
4. Archiefpagina’s ontwerpen
5. Formulieren maken
6. Popups maken
7. WooCommerce pagina’s aanpassen
8. Dynamische content gebruiken
9. Meer widgets gebruiken

Voor veel zakelijke websites is Elementor Pro handig omdat je minder losse plugins nodig hebt. Denk bijvoorbeeld aan formulieren, popups en templates. Elementor Pro bevat volgens Elementor ook Form Builder, Theme Builder en Pro widgets.

Formulieren maken met Elementor Pro

Met Elementor Pro kun je formulieren maken zonder extra formulierplugin.

Je kunt bijvoorbeeld formulieren maken voor:

1. Contactaanvragen
2. Offertes
3. Nieuwsbriefinschrijvingen
4. Supportvragen
5. Sollicitaties

Let bij formulieren altijd op:

1. Gebruik zo min mogelijk velden
2. Vraag alleen wat nodig is
3. Test of de e-mail aankomt
4. Voeg spambeveiliging toe

Popups maken met Elementor Pro

Met Elementor Pro kun je popups maken. Dit zijn vensters die verschijnen op basis van bepaalde voorwaarden of acties.

Je kunt popups gebruiken voor:

1. Nieuwsbriefinschrijvingen
2. Acties of aanbiedingen
3. Belangrijke meldingen
4. Downloads
5. Leadgeneratie

Gebruik popups voorzichtig. Te veel popups maken een website druk en kunnen conversie juist verlagen. Elementor beschrijft popups als call-to-action vensters die verschijnen op basis van triggers en voorwaarden.

WooCommerce met Elementor

Gebruik je WooCommerce? Dan kun je met Elementor Pro ook onderdelen van je webshop aanpassen.

Denk aan:

1. Productpagina’s
2. Categoriepagina’s
3. Checkout pagina’s
4. Winkelwagen
5. Product grids

Elementor biedt hiervoor WooCommerce widgets en templates. Voor WooCommerce functies moet WooCommerce zelf uiteraard ook geïnstalleerd zijn.

Beste werkwijze bij het bouwen van een pagina

Begin niet direct met slepen en bouwen. Denk eerst na over het doel van de pagina.

Een goede pagina heeft meestal:

1. Een duidelijke titel
2. Een korte introductie
3. Heldere uitleg
4. Visuele ondersteuning
5. Een duidelijke call-to-action

Bepaal vooraf wat de bezoeker moet doen. Bijvoorbeeld contact opnemen, een offerte aanvragen, bellen of een product kopen.

Werk daarna pas de layout uit.

Best practices voor Elementor

Gebruik Elementor bewust. Het is verleidelijk om veel animaties, secties en effecten toe te voegen, maar dat maakt een website vaak trager en minder duidelijk.

Houd rekening met deze richtlijnen:

1. Gebruik niet te veel verschillende lettertypes
2. Gebruik consistente kleuren
3. Gebruik voldoende witruimte
4. Maak knoppen duidelijk zichtbaar
5. Optimaliseer afbeeldingen
6. Gebruik globale stijlen waar mogelijk
7. Controleer mobiel altijd apart
8. Installeer niet te veel extra Elementor add-ons
9. Maak eerst een backup bij grote wijzigingen

Elementor en snelheid

Elementor is krachtig, maar verkeerd gebruik kan je website trager maken.

Let daarom op:

1. Gebruik geoptimaliseerde afbeeldingen
2. Vermijd onnodige animaties
3. Gebruik niet te veel externe add-ons
4. Laad geen video’s direct in als dat niet nodig is
5. Gebruik caching
6. Verwijder ongebruikte widgets of plugins

Een snelle website is belangrijk voor bezoekers én zoekmachines.

Elementor instellingen

Na installatie vind je Elementor instellingen onder:

Elementor → Instellingen

Hier kun je onder andere bepalen:

1. Voor welke post types Elementor actief is
2. Welke kleuren en lettertypes standaard worden gebruikt
3. Of bepaalde functies actief zijn
4. Welke integraties beschikbaar zijn

Pas instellingen alleen aan als je weet wat ze doen. Sommige instellingen kunnen invloed hebben op bestaande pagina’s.

Elementor systeemvereisten

Elementor heeft bepaalde technische vereisten nodig om goed te werken. Elementor geeft aan dat WordPress 6.5 of hoger nodig is en PHP 7.4 of hoger, waarbij PHP 8.x wordt aanbevolen voor betere werking.

Bij problemen met Elementor is het handig om te controleren:

1. WordPress versie
2. PHP versie
3. PHP memory limit
4. Actieve plugins
5. Actief thema
6. Serverinstellingen

Elementor geeft aan dat Elementor minimaal 128 MB memory limit nodig heeft om goed te functioneren.

Veelgemaakte fouten

Veel beginners maken dezelfde fouten met Elementor.

Een veelgemaakte fout is dat pagina’s te druk worden. Omdat Elementor veel mogelijkheden biedt, worden er snel te veel kleuren, animaties en blokken gebruikt. Houd het rustig.

Een andere fout is dat wijzigingen alleen op desktop worden gecontroleerd. Controleer altijd mobiel.

Ook worden afbeeldingen vaak te groot geüpload. Dit maakt je website traag.

Verder installeren sommige gebruikers veel extra Elementor add-ons. Dit kan handig lijken, maar zorgt vaak voor meer onderhoud, conflicten en vertraging.

Elementor vs Divi en Visual Composer

Wij raden Elementor aan omdat het voor de meeste gebruikers eenvoudiger werkt, overzichtelijker is en goed aansluit op WordPress.

Met Divi en Visual Composer kun je ook websites bouwen, maar in de praktijk zien we vaker dat websites zwaarder, minder flexibel of lastiger overdraagbaar worden.

Elementor is voor veel klanten makkelijker te begrijpen. Vooral voor dagelijkse aanpassingen zoals tekst wijzigen, afbeeldingen vervangen of knoppen aanpassen is Elementor prettig.

Belangrijk om te weten

Elementor is een krachtige tool, maar geen vervanging voor goed websitebeheer. Plugins, thema’s, WordPress zelf en Elementor moeten goed worden bijgehouden.

Maak bij grote wijzigingen altijd eerst een backup. Werk rustig, test je wijzigingen en controleer na afloop desktop én mobiel.