040 848 80 69 bob@bobdewebbouwer.com

De basis van Elementor

Als je de Elementor geïnstalleerd hebt zie je op elke pagina een grote blauwe knop “bewerk met Elementor”. Klik daarop om de Elementor page builder te activeren. 
Je krijgt dan een scherm zoals hiernaast te zien. Daarop vind je de volgende onderdelen: 

  • ln de linker sidebar (1) vind je de widgets, waarmee je diverse soorten content kunt toevoegen. Als je bijvoorbeeld tekst wilt toevoegen sleep je de “tekstbewerker” widget naar rechts, en als je een afbeelding wilt toevoegen sleep je de “afbeelding” widget naar rechts . Als je al content op de pagina hebt staan sleep je de widget simpelweg naar de plek waar je deze wilt toevoegen.
  • Als je op het plus icoontje (2) klikt kun je kiezen uit diverse kolom structuren.
    In elke kolom kun je dan een widget slepen. Je kunt de kolommen in Elementor overigens gewoon naar de gewenste breedte slepen waardoor je eenvoudig je eigen kolomstructuur kunt maken.
  • Als je op het map icoontje (3) klikt opent de layout bibliotheek van Elementor. Hierin vind je tientallen professioneel ontworpen templates die je als basis voor je pagina kunt gebruiken, en ook de templates die je zelf hebt opgeslagen vind je hier terug. Meer daarover hier.
  • Als je op het hamburger icoontje (4) links bovenin klikt kun je een aantal standaard dingen voor de gehele website instellen. Meer daarover hier.
  • Door op het icoontje met de vier blokjes (5) te klikken kom je weer terug bij het widget overzicht.
  • In de werkbalk links onderaan (6) vind je de pagina instellingen, de navigator, de geschiedenis, de responsive modus, de voorbeeld bekijken knop en de bijwerken knop.
    Alles over deze werkbalk lees je hier.

Widgets : de bouwstenen van Elementor

Elementors Widgets zijn de bouwstenen waarmee je je pagina opbouwt. Zoals je hierboven hebt kunnen lezen sleep je een widget gewoon vanuit de linker sidebar naar rechts om deze op de pagina toe te voegen. Elementor heeft standaard 30 van die widgets:

  • Inner sectie : Hiermee kun je 1 kolom verdelen in meerdere kolommen. Dit kan heel handig zijn als je bijvoorbeeld 2 knoppen, iconen of afbeeldingen naast elkaar wilt plaatsen.
  • Kop : Hiermee kun je een titel of tussenkopje toevoegen en deze voorzien van een heading tag (H1 t/m H6). 
  • Afbeelding : Hiermee kun je uiteraard een afbeelding toevoegen.
  • Tekstbewerker : Dit is de meest gebruikte widget, want hiermee kun je gewone tekst toevoegen zoals je dat ook in Word zou doen.
  • Video : Ook deze widget spreekt voor zich. Je kunt hier een video toevoegen vanaf YouTube, Vimeo, DailyMotion of op je eigen server. Indien gewenst kun je deze op een later punt laten starten, automatisch laten afspelen, het geluid dempen, herhalen en kiezen of je afspeelknoppen wilt weergeven.
  • Knop : Hiermee kun je uiteraard een knop toevoegen, bijvoorbeeld een contact knop of offerte aanvraag knop. Je kunt kiezen uit verschillende stijlen (of deze helemaal naar wens vormgeven), de link instellen en indien gewenst ook een icoontje toevoegen.
  • Scheiding : Hiermee kun je een lijn toevoegen, handig om bijvoorbeeld een scheiding aan te brengen tussen 2 onderwerpen in je tekst. Je kunt onder andere de stijl, dikte en kleur van je scheidingslijn instellen.
  • Afstandshouder : Hiermee voeg je een leeg blok in om witruimte te creëren. Je kunt zelf instellen hoe hoog dit blok moet zijn. 
  • Google Maps : Hiermee voeg je natuurlijk een Google Maps kaartje in. Voer simpelweg het adres in, stel eventueel het gewenste zoomniveau in en klaar.
  • Icoon : Hiermee kun je een Font Awesome icoon toevoegen. Uiteraard kun je instellen welk icoon je wilt, maar ook de kleur, uitlijnen en afbeelding kun je instellen.
  • Afbeeldingsbox : Hiermee kun je een afbeelding toevoegen met daaronder een koptekst en een tekstveld. Daarmee kun je bijvoorbeeld een referentie toevoegen,
    of je producten en diensten. 
  • Icoonbox : Dit is hetzelfde als bovenstaande afbeeldingsbox, maar dan met een icoon in plaats van een afbeelding.
  • Aantal sterren : Hiermee kun je een sterwaardering toevoegen, zoals je dit vaak bij reviews ziet. Je kunt o.a. de kleur en het aantal sterren aanpassen (ook halve sterren).
  • Afbeeldingsgalerij : Handig als je meerdere afbeeldingen naast elkaar wilt toevoegen. Kies o.a. welke afbeeldingen je wilt tonen en hoeveel afbeeldingen er naast elkaar komen.
  • Carroussel afbeelding : Hiermee kun je een slider met afbeeldingen toevoegen. Je kunt o.a. het formaat en aantal afbeeldingen naast elkaar instellen, of je pijlen en navigatie wilt tonen en of je de carroussel automatisch wilt laten lopen (en hoe snel). 
  • Iconenlijst : Hiermee kun je een lijstje toevoegen, waarbij je per item kunt bepalen welk icoontje daarvoor gebruikt wordt. Handig voor bijvoorbeeld een vergelijkingstabel of een opsomming van features. 
  • Teller : Hiermee voeg je een teller toe die oploopt tot een vooraf ingesteld getal. Dit wordt bijvoorbeeld vaak gebruikt om aan te geven hoeveel gebruikers een product heeft.
  • Voortgangsbalk : Hiermee voeg je een voortgangsbalk in die vol loopt tot een vooraf ingesteld percentage. Handig om bijvoorbeeld de voortgang van een project aan te geven.
  • Aanbeveling : Ook wel referentie of testimonial genoemd. Hiermee kun je een foto (van de klant of het project) kiezen, de naam en functie van die klant invoeren en natuurlijk ook de tekst van de aanbeveling toevoegen. 
  • Tabs : Hiermee kun je meerdere tekstbewerker velden als tabbladen naast elkaar weergeven.
  • Accordeon : Hiermee kun je meerdere tekstbewerker velden onder elkaar weergeven, en deze laten openen en sluiten als er op de titel wordt geklikt. Dit wordt bijvoorbeeld vaak gebruikt voor veel gestelde vragen.
  • Wissel : Dit is hetzelfde als de accordeon, maar nu sluit de huidige tekst automatisch als je een andere titel aanklikt.
  • Sociale iconen : Hiermee kun je links naar je social netwerk pagina’s toevoegen, zoals Facebook, Twitter, LinkedIn, Instagram en Pinterest.
  • Melding : Hiermee voeg je een tekstblok op dat is opgemaakt als een melding. Je kunt kiezen uit diverse stijlen, zoals een waarschuwing, succes of info melding.
  • SoundCloud : Hiermee voeg een SoundCloud speler toe op je website, waarbij je diverse knoppen kunt toevoegen of weglaten. Vooral handig voor artiesten.
  • Shortcode : Veel plugins – bijvoorbeeld contactformulier plugins – maken gebruik van shortcodes. Met deze widget voeg je die eenvoudig toe.
  • HTML : Met deze widget kun je eigen HTML code toevoegen op je pagina. Ook handig voor iframes.
  • Menu anker : Je kunt in je menu verwijzen naar een bepaalde positie op de pagina door het toevoegen van een ID. Met deze widget kun je die positie markeren. Je kunt echter ook gewoon een ID toevoegen in de instellingen van de betreffende sectie of widget (daarover later meer) net zo makkelijk. 
  • Sidebar : Hiermee kun je een widget area overal op de pagina toevoegen. 
  • Lees verder : Dit is eigenlijk alleen bedoeld voor archief pagina’s zoals het berichtenoverzicht, maar om dat te gebruiken heb je eigenlijk Elementor Pro nodig. Waarom deze widget in de gratis versie zit is me dan ook een raadsel… 
  • WordPress widgets : Een heel handig onderdeel van Elementor is dat je overal op de pagina widgets van WordPress zelf – maar ook widgets die zijn toegevoegd door plugins – kunt toevoegen. Normaal kan dit alleen in de widget areas van je thema (vaak alleen in een sidebar en footer), maar met Elementor kun je deze dus op iedere gewenste plek toevoegen.

Elementor instellingen en effecten voor widgets, kolommen en secties

Als je met de muis op een widget klikt openen de instellingen voor de betreffende widget in de sidebar (1).  Deze instellingen zijn verdeeld in 3 tabbladen: layout, stijl en geavanceerd.

Onder het layout tabblad vind je de basis instellingen voor de betreffende widget.
Bij een tekstbewerker widget kun je hier je tekst invoeren, bij een afbeelding widget kies je hier de afbeelding en stel je het formaat, de uitlijning en de link hier in en bij de Google Maps widget stel je hier het adres en het zoomniveau in.

Onder het stijl tabblad kun je dingen als tekstkleur, typografie (lettertype en grootte), de kleuren van een knop enzovoorts instellen. Ook hier zijn de opties die je hebt afhankelijk van welke widget het is.

Vreemd genoeg kun je onder het stijl tabblad geen achtergrond instellen, daarvoor moet je in het geavanceerd tabblad zijn. Onder dit tabblad kun je ook de marge en padding instellen (witruimte), een z-index opgeven en een CSS ID en class instellen. Als je geen idee hebt waarvoor dat allemaal dient heb je het ook niet nodig 😉

Onder bewegingseffecten kun je een animatie selecteren zodat je een widget op een mooie manier in beeld kan laten verschijnen (zoals de blokken op mijn homepage) en bij
rand kun je vanzelfsprekend een rand toevoegen, maar ook een schaduw effect en afgeronde hoeken instellen. 

Onder aangepaste positie kun je door de breedte op “inline” in te stellen zorgen dat widgets niet onder elkaar, maar naast elkaar moeten verschijnen, en als je bij “positie” de optie “absoluut” kiest kun je een widget naar iedere gewenste plek op de pagina verslepen. Dit werkt erg gaaf, maar levert gegarandeerd problemen op met kleinere schermen dus pas daar mee op. 

Over kleinere schermen gesproken: onder het kopje responsive kun je de betreffende widget verbergen op desktop, tablet en/of mobiel.

Bij een aantal onderdelen zie je ook een lichtgrijs computer icoontje staan, als je daarop klikt kun je dat onderdeel apart instellen voor desktop, tablet en mobiel.
Ook kun je bij sommige onderdelen een apart hover effect instellen, waarmee je bijvoorbeeld een andere achtergrondkleur kunt tonen als je bezoeker er met de muis over beweegt.

Tenslotte zie je daar het kopje aangepaste CSS, maar daarvoor heb je de pro versie nodig. Persoonlijk gebruik ik dat onderdeel overigens toch nooit, ik geef de widget dan liever een CSS class of ID en voeg de CSS toe via de customizer zodat alle CSS op 1 plek staat.

Sectie instellingen

Als je op de met de muis over een widget heen beweegt worden er diverse icoontjes zichtbaar. Als je op het potloodje (4) klikt worden de instellingen van de betreffende widget geopend. Als je op de 6 blokjes in het blauwe balkje bovenin (2) klikt openen de sectie instellingen in de sidebar. Hier kun je o.a. de sectie uitrekken over de gehele breedte van het scherm (mooi voor achtergronden), instellen hoe breed de inhoud in die sectie moet zijn, de hoogte van de sectie bepalen en een vormscheiding (shape divider) en animatie instellen. 

Kolom instellingen

Als je op het donkergrijze blokje (3) klikt worden de instellen voor de betreffende kolom geopend. Je kunt hier o.a. de breedte instellen, evenals de horizontale en verticale uitlijning, de achtergrond en een rand of schaduw effect.

Rechter muisknop in Elementor

Er gaat in Elementor ook een aantal handige functies schuil achter de rechter muisknop. Zo kun je een onderdeel bewerken, dupliceren en de styling (instellingen) kopiëren en plakken. 

Werkbalk onderaan de sidebar

Onderaan de Elementor sidebar vind je een donkergrijze werkbalk met lichtgrijze icoontjes, en een grote groene knop “bijwerken”. Het zal geen verrassing zijn dat je op die knop moet klikken om je aanpassingen op te slaan 😉 Maar wat betekenen die andere icoontjes?

 

 

    Tandwiel icoontje (1) : Instellingen voor de huidige pagina

    Als je op het tandwieltje klikt openen de pagina instellingen voor de huidige pagina. Hier kun je:

    • De pagina titel aanpassen
    • De publicatiestatus aanpassen
    • Een samenvatting schrijven (sommige thema’s gebruiken deze voor de interne zoekfunctie en de archief pagina’s zoals het berichtenoverzicht)
    • Een uitgelichte afbeelding instellen (ook deze wordt gebruikt voor de interne zoekfunctie en archief pagina’s, maar ook als het bericht gedeeld wordt op social media)
    • De paginatitel verbergen (kan handig zijn als je deze bijvoorbeeld in een header afbeelding wilt toevoegen
    • Instellen of je standaard pagina layout van het thema wilt gebruiken of niet

    Onder het tabblad “stijl” kun je ook nog een pagina achtergrond instellen, evenals een aangepaste padding (witruimte) voor de huidige pagina. 
    Onder “geavanceerd” kunnen gebruikers van Elementor Pro nog custom CSS toevoegen.

    Navigator (2) : Overzicht van de paginastructuur

    Als je op het navigator icoontje (2) klikt opent een popup venster aan de rechterzijde van het scherm, waarmee je de structuur van de pagina duidelijk krijgt. Als je op een widget klikt zie je in de navigator in welke kolom en sectie deze valt, en als je (in de navigator) op de betreffende kolom of sectie klikt openen de instellingen daarvoor in de sidebar.

    Geschiedenis (3) : Herstel een eerdere status van de pagina

    Als je op het “geschiedenis” icoontje klikt krijg je een overzicht van alle wijzigingen van deze sessie. Klik op 1 van de vorige statussen om de pagina daarnaar te herstellen. Erg handig als je bijvoorbeeld per ongeluk een stuk tekst hebt verwijderd of een andere fout hebt gemaakt die je graag wilt herstellen. Bovenaan (onder het kopje “geschiedenis” zie je ook “revisies” staan, dat zijn oudere versies van je pagina die zijn opgeslagen door WordPress. Als je niet zeker weet welke versie je moet hebben kun je er gewoon een paar proberen, je kunt immers altijd terug naar een nieuwere versie. 

    Computer icoontje (4) : Bekijk hoe je pagina eruit ziet op tablet of mobiel

    Hiermee kun je kijken hoe je site er (ongeveer) uit ziet op een tablet en telefoon.

    Oog icoontje (5) : Bekijk je pagina zonder sidebar

    Door hierop te klikken kun je de pagina bekijken zonder de Elementor sidebar. Deze opent in een nieuw tabblad.

    Pijtje naast de knop “bijwerken” (6) : De pagina opslaan als template of concept

    Naast de knop “bijwerken” zie je een klein pijltje. Als je daarop klikt kun je ervoor kiezen de huidige pagina als template op te slaan, of als concept (dus nog niet zichtbaar voor publiek.

    Elementor bibliotheek

    De bibliotheek van Elementor is te vergelijken met de mediabibliotheek van WordPress. De Elementor bibliotheek bevat tientallen professioneel ontworpen templates die je zo kunt importeren op je pagina.

    Je kunt ervoor kiezen een complete pagina template te importeren die bestaat uit meerdere secties, maar als je op het kopje “blokken” klikt kun je ook kiezen uit een aantal secties zodat je zelf je pagina naar wens kunt samenstellen.

    Onder “mijn templates” vind je de templates die je zelf hebt gemaakt en hebt opgeslagen in de bibliotheek.

    In de gratis versie kun je alleen complete secties opslaan (met de rechter muisknop klikken op de 6 vierkantjes, zie (2) in de afbeelding hierboven), of volledge pagina’s opslaan door links onderin op het pijltje naast de knop “bijwerken” te klikken en te kiezen voor “als template opslaan.

    In de pro versie kun je ook individuele widgets opslaan in de bibliotheek.

    Elementor standaard instellingen

    Als je helemaal links bovenin op het hamburger icoontje klikt opent het menu hiernaast. Hierin vind je enkele opties:

    Standaardkleuren

    Hier kun je het standaard kleurenpallet voor de gehele website instellen.

    • De primary color wordt gebruikt voor kopteksten en icoontjes
    • De secundairy color wordt gebruikt voor lijsten, subkopjes, geanimeerde headers (pro) en prijstabellen (pro)
    • De text color voor alle andere teksten
    • De accent color voor links, knoppen en headings van de tab en accordeon widgets

    Je kunt kiezen uit een aantal standaard kleurenpalletten, maar als je op een kleur klikt kun je daar ook een eigen kleur instellen zodat je kleurenpallet perfect aansluit op je huisstijl.

     

    Standaard lettertypen

    Hier kun je de lettertypes instellen voor de kopteksten, body tekst (dat is alle andere tekst) en de accent teksten (links, knoppen en heading van tab en accordeon widgets).

    Kleurenkiezer

    Overal in Elementor wordt gebruik gemaakt van een kleurenkiezer, bijvoorbeeld om een tekst- of achtergrondkleur aan te passen. Hier kun je zelf bepalen welke kleuren in de kleurenkiezer worden getoond. Klik op een kleur om deze aan te passen. Helaas worden niet automatisch de kleuren van de hierboven ingestelde standaard kleuren gebruikt, maar het is uiteraard verstandig om diezelfde kleuren als basis voor je kleurenkiezer te gebruiken.

    Globale instellingen

    Deze instellingen zijn bedoeld voor developers. Hier kun je het standaard lettertype voor de gehele website instellen, de breedte van de inhoud (ik gebruik meestal 1200), de standaard witruimte tussen widgets, tot welk HTML element een uitgerekte sectie reikt (standaard “body”, wat even breed als het scherm is) en de standaard selector van de paginatitel.

    Lightbox

    Onder de globale instellingen vind je ook een kopje “lightbox”. Een lightbox is een popup venster waarin een grotere versie van een afbeelding verschijnt als je op die afbeelding klikt, zoals bij de afbeeldingen op deze pagina. Hier kun je instellen of je de ingebouwde lightbox van Elementor wilt gebruiken en welke kleur de achtergrond en de andere elementen moeten hebben.

    Dashboard instellingen

    Je kunt ook enkele dingen instellen in de backend van WordPress. Als je op “dashboard instellingen” klikt ga je daar naartoe. Je kunt hier o.a. selecteren voor welke berichttypes Elementor gebruikt wordt, of je de standaard kleuren en lettertypes van je thema wilt gebruiken in plaats van de hierboven beschreven standaardkleuren en lettertypes.

    Als je op het tabblad “stijl” klikt vind je dezelfde instellingen als bij “globale instellingen” en de mogelijkheid de lightbox in of uit te schakelen, en je kunt hier ook de breaking points voor tablet en mobiel instellen. Dat is de breedte waarop de responsive instellingen hun werk gaan doen. De standaard instellingen zijn prima (1025px voor tablet en 768px voor mobiel). 

    Onder het tabblad “geavanceerd” vind je nog enkele instellingen voor geavanceerde gebruikers.

    Over Elementor

    Als je hierop klikt ga je naar de website van Elementor

    Vinder

    De vinder in Elementor is wel een zeer handige tool. Als je daarop klikt krijg je een zoekvenster waarin je van alles kunt typen. Bijvoorbeeld de titel van een pagina, waar je vervolgens direct naartoe kunt. Elementor is dan ook al geopend, zodat je direct kunt beginnen met bewerken. Maar ook instellingen, templates of de WordPress customizer. Je kunt de vinder ook openen door CRTL + E (of CMD + E op de Mac) te typen.

    Pagina bekijken

    Als je hierop klikt opent de huidige pagina in een nieuw tabblad, zodat je deze kunt bekijken zonder de Elementor sidebar.

    Elementor Pro

    Alles wat beschreven is in deze handleiding vind je in de gratis versie van Elementor. Wil je nog meer features? Kies dan voor Elementor Pro en krijg o.a.:

    Theme Builder

    Met de theme builder van Elementor kun je niet alleen de inhoud van je pagina bewerken, maar ook alle andere onderdelen zoals de header en de footer, je blog overzicht enzovoorts.
    Ook kun je standaard templates maken voor speciale pagina’s zoals de 404 pagina en zoekresultaten pagina, maar ook voor berichten waarbij je zelfs een andere template kunt kiezen per categorie.

    WooCommerce Builder

    Heb je een webshop? Met Elementor Pro kun je zowel de individuele productpagina’s als het productoverzicht (de winkel en categorie pagina’s) helemaal naar wens vormgeven

    Popup Builder

    Hiermee kun popups maken met verschillende triggers, waardoor deze automatisch verschijnen nadat je bezoeker bijvoorbeeld 10 seconden op de pagina is, of als hij de muis richting het kruisje beweegt om de pagina te verlaten. Zeer geliefd onder marketeers voor o.a. nieuwsbrief inschrijvingen en speciale acties.

    Nog eens 22 extra widgets

    Met Elementor Pro krijg je nog eens 22 extra widgets, waaronder een widget waarmee je blogberichten op iedere pagina kan tonen, een aantal social media widgets (oa share knoppen en een Facebook feed), een aftel timer, geanimeerde titels, prijstabellen, review sliders, flip box enzovoorts.

    En nog veel meer…

    En dat allemaal vanaf slechts $ 49,00!

    Hulp nodig met je Elementor website?

    Als het goed is heb je de basis van Elementor nu aardig onder de knie. Heb je toch nog vragen?
    Stel ze gerust in de reacties hieronder!

    Je kunt mij natuurlijk ook inhuren om een Elementor website voor je te bouwen, of om een
    Elementor training te volgen.

    Vraag direct een vrijblijvende offerte aan

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

    Houd je het bij de gratis versie van Elementor or heb je al een Pro licentie, maar wil je me toch bedanken voor dit artikel? Dan wordt een kleine eenmalige donatie via de knop hiernaast natuurlijk altijd zeer op prijs gesteld 🙂

    Bedrag





    Gerelateerde artikelen