Elementor: de editor – Cursus WordPress

Hoofdstuk 2 van 13

In dit hoofdstuk leer je werken met Elementor, de paginabouwer waarmee je de pagina’s van je website opmaakt. Je ontdekt hoe de editor in elkaar zit, hoe je met containers een lay-out bouwt, hoe je widgets (titels, tekst, afbeeldingen, knoppen …) toevoegt en instelt, en hoe je je pagina er ook op een gsm goed laat uitzien.

Elementor werkt volgens het principe wat je ziet, is wat je krijgt: je ziet je pagina terwijl je ze bouwt. Dat maakt het laagdrempelig, maar het loont om de logica erachter goed te snappen. Wie containers en de drie tabbladen (Inhoud, Stijl, Geavanceerd) begrijpt, kan alles bouwen wat hij in zijn hoofd heeft.

We gebruiken de voorbeeldsite Bakkerij De Korenaar om alles te tonen. Werk zelf mee op je eigen site.

Pagina’s met Elementor, berichten met de klassieke editor. Op jouw site staat de Classic Editor aan. Blogberichten schrijf je in de eenvoudige, klassieke editor (zie het hoofdstuk over berichten). Pagina’s zoals Home, Over ons of Contact bouw je met Elementor. Zo krijg je het beste van twee werelden: snel schrijven voor je blog, en volledige vrijheid in de opmaak van je pagina’s.

1. Een pagina openen met Elementor

Je kan een bestaande pagina op twee manieren openen in Elementor: via het dashboard of rechtstreeks vanaf je website.

Via het dashboard

Klik in het zwarte menu links op Pagina’s. Je ziet de lijst met alle pagina’s van je site.
Beweeg met je muis over de titel van de pagina die je wil bewerken (hier: Home). Onder de titel verschijnen een paar links.
Klik op Bewerk met Elementor (1). De editor opent.

Lijst met pagina's in het dashboard, met de link Bewerk met Elementor onder de pagina Home gemarkeerd — Beweeg over een pagina en klik op “Bewerk met Elementor” (1).

Achter de titel van een pagina zie je extra info, bijvoorbeeld “— Startpagina, Elementor” of “— Concept, Elementor”. “Elementor” betekent dat de pagina met Elementor gebouwd is. “Concept” betekent dat de pagina nog niet gepubliceerd is: bezoekers zien ze dan nog niet.

Via de adminbalk op je website

Ben je ingelogd en bekijk je je website, dan zie je bovenaan de zwarte adminbalk.

Surf naar de pagina die je wil aanpassen.
Klik in de adminbalk op Bewerk met Elementor (1).

De voorkant van de website met de zwarte adminbalk, Bewerk met Elementor is gemarkeerd — Vanaf je website: klik in de adminbalk op “Bewerk met Elementor” (1).

Het rode label noindex is on! in de adminbalk is normaal. Je oefensite is bewust afgeschermd voor zoekmachines. Daar hoef je niets aan te doen.

2. De editor in één oogopslag

De Elementor-editor bestaat uit drie grote delen:

De Elementor-editor met de bovenbalk, het paneel links en het canvas rechts aangeduid — De drie delen van de editor: bovenbalk (1), paneel (2) en canvas (3).

De bovenbalk (zwart, bovenaan): knoppen om elementen toe te voegen, je geschiedenis te bekijken, te wisselen tussen computer-, tablet- en gsm-weergave, en om op te slaan of te publiceren.
Het paneel (links): hier kies je widgets om toe te voegen, en hier pas je de instellingen aan van wat je geselecteerd hebt.
Het canvas (rechts): je pagina zoals bezoekers ze zullen zien, inclusief de header en footer van de site. Klik je hier op iets, dan verschijnen de instellingen ervan in het paneel.

Promokaartje “Atomic Elements” – niet activeren. Bovenaan het widgetpaneel kan een paars kaartje Atomic Elements – Nieuw staan met de knop Activate now. Klik het weg met het kruisje rechtsboven en klik nooit op “Activate now”. In deze cursus werken we met containers en de klassieke widgets; de nieuwe “atomic”-elementen werken helemaal anders en zitten niet in de cursus. Duikt er na het wegklikken onderaan een melding op (“You can enable the Atomic editor anytime…”), dan mag je die ook gewoon sluiten.

Het widgetpaneel met bovenaan het promokaartje Atomic Elements; het kruisje om het te sluiten is gemarkeerd — Klik het promokaartje “Atomic Elements” weg met het kruisje. Niet op “Activate now” klikken.

Verschijnt er bij het openen een pop-up of rondleiding (bijvoorbeeld reclame voor de AI-assistent van Elementor), sluit die dan met het kruisje of met Niet nu. Je hebt die extra’s niet nodig.

3. De bovenbalk

In de bovenbalk zitten de knoppen die je het vaakst gebruikt. De nummers op de afbeelding komen overeen met de lijst eronder.

De bovenbalk van de Elementor-editor met dertien genummerde knoppen — De knoppen van de bovenbalk.

Elementor-logo (menu): opent het hoofdmenu met onder andere Website instellingen (de huisstijl, zie hoofdstuk 3) en Verlaten naar WordPress.
+ (Element toevoegen): toont het widgetpaneel, zodat je nieuwe elementen kan toevoegen.
Geschiedenis: alle stappen die je zette, en oudere versies van je pagina (revisies).
Pagina instellingen: titel, status, uitgelichte afbeelding en paginalay-out van deze pagina.
Paginatitel: de naam van de pagina die je bewerkt. Via het pijltje spring je snel naar een andere pagina.
Desktop: bekijk en bewerk de computerweergave.
Tablet: bekijk en bewerk de tabletweergave.
Mobiel: bekijk en bewerk de gsm-weergave.
Finder (vergrootglas): zoek snel naar een pagina, instelling of widget.
Structuur: opent een boomstructuur van alle elementen op je pagina (de Navigator).
Voorbeeld wijzigingen (oog): bekijk je pagina in een nieuw tabblad zoals een bezoeker ze zou zien, zonder te publiceren.
Publiceren: zet je wijzigingen online. Zolang er niets gewijzigd is, is de knop grijs.
Opties opslaan (pijltje): extra opslagopties, zoals opslaan als concept.

Naast de + staat een sterretjesicoon: dat is de AI-assistent van Elementor. Die gebruiken we in deze cursus niet.

Het menu linksboven

Klik je op het Elementor-logo linksboven, dan opent dit menu:

Het hoofdmenu van de editor.

Website instellingen (1): de huisstijl van je hele site: globale kleuren, lettertypes, knoppen, logo … Dit is zo belangrijk dat het een eigen hoofdstuk krijgt (hoofdstuk 3).
Thema bouwer (2): hier maak je de header, footer en andere sjablonen die op elke pagina terugkomen. Dat behandelen we in een later hoofdstuk.
Gebruiker voorkeuren: persoonlijke instellingen van de editor (bijvoorbeeld een donker of licht thema).
Toetsenbord sneltoetsen: een overzicht van handige sneltoetsen.
Verlaten naar WordPress: terug naar het dashboard. Let op: sla eerst op!

4. Het widgetpaneel

Een widget is een bouwsteen: een titel, een tekstblok, een afbeelding, een knop, een kaart … Je vindt alle widgets in het paneel links, onder Elementen. Klik op + in de bovenbalk als je ze niet ziet.

Het widgetpaneel met zoekveld, de tabbladen Widgets en Globals, en ingeklapte categorieën zoals Lay-out, Basis, Pro en Algemeen — Het widgetpaneel: zoekveld (1), tabbladen (2) en de categorieën (3).

Widget zoeken: typ een deel van de naam en je ziet meteen de passende widgets.
Widgets / Globals: onder Widgets vind je alle bouwstenen. Onder Globals staan widgets die je zelf als “globaal” bewaard hebt (één keer aanpassen = overal aangepast).
Categorieën: de widgets zijn gegroepeerd. Klik op de naam van een categorie om ze open of dicht te klappen.

De belangrijkste categorieën:

Lay-out: Container en Raster, de “dozen” waarin je alles plaatst.
Basis: de widgets die je het meest gebruikt: Koptekst, Afbeelding, Teksteditor, Video, Knop, Scheiding, Vulelement, Google Maps en Icoon.
Pro: extra krachtige widgets van Elementor Pro, zoals Form (formulier), Slides, Price List (prijslijst), Price Table, Call to Action, Carousel en Posts. Ze dragen soms nog een Engelse naam.
Algemeen: nog meer handige widgets, zoals Tabs, Accordeon, Afbeelding vak, Icoon vak, Icoon lijst, Teller, Getuigenis, Sociale iconen en Beoordeling.
Website: widgets voor de Thema bouwer, zoals Site Logo, Page Title en Menu. Die gebruik je vooral in je header en footer.
Link in bio: kant-en-klare “link in bio”-pagina’s. Die gebruiken we niet.

Een widget zoeken

Weet je hoe een widget heet? Zoeken gaat sneller dan scrollen.

Klik in het zoekveld Widget zoeken… (1).
Typ een deel van de naam, bijvoorbeeld knop.
Elementor toont alleen de widgets die passen (2).
Klik op het kruisje in het zoekveld om de volledige lijst terug te zien.

Het zoekveld met het woord knop en als resultaat de widget Knop — Zoek een widget op naam: typ “knop” (1) en je ziet meteen de widget Knop (2).

Zoek je in het Nederlands en vind je niets? Probeer dan de Engelse naam. Veel Pro-widgets heten nog Form, Price List of Testimonial Carousel.

De Pro-widgets

Dankzij de licentie van Elementor Pro heb je toegang tot de categorie Pro (1). Daarin staan onder andere formulieren, sliders, prijslijsten en carrousels.

De categorie Pro in het widgetpaneel met widgets zoals Loop Grid, Posts, Form, Slides, Price List en Call to Action — De categorie Pro (1) met de widgets van Elementor Pro.

5. Containers: de dozen van je pagina

Wat is een container?

Een pagina in Elementor is opgebouwd uit containers. Zie een container als een doos. In zo’n doos leg je widgets (een titel, een tekst, een knop) of … weer kleinere dozen. Die kleinere dozen noemen we binnencontainers.

Waarom werken met dozen? Omdat je zo heel precies kan bepalen hoe dingen naast of onder elkaar staan. Een doos kan zijn inhoud in een rij (naast elkaar) of in een kolom (onder elkaar) leggen. Wil je links een foto en rechts een tekst? Dan maak je één container met de richting rij, met daarin twee binnencontainers: één voor de foto, één voor de tekst.

Deze manier van werken heet flexbox. Het is dezelfde techniek die webontwikkelaars in CSS gebruiken. Wie ze begrijpt, kan in Elementor elke lay-out bouwen.

Een container selecteren

Op de homepagina van de bakkerij zie je het blok “Ambacht sinds 1987”: links een foto, rechts een titel, tekst en knop. Zo zit het in elkaar:

Beweeg met je muis over het blok. Bovenaan verschijnt een klein handvat met drie knoppen (1): + (nieuwe container toevoegen), ⠿ (klik om de container te selecteren, sleep om hem te verplaatsen) en × (container verwijderen).
Klik op de middelste knop (⠿) of op een lege plek in de container. De container is nu geselecteerd.
Binnenin zie je twee binnencontainers: links één met de foto (2), rechts één met de titel, tekst en knop (3).
In het paneel staat nu Container bewerken (4), met de instellingen van die container.

Een geselecteerde container op de homepagina met het handvat, de binnencontainer met de foto en de binnencontainer met tekst gemarkeerd — Een container met zijn handvat (1) en twee binnencontainers (2 en 3). Het paneel toont “Container bewerken” (4).

De lay-outinstellingen van een container

Op het tabblad Lay-out van een container vind je de belangrijkste instellingen:

Het tabblad Lay-out van een container met zeven genummerde instellingen — De belangrijkste instellingen van een container.

Container lay-out: Flexbox (de standaard, items in een rij of kolom) of Raster (een rooster met vaste kolommen en rijen). Gebruik in deze cursus gewoon Flexbox.
Inhoud breedte: Boxed of Volledige breedte.
- Boxed: de inhoud blijft binnen een maximale breedte (hier 1200 px) en staat netjes in het midden. Een achtergrondkleur of -foto loopt wel tot aan de rand van het scherm.
- Volledige breedte: de inhoud loopt tot aan de randen van het scherm.
Breedte: de maximale breedte van de inhoud bij Boxed.
Richting: in welke richting de items staan. De pijl naar rechts (→) is rij (naast elkaar), de pijl naar beneden (↓) is kolom (onder elkaar). De twee andere pijlen keren de volgorde om.
Inhoud uitlijnen: hoe de items verdeeld worden in de hoofdrichting: aan het begin, in het midden, aan het einde, of met gelijke ruimte ertussen.
Items uitlijnen: hoe de items uitgelijnd worden in de andere richting (bij een rij: bovenaan, in het midden of onderaan).
Ruimtes: de ruimte (gap) tussen de items, in pixels. Kolom = tussenruimte naast elkaar, Rij = tussenruimte onder elkaar.

Daaronder staat nog Terugloop: mogen items naar een volgende lijn springen als er te weinig plaats is (wrap), of moeten ze op één lijn blijven?

Twijfel je wat een knop doet? Beweeg er met je muis over: Elementor toont een korte uitleg. En probeer gerust: met Ctrl+Z (Windows) of ⌘+Z (Mac) zet je alles meteen terug.

Binnencontainers bekijken in de Structuur

Containers in containers worden snel onoverzichtelijk. De knop Structuur in de bovenbalk toont alles als een boom:

Klik in het canvas op de binnencontainer met de foto.
Klik in de bovenbalk op Structuur.
Je ziet dat de geselecteerde binnencontainer in een andere container zit. Klik op de pijltjes om de boom open of dicht te klappen.

Het Structuur-venster met een container die twee binnencontainers bevat; de geselecteerde binnencontainer is gemarkeerd — In het Structuur-venster zie je welke container in welke container zit.

Het tabblad Stijl: achtergrond

Op het tabblad Stijl van een container geef je de container een uitzicht, bijvoorbeeld een achtergrondkleur.

Selecteer de container “Onze specialiteiten”.
Klik op het tabblad Stijl.
Open de sectie Achtergrond (1).
Kies bij Achtergrond type (2) voor het penseel (klassiek: een kleur of afbeelding). Er zijn ook knoppen voor een kleurverloop, een video of een diavoorstelling.
Kies bij Kleur (3) een kleur. Het wereldbolletje ernaast opent de globale kleuren van je huisstijl (zie hoofdstuk 3).

Het tabblad Stijl van een container met de sectie Achtergrond, het achtergrondtype en de kleur gemarkeerd — Achtergrond (1), achtergrondtype (2) en kleur (3) van een container. Deze container heeft de crèmekleur van de huisstijl.

Onder Achtergrond vind je ook nog Overlay achtergrond (een kleurlaag over een achtergrondfoto, handig om tekst op een foto leesbaar te maken), Rand (randlijn en afgeronde hoeken) en Vormscheiding (een golf of schuine rand boven- of onderaan).

Het tabblad Geavanceerd: margin en padding

Op het tabblad Geavanceerd regel je de ruimte rond en in de container.

Het tabblad Geavanceerd van een container met de velden Margin en Padding gemarkeerd — Margin (1) en Padding (2) op het tabblad Geavanceerd. Deze container heeft 80 px padding boven en onder.

Margin (1): de ruimte buiten de container, tussen de container en zijn buren.
Padding (2): de ruimte binnen de container, tussen de rand en de inhoud.

Je vult vier waarden in: Bovenaan, Rechts, Onderaan, Links. Het kettinkje rechts koppelt de vier waarden: staat het aan, dan verandert alles tegelijk.

Margin of padding? Denk aan een schilderij. De padding is het passe-partout: de witte rand tussen de lijst en het schilderij zelf. De margin is de ruimte tussen dit schilderij en het volgende aan de muur. Heeft je container een achtergrondkleur, dan zie je het verschil meteen: padding wordt mee ingekleurd, margin niet.

Vuistregel: gebruik vooral padding om je blokken lucht te geven (bijvoorbeeld 80 px boven en onder, zoals hierboven). Margin heb je zelden nodig.

6. Zelf bouwen: een oefenpagina

Tijd om zelf te bouwen. We maken een nieuwe pagina, zodat je niets kapotmaakt aan je echte pagina’s.

Een nieuwe pagina maken

Ga in het dashboard naar Pagina’s → Pagina toevoegen.
Typ een titel (1), bijvoorbeeld Oefenpagina Elementor.
Klik op de blauwe knop Bewerk met Elementor (2). WordPress bewaart de pagina als concept en de editor opent met een lege pagina.

Het scherm Pagina toevoegen met het titelveld en de knop Bewerk met Elementor gemarkeerd — Geef je pagina een titel (1) en klik op “Bewerk met Elementor” (2).

Een eerste container toevoegen

Een lege pagina toont een vak met de tekst Sleep widget hierheen en drie ronde knoppen:

Een lege pagina in Elementor met het vak Sleep widget hierheen en de knoppen plus, map en AI — Een lege pagina: klik op de + om een container toe te voegen.

+: een nieuwe container toevoegen.
map: een kant-en-klaar sjabloon invoegen uit de bibliotheek.
sterretjes (AI): een lay-out laten maken door de AI-assistent. Die gebruiken we niet.

Klik op de +.
Elementor vraagt Welke lay-out zou je willen gebruiken? Kies Flexbox (1). (Raster (2) is voor roosters met vaste kolommen.)

De keuze tussen Flexbox en Raster bij het toevoegen van een container — Kies Flexbox (1) of Raster (2).

Kies daarna een structuur. De bovenste rij toont de meest gebruikte: één kolom (pijl naar beneden), één rij (pijl naar rechts), twee gelijke kolommen, drie kolommen … De onderste rij combineert kolommen en rijen.
Klik op het blok met twee gelijke vakken (het derde in de bovenste rij).

Het venster Selecteer je structuur met twaalf voorgedefinieerde lay-outs — Kies een structuur. Elk vakje wordt een binnencontainer.

Die structuren zijn gewoon een snelkoppeling: Elementor maakt een container met de juiste binnencontainers voor je. Je kan achteraf altijd nog binnencontainers toevoegen, verwijderen of verslepen.

Een widget slepen

Je container heeft nu twee lege vakken met een grijze +. Daar sleep je widgets in.

Zoek in het widgetpaneel de widget Koptekst (1).
Klik erop, houd de muisknop ingedrukt en sleep de widget naar het linkervak (2).
Laat de muisknop los wanneer je een blauwe lijn of een gekleurd vak ziet op de plek waar de widget moet komen.

Het widgetpaneel met de widget Koptekst gemarkeerd en in het canvas een container met twee lege vakken, waarvan het linkse gemarkeerd — Sleep de widget Koptekst (1) naar een leeg vak in je container (2).

De widget staat op je pagina met een standaardtekst, en het paneel toont meteen Koptekst bewerken.
Typ je eigen titel in het veld Titel (1). Je ziet de tekst live veranderen in het canvas.
Sleep op dezelfde manier een Teksteditor naar het rechtervak.

Een Koptekst-widget met de titel Welkom bij onze bakkerij, links in het canvas, en een korte tekst rechts; het veld Titel in het paneel is gemarkeerd — Pas de tekst aan in het veld Titel (1). Rechts staat een Teksteditor.

Laat je de widget los op de verkeerde plek? Geen paniek: sleep hem gewoon opnieuw, of druk op Ctrl+Z / ⌘+Z. Je kan widgets ook altijd verslepen tussen containers.

Richting: rij of kolom

Voeg een nieuwe container toe onder je eerste blok en sleep er drie Knop-widgets in. Geef de container een lichte achtergrondkleur (tabblad Stijl), zodat je goed ziet wat er gebeurt.

Selecteer de container.
Op het tabblad Lay-out staat Richting (1) op rij (pijl naar rechts): de knoppen staan naast elkaar.

Een container met drie knoppen naast elkaar; de instelling Richting staat op rij — Richting rij (1): de knoppen staan naast elkaar.

Klik bij Richting op de pijl naar beneden: kolom. De knoppen springen onder elkaar.

Dezelfde container met de drie knoppen nu onder elkaar; de instelling Richting staat op kolom — Richting kolom (1): de knoppen staan onder elkaar.

Uitlijnen en ruimte ertussen

Zet de richting terug op rij.
Kies bij Inhoud uitlijnen (1) de optie met de items aan de buitenkanten (ruimte ertussen). De knoppen verdelen zich over de volle breedte.
Kies bij Items uitlijnen (2) voor midden: alles staat verticaal mooi gecentreerd.
Met Ruimtes (3) bepaal je de minimale tussenruimte tussen de knoppen.

De container met drie knoppen verdeeld over de volle breedte; Inhoud uitlijnen, Items uitlijnen en Ruimtes zijn gemarkeerd — Inhoud uitlijnen (1), Items uitlijnen (2) en Ruimtes (3).

Wil je één knop in het midden van een container? Zet dan Inhoud uitlijnen op midden (bij richting rij) of Items uitlijnen op midden (bij richting kolom). Uitlijnen gebeurt altijd op de container, niet op de knop zelf.

Boxed of volledige breedte

Het verschil tussen Boxed en Volledige breedte zie je het best met een achtergrondkleur.

Maak twee containers met elk een titel en een achtergrondkleur.
Zet de bovenste op Inhoud breedte: Boxed (1) met een Breedte (2) van bijvoorbeeld 700 px. De kleur loopt tot aan de rand, maar de titel blijft binnen de 700 px in het midden.
Zet de onderste op Volledige breedte. Nu loopt ook de inhoud tot aan de rand.

Twee containers met achtergrondkleur: bovenaan een boxed container met de inhoud in het midden, onderaan een container op volledige breedte — Boxed (1) met een breedte van 700 px (2) tegenover volledige breedte.

Waarom Boxed? Op een breed scherm zijn tekstregels van 1800 pixels lang onleesbaar. Boxed houdt je inhoud op een comfortabele breedte, terwijl de achtergrond toch het hele scherm vult. Gebruik volledige breedte vooral voor grote foto’s, kaarten of banners die van rand tot rand mogen lopen.

De standaardbreedte van een boxed container (bij de bakkerij 1200 px) stel je één keer in voor de hele site, via Website instellingen → Lay-out (zie hoofdstuk 3).

7. Widgets instellen: Inhoud, Stijl en Geavanceerd

Klik je op een widget in het canvas, dan toont het paneel [naam] bewerken met drie tabbladen. Die drie tabbladen vind je bij elke widget terug, dus het loont om ze goed te kennen.

Tabblad Inhoud: wat staat er?

De widget Koptekst geselecteerd met de tabbladen Inhoud, Stijl en Geavanceerd en het veld Titel gemarkeerd — De drie tabbladen (1, 2, 3) en op het tabblad Inhoud het veld Titel (4).

Inhoud: wat er staat: de tekst, de afbeelding, de link, de knoptekst …
Stijl: hoe het eruitziet: kleur, lettertype, grootte, uitlijning.
Geavanceerd: de ruimte rond het element, gedrag op gsm en andere technische instellingen.

Op het tabblad Inhoud van een Koptekst pas je de Titel aan (4), voeg je eventueel een Link toe, en kies je de HTML tag (H1, H2, H3 …).

Tabblad Stijl: hoe ziet het eruit?

Het tabblad Stijl van de Koptekst met Uitlijning, Typografie en Tekstkleur gemarkeerd — Uitlijning (1), Typografie (2) en Tekstkleur (3).

Uitlijning: links, gecentreerd, rechts of uitgevuld.
Typografie: lettertype, grootte, dikte … Het wereldbolletje toont dat hier een globaal lettertype uit de huisstijl gebruikt wordt; met het potloodje pas je het aan.
Tekstkleur: ook hier betekent een gekleurd wereldbolletje dat de kleur uit de huisstijl komt.

Pas kleuren en lettertypes niet widget per widget aan. Kies altijd een globale kleur of een globaal lettertype via het wereldbolletje. Waarom dat zo belangrijk is, lees je in hoofdstuk 3.

Tabblad Geavanceerd: ruimte en gedrag

Het tabblad Geavanceerd van de Koptekst met Margin, Padding en de sectie Responsive gemarkeerd — Margin (1), Padding (2) en de sectie Responsive (3).

Margin: ruimte buiten de widget.
Padding: ruimte binnen de widget.
Responsive: de widget verbergen op computer, tablet of gsm (zie verder).

Verder vind je hier onder andere Bewegingseffecten (animaties bij het scrollen of verschijnen), Achtergrond, Rand en CSS ID / CSS klassen (voor wie code schrijft).

8. Dupliceren, kopiëren, plakken en verwijderen

Alles wat je met een element kan doen, vind je in het rechtermuisklikmenu.

Klik met de rechtermuisknop op een widget of container in het canvas.
Kies de gewenste actie.

Het rechtermuisklikmenu op een Koptekst met Dupliceren, Kopieer, Plakken en Verwijderen gemarkeerd — Het rechtermuisklikmenu met Dupliceren (1), Kopieer (2), Plakken (3) en Verwijderen (4).

Dupliceren (⌘+D / Ctrl+D): maakt meteen een kopie, net onder het origineel. Ideaal om drie gelijke blokken te maken: maak er één perfect en dupliceer hem twee keer.
Kopieer (⌘+C / Ctrl+C): zet het element op je klembord.
Plakken (⌘+V / Ctrl+V): plakt het gekopieerde element. Zo kopieer je een blok van de ene pagina naar de andere. Met Plak stijl neem je enkel de opmaak over, niet de inhoud.
Verwijderen (Delete-toets): haalt het element weg.

Verder zie je nog Reset stijl (alle opmaak van dit element terugzetten), Opslaan als globaal (een widget die je op meerdere pagina’s hergebruikt), Notes en Structuur.

Bij een container kan je ook het handvat bovenaan gebruiken: + voegt een nieuwe container toe, ⠿ selecteert of versleept, × verwijdert. Bij een widget verschijnt rechtsboven een potloodje om hem te selecteren.

9. De Structuur (Navigator)

Hoe langer je pagina, hoe moeilijker het wordt om een kleine widget te vinden of aan te klikken. Daarvoor is de Structuur.

Klik in de bovenbalk op Structuur, of druk op ⌘+I / Ctrl+I.
Een venster (1) toont alle containers en widgets van je pagina als een boom.
Klik op een pijltje om een container open te klappen. Klik op een naam om dat element te selecteren.
Sleep elementen in de boom om ze te verplaatsen.

Het Structuur-venster met een uitgeklapte container met daarin Koptekst, Teksteditor en Knop; de geselecteerde Knop is gemarkeerd — De Structuur (1) toont de opbouw van je pagina. De geselecteerde knop is gemarkeerd.

Geef belangrijke containers een duidelijke naam: dubbelklik in de Structuur op “Container” en typ bijvoorbeeld Hero of Specialiteiten. Zo vind je ze later veel sneller terug.

10. Responsive bewerken: computer, tablet en gsm

Meer dan de helft van je bezoekers bekijkt je site op een gsm. Elementor past je pagina automatisch aan (rijen worden op gsm vaak kolommen), maar je moet altijd controleren of het er goed uitziet.

Wisselen van weergave

Klik in de bovenbalk op Mobiel (1). Het canvas wordt zo smal als een gsm-scherm.
Scroll door je pagina en controleer: is de tekst leesbaar, staan de knoppen goed, zijn de foto’s niet te groot?

De gsm-weergave in Elementor met de knop Mobiel gemarkeerd en het gsm-icoontje naast de instelling Uitlijning — De gsm-weergave (1). Het gsm-icoontje (2) toont dat je deze instelling enkel voor gsm aanpast.

Iets enkel op gsm anders maken

Naast veel instellingen staat een klein schermicoontje (2). Dat betekent dat je die instelling per toestel kan kiezen.

Zet de weergave op Mobiel.
Selecteer het element en pas de instelling aan, bijvoorbeeld een kleinere tekstgrootte of een andere uitlijning.
Die wijziging geldt alleen op gsm. Op computer blijft alles zoals het was.

Hoe erft Elementor instellingen? Wat je instelt in de computerweergave, geldt ook voor tablet en gsm, tenzij je daar iets anders kiest. Wat je instelt op gsm, geldt alleen voor gsm. Werk daarom altijd in deze volgorde: eerst alles goed zetten op desktop, daarna enkel de uitzonderingen op tablet en mobiel.

Iets verbergen op gsm

Soms wil je iets op gsm helemaal niet tonen, bijvoorbeeld een grote decoratieve foto.

Selecteer het element.
Ga naar het tabblad Geavanceerd en open de sectie Responsive.
Zet de schakelaar bij Verbergen op Mobiel portretmodus (3) aan. Er zijn ook schakelaars voor desktop (1) en tablet (2).

De sectie Responsive op het tabblad Geavanceerd met de schakelaars Verbergen op Desktop, Tablet en Mobiel — Verbergen op desktop (1), tablet (2) of mobiel (3).

In de editor blijft een verborgen element gewoon zichtbaar (half doorzichtig), anders kan je het niet meer bewerken. Het verbergen werkt pas in de voorbeeldmodus en op de live pagina. Controleer het dus met de knop Voorbeeld wijzigingen (het oogje).

11. Geschiedenis en revisies: iets terugdraaien

Iets verkeerd gedaan? Elementor houdt alles bij. Klik in de bovenbalk op Geschiedenis.

Acties: stap voor stap terug

Het tabblad Acties toont elke stap die je in deze sessie zette, de nieuwste bovenaan (1). Klik op een oudere stap om terug te keren naar dat moment.

Het tabblad Acties in de Geschiedenis met een lijst van stappen zoals Koptekst Toegevoegd en Container Bewerkt — Alle stappen van deze sessie (1). Klik op een stap om terug te gaan.

Sneller: Ctrl+Z (Windows) of ⌘+Z (Mac) maakt de laatste stap ongedaan. Ctrl+Shift+Z / ⌘+Shift+Z doet hem opnieuw.

Revisies: een oudere versie terugzetten

De acties verdwijnen zodra je de editor sluit. Wil je terug naar een versie van gisteren of vorige week? Gebruik dan Revisies.

Klik in de Geschiedenis op het tabblad Revisies (1).
Je ziet een lijst met opgeslagen versies, met datum en tijdstip (2). Bovenaan staat de huidige versie.
Klik op een oudere revisie: het canvas toont hoe de pagina er toen uitzag.
Klik op Toepassen om die versie terug te zetten, of op Afwijzen om terug te keren naar de huidige versie.
Vergeet daarna niet te publiceren (of als concept op te slaan).

Het tabblad Revisies met een lijst van opgeslagen versies en de knoppen Afwijzen en Toepassen — Het tabblad Revisies (1) met de opgeslagen versies (2) en de knoppen Afwijzen en Toepassen.

Elke keer dat je opslaat of publiceert, bewaart WordPress een revisie. Elementor slaat bovendien af en toe automatisch op. Daardoor raak je zelden echt werk kwijt, ook niet als je browser crasht.

12. Opslaan, publiceren en voorbeeld bekijken

Publiceren of als concept opslaan

Zodra je iets wijzigt, kleurt de knop Publiceren (1) roze.

De bovenbalk met de knop Publiceren en het pijltje Opties opslaan gemarkeerd — De knop Publiceren (1) en de opslagopties (2).

Klik op Publiceren om je wijzigingen online te zetten. Bij een pagina die al gepubliceerd is, zet je zo je aanpassingen live.
Klik op het pijltje (2) voor de opslagopties:

Het uitklapmenu met Concept opslaan, Als template opslaan en Pagina bekijken — De opslagopties: Concept opslaan (1), Als template opslaan (2) en Pagina bekijken (3).

Concept opslaan: bewaart je werk zonder het online te zetten. Ideaal als je nog niet klaar bent.
Als template opslaan: bewaart de hele pagina als sjabloon, zodat je ze later kan hergebruiken.
Pagina bekijken: opent de gepubliceerde pagina.

Bij een pagina die al online staat, ziet iedereen je wijzigingen zodra je op Publiceren klikt. Werk je aan een grote aanpassing? Oefen dan eerst op een aparte conceptpagina, zoals je oefenpagina, of bekijk het resultaat eerst met Voorbeeld wijzigingen.

Voorbeeld bekijken

Met het oogje (Voorbeeld wijzigingen) in de bovenbalk bekijk je je pagina in een nieuw tabblad, precies zoals een bezoeker ze zou zien, maar zonder te publiceren. Hier zie je ook of verborgen elementen echt verborgen zijn. Wil je de gsm-weergave controleren? Maak dan je browservenster smal, of gebruik de Mobiel-knop in de editor.

Pagina instellingen

Via Pagina instellingen in de bovenbalk regel je zaken die voor de hele pagina gelden:

Titel: de naam van de pagina (ook zichtbaar in het tabblad van de browser en in menu’s).
Status: Concept, Wachten op beoordeling, Privé of Gepubliceerd.
Titel verbergen: verbergt de automatische paginatitel van het thema. Handig als je zelf een mooie titel met een Koptekst-widget maakt.
Pagina lay-out: hoe de pagina rond je inhoud opgebouwd is. Elementor volledige breedte toont de header en footer van je site en laat je inhoud de volle breedte gebruiken; dat is de beste keuze voor de meeste pagina’s. Elementor canvas toont enkel jouw inhoud, zonder header en footer (handig voor een landingspagina).

Verder kan je hier een Uitgelichte afbeelding en een Samenvatting toevoegen.

13. De belangrijkste widgets

Hieronder vind je de widgets die je het vaakst nodig hebt, met de instellingen die ertoe doen. Elke widget heeft ook een tabblad Stijl en Geavanceerd; die werken zoals hierboven uitgelegd.

Koptekst

Voor titels en tussentitels. Gebruik per pagina één H1 (de hoofdtitel) en daaronder H2 en H3 voor tussentitels.

Titel: de tekst van je titel.
Link: maakt de titel klikbaar (optioneel).
HTML tag: de titelniveau (H1 tot H6). Dat bepaalt de structuur van je pagina voor Google en schermlezers, los van hoe groot de titel eruitziet.

Kies de HTML tag op basis van de structuur, niet van de grootte. Wil je een H2 groter of kleiner, pas dan de typografie aan op het tabblad Stijl, of beter nog: stel de grootte van alle H2’s één keer in via Website instellingen (hoofdstuk 3).

Teksteditor

Voor gewone lopende tekst: alinea’s, vet, cursief, opsommingen en links. Het werkt zoals een eenvoudige tekstverwerker.

Met de werkbalk maak je tekst vet, cursief, zet je een opsomming of voeg je een link toe.
Via Media toevoegen voeg je een afbeelding in de tekst in. Meestal gebruik je daarvoor beter een aparte Afbeelding-widget.
Visueel / Code: in Code zie je de HTML. Laat dat gerust links liggen.

Plak je tekst uit Word of een website, dan neem je vaak verborgen opmaak mee (andere lettertypes, rare tussenruimtes). Plak liever zonder opmaak: Ctrl+Shift+V (Windows) of ⌘+Shift+V (Mac).

Afbeelding

Toont één foto of illustratie.

Afbeelding kiezen: klik op het voorbeeld om een afbeelding te kiezen uit de mediabibliotheek of op te laden.
Afbeelding resolutie: de grootte van het bestand. Large of Volledig voor grote foto’s, Medium voor kleinere.
Onderschrift: een tekstje onder de afbeelding.
Link: maak de afbeelding klikbaar, bijvoorbeeld naar een pagina of naar een grote versie (lightbox).

Vul in de mediabibliotheek altijd de alternatieve tekst in: een korte beschrijving van wat er op de foto staat. Dat is belangrijk voor blinde bezoekers én voor Google.

Knop

Een opvallende link naar een andere pagina, een formulier, een telefoonnummer …

Tekst: wat er op de knop staat. Maak het concreet: “Bestel voor morgen” werkt beter dan “Klik hier”.
Link: waar de knop naartoe gaat. Typ een adres of begin een paginanaam te typen. Met het tandwieltje kan je de link in een nieuw venster laten openen.
Icoon: optioneel een icoontje voor of na de tekst.

Een link naar een telefoonnummer begint met tel: (bijvoorbeeld tel:+3216123456), een link naar een e-mailadres met mailto: (bijvoorbeeld mailto:hallo@dekorenaar.be). Op een gsm opent de knop dan meteen de telefoon of de mailapp.

Icoon

Eén los icoontje, bijvoorbeeld als decoratie boven een titel.

Icoon: klik op het voorbeeld om een icoon te kiezen uit de bibliotheek, of laad een eigen SVG op.
Weergave: Standaard (enkel het icoon), Gestapeld (met een gekleurde achtergrond) of Omkaderd (met een rand).
Link: maak het icoon klikbaar.

Pictogramlijst (Icoon lijst)

Een lijst met telkens een icoontje en een tekst. Ideaal voor contactgegevens, openingsuren of voordelen. Je vindt hem in het widgetpaneel als Icoon lijst.

De widget Icoon lijst op de contactpagina met de lijst van items gemarkeerd — Icoon lijst: elk item (1) heeft een eigen tekst, icoon en link.

Klik onder Items (1) op een regel om de tekst, het icoon en eventueel een link aan te passen.
Met Item toevoegen voeg je een regel toe. Met het kruisje verwijder je er een, met het kopieericoontje dupliceer je hem.
Op het tabblad Stijl kies je de kleur en grootte van de iconen en de ruimte tussen de items.

Scheiding

Een horizontale lijn om twee delen van elkaar te scheiden.

Stijl: doorgetrokken, gestippeld, met streepjes, dubbel …
Breedte: hoe lang de lijn is, in procent van de container.
Element toevoegen: zet een tekst of icoon midden in de lijn.

Vulelement (afstandhouder)

Een onzichtbaar blok dat extra verticale ruimte maakt.

De widget Vulelement met de schuifregelaar Ruimte op 80 pixels — Vulelement: stel de ruimte (1) in pixels in.

Ruimte: hoeveel pixels witruimte je wil.

Gebruik het Vulelement met mate. Ruimte tussen blokken regel je netter met de padding van containers en de Ruimtes (gap) tussen items. Dan blijft je pagina consistent en hoef je op gsm niet overal vulelementen aan te passen.

Afbeeldingsvak (Afbeelding vak)

Een afbeelding met daaronder (of ernaast) een titel en een korte beschrijving, in één widget. Perfect voor “onze producten” of “onze diensten”. Op de homepagina van de bakkerij zijn de drie specialiteiten afbeeldingsvakken.

De widget Afbeelding vak met de afbeelding Desembrood, het veld Titel en het veld Beschrijving gemarkeerd — Afbeelding vak: afbeelding (1), titel (2) en beschrijving (3).

Afbeelding: de foto.
Titel: bijvoorbeeld Desembrood.
Beschrijving: een of twee zinnen uitleg.

Met Link maak je het hele vak klikbaar. Op het tabblad Stijl kies je of de afbeelding boven, links of rechts van de tekst staat. Er bestaat ook een Icoon vak, dat hetzelfde doet met een icoon in plaats van een foto.

Video

Toont een video van YouTube, Vimeo of een eigen bestand.

Bron: YouTube, Vimeo, Dailymotion, VideoPress of Zelf gehost.
Link: plak het adres van de video.

Daaronder vind je opties zoals Automatisch afspelen, Dempen, Lus en Privacymodus.

Zet bij YouTube-video’s de Privacymodus aan. Dan slaat YouTube geen informatie over je bezoekers op tot ze zelf de video starten. Dat is beter voor de privacy (en voor je cookiebanner).

Google Maps

Toont een kaartje van een adres.

Locatie: typ het adres, bijvoorbeeld Bondgenotenlaan 1, 3000 Leuven.
Zoom: hoe ver je inzoomt.
Hoogte: hoe hoog de kaart is, in pixels.

Getuigenis

Een citaat van een tevreden klant, met naam en eventueel een foto en functie. Klantenreviews maken je site geloofwaardiger.

Inhoud: het citaat zelf.
Afbeelding kiezen: een foto van de klant (optioneel).
Naam: bijvoorbeeld Sofie.
Titel: bijvoorbeeld vaste klant.

Heb je veel reviews? In de categorie Pro zit Testimonial Carousel: een schuivende reeks getuigenissen.

Teller

Een getal dat optelt wanneer de bezoeker ernaar scrollt. Mooi voor kerncijfers: “sinds 1987”, “12 soorten brood”, “800 klanten per week”. Je vindt de tellers op de pagina Over ons van de bakkerij.

Begingetal: waar de teller begint (meestal 0).
Eindgetal: het getal waar hij stopt.
Achtervoegsel nummer: iets achter het getal, zoals + of %. Er is ook een Voorvoegsel nummer voor iets vóór het getal, zoals €.
Titel: de uitleg onder het getal.

Met Duur animatie (ms) bepaal je hoe lang het optellen duurt.

Prijslijst (Pro)

De Pro-widget Price List toont een lijst met producten en prijzen, zoals een menukaart. Op de pagina Ons brood staan er twee.

De widget Price List op de pagina Ons brood met de lijst van items gemarkeerd — Prijslijst: elk item (1) heeft een titel, prijs, beschrijving en eventueel een afbeelding en link.

Onder List Items (1) klik je op een item om titel, prijs, beschrijving, afbeelding en link in te vullen.
Met Item toevoegen voeg je een product toe.

Niet te verwarren met Price Table: die toont één groot prijsblok (bijvoorbeeld een abonnement) met een lijst van wat erin zit en een knop.

Carrousel (Pro)

De Pro-widget Carousel maakt een schuivende reeks “slides”. Elke slide is een kleine container waarin je zelf widgets sleept: een foto, een titel, een knop … Zo kan je bijvoorbeeld je producten of je team tonen.

De widget Carousel met drie slides in het paneel en drie lege vakken in het canvas — Carousel: de lijst met slides (1) en het aantal zichtbare slides (2).

Carousel Items: de lijst met slides. Met Item toevoegen voeg je er een toe.
Slides on display: hoeveel slides je tegelijk ziet (per toestel in te stellen).

In het canvas sleep je widgets in elke slide (Drag widget here). Onder Settings, Navigation en Pagination stel je in of de carrousel automatisch draait en of er pijlen en bolletjes zijn.

Wil je alleen foto’s laten schuiven? Dan is de gewone widget Carrousel afbeelding (categorie Algemeen) eenvoudiger: je kiest gewoon een reeks foto’s.

Formulier (Pro)

Met de Pro-widget Form bouw je een contactformulier. Op de pagina Contact van de bakkerij staat er een.

De widget Form op de contactpagina met Form Name en de lijst met velden gemarkeerd — Formulier: de naam (1) en de velden (2).

Form Name: een interne naam, zodat je de inzendingen later terugvindt.
Form Fields: elk veld (Naam, E-mail, Telefoon, Onderwerp, Bericht, Privacy …) kan je openklikken om het type, het label en of het verplicht is in te stellen. Met Item toevoegen voeg je een veld toe.

Wat er gebeurt na het verzenden (de sectie Actions After Submit: een e-mail naar jou, een bedankbericht …) en hoe je formulieren veilig en privacyvriendelijk maakt, leer je uitgebreid in hoofdstuk 6 over formulieren.

Veelgemaakte fouten

Alles in één container gooien. Werk met binnencontainers per blok (foto | tekst). Dan kan je de lay-out op gsm veel makkelijker aanpassen.
Kleuren en lettertypes per widget instellen. Gebruik altijd de globale kleuren en lettertypes (hoofdstuk 3). Anders moet je bij elke wijziging tientallen widgets aanpassen.
Ruimte maken met lege Vulelementen of lege tekstregels. Gebruik padding en Ruimtes (gap).
Grote koppen voor de grootte. Een H1 is voor de hoofdtitel van de pagina, niet om tekst groot te maken.
Vergeten te controleren op gsm. Kijk elke pagina na in de Mobiel-weergave voor je publiceert.
Oefenen op een live pagina. Gebruik een conceptpagina om te experimenteren.
“Activate now” klikken bij Atomic Elements. Niet doen: klik het kaartje weg.

Vragen

Ik zie het widgetpaneel niet meer, alleen instellingen. Hoe krijg ik de widgets terug?

Klik in de bovenbalk op de + (Element toevoegen). Het paneel toont dan opnieuw alle widgets.

Ik kan een kleine widget niet aanklikken, er ligt altijd een container over.

Open de Structuur (⌘+I / Ctrl+I) en klik daar op de widget. Of klik met de rechtermuisknop en kies in het menu de juiste widget.

Mijn pagina ziet er in de editor anders uit dan op de site.

Controleer of je gepubliceerd hebt: tot dan zien bezoekers de oude versie. Bekijk de pagina ook eens met Voorbeeld wijzigingen. Ververs eventueel je browser (Ctrl+F5 / ⌘+Shift+R), want je browser kan een oude versie onthouden.

Ik heb per ongeluk een heel blok verwijderd en al gepubliceerd.

Ga naar Geschiedenis → Revisies, klik op de versie van vóór je fout, klik op Toepassen en publiceer opnieuw.

Wat is het verschil tussen een Raster en een Container?

Een Flexbox-container legt items in één rij of kolom (met eventueel terugloop). Een Raster legt items in een rooster van kolommen én rijen tegelijk, zoals een tabel. Voor de meeste lay-outs volstaat Flexbox met binnencontainers.

Opdracht

Bouw je eigen oefenpagina en daarna je homepagina.

Maak een nieuwe pagina Oefenpagina Elementor en open ze met Elementor. Laat ze als concept staan.
Voeg een container toe met de structuur twee gelijke kolommen. Zet links een Afbeelding en rechts een Koptekst, een Teksteditor en een Knop.
Geef de container een achtergrondkleur en een padding van 60 px boven en onder.
Voeg eronder een container toe met drie Afbeeldingsvakken naast elkaar. Maak er eerst één helemaal af en dupliceer hem twee keer.
Voeg een container met drie Tellers toe en experimenteer met Richting, Inhoud uitlijnen en Ruimtes.
Bekijk alles in de Mobiel-weergave. Pas minstens één instelling enkel voor gsm aan (bijvoorbeeld een kleinere titel) en verberg één element op gsm. Controleer met Voorbeeld wijzigingen.
Verwijder een widget, en zet hem terug via Geschiedenis → Acties.
Sla op als concept. Pas daarna wat je geleerd hebt toe op je echte homepagina en publiceer die.

Samengevat

Pagina’s open je met Bewerk met Elementor (via Pagina’s of de adminbalk).
De editor heeft een bovenbalk, een paneel en een canvas.
Een pagina bestaat uit containers (dozen) met daarin widgets of binnencontainers. Met Richting (rij/kolom), uitlijnen en Ruimtes bepaal je de lay-out.
Elke widget heeft drie tabbladen: Inhoud (wat), Stijl (hoe het eruitziet) en Geavanceerd (ruimte en gedrag).
Met de rechtermuisknop dupliceer, kopieer, plak en verwijder je. De Structuur helpt je de weg te vinden.
Controleer alles in de Mobiel-weergave. Wat je op gsm instelt, geldt alleen voor gsm.
Geschiedenis (acties en revisies) redt je als er iets misloopt.
Publiceren zet alles online. Concept opslaan bewaart zonder te publiceren.

Alle hoofdstukken