Wat je maakt met de gratis Elementor plugin

Elementor elementen

Op deze pagina vind je alle gratis Elementor elementen zoals die nu in Elementor zitten. Zo kun je zien wat je zoal met de gratis Elementor plugin kun doen.

Als je verder wilt met de Pro versie, bekijk dan deze pagina

Hiernaast zie je het normale afbeelding element. Ik heb hier een masker bij gebruikt. Het masker is een SVG die op maat is gemaakt met Affinity Photo. 

Als je met de muis erover heen gaat (hoveren) dan zie je een effect. En als je erop klikt dan ga je naar een andere pagina die over de pro versie vertelt.

Afbeeldingsbox Elementor

Deze afbeelding box heeft een bewegingseffect van fade-in links. De afbeelding staat op medium large 768 x 0 ingesteld
De tekst is centraal uitgelijnd. Dit is meestal minder strak.

Afbeeldingsbox Elementor

Deze Elementor afbeeldingsbox is aangepast met een standaard masker. Het masker is onder de tab "geadvanceerd te vinden"
De tekst is links uitgelijnd.

Afbeeldingsbox Elementor

Onderstaande is ook opgemaakt met de standaard afbeeldingsbox van Elementor. Zelf denk ik dat je een afbeeldingsbox beter zelf op kunt bouwen met de verschillende elementen. Je hebt dan veel meer invloed en je hoeft dan ook geen extra losse html of css toe te voegen.

Afbeeldingbox Elementor

Ook dit gemaakt met de gratis Elementor afbeeldingbox. Vervelende van deze boxen is dat j er geen standaar knop bij .

Afbeeldingbox Elementor


Ook dit gemaakt met de gratis Elementor afbeelding box.

Video element

Video afspelen
Video afspelen
Video afspelen
Video afspelen

Hiernaast de video element van Elementor. Als je erop klikt gaan ze als een popup open. Verder staat de privacy mode aan om geen cookies te laden voordta de video afspeelt. 

3 x Iconbox Elementor

De icon box heeft 3 instellingen en lijkt sprekend op de afbeeldingsbox. Je kunt ook je eigen svg icons gebruiken. Veel programma’s kunnen dat. Zelf gebruik ik Affinity Photo hiervoor.

B A C K P

Dit is de kop

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Dit is de kop

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

BACK PACK backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack

Dit is de kop

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Carrousel afbeelding Elementor

Met de carrousel afbeelding van de gratis Elementor plugin is goed in te gebruiken als je logo’s van andere bedrijven wilt showen. In dit geval zijn het 3 foto’s met lightbox en  masker.

Afbeelding galerij Elementor

Met de afbeelding galerij van Elementor is goed te gebruiken als je veel foto’s hebt. Er zijn niet veel instellingen, maar met het masker en de lightbox is het nog wel wat.

On Google 4,8
4.8/5
Hierboven zie je het sterren element. Deze kun je bijvoorbeeld ook op 4,8 laten zien. Met Elementor Pro kun je het nummer dan weer dynamisch ingeven en krijg je automatisch berekende score. En met wat vaste tekst ervoor of erna. Dit is de aanbevelingsbox van Elementormet een vaste instelling. Hieronder heb ik nog de sociale iconen box van Elemento neergezet.
John Doe
Designer

Krantenvorm met tekstbewerker element

De afstandhouder element wordt alleen gebruikt als je op een kolom een achtergrond foto plaats. En dan verder geen ander element plaatst. De afstandhouder heb je op de laptop en ipad niet nodig. Hij dient er alleen voor om de achtergrond foto ook op de mobiel te laten zien.

De kolommen die namelijk leeg zijn worden niet op de mobiel getoond.

Achtergrond foto’s zijn over het algemeen slecht voor het laden van je website. Dit is een beetje een technisch verhaal maar achtergrond foto’s worden in de css gedefinieerd. Css is de taal die de fonts / de kleuren en de onderlinge afstanden bepalen. Dus eigenlijk hoe je website eruit zien. 

Afstandhouder elementen zijn dus makkelijk maar in gebruik maar slecht voor de gebruiker ervaring.

Als er een ander element wordt gebruikt op een achtergrond foto dan kun je deze plaatsen door de margin  van het element zelf / de padding van de kolom / de verticale uitlijning in de kolom / de horizontale uitlijning in de kolom / de onderlinge widget afstand (ook deze is te vinden in de layout tab van de kolom)

Tot slot: deze tekst is geschreven in krant vorm. Dus meerdere kolommen naast elkaar waarbij de tekst gewoon doorloopt van kolom naar kolom. Deze kranten optie zit standaard in de gratis Elementor. Namelijk in de tekstbewerker element.  Onder de inhoud tab, en dan net onder de invoer van de tekst zie je een tekst “kolommen” staan. Die staat normaal op standaard maar kun je dus ook op 2 /3 4 of meer zetten.

HTML
Webdesigner 88%
CSS
Webdesigner 91%
WordPress
Webdesigner 99%

Hier zie je het voortgangsbalk  element / het afstandhouder element / het achtergrond slider element

Teller element

Overtuig met getallen

50
nieuwe websites
4
klanten
0
pagina's
0
medewerkers

Tabs element mooi maken

Het innersectie element wordt gebruikt in een kolom. Ik gebruik hem hieronder om tekst en iconen lijst naast elkaar te zetten. Een ander voorbeeld is bij de video sectie hierboven. In de Elementor Pro gebruik je deze vorm veel in het menu.

HIeronder staat het tab element. Bij dit tab element heb je eigenlijk alleen de mogelijk om tekstbewerker aan te passen. Je kunt dan een shortcode erin zetten om iets moois te krijgen. Of je kopieert een stuk html code hierin. Dit gaat in de volgende stappen:

START HIER

Unieke Bedrijfswebsite

Jouw unieke bedrijfswebsite naar jouw wensen gemaakt. En natuurlijk met de functionaliteit die jouw bedrijf nodig heeft.

De standaard website, is op maat ontworpen en heeft alle of een keuze uit functionaliteiten die hiernaast, in het blauwe kader, zijn opgenoemd.

Website op maat prijs: 750,- ex btw

Deze unieke website heeft inclusief:

  • Ontwerp
  • Juiste kleur / lettertype / structuur 
  • Contact formulier
  • Mega-menu’s
  • Pop-ups
  • Koppeling met mailchimp
  • SEO instellingen
  • totaal 10 bladzijden
  • Meerdere menu’s
  • Het op maat maken van je foto’s
  • Details uit foto’s knippen

STOP HIER

FAQ's

met structured data
Het eerste accordion element staat open. Hou deze kort

Klik je op het 2de accordeon element, dan sluit de vorige. Dit is erg prettig

De icons van je accordion element kun je aanpassen naar behoefte. Elementor komt met een uitgebreide icon bibliotheek. Wil je een snelle pagina, dan gebruik je de eigen svg icons. Deze zijn tevens mooier en origineler. SVG icons kun je simpel maken met Affinity photo. Of met affinity designer als je van tekenen houdt.

Accordeon Element komt met de mogelijkheid om deze vragen direct om te laten zetten naar structured data. IN de vorm van het FAQ schema (frequent ask questions). Jouw vraag en antwoord worden zo begrijpelijk voor de robot van Google.

Ja, het accordion element lijkt heel veel op het Tabs element. Het heeft niet alleen hetzelfde gedrag, maar ook hetzelfde venster om je antwoord te formulieren. 

Ja, je kunt gewoon per accordion 1 foto laten zien.(of een video maar dat kon weleens lastiger zijn). Toch denk ik dat tabs element dan geschikter is omdat je dan  het menu links van je foto’s kunt plaatsen.

Bij de wissel staan alle elementen in het begin allemaal gesloten. Dit staat natuurlijk mooier.

Zodra je op de 2e wissel klikt, gaat wissel 1 niet automatisch dicht maar blijft open staan. De naamgeving slaat dus op het klikken. Bij de eerste klk gaat de wissel open. Bij de 2e klik op dezelfde wissel gaat deze wissel dicht. Zelf zie ik dat als een nadeel omdat je bezoeker dat dichtklikken waarschijnlijk niet doet. Daardoor moet deze meer scrollen om bij de volgende vraag / antwoord te komen.

Ja, dit is hetzelfde als bij het accordion element. Je kunt de uitgebreide iconen bibliotheek dit Elementor meelaadt gebruiken of je eigen icons kopen/ontwerpen uploaden. Deze moeten dan wel in het SVG formaat zijn.

Ja dit wissel element van Elementor heeft ook de mogelijkheid om de FAQ als structured data toe te voegen aan je website. Dus dat is ook hetzelfde als bij het accordion element.

Ja, dit werkt hetzelfde als bij het Tabs of het accordion element. Vraag is natuurlijk of je dat zou moeten willen.

Contact elements

zoals contact mogelijkheden

Meij Webdesign

Nieuwe Langendijk 56
2611VL Delft
KVK: 456372819
BTW: 456372819B81
BACK PACK

HTML elements

HTML code element

HTML code kun je zelf schrijven, maar om het goed responsief te krijgen is het beter om eerst in Elementor een sectie te maken.

Net zoals bij tabs dus
Onderhoudscontract:
  • website 8,- per maand
  • webshop 15,- per maand
Voordelen bij een  onderhoudscontract:
  • Elementor PRO 0, – per jaar
  • Crocoblock Pro 0, – per jaar
  • Astra pro 0,- per jaar
  • WPML 50% korting
  • SEO Pro 50% korting
Prijzen zijn ex btw.
BACK PACK backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack backpack

Soundcloud elements

Facebook
Twitter
LinkedIn
Email
WhatsApp
Gilles van der Meij

Gilles van der Meij

Mijn naam is Gilles. Ik ben eigenaar van het WordPress ontwerp kantoor in hartje Delft. Ik maak nieuwe bedrijf websites. Maak je liever zelf je website? Ik geef een online WordPress cursus

De laatste blogs

beste lettertype voor je website

Lettertype kiezen voor je website

Het beste lettertype voor je website is afhankelijk van je bedrijf en wat je wilt uitdragen in je boodschap. Als je om je heen kijkt zul je merken dat een lettertype wordt gelinkt met een periode of een bedrijfstype. Een lettertype geeft emotie mee aan je tekst. Als je nieuw bent in het land van

Lees verder »
pagina kwaliteit PQ van je webpagina

Pagina kwaliteit (PQ) in Google

In 2021 heeft Google een SEO update uitgerold waarbij de pagina kwaliteit (PQ = page quality) van belang is. Bij een te lage kwaliteit van een pagina zal Google de pagina wel zien, maar niet opnemen in zijn zoekmachine index. Het niet opnemen in de index van Google betekent eigenlijk dat je pagina niet in

Lees verder »
Full site editor WordPress 5.9

WordPress 5.9 Full Site Editor

WordPress 5.9 is niet zo maar een kleine update. Nee, de lang aangekondigde full site editor (FSE) wordt hier geïntroduceerd. De FSE (full site editor) zie je alleen als het thema dit ook ondersteund. OP het moment van schrijven zijn dit er 45 van de 4500 gratis thema’s. Je kunt dit zien in de video.

Lees verder »
Scroll naar top

WP Cursus online

Bekijk 4 gratis video’s van de online WordPress cursus.

In de cursus zet je een WordPress website op met gratis tools.