Met een klik nieuwe content tonen

Toon jouw content via een inschuifpaneel

Je hebt al een lange pagina en je wil extra informatie of juist een formulier pas tonen als een bezoeker écht interesse heeft? Dat kan nu met behulp van het inschuifpaneel. Een inschuifpaneel is een vlak dat links of rechts in beeld komt schuiven met inhoud die je daar zelf aan mee geeft. Gebruik het bijvoorbeeld voor een galerij, een proefritformulier of een tabel met specifieke voertuiggegevens. Aan jou de keus!

Lees meer

Ga naar je pagina en plaats het blok genaamd Inschuifpaneel. De inhoud die je hier gaat vullen zal op de pagina niet direct zichtbaar zijn, maar in je editor wel, je moet er immers zelf inhoud aan kunnen geven. Kleine tip: plaats je inschuifpaneel helemaal onderin de pagina. Op die manier kun jij je focussen op de inhoud van de pagina zelf zonder dat het onderbroken wordt door de inhoud van je inschuifpaneel.

Het inschuifpaneel is voorzien van enkele placeholders. Vul of vervang deze elementen met de inhoud die jij in het paneel wilt plaatsen. In het voorbeeld onderin de pagina hebben we twee mogelijkheden. Een fotogalerij en een tabel met informatie.

Nu gaan we de functionele instellingen van het paneel invullen.

We beginnen met de uitlijning en breedte. Kies voor het inschuiven vanaf links of rechts en geef aan hoe breed het paneel mag zijn. Een breedte van 50% houdt in dat het de helft van jouw paginavenster zal beslaan. Op mobiel zal het altijd het volledige scherm zijn, dus maak je geen zorgen om breedte van de inhoud voor op mobiele devices. Het is ook mogelijk om % aan te passen naar bijvoorbeeld px door erop te klikken en jouw voorkeur in de dropdown te kiezen.

Standaard is rechtsbovenin een knop aanwezig om het paneel weer te sluiten. Optioneel kun je die op desktop verbergen. Zorg dan wel altijd dat je het Klik buiten het paneel voor sluiten hebt geactiveerd. Dit is voor je bezoekers altijd een handige optie, want het klikgebied is enorm groot en vaak zijn ze het gewend van andere websites, dus op dat gedrag kunnen we anticiperen.

Stel vervolgens jouw animatievoorkeur in. Je kunt het paneel laten inschuiven, waarbij je ook het aantal milliseconden kunt aangeven. Vul bijvoorbeeld 300 ms in voor 0,3 seconde.
Tip: zorg dat je de duur van de animatie niet boven een halve seconde instelt. De gemiddelde bezoeker is ongeduldig en zo’n lange animatie lijkt je website te vertragen. Natuurlijk kun je ook kiezen voor Instant. Dat betekent dat na een klik op je trigger het paneel direct verschijnt, zonder animatie.

Vul nu een naam van jouw trigger in bij flyout ID om jouw inschuifpaneel tevoorschijn te laten komen. Deze plaatsen we in stap 3 op de juiste plek. Bijvoorbeeld opengalerij.

Verander de opmaak

Kies voor het tabblad Stijl en voorzie jouw paneel van de juiste kleuren. Je kunt je kleuren ook instellen op de elementen die je in je paneel plaatst natuurlijk.

Voor de overlaykleur is het handig om deze donkerder of lichter te maken, afhankelijk van jouw huisstijl. Je kunt zelf de transparantie bepalen. Dit zorgt er samen met de kleur voor dat je meer focus kunt leggen op de inhoud van je paneel en de inhoud van de pagina wat minder opvalt. Helemaal als je de overlay blur waarde ook instelt. Probeer maar eens enkele waarden uit en test je trigger aan de voorkant (als we stap 3 ook hebben voltooid).

Je kunt de knop voor sluiten vierkant maken of deze nog afgeronde hoeken geven en het paneel zelf kan nog worden voorzien van een rand. Dit zijn geen verplichte opties.

Kies nu je knop of plaats je knop waarmee jij jouw paneel wil laten inschuiven. Klik op het link icoon en kopieer daar de naam van de flyout ID die je bij stap 2 hebt ingevuld. Je kunt ook je flyout ID kopiëren uit de regel die onder het tekstveld staat bij je inschuifpaneel. Zorg ervoor dat je link ook voorzien is van een # voor je tekst. Mijn link wordt bijvoorbeeld #opengalerij.