Wat is Elementor en waar wordt het voor gebruikt?
Elementor is een inmiddels toonaangevende plug-in voor het bouwen van pagina’s met behulp van de zogeheten drag-and-drop optie in WordPress. In tegenstelling tot traditionele WordPress-editors die vertrouwen op een meer op tekst gebaseerde en backend-georiënteerde aanpak, biedt Elementor een live frontend-editor waarmee u uw pagina’s in realtime kunt ontwerpen. Dit betekent dat u precies kunt zien hoe uw wijzigingen voor gebruikers zullen verschijnen op het moment dat u ze aanbrengt. Hierdoor wordt het creëren van een website veel leuker, sneller en gemakkelijker. Elementor werd gelanceerd in 2016 en werd snel populair vanwege het intuïtieve ontwerp, de uitgebreide aanpassingsmogelijkheden en de mogelijkheid om visueel aantrekkelijke pagina’s te maken zonder veel (technische) problemen en ingewikkelde functionaliteiten. Hierdoor is de plug-in dus ook geschikt voor beginnende gebruikers en ontwerpers.
De belangrijkste kenmerken en functionaliteiten van Elementor
Elementor valt op door de uitgebreide reeks aangeboden functionaliteiten, voor zowel standaard als de wat meer geavanceerde ontwerpbehoeften. Zoals we hierboven al hebben uiteengezet, maakt deze plug-in het ontwerpen van een website supersimpel. Hieronder vindt u een korte opsomming van enkele van de kernfunctionaliteiten.
1. De drag-and-drop editor
Het hoofdkenmerk van Elementor is de gebruiksvriendelijke drag-and-drop-editor. ‘Drag-and-drop’ betekent letterlijk sleep en plaats. Met behulp van deze functie kunt u dus snel elementen op uw pagina toevoegen en herschikken. Om elementen aan uw website toe te voegen, sleept u deze gewoon vanuit de zijbalk. Of het nu om een knop, afbeelding, video of tekst vak gaat: het plaatsen van elementen is snel en eenvoudig.
2. Live design en inline bewerkingsopties
Met Elementor kunt u uw wijzigingen meteen in realtime zien, dankzij de live ontwerpfunctie. Het ontwerpproces wordt eenvoudiger gemaakt met deze visuele benadering, waardoor ook de noodzaak van vele previews en ook backend naar frontend wisselingen overbodig wordt. Met de optie ‘inline bewerken’ kunt u tekstitems wijzigen door er eenvoudigweg op te klikken, waardoor wijzigingen aan de inhoud worden versneld en simpeler worden gemaakt.
3. Vooraf ontworpen sjablonen en blokken
Elementor biedt tevens een uitgebreide bibliotheek met vooraf ontworpen sjablonen (templates) en blokken (blocks), die u kunt gebruiken om het ontwerpproces te vergemakkelijken. Er is een verscheidenheid aan templates beschikbaar die toegespitst zijn op uiteenlopende doelen: van zakelijke pagina’s tot persoonlijke blogs. U kunt bijvoorbeeld een sjabloon importeren, aanpassen aan uw persoonlijke behoeften en deze met minimale inspanning direct publiceren.
4. Responsieve ontwerptools
Responsief betekent dat uw website op verschillende soorten apparaten goed wordt weergegeven. Het creëren van een responsieve website is in de huidige door mobiele apparaten gedomineerde wereld eigenlijk niet meer weg te denken. Elementor bevat handige tools voor responsief ontwerp, waarmee u de instellingen voor verschillende apparaten en schermformaten kunt aanpassen. U kunt overschakelen naar mobiele of tabletweergaven en uw lay-out verfijnen, zodat uw site er op alle denkbare apparaten geweldig uitziet.
5. Uitgebreide stijlopties
Elementor biedt daarnaast uitgebreide stijlopties waarmee u de volledige controle heeft over het uiterlijk en de uitstraling van uw website. U kunt bijvoorbeeld voor elk element opties zoals de kleuren, lettertypen, marges, opvulling, achtergronden en randen aanpassen. Voor degenen met meer kennis op het gebied van website ontwerp ondersteunt Elementor ook aangepaste CSS voor meer styling. Hier gaan we later in het artikel iets dieper op in.
6. Widgets & Add-Ons
Er is ook nog eens een breed scala aan widgets beschikbaar in Elementor, variërend van eenvoudige elementen zoals kopjes en foto’s tot complexe functies zoals formulieren en carrousels. Extra widgets, waaronder mediacarrousels, prijstabellen en WooCommerce-elementen, zijn beschikbaar in de premium editie van Elementor: Elementor Pro. Bovendien breidt een overvloed aan add-ons van derden de mogelijkheden van Elementor nog verder uit. Hieronder zullen we de opties van Elementor Pro uitgebreid beschrijven.
De extra opties van Elementor Pro
Hoewel de gratis versie van Elementor al prima is voor het bouwen van standaard websites, biedt Elementor Pro extra functies die uw mogelijkheden aanzienlijk uitbreiden. Er zijn niet alleen extra functies, want de reguliere functies zijn ook vaak veel uitgebreider. Hieronder lichten we toe, wat u precies kunt verwachten van Elementor Pro.
1. De themaontwerper
Met de themaontwerper (theme builder) van Elementor Pro kunt u uw hele website, inclusief kop-, voetteksten en archiefpagina’s, rechtstreeks binnen Elementor ontwerpen. Deze functie biedt de mogelijkheid om een uniform design te hanteren voor alle pagina’s op uw site en dit biedt u een veel grotere flexibiliteit in vergelijking met de standaard thema opties.
2. Geavanceerde widgets
Elementor Pro-gebruikers krijgen ook toegang tot geavanceerde widgets zoals formulieren, sliders en WooCommerce-elementen. Met deze widgets kunt u eenvoudig functionaliteit aan uw site toevoegen, zoals interactieve formulieren en productdisplays. Dit biedt veel meer mogelijkheden dan alleen het hanteren van standaard widgets, hetgeen de kwaliteit van uw website alleen maar ten goede komt.
3. Marketing tools
Elementor Pro bevat ook vele handige tools voor het creëren en invoegen van extra opties zoals pop-ups, integratie met e-mailmarketingdiensten en het toevoegen van widgets voor sociale media. Met deze functies kunt u gemakkelijker contact maken met uw publiek, leads verzamelen en uw inhoud effectief promoten.
4. Custom CSS
Zoals we eerder al hebben aangegeven, kunt u met Elementor Pro ook custom CSS toevoegen aan individuele elementen, of zelfs aan de hele pagina. Op deze manier kunt u een zeer specifieke stijl vormgeven en meer controle krijgen over de visuele elementen op de pagina. Hiervoor is echter wel enige kennis op het gebied van websiteontwerp onmisbaar. Daarentegen kunt u door deze functie uw website wel optimaal aanpassen aan uw wensen en voorkeuren. Desgewenst kan Rickid dit ook voor uw doen, wanneer u bepaalde delen van uw website wenst te professionaliseren.
De specifieke voordelen van het gebruik van Elementor
De functies van Elementor bieden diverse voordelen voor WordPress-gebruikers. WordPress biedt tegenwoordig veel soorten plug-ins voor het creëren van een mooie website, maar Elementor onderscheidt zich op een aantal vlakken aanzienlijk. Hieronder worden een aantal van deze voordelen uitgelegd.
1. Gebruiksvriendelijke interface
Voor enigszins onervaren gebruikers is dit misschien wel het grootste voordeel. De makkelijk te gebruiken interface van Elementor maakt de plug-in toegankelijk voor gebruikers van alle vaardigheidsniveaus. De functionaliteit voor drag-and-drop, live preview en inline bewerken vereenvoudigen het ontwerpproces, waardoor het gemakkelijk wordt om complexe lay-outs te maken zonder de nodige kennis en ervaring op het gebied van websiteontwerp.
2. Tijdsefficiëntie
Tijd is geld, dus de mogelijkheid om tijd te besparen is op alle fronten altijd welkom. Elementor stroomlijnt het webontwerpproces doordat u wijzigingen direct kunt zien en snel aanpassingen kunt doorvoeren. De vooraf ontworpen templates en blocks kunnen de tijd die wordt besteed aan het helemaal opnieuw maken van een pagina aanzienlijk verkorten. Ook kunt u veranderingen toepassen op de hele site, waardoor u niet elk element afzonderlijk hoeft te veranderen.
3. Flexibiliteit en maatwerk
Met Elementor heeft u de volledige controle over het ontwerp van uw website. Dankzij de uitgebreide aanpassingsmogelijkheden kunt u elk gedeelte van uw website en afzonderlijke pagina’s aanpassen naar uw persoonlijke wensen en behoeften. Of u nu een eenvoudige landingspagina of een complexe site met meerdere pagina’s nodig heeft: met Elementor is dat meer dan mogelijk.
4. Kosten efficiëntie
De gratis versie van Elementor biedt al een uitgebreide set tools voor het bouwen van professioneel ogende websites. Voor gebruikers die geavanceerde functies nodig hebben, biedt Elementor Pro extra functionaliteiten tegen een redelijke prijs, waardoor de plug-in een goede oplossing is om hoogwaardig websites te ontwerpen tegen een schappelijke prijs.
5. Updates en klantenondersteuning
Elementor wordt actief ontwikkeld en de plug-in wordt tevens regelmatig bijgewerkt met nieuwe functies en verbeteringen. De Elementor-community is ook levendig en ondersteunend, met uitgebreide documentatie, tutorials en een nuttig gebruikersforum. Loopt u even vast? Dan kan deze community u van vele handige oplossingen voorzien, waar u zelf prima mee aan de slag kunt zonder lange wachttijden en ingewikkeld onderzoek.
Starten met het gebruiken van Elementor
Elementor installeren
Hieronder lichten we kort toe hoe u precies kunt starten met het gebruikmaken van Elementor. Om te beginnen zult u Elementor natuurlijk moeten installeren en bekend worden met enkele basisfuncties. Volg daartoe de onderstaande stappen:
Uw eerste pagina maken
De interface leren begrijpen
De Elementor-interface bestaat uit een groot voorbeeldgebied in het midden, een zijbalk aan de linkerkant en een bovenste balk. De zijbalk bevat elementen die u naar de pagina kunt slepen, en de bovenste balk bevat opties zoals ‘Opslaan’ en ‘Voorbeeld’. U kunt gerust met deze opties oefenen, totdat u er handigheid in krijgt. Dit gaat bijzonder snel, gelet op het gebruiksgemak van de plug-in.
Bouw allereerst uw lay-out
Met het lay-outsysteem van Elementor kunt u een verscheidenheid aan pagina-ontwerpen maken, van eenvoudig tot complex. Zo kunt u uw pagina effectief opbouwen en structureren. Via ‘Secties toevoegen’ kunt u bijvoorbeeld nieuwe secties toevoegen aan een pagina. Klik hiertoe op de knop ‘+’ in de editor, om een nieuwe sectie toe te voegen. Secties vormen de basis van uw pagina-indeling, waardoor u de inhoud horizontaal kunt ordenen. Ook kunt u gebruik maken van kolommen. Nadat u een sectie heeft toegevoegd, kunt u het aantal gewenste kolommen kiezen. Kolommen helpen bij het verticaal organiseren van inhoud binnen een sectie. U kunt de kolombreedte aanpassen door de rand tussen kolommen te slepen.
De lay-out aanpassen en stijlelementen toevoegen
Na het creëren van uw gewenste lay-out, kunt u met Elementor elk element op uw pagina = aanpassen naar de lay-out die u nastreeft. Zo kunt u de inhoud van elk element aanpassen. Ieder element biedt inhoudsinstellingen in de zijbalk waar u de tekst, afbeeldingen, links en andere inhoud gerelateerde eigenschappen kunt aanpassen. U kunt bijvoorbeeld de tekst in een kop wijzigen of de URL van een knop bijwerken. Voorts kunt u met de stijlinstellingen spelen door op het tabblad ‘Stijl’ het uiterlijk van uw elementen aan te passen. U kunt bijvoorbeeld kleuren, lettertypen en formaten wijzigen en achtergrondafbeeldingen toevoegen. Gebruik de kleurenkiezer om aangepaste kleuren te selecteren of voer hexadecimale codes in voor een nauwkeurige kleurkeuze. Het tabblad ‘Geavanceerd’ biedt daarnaast instellingen voor zaken zoals marges, opvulling, bewegingseffecten en aangepaste positionering. U kunt ook aangepaste CSS toevoegen om meer controle te verkrijgen over het uiterlijk van uw elementen.
Uw pagina verbeteren met widgets
De uitgebreide widgetbibliotheek van Elementor verbetert de functionaliteit van uw website. Er zijn meerdere verschillende widgets te onderscheiden. Zo biedt Elementor essentiële basiswidgets zoals koppen, afbeeldingen, teksteditors en knoppen. Sleep een widget uit de zijbalk en zet deze neer in uw sectie of kolom. Pas de widget vervolgens aan met behulp van de inhoud- en stijlinstellingen in de zijbalk. Daarnaast kunt u gebruik maken van pro widgets in Elementor Pro. Dit zijn widgets zoals formulieren, dia’s en berichten. Deze widgets bieden geavanceerde functionaliteit en ontwerpopties, waarmee u uw website naar een hoger niveau kunt tillen. Ook kunt u kiezen uit zogeheten ‘Third-Party add-ons’. Er zijn veel add-ons van derden beschikbaar die extra widgets en functies bieden. Enkele populaire add-ons zijn bijvooebeeld Essential Addons voor Elementor, Ultimate Addons voor Elementor en ElementsKit.
Geavanceerde opties en best practices
Elementor bevat diverse functies die zeer dynamische en interactieve website ontwerpen mogelijk maken. Te denken valt aan globale widgets, waarmee u tijd bespaart omdat deze op meerdere pagina’s kunnen worden hergebruikt. Om een globale widget te maken, klikt u met de rechtermuisknop op een widget en selecteert u ‘Opslaan als globaal’. Hierdoor kunt u de widget één keer bewerken en wijzigingen op de hele site toepassen. Daarnaast kunt u gebruik maken van de themabouwer. Elementor Pro bevat een themabouwerfunctie, waarmee u de header, footer en andere algemene onderdelen van uw site geheel zelf kunt ontwerpen. Ga hiervoor naar ‘Templates > ‘Themabouwer’ om te beginnen met het maken van aangepaste templates.
Dynamische inhoud is nog zo’n fijne geavanceerde optie. Met Elementor Pro kunt u dynamische inhoud uit aangepaste velden invoegen, metagegevens posten en meer verwante zaken. Dit is handig voor het maken van templatepagina’s die verschillende inhoud ophalen op basis van de pagina, of het bericht dat wordt bekeken. Ook pop-ups zijn een handige optie. Elementor Pro bevat een pop-upbuilder, waarmee u aangepaste pop-ups kunt maken voor nieuwsbrieven, aankondigingen en promoties. Navigeer naar ‘Templates’ > ‘Pop-ups’ om uw pop-ups te maken en te beheren. Denk ook aan best practices: houd bij het ontwerpen met Elementor rekening met de prestaties van uw site. Gebruik geoptimaliseerde afbeeldingen, beperk het gebruik van zware scripts en vermijd onnodige plug-ins om ervoor te zorgen dat uw site snel en responsief blijft.
Responsief ontwerp en optimalisatie voor mobiele apparaten
Ontwerpen voor verschillende apparaten is tegenwoordig van essentieel belang in de huidige mobiele wereld. Veruit de meeste mensen bekijken een website eerst op hun mobiel, voordat ze eventueel naar een laptop overschakelen. Soms zit iemand immers in de trein, of in een café, terwijl diegene toch graag informatie opzoekt. Om succesvol te zijn zult u hier zeker rekening mee moeten houden. Elementor biedt een breed scala aan tools om uw site responsief te maken. Allereerst heeft u de optie ‘Responsief bewerken’. Klik hiertoe op het pictogram voor de responsieve modus onder aan de Elementor zijbalk om te schakelen tussen desktop-, tablet- en mobiele weergaven. Pas de instellingen voor elk apparaat afzonderlijk aan, om een consistente en geoptimaliseerde gebruikerservaring te garanderen.
Uw site publiceren en onderhouden
adat uw ontwerp is voltooid, is het publiceren van uw site de laatste stap. U kunt daartoe beginnen met de optie ‘Voorvertoning en publicatie’. Voordat u uw pagina live plaatst, kunt u een voorbeeld ervan bekijken met behulp van het oogpictogram onder aan de Elementor zijbalk. Als u tevreden bent, klikt u op de knop ‘Publiceren’. U kunt ook zichtbaarheids- en planningsopties instellen. Daarnaast kunt u ook livepagina’s bewerken wanneer uw site eenmaal online is. Om een livepagina te bewerken, gaat u naar uw WordPress-dashboard, zoekt u de pagina die u wilt bijwerken en klikt u op ‘Bewerken met Elementor’. Hierdoor wordt de pagina in de Elementor-editor geladen, zodat u in realtime wijzigingen kunt aanbrengen en opslaan. Als laatste raden wij ook zeker regelmatige updates aan. Houd Elementor en eventuele gerelateerde plug-ins up-to-date om te profiteren van de nieuwste functies en beveiligingsverbeteringen. Regelmatige updates helpen ook compatibiliteitsproblemen met WordPress en andere plug-ins te voorkomen.
Tarieven voor Elementor Pro
Hoewel u natuurlijk gebruik kunt maken van de gratis versie van Elementor, kunnen wij ons voorstellen dat u misschien behoefte heeft aan geavanceerde opties. Elementor Pro biedt daartoe abonnementen op maandbasis, die speciaal zijn ingericht op uw specifieke behoeften. Hieronder vindt u de actuele tarieven en wat u daarvoor precies krijgt.
Elementor Pro Essential € 4,99/maand | Elementor Pro Advanced Solo € 6,99/maand | Elementor Pro Advanced € 8,25/maand | Elementor Pro Expert € 16,99/maand |
|---|---|---|---|
1 site | 1 site | 3 sites | 25 sites |
Support | Support | Support | Support |
57 Widgets | 86 Widgets | 86 Widgets | 86 Widgets |
10 Cloud templates | 20 Cloud templates | 30 Cloud Templates | 5000 Cloud Templates |
Theme builder | Theme builder | Theme builder | Theme builder |
Dynamic content | Dynamic content | Dynamic content | Dynamic content |
Form builder | Form builder | Form builder | Form builder |
Pop-up Builder | Pop-up Builder | Pop-up Builder | |
Custom Code en CSS | Custom Code en CSS | Custom Code en CSS | |
E-commerce features | E-commerce features | E-commerce features | |
Collaboratieve notes | Collaboratieve notes | Collaboratieve notes |
Conclusie
Elementor voor WordPress stelt gebruikers in staat om eenvoudig professionele, visueel aantrekkelijke en responsieve websites te maken. Het maakt niet uit of u al expertise heeft op dit gebied of een beginner bent: de software is speciaal gemaakt om aan de wensen van elke gebruiker te kunnen volddoen.Dankzij opties zoals de drag-and-drop interface, de mogelijkheid om uw website live te bewerken en uitgebreide aanpassingsmogelijkheden is het een veelzijdige plug-in die geschikt is voor elk webproject. Of u nu uw eerste website bouwt of een bestaande website wilt verbeteren, Elementor biedt de tools en flexibiliteit die nodig zijn om wat u voor ogen hebt ook daadwerkelijk te bouwen in WordPress. Komt u er toch niet uit en wilt u liever een Elementor specialist inschakelen? Kijk dan hier wat Rickid voor u kan betekenen. Met jarenlange ervaring op het gebied van websiteontwerp en -onderhoud kan ik u binnen elke fase van het proces helpen en ondersteunen.
