Share on email
Share on whatsapp
Share on twitter
Share on linkedin
Share on facebook

Een slide-in met gerelateerde berichten maken

Met Elementor Pro voeg je eenvoudig gerelateerde berichten toe onderaan je blogartikelen. Wil je dat de gerelateerde artikelen meer opvallen? Dan kun je hiervoor ook een slide-in maken met de popup builder van Elementor Pro. Hoe werkt dat precies?

Note: in dit artikel maken een slide-in met gerelateerde blogartikelen. Maar je kunt natuurlijk ook andere type popups maken voor je gerelateerde artikelen. 

1) Maak een nieuwe popup

Ga naar Templates -> Popup builder. Klik vervolgens op Nieuwe toevoegen. 

Geef de popup een naam. Bijvoorbeeld ‘Gerelateerde berichten’.

Gerelateerde artikelen popup

2) De popup instellen als slide-in

Klik de Elementor templates weg, zodat je in een leeg scherm opent. Pas als eerste de instellingen van de popup aan:

Breedte popup aanpassen

Zet de vw breedte in op 100. VW staat voor View Port. Dit betekent dat de slide-in op alle beeldschermen over de volledige breedte wordt weergegeven. Stel de hoogte in op ‘Fit to content’

Positie aanpassen

Voor de horizontale positie maakt het niet zoveel uit hoe je deze instelt, omdat je de vw breedte al hebt ingesteld op 100. Als je de slide-in onderin je website wilt tonen, stel je de verticale hoogte in op ‘onder’. Gebruik hiervoor het rechter icoon.

Slide-in animatie

Bij de slide-in animatie kun je instellen op welke manier je wilt dat de popup wordt getoond. In dit geval kiezen voor een slide-in. Dat stellen we hier in. Voor de exit animation stellen we een slide out in. De duur van de animatie kun je naar wens aanpassen.

Tijdsduur instellen

Via het tab Geavanceerd vind je nog een aantal extra opties. Zo kun je instellen hoelang je de popup wilt tonen, na hoeveel tijd je de close button wilt tonen en andere opties. Omdat wij zelf meerdere popups op de website hebben ingesteld vinken we de optie Avoid multiple popups aan. Ook mag de slide-in na 20 seconden weer uit het beeld verdwijnen.

Geavanceerde opties slide-in gerelateerde berichten elementor popup

3) Gerelateerde berichten toevoegen aan de slide-in

Gebruik de posts widget om gerelateerde berichten toe te voegen aan de slide-in en stijl deze naar wens.

Posts widget Elementor

Gerelateerde berichten
Om de posts in te stellen op gerelateerde berichten ga je naar het tabje Query. Hier stel je in welke berichten je in de posts widget wilt tonen. Zet de ‘source’ op ‘Related’. Vervolgens kun je instellen op welke manier je gerelateerde berichten wilt tonen. In dit voorbeeld toont de popup gerelateerde berichten met dezelfde tag.

Gerelateerde berichten instellen slide in elementor popup

Fallback
Het is altijd handig om een fallback in te stellen. Als er geen gerelateerde berichten zijn voor een bepaald artikel, dan weet je zeker dat toch berichten in de slide-in worden getoond.

4) De slide-in publiceren

Als je klaar bent met het instellen en opmaken van de slide-in, kun je de slide-in gaan publiceren. In dit voorbeeld stellen we slide-in in voor alle blogartikelen (‘berichten’). Indien gewenst kun je hier meerdere publicatie condities instellen.

slide-in popup publiceren elementor

Triggers instellen

In het tab triggers stel je in wanneer je de gerelateerde berichten wilt tonen. In dit voorbeeld stellen we in dat de slide-in wordt getoond als de bezoeker op 50% van de pagina zit.

Geavanceerde regels

Tot slot kun je nog meer regels instellen via het tabje ‘Advanced rules’. In dit voorbeeld stellen we de slide-in alleen in voor desktop en niet voor mobiel of tablets.

Geavanceerde opties slide-in gerelateerde berichten elementor popup

Klik vervolgens op ‘Publiceren’ en check op je website of alles goed werkt!

Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook
Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor. Daarnaast ondersteunt ze bedrijven bij de inzet van marketing- en communicatieactiviteiten.

Geef een reactie

Hulp nodig?

We helpen je graag! Stel hieronder je vraag:

Elementor Expert gezocht

tips ontvangen?

Schrijf je in voor onze nieuwsbrief!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.