Elementor popup maken

Popup Builder voor Elementor

Om een popup te maken met Elementor, begin je met het openen van de Popup Builder. Je vindt dit onder “Templates” in het WordPress dashboard, waarna je klikt op “Popups”. Dit brengt je naar de interface waar je je popups kunt beheren en nieuwe kunt aanmaken.

Nieuwe popup in Elementor aanmaken

In de Popup Builder klik je op “Add New” om een nieuwe popup te maken. Geef je popup een naam en klik op “Create Template”. Je wordt vervolgens naar de Elementor Editor gebracht, waar je kunt kiezen uit verschillende vooraf gemaakte popup-ontwerpen of je eigen ontwerp kunt maken vanaf nul.

Eenmaal in de Elementor Editor kun je je popup ontwerpen zoals je wilt. Voeg secties, kolommen, en widgets toe om de inhoud en lay-out van je popup te bepalen. Je kunt bijvoorbeeld een formulier, een aanbieding, of een melding in de popup plaatsen. Gebruik de “Style” en “Advanced” tabbladen om de vormgeving en het gedrag van je popup aan te passen.

Popup instellingen

Klik op het tandwiel-icoon linksonder in de editor om de popup-instellingen te openen. Hier kun je instellingen zoals de grootte, positie, en animatie van de popup aanpassen. Je kunt ook trigger-instellingen configureren, zoals het openen van de popup na een bepaalde tijd of wanneer een gebruiker naar een bepaald deel van de pagina scrollt.

Elementor popup publiceren

Als je tevreden bent met je popup, klik je op “Publish”. Je wordt nu gevraagd om de “Display Conditions” in te stellen, waarmee je bepaalt waar de popup wordt getoond, zoals op specifieke pagina’s of op de gehele site. Vervolgens kun je de “Triggers” instellen om te bepalen wanneer de popup verschijnt, zoals bij het laden van de pagina of wanneer de gebruiker op een specifieke knop klikt.

Na het publiceren kun je je popup altijd beheren via de Popup Builder. Hier kun je je popups bekijken, bewerken, of verwijderen. Zo kun je je popups flexibel aanpassen aan de behoeften van je WordPress website.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.

Een countdown timer in een WordPress website kan handig zijn om bezoekers te informeren over aankomende gebeurtenissen, productlanceringen, of tijdelijke aanbiedingen.

Met de Elementor pagebuilder kun je eenvoudig een countdown timer toevoegen aan je website. Dit doe je zo.

Voeg de countdown timer toe

1. Open je pagina: Open de pagina of het bericht waar je de countdown timer wilt toevoegen in Elementor.
2. Sleep de countdown widget: Zoek in de Elementor widgetbibliotheek naar de “Countdown” widget en sleep deze naar de gewenste plek op de pagina.

Stel de countdown timer in

1. Stel de einddatum in: Onder het “Content” tabblad, kun je de eindtijd instellen voor je countdown timer. Kies een datum en tijd waarop de timer moet aflopen.
2. Kies de acties na afloop: Onder “Actions After Expire” kun je instellen wat er gebeurt als de countdown afloopt. Je kunt kiezen voor acties zoals “Hide”, “Redirect”, of “Show Message”.
3. Stel de tijdseenheden in: Je kunt kiezen welke eenheden je wilt tonen (dagen, uren, minuten, seconden).

Pas de stijl aan

1. Aanpassen: Onder het “Style” tabblad kun je de stijl van de timer aanpassen. Hier kun je de kleuren, typografie, en andere visuele aspecten van de timer instellen.

Publiceer de countdown timer

1. Publiceer: Als je tevreden bent met de instellingen, klik je op “Publish” of “Update” om de countdown timer op je website te zetten.

Countdown timer gebruiken voor:

1. Productlanceringen: Informeer bezoekers over de lancering van een nieuw product.
2. Evenementen: Laat bezoekers weten hoeveel tijd er nog is tot een evenement, zoals een webinar of een feest.
3. Verkoop en aanbiedingen: Gebruik de timer om aan te geven wanneer een tijdelijke aanbieding eindigt, wat urgentie kan creëren voor je bezoekers.
4. Website lancering: Als je een nieuwe website lanceert, kun je de timer gebruiken om de tijd tot de lancering te tonen op een “Coming Soon” pagina.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.

Om een Google Map toe te voegen in Elementor op een pagina of bericht volg je de volgende stappen.

Voeg de “Google Maps” widget toe

1. Open de pagina of het bericht waarin je de kaart wilt toevoegen.
2. Klik op “Bewerk met Elementor” om de Elementor-editor te openen.
3. Zoek de “Google Maps” widget in het linker paneel.
4. Sleep de “Google Maps” widget naar de gewenste positie op de pagina.

Stel de locatie in

1. Voer het adres in:
   • In de “Content” tab van de widget, kun je het gewenste adres invoeren.
   • Dit zal de kaart updaten naar de opgegeven locatie.

Pas de instellingen aan

1. 1. Zoomen:
      • Je kunt het zoomniveau van de kaart aanpassen door de “Zoom” optie te gebruiken.
      • Een hogere waarde betekent een meer ingezoomde kaart.
   2. Kaarttype:
      • Je kunt het kaarttype aanpassen, bijvoorbeeld “Roadmap”, “Satellite”, “Hybrid”, of “Terrain”.

Stijl de kaart

1. Ga naar het “Stijl” tabblad van de widget.
2. Pas de breedte en hoogte van de kaart aan om deze goed te laten passen op je pagina.
3. Pas eventuele extra stijlen aan die je wilt, zoals de randen of box-shadow.

Publiceer of update de pagina

1. Klik op “Publiceren” of “Update” om je wijzigingen op te slaan en te publiceren.

Je hebt succesvol een Google Maps kaartje toegevoegd aan je WordPress website in Elementor.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.

Een FAQ widget is een handige toevoeging om de veelgestelde vragen te tonen, zoals op de naailes pagina op anydress.nl. Om een FAQ widget toe te voegen in Elementor, kun je gebruikmaken van de “Toggle” of “Accordion” widgets, die perfect geschikt zijn voor een FAQ-sectie. Hier is hoe je dat doet:

Open je pagina of bericht in Elementor

• • Log in op je WordPress dashboard.
  • Ga naar de pagina of het bericht waar je de FAQ wilt toevoegen en klik op “Bewerk met Elementor”.

Accordion widget

• • Klik op het “Widgets”-icoontje linksboven om het Elementor widget menu te openen.
  • Zoek naar “Accordion” of “Toggle” in de zoekbalk.
  • Sleep de “Accordion” of “Toggle” widget naar de gewenste plek op je pagina.

FAQ items toevoegen

• • Standaard zijn er twee items in het “Accordion” widget.
  • Klik op het eerste item en voer de vraag in het “Title” veld in en het antwoord in het “Content” veld.
  • Klik op “Add Item” om meer vragen en antwoorden toe te voegen.

Styling

• • Ga naar het “Style” tabblad om de kleur, typografie, en andere visuele elementen aan te passen.
  • Je kunt de stijl van de titel en het antwoord afzonderlijk aanpassen.

Publiceer de wijzigingen:

• • Wanneer je tevreden bent met het FAQ gedeelte, klik je op “Publish” of “Update” om de wijzigingen op te slaan en te publiceren.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.

Om de footer in Elementor aan te passen, kun je de volgende stappen volgen in je WordPress website.

Maak of bewerk een footer template

1. Open de Elementor Theme Builder:
   • Ga naar je WordPress dashboard.
   • Ga naar “Templates” > “Theme Builder”.
   • Klik op “Footer” om een bestaande footer te bewerken of klik op “Add New” om een nieuwe footer te maken.
2. Kies of maak een footer template:
   • Als je een nieuwe footer maakt, wordt je gevraagd om een template te kiezen.
   • Je kunt een van de vooraf gemaakte templates kiezen of starten met een lege template.
3. Bewerk de footer:
   • Gebruik de Elementor interface om de footer naar wens aan te passen.
   • Voeg widgets toe, zoals tekst, sociale media knoppen, of een navigatiemenu.
   • Pas de stijl en lay-out van de footer aan zoals je wilt.

Publiceer de footer

1. Publiceer de footer:
   • Klik op “Publish” wanneer je tevreden bent met het ontwerp.
   • Je wordt gevraagd om de “Display Conditions” te selecteren, waar je kunt kiezen waar de footer op je site wordt getoond.
   • Kies bijvoorbeeld “Entire Site” om de footer op alle pagina’s te tonen.

Bewerk de footer

1. Bewerk een bestaande footer:
   • Om een bestaande footer te bewerken, ga je naar “Templates” > “Theme Builder” > “Footer”.
   • Klik op “Edit” naast de footer die je wilt bewerken.
2. Gebruik Elementor om wijzigingen aan te brengen:
   • Gebruik de Elementor interface om wijzigingen aan te brengen.
   • Klik op “Update” om de wijzigingen op te slaan.

Met deze stappen kun je eenvoudig de footer aanpassen en beheren in Elementor.

Het kan gebeuren dat je aanpassingen aan je WordPress website wilt maken en dat je dit achter gesloten deuren wilt doen. Dan kun je ervoor kiezen om tijdelijk de coming soon modus te activeren, deze is al ingebakken in Elementor zelfs!

Het maken van een “Coming Soon” pagina in Elementor is heel simpel. Hier zijn de stappen die je kunt volgen, zelfs als je niet veel ervaring hebt met WordPress en Elementor:

Maak een nieuwe WordPress pagina

1. Ga naar je WordPress dashboard.
2. Klik op “Pagina’s” en selecteer “Nieuwe toevoegen”.
3. Geef de pagina een naam zoals “Coming Soon” en klik op “Bewerk met Elementor”.

Ontwerp de “Coming Soon” pagina

1. Voeg een sectie toe en kies een lay-out die je mooi vindt.
2. Voeg widgets toe zoals een “Heading” widget voor de titel en een “Tekst” widget voor een korte boodschap.
3. Voeg een “Button” widget toe als je bijvoorbeeld gebruikers wilt doorverwijzen naar een andere pagina of laten weten dat ze zich kunnen aanmelden voor updates.
4. Personaliseer de pagina door kleuren, lettertypes, en achtergrondafbeeldingen aan te passen.

Publiceer de pagina

1. Klik op “Publish” om de “Coming Soon” pagina op te slaan.

Activeer de “Coming Soon” modus in Elementor

1. Ga naar je WordPress dashboard en klik op “Elementor”.
2. Ga naar “Tools” en kies het “Maintenance Mode” tabblad.
3. Selecteer “Coming Soon” onder “Choose Mode”. Eventueel kun je ook de onderhoudsmodus hier activeren, het verschil is dat de pagina voor coming soon geïndexeerd zal worden door Google door de HTTP 200 status en de onderhoudsmodus niet door de 503 status.
4. Kies je “Coming Soon” pagina uit het dropdownmenu.
5. Klik op “Save Changes”.

Nu is je “Coming Soon” pagina actief. Bezoekers zien deze pagina terwijl je aan je website werkt, maar je kunt nog steeds aan je site werken als je bent ingelogd.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.

Om een dropdown menu in een Elementor WordPress website toe te voegen, volg je deze onderstaande stappen. Zelfs als je nieuw bent met WordPress en Elementor.

Maak eerst een menu aan in WordPress

1. Navigeer naar je WordPress dashboard.
2. Ga naar “Weergave” en dan naar “Menus”.
3. Maak een nieuw menu of selecteer een bestaand menu.
4. Voeg menu-items toe door items te selecteren uit de beschikbare opties.
5. Sleep de menu-items die je als sub-items wilt instellen iets naar rechts, onder een hoofditem. Dit zorgt ervoor dat ze als een dropdown verschijnen.
6. Sla het menu op.

Voeg het menu toe in Elementor

1. Open de pagina waarop je het menu wilt toevoegen in Elementor.
2. Sleep de “Nav Menu” widget naar de gewenste plek.
3. Selecteer je menu. In het menu-instellingen gedeelte van de widget, kies je het menu dat je hebt gemaakt in de dropdownlijst.

3. Pas het menu aan

1. Kies een “Dropdown” animatie in de instellingen van de “Nav Menu” widget. Dit bepaalt hoe het submenu tevoorschijn komt.
2. Stel de “Break Point” in. Dit bepaalt wanneer het menu verandert naar een mobielvriendelijke weergave. Je kunt bijvoorbeeld “Tablet” selecteren om het menu te veranderen naar een hamburgermenu op tablets en kleinere apparaten.
3. Stijl het menu. Ga naar het “Style” tabblad om kleuren, typografie, en andere visuele elementen aan te passen.

4. Publiceer de wijzigingen

1. Klik op “Publish” of “Update” om de wijzigingen op te slaan en te publiceren.

Met deze stappen kun je eenvoudig een dropdown menu toevoegen en aanpassen in Elementor.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.

Als je met je muis over een afbeelding of knop in je Elementor WordPress website gaat wil je natuurlijk laten zien dat deze klikbaar is. Dit noem je een hover effect, dit is zichtbaar als je met de muiswijzer over een item heen gaat. Hoe voeg je dit toe in Elementor?

Elementor hover effect afbeelding

Om een hover effect toe te voegen aan een afbeelding in Elementor, kun je de volgende stappen volgen:

1. Afbeelding toevoegen: Begin met het toevoegen van een afbeelding door de “Image” widget naar je sectie of kolom te slepen. Kies de afbeelding die je wilt gebruiken.
2. Hover Effect instellen:
   • Klik op het “Style”-tabblad van de “Image” widget.
   • Scroll naar beneden en open de “Hover” sectie.
   • Hier vind je opties om een hover effect toe te voegen. Je kunt kiezen voor effecten zoals zoom in, zoom out, fade in, of fade out.
   • Daarnaast kun je de hover effect “Transition Duration” aanpassen om de snelheid van het effect te bepalen.
3. Hover Animatie instellen:
   • Open het “Advanced”-tabblad.
   • Scroll naar beneden naar de sectie “Motion Effects”.
   • Kies een animatie onder “Hover Animation” om een extra effect toe te voegen, zoals een draai- of zwaaieffect.
4. Achtergrond en overlay:
   • Terug in het “Style”-tabblad kun je, indien gewenst, een achtergrond of overlay instellen die alleen zichtbaar wordt bij hover.
   • Onder “Background Overlay” kun je een kleur, afbeelding of gradient kiezen die wordt weergegeven bij hover.
5. Opslaan en publiceren: Wanneer je tevreden bent met het hover effect, klik je op “Publish” of “Update” om je wijzigingen op te slaan en te publiceren.

Deze stappen geven je de mogelijkheid om visueel aantrekkelijke hover effecten toe te voegen aan je afbeeldingen in Elementor.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.

De Elementor Portfolio widget is een handige tool om je werk, projecten of producten op een visueel aantrekkelijke manier te tonen.

Elementor portfolio widget toevoegen

Je begint door de widget naar een sectie op je pagina te slepen. Vervolgens kun je projecten toevoegen door nieuwe items te maken of bestaande items te selecteren.

Je hebt de mogelijkheid om elk item een afbeelding, titel en omschrijving te geven. De widget biedt verschillende lay-outs, zoals grid of masonry, waardoor je de presentatie kunt aanpassen aan je voorkeur.

Je kunt ook kiezen uit diverse hover-effecten en de filters activeren, waardoor gebruikers projecten kunnen sorteren op categorie.

Qua styling kun je met de Portfolio widget de kleuren, typografie en afmetingen aanpassen. De geavanceerde instellingen bieden opties voor marges, animaties en responsiviteit. Kortom, de Elementor Portfolio widget geeft je de vrijheid om een mooie portfolio te creëren die past bij je website.

Elementor voor WordPress

Zelf ontwikkelen wij geen nieuwe WordPress projecten met Elementor. Waarom niet? Wij blijven graag dicht bij de basis van WordPress en dat is de Gutenberg editor die wij gebruiken in combinatie met het GeneratePress thema.

Alleen krijgen we veel vragen over Elementor en willen we ook graag onze kennis hierover delen. En daarbij willen we ook graag aangeven dat als de Elementor plugin correct geïnstalleerd en gebruikt wordt dat het zeker geen slechte pagebuilder is.