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’.

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.

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.

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.

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.

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.

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