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
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.
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.
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.
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.
- inconenlijst
- element
- in
- lijn
- Geweldig
Hier zie je het voortgangsbalk element / het afstandhouder element / het achtergrond slider element
Teller element
Overtuig met getallen
Tabs element mooi maken
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:
- Ontwerp een sectie op dezelfde of een andere pagina (de sectie is gecodeerd met de blauwe kleur - hierin kun je meerdere kolommen aanmaken)
- Bewaar de pagina - bekijk hem in de browser. Met de rechtermuis knop kun je nu de broncode van de pagina bekijken
- Vind de section (dit lijkt moeilijker dan het is. Zoek met CRTL +F enkele woorden op die je hebt gebruikt in deze sectie. Gevonden?
- Kopieer alles van (section) t/m (/section) en plaats dit in de tab tekst van je tekstbewerker. Moeilijk? Bekijk de video hiernaast.
Meij Webdesign
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
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
Website onderhoud
- website 8,- per maand
- webshop 15,- per maand
- Elementor PRO 0, – per jaar
(49,- per jaar) - Crocoblock Pro 0, – per jaar (
€130,- per jaar) - Astra pro 0,- per jaar
(59,-per jaar) - WPML 25,- per jaar
(50,-per jaar) - SEO Pro 25,- per jaar
(50,-per jaar)
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
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
Meij Webdesign
HTML elements
HTML code element
Net zoals bij tabs dus
- website 8,- per maand
- webshop 15,- per maand
- Elementor PRO 0, – per jaar
- Crocoblock Pro 0, – per jaar
- Astra pro 0,- per jaar
- WPML 50% korting
- SEO Pro 50% korting
