WordPress Elementor-zelfstudie | Een stapsgewijze handleiding in 2024

Je wilt aan de slag met Elementor en bent op zoek naar een WordPress Elementor-tutorial? Uw zoekopdracht eindigt hier. In dit artikel vertel ik je alles wat je moet weten over Elementor.

Vanaf het installeren tot het maken van een zeer stijlvolle pagina: al uw twijfels zullen worden opgelost als u het artikel leest. Ik verzeker je; het lezen zal niet voor niets zijn!

Maar u heeft een plug-in voor het bouwen van websites nodig om uw website een professioneel tintje te geven.

Hoe krijg je dat? Nou, ik gebruik Elementor daarom. Elementor maakt het voor mij uiterst eenvoudig om een ​​professionele website te maken door middel van een eenvoudige drag-and-drop-functie. 

Wil je meer weten over Elementor, bekijk dan mijn gedetailleerde Elementor recensie.

Hoe Elementor op WordPress te installeren

Welnu, er zijn 2 manieren waarop u Elementor op WordPress kunt installeren. 

• Via de officiële website van Elementor

Ga naar de officiële website van Elementor en klik op de knop Gratis downloaden die op de website wordt weergegeven. 

Zodra u op de knop Gratis downloaden klikt, verschijnt er een pop-up waarmee u zich kunt abonneren op de Elementor-website, en zodra u datzelfde doet, begint de plug-in automatisch met downloaden.

U vindt een zip-bestand gedownload op uw laptop/pc. Ga nu naar uw WordPress-dashboard en klik op het gedeelte Plug-ins> Nieuwe plug-in toevoegen> Plug-in uploaden

Kies het Elementor-bestand en upload het naar WordPress.

• Via het WordPress-dashboard

U kunt de Elementor-plug-in ook rechtstreeks vanuit het WordPress-dashboard installeren. Ga gewoon naar Plug-in en vervolgens Nieuwe plug-in toevoegen

Rechtsboven vind je een zoekbalk, typ Elementor in de zoekbalk. Het allereerste resultaat is wat u in uw WordPress moet installeren. Klik eenvoudigweg op installeren en wacht tot de plug-in is geïnstalleerd. Activeer de plug-in en u heeft een geweldige websitebouwer klaar voor implementatie.

Nu Elementor op uw WordPress-dashboard is geïnstalleerd, kunnen we eens kijken naar de functies die het biedt.

Elementor-functies en hun gebruik bij het bouwen van een webpagina

De lijst met functies die Elementor biedt is eindeloos, dus ik zal veel essentiële functies van Elementor bespreken. Zorg ervoor dat je ze leest en probeer ze later uit.

Er zijn twee plannen voor Elementor The Free en The Pro. Zoals de naam al doet vermoeden voor het Pro-abonnement, zul je moeten spelen, maar er zijn ook verschillende functies die bij het gratis abonnement horen.

Ik zal beginnen met het eerst bespreken van de functies in het gratis abonnement, gevolgd door Pro.

Elementor Gratis Plan-functies

Essentiële functies:

• Slepen en neerzetten

De functie voor slepen en neerzetten van Elementor is erg snel en helpt u webpagina's sneller te ontwerpen. Van het maken van een webpagina-indeling tot het verfijnen, het kan allemaal worden gedaan door simpelweg te slepen en neer te zetten.

U hoeft niet van tabblad te wisselen of de pagina te wijzigen om uw kop- en voetteksten te ontwerpen. Met Elementor kunt u dit doen op dezelfde pagina als uw primaire webpagina.

U kunt de stijl of de functie die u wilt gebruiken kopiëren en plakken, of zelfs dupliceren. Dit bespaart u tijd als u dezelfde functie steeds opnieuw opnieuw moet opbouwen.

Met de zoekbalkoptie van Elementor, navigeert u eenvoudig door de website en bereikt u binnen enkele seconden het gewenste tabblad. Deze functie is erg handig als je een hele lange pagina moet bouwen.

Er zijn 3 opties om uw ontwerp op te slaan: verwijderen en een back-up maken. U kunt de ontwerpen die u hebt gemaakt opnieuw uitvoeren/ongedaan maken. Dit geeft u de mogelijkheid om de pagina als een soort A/B-test te doen met uw observaties. 

U kunt alle revisies op het revisietabblad bezoeken, dwz u kunt alle soorten ontwerpen bekijken die u tot nu toe op uw webpagina hebt geprobeerd en ook een eerdere versie selecteren als uw huidige webpagina u niet bevalt. 

Wil je veel verschillende functies uitproberen en kijken wat werkt? Geen probleem met Elementor; u kunt de pagina ontwerpen in de conceptmodus, alles uitproberen en de pagina later gebruiken nadat u helemaal klaar bent om de pagina te publiceren.

Hoe de Elementor Drag and Drop-functie te gebruiken

Alle functies voor slepen en neerzetten zijn beschikbaar aan de linkerkant van de pagina zodra u een pagina maakt.

Nadat je een pagina op WordPress hebt gemaakt en deze een titel hebt gegeven, klik je gewoon op bewerken met Elementor, waardoor je naar de live-editor van Elementor gaat, die eruitziet als de afbeelding hieronder.

In de tweede afbeelding hierboven kun je de opties voor slepen en neerzetten aan de linkerkant van de pagina bekijken. Er zijn veel widgets die je gewoon naar beneden hoeft te scrollen, of je kunt ook naar een widget zoeken met behulp van de zoekbalk bovenaan.

• Ontwerpsjabloon

U krijgt ingebouwde ontwerpsjablonen met Elementor. Niet alleen 5 of 10, maar Elementor biedt u meer dan 100 ontwerpsjablonen die gratis te gebruiken zijn en meer wanneer u upgradet naar de Pro-versie.

Hoe u het gewenste sjabloon voor de Elementor-sjabloonbibliotheek selecteert

Wanneer u voor het eerst de Elementor-bouwerpagina opent, ziet u iets zoals hieronder weergegeven:

De afbeelding is afkomstig van de Elementor-website en spreekt voor zich.

Zodra u op de optie Map klikt, ziet u een pop-up hieronder.

• widgets

De drag-and-drop-widgets die bij Elementor worden geleverd, zijn legio. Sommige ervan zijn:

• Binnenste sectie: Laten we een sectie in tweeën verdelen.
• Kop: plaats dit veld op uw webpagina om een ​​pakkende kop in te voegen
• Afbeelding: Plaats afbeeldingen op uw webpagina met behulp van deze widget
• Teksteditor: voer tekst in uw webpagina in met behulp van een teksteditorwidget
• Video: u kunt een videowidget gebruiken om kwaliteitsvideo's op uw pagina te plaatsen. Het zal de gebruikerservaring vergroten
• Knop: Call-to-actions zijn voor bijna de hele site erg belangrijk. Met knoppen kunt u de call-to-actions op uw pagina plaatsen en deze koppelen aan de landingspagina van uw product.
• Sterwaardering: Sterwaardering is nuttig voor elke e-commerce website om een ​​beoordeling te geven aan verschillende producten die deze te bieden heeft.
• Divider: Helpt uw ​​webpagina inspringen en genereert witruimte om de gebruikerservaring te verbeteren.
• Pictogrammen: Met de pictogramwidget kunt u pakkende pictogrammen van sociale media en verschillende diensten plaatsen om uw pagina er aantrekkelijker uit te laten zien.
• Teller: Creëer een afteltimer voor uw producten of beperkte aanvullende diensten om urgentie te creëren.
• Getuigenissen: voeg getuigenissen toe over uw producten en diensten om vertrouwen op te bouwen bij de bezoekers van uw website.

Daarnaast zijn er nog veel meer widgets zoals afbeeldingscarrousel, basisgalerij, tabbladen, shortcodes, HTML, menubalk, etc. Zorg ervoor dat je alle functies bekijkt nadat je de plug-in op WordPress hebt geïnstalleerd.

Bekijk hieronder enkele van de widgets die Elementor heeft in de afbeelding.

Elementor-widgets gebruiken

Voor het gebruik van Elementor-widgets:

Ga naar het dashboard van Elementor en kijk aan de linkerkant van de pagina. Er zijn een aantal widgets die u naar uw webpagina kunt slepen en neerzetten en waarmee u aan uw werk kunt beginnen.

• Responsief ontwerpen en bewerken

Nu de mobile-first indexregel in de schijnwerpers komt te staan, zorgt Google ervoor dat de mobielvriendelijke site alleen maar hoger scoort op Google, en hetzelfde is nu het geval met andere SERP’s. 

Met Elementor hoeft u zich geen zorgen te maken over de mobielvriendelijkheid, aangezien alle sjablonen, gratis of betaald, zowel mobiel als tablet- en desktop-responsief zijn. U kunt ook bewerken welke functies uw gebruikers te zien krijgen wanneer ze toegang krijgen vanaf mobiel of desktop. 

U kunt ze op beide apparaten verschillende ervaringen bieden, hoewel dit niet wordt aanbevolen, omdat dit soms verwarring kan veroorzaken in de hoofden van uw gebruikers over het merk.

Hoe u de mobiele responsiviteit van uw webpagina's kunt zien

Onderaan de webpaginabouwer ziet u linksonder drie pictogrammen waarmee u uw webpagina kunt bekijken via desktop, tablet en mobiel. De site zal er voor andere gebruikers precies hetzelfde uitzien nadat u uw website heeft gepubliceerd.

Workflow-functies:

• Geen coderingsvereiste

U hoeft geen expert te zijn of zelfs maar een beetje kennis te hebben van coderen tijdens het gebruik Elementor. Alle hierboven genoemde widgets zijn te slepen en neer te zetten, en u kunt er eenvoudig een hoogwaardige en stijlvolle webpagina mee maken. 

De Elementor zorgt zelf voor het codeergedeelte. Niet alleen dit, de gebruikte code is geoptimaliseerd en ingekort, zodat deze de laadtijd van uw webpagina verkort, een zeer belangrijke factor om bovenaan te komen.

• Navigatiebalk

Met behulp van navigatie kunt u de structuur zien die u op de webpagina heeft ontworpen, dat wil zeggen de volgorde van uw pagina en de flow. U kunt de widgets desgewenst ook via de Navigatorbalk wijzigen, verwijderen en dupliceren.

Navigatiebalk gebruiken

Om de Navigator te gebruiken, klikt u met de rechtermuisknop op de backend van uw webpagina die is geopend met Elementor en klikt u op Navigator. Er verschijnt een pop-up, zoals weergegeven in de onderstaande afbeelding.

• Sneltoetsen

Sneltoetsen zijn de sneltoetsen naar de belangrijkste widget die aanwezig zijn in het Elementor-dashboard. Bekijk de afbeelding om enkele van de vooraf ingestelde sneltoetsen te zien.

• Inline bewerkingsfunctie

Met Elementor hoeft u uw inhoud niet elders te schrijven en de stijl ervan te kopiëren, plakken en bewerken. U kunt direct in de gewenste stijl op het WordPress-dashboard typen en zo uw kostbare tijd besparen.

Ontwerpkenmerken

• Globale lettertypen

Met behulp van Elementor kunt u met één klik een bepaalde lettertypestijl voor uw hele website instellen. Het maakt niet uit of het een kop, een alinea, een citaat of zelfs een call-to-action is. 

• Globale kleuren

Op dezelfde manier kunt u, wanneer het algemene lettertype is ingesteld, desgewenst de kleur van de gehele websitetekst hetzelfde instellen.

• Achtergrondverlopen

Met de kleurverloopfunctie kunt u de achtergrond die u voor elk blok en zelfs uw startpagina instelt, verlichten. Deze verloopkleuren zijn van toepassing op elke pagina op uw website.

• Achtergrondvideo's

Met Elementor kun je video's als achtergrond gebruiken. Video's op de achtergrond kunnen uw webpagina echt verlichten.

Ontwerpfuncties gebruiken in Elementor

Alle bovengenoemde functies zijn eenvoudig te vinden in het Elementor-dashboard en u kunt deze gebruiken door eenvoudigweg te klikken en te testen wat er goed uitziet op uw webpagina.

• Andere mogelijkheden
• Achtergrondoverlay toepassen
• Zet diavoorstelling op achtergrond
• Maak een canvas om uw pagina er levend uit te laten zien
• Maak gebruik van overvloeimodi
• CSS-stijlfilters
• Vorm verdelers
• Box schaduw
• pictogrammen
• Exporteer SVG-pictogrammen van andere websites

Lay-outfuncties

U kunt de lay-out van de webpagina wijzigen en optimaliseren zodat deze er goed uitziet met verschillende functies Elementor biedt, zoals sectiebreedte en -hoogte, kolombreedte, opening en de positie ervan.

U kunt ook de marges en opvulling aanpassen, wat een zeer belangrijke functie op een webpagina is. 

Elementor Pro Plan-functies

Basisbenodigdheden

Naast de gratis functie heeft Elementor Pro nog 2 extra functies te bieden.

1. Pop-upbouwer

U kunt pop-ups maken om u aan te melden, voor een tijdelijke aanbieding, en ook intentie-pop-ups afsluiten om uw omzet te verhogen en uw pagina aantrekkelijker te maken.

De functie is, net als andere widgets, aanwezig in het dashboard van Elementor.

Met Pop-upbuilder kunt u de volgende pop-ups bouwen:

• E-mail Abonnement
• Pop-ups met inlogformulier
• Promotie- en verkoopbannerpop-ups
• Lood vastleggen
• Inhoud vergrendelen en pop-ups onthullen
• Mededelingen
• Exit Intent
• Welkomstmat-type pop-ups
• Gerelateerde producten en upsells

2. Themabouwer

Met Elementor Pro heeft u volledige controle over alle functies die u op uw website gebruikt. U mag de 404-pagina's ontwerpen en uw gebruikers naar de pagina van uw keuze leiden. 

U kunt de kop- en voettekst beheren op dezelfde pagina waarop u ontwerpt. Met krachtige WooCommerce-integratie kunt u ook uw productpagina’s optimaliseren.

Ontwerpkenmerken

1. Aangepaste CSS

Bij elke widget die u toevoegt, kunt u een aangepast CSS-fragment toevoegen om de inhoud persoonlijker en aantrekkelijker te maken. Maar om deze functie te gebruiken, moet u een behoorlijke kennis van CSS hebben. 

Het gebruiken ervan zonder enige voorkennis kan ook naar het zuiden gaan. Dus als u niet over de vaardigheden beschikt, kunt u beter wegblijven van de Custom CSS-functie.

2. Bewegingseffecten

Je kunt geweldige animaties toevoegen en je website een cartoonachtig karakter geven. Dit helpt een specifieke doelgroep aan te trekken en kan soms zeer nuttig zijn. 

Ontwerpfunctie gebruiken in Elementor

Nou, het is geen rocket science. Net als bij andere widgets kunt u door het dashboardpaneel scrollen en ernaar zoeken, of u typt gewoon de naam van de widget in het zoekpaneel.

Marketing

Deze functies ontbreken in de gratis versie van Elementor.

• Formulier Widget

Met de Elementor-formulierenbouwer kunt u diverse wijzigingen aanbrengen en uw formulieren interessant en aantrekkelijk maken om in te vullen.

• Kies vrij eenvoudig de gewenste lay-out en de afstand.
• 10+ velden om uit te kiezen, die u in uw formulier wilt hebben.
• Kies uit talloze kleuren en typografie die passen bij het ontwerp en het kleurenschema van de webpagina.
• U kunt ook dynamische formulieren maken
• Als u een lang formulier nodig heeft met de formulierbouwer van Elementor, kunt u dit bouwen en opdelen in meerdere stappen, zodat de gebruikers het op een gemakkelijke manier kunnen invullen.

• Getuigenis Carousel Widget

• U kunt de vooraf ontworpen sjablonen gebruiken die bij de Pro-versie van Elementor worden geleverd en een verbluffende getuigeniscarrousel voor uw bedrijf maken om meer conversies te genereren.
• Stem de inhoud en de lay-out van de carrousel op elkaar af. Heb volledige controle over het uiterlijk en de uitlijning van de carrousel.
• De aanpassingssjablonen in Elementor Pro zijn eenvoudig te gebruiken en bieden een gebruiksvriendelijke ervaring voor zowel degene die het bouwt als degene die het ziet.

Hoe u de Testimonial Carousel Widget gebruikt in Elementor Pro

• Zoek naar de Testimonial-schuifregelaar in de zoekbalk van het dashboard. Open de widget en u kunt direct beginnen met het maken van de slider. Er zijn twee skins om uit te kiezen: de standaard en de bubbel. Kies degene die je nodig hebt, afhankelijk van de styling.
• Lijn de lay-out van uw getuigenissen uit en voltooi deze, wat u kunt doen via 5 opties Afbeelding inline, afbeelding gestapeld, afbeelding hierboven, afbeelding links en afbeelding rechts.
• Kies de stijl en het ontwerp volgens uw kleurenschema en voeg inhoud toe aan de schuifregelaar.
• U kunt de dia's op de schuifregelaar automatisch afspelen, deze pauzeren wanneer gebruikers erop klikken, of een bepaalde tijd instellen voor de optie voor het wisselen van dia's. Ik gebruik liever de pauze bij de interactie-optie voor mijn getuigenissliders.
• Actielinks

Met Elementor Pro kunt u uw website verbinden met WhatsApp, Google Agenda en nog veel meer apps.

Actielinks gebruiken in Elementor Pro

• Ga naar uw Elementor dashboard en zoek naar linkvelden, een van de Pro-widgets die Elementor heeft.
• Kies de dynamische optie die beschikbaar is in de rechterbovenhoek van de widgetpop-up.
• Kies de contact-URL onder de actieoptie.
• Voeg alle details toe die de widget vraagt, en u bent klaar om uw contactplatform met uw website te integreren.

Themabouwer-functie

• Dynamische Content
• Maak gebruik van onberispelijke integratie om een ​​geweldige dynamische webpagina te maken.
• U kunt dynamische kleuren, afbeeldingen, zelfs websitelogo's en nog veel meer aan uw webpagina toevoegen.
• Het beste is dat u de lay-out van de dynamische inhoud die u hebt gemaakt, kunt opslaan en overal op de website kunt gebruiken.

Hoe u dynamische inhoud gebruikt met Elementor Pro

Ik zal het voorbeeld laten zien van het gebruik van een teksteditor en het dynamisch maken van de inhoud. Zorg ervoor dat je alle andere widgets ziet en probeer ze uit.

1. Open een teksteditor en typ de gewenste tekst op uw webpagina. Klik nu op het pictogram in de rechterbovenhoek van de editor, zoals weergegeven in de onderstaande afbeelding.
2. Wanneer u op het pictogram klikt, ziet u een lijst met opties die via een vervolgkeuzelijst verschijnt. Deze zijn onderverdeeld in post, archief en site. Kies de gewenste optie en ga direct aan de slag.
3. Om de titel van uw pagina verder te bewerken, klikt u op een pictogram, een moersleutel, zoals weergegeven in de onderstaande afbeelding.

In de vakken die in de afbeelding hierboven worden weergegeven, dwz vóór, na en fallback, moet u de titel vóór de wijziging plaatsen, een titel die na de wijziging moet komen en consistente inhoud die wordt weergegeven in de plaats van dynamische inhoud. als er geen voor en na de titel is.

Andere functies voor het bouwen van thema's in Elementor Pro

• Weergaveconditie: u kunt beslissen wat u wilt laten zien en waar u wilt laten zien
• Kop- en voettekst: Met eenvoudig slepen en neerzetten kunt u de kop- en voettekst van uw webpagina aanpassen
• Sticky header: Voeg een sticky header toe aan specifieke pagina’s of voor uw hele website wereldwijd.
• 404-pagina: Ontwerp een aangepaste 404-pagina en stuur uw gebruikers en publiek door naar de gewenste pagina.

Thema inhoud

• Navigatie Menubalkwidget

• Er zijn veel stijlopties waaruit u kunt kiezen voor uw navigatiebalk.
• Deze stijlen reageren op alle apparaten en u kunt ze op de mobiele versie bekijken en indien nodig de nodige wijzigingen aanbrengen.
• U kunt uw navigatiebalk animeren met animatie- en zweefeffecten. Het verlicht je pagina echt.
• Je kunt kiezen hoe je het menu plaatst, dat wil zeggen horizontaal, verticaal, het op volledig scherm bekijken, misschien de hamburgeroptie proberen.

Hoe de navigatiemenubalkwidget te gebruiken

1. Ga naar het dashboard en zoek naar de menubalk
2. U kunt uw menu instellen op horizontaal, verticaal of een vervolgkeuzelijst, afhankelijk van de stijl die goed bij uw website past.
3. U kunt ook enkele en dubbele lijnen onder elke menu-inhoud toevoegen om de tekstkleur via het dashboard te markeren en zelfs te wijzigen.

• Zoekwidget

De zoekwidget wordt geleverd met drie skins: de standaardwidget, minimale zoekwidget en zoekwidget op volledig scherm.

U kunt het ontwerp van de zoekbalk en de knop aanpassen aan de stijl van uw webpagina.

Hoe de zoekbalk te gebruiken met Elementor Pro

Ga naar het Elementor-dashboard en zoek naar de zoekbalkwidget, kies de gewenste stijl, standaard, volledig scherm of minimaal en wijzig de typografie en kleuren van de zoekbalk zodat deze bij uw kleurthema passen.

• Andere thema-inhoudsfuncties die u bij Elementor Pro krijgt

• Berichtwidget: Pas het uiterlijk van de zijbalk aan door uw recente berichten daar te plaatsen.
• WordPress commentaarwidget: Met deze widget kunnen de lezers commentaar geven op het bericht dat u heeft geschreven.
• Portfoliowidget: Als u veel portfolio's wilt weergeven, gebruik dan deze portfoliowidget om ze in een innovatieve en aantrekkelijke stijl weer te geven.

Al deze functies zijn beschikbaar in het Elementor-hoofddashboard, vergelijkbaar met andere widgets. Zorg ervoor dat je al deze functies bekijkt.

Elementor Pro-prijzen

user review 

Quick Links:

• Elementor Pro-zelfstudie
• BESTE ELEMENTOR TOEVOEGEN
• Elementor Menu-anker
• Duda versus Elementor

Veelgestelde vragen over WordPress Elementor-zelfstudie

Lees ook:

• Beaver Builder versus Divi
• Beaver Builder versus Elementor

Conclusie: WordPress Elementor-tutorial 2024

Een van de toonaangevende software voor het ontwerpen van webpagina's, Elementor, is een betrouwbaar en levendig platform om uw website op te bouwen. Van het maken van een eenvoudige blogpagina tot het creëren van een stijlvolle en adembenemende productlandingspagina, het kan allemaal met Elementor.

De Pro-versie van Elementor heeft eindeloze functies om mee te werken en uw website naar een nieuw niveau te tillen. Het geeft u ook de vrijheid om volledige controle over uw website te hebben.

U hoeft geen codeur te zijn om Elementor te gebruiken. Het gebruik van Elementor is net zo eenvoudig als het leren klikken en slepen en neerzetten van functies.

Ja, het kost wat tijd om alle functies te zien en te weten welke functies nuttig zijn voor uw website, maar de tijd die u aan Elementor besteedt zal de moeite waard zijn, dat kan ik u verzekeren.

Dus probeer Elementor eens en laat me je ervaringen weten door hieronder te reageren! 

Populaire video's van Elementor

Elementor op sociale media

Page Builder Summit 2021 (@top_camp) begint morgen! Ontvang uw GRATIS ticket en praat met meer dan 35 experts uit de sector, waaronder @bpines1 . Ik ben blij dat ik dit geweldige evenement mag sponsoren. Zie je daar! 💻🎉https://t.co/gDtFpUJLBH

— Elementor (@elemntor) 9 mei 2021

Doe een stap opzij en verwelkom onze Showcase van april 2021. 🏆🌷 Deze maand juichen we 10 ontwerpbureaus van over de hele wereld toe. Deze gevarieerde collectie vertegenwoordigt het Elementor-webcreatietalent over de hele wereld. 🌎 https://t.co/bwwOUDQCuu

— Elementor (@elemntor) 19 mei 2021