Het maken van pagina’s met scroll-snaps op een volledig scherm in Elementor is vrij eenvoudig. Om dit te bereiken gaan we fullPage.js gebruiken. Er zijn schijnbaar ook nog andere manieren om een dergelijk effect te bereiken, bijvoorbeeld door CSS Scroll Snapping te gebruiken of Elementor Addons te downloaden en te gebruiken. FullPage.js biedt echter de beste oplossing voor compatibiliteit, reactievermogen en bruikbaarheid.
Een volledig scherm scrollen in Elementor
Check ook bovenstaande video (Engels)
Stap 1: Het inladen van fullPage.js
Allereerst moeten we de volledige Page.js laden, zodat we de functies ervan kunnen gebruiken.
Om het correct te laden, moeten we de volgende code toevoegen aan onze header:
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>
Helaas biedt Elementor geen manier om code toe te voegen aan de siteheader, daarom hebben we een plug-in nodig om deze code uit te voeren. Er zijn veel plug-ins die code aan onze header kunnen toevoegen, maar dit is de meest eenvoudige plug-in die we hebben kunnen vinden.
Nadat je deze plug-in hebt geïnstalleerd, ga je naar Custom CSS & JS in het WordPress-Dashboard en selecteer je Custom HTML toevoegen. Plak nu de bovenstaande code en zorg ervoor dat deze in de koptekst en in de frontend wordt ingevoegd.
jQuery(document).ready(function($) { $('#fullpage').fullpage({ //options here scrollingSpeed: 1000, navigation: true, slidesNavigation: true }); //methods $.fn.fullpage.setAllowScrolling(true); });
Zorg ervoor dat je de bovenstaande code toevoegt aan de footer in de frontend.
In deze stap stellen we ook onze opties voor FullPage in. Het bovenstaande voorbeeld heeft de meest elementaire opties die nodig zijn voor een pagina met volledige pagina’s scrollen en is voorzien van navigatiestippen, die aan de rechterkant van onze scrollende site worden weergegeven. We bespreken later meer opties, wanneer we ons ontwerp aanpassen voor reactievermogen. Voor meer informatie over opties kan je ook de officiële documenten bezoeken.
Stap 2: Het maken van de Elementor pagina
fullPage.js vereist om de volgende opmaak te gebruiken voor onze scrollende pagina:
<div id="fullpage"> <div class="section">Section 1</div> <div class="section"> <div class="slide">Slide 2.1</div> <div class="slide">Slide 2.2</div> <div class="slide">Slide 2.3</div> </div> <div class="section">Section 3</div> </div>
Elke afzonderlijke div met het klassengedeelte wordt een gedeelte op volledig scherm van onze scrollpagina. De eenvoudigste manier om dit met Elementor te laten werken, is door Elementor Templates te gebruiken.
Laten we eerst onze hoofdpagina maken. Ga naar pagina’s, maak een nieuwe pagina, geef het een juiste titel om vervolgens de pagina te bewerken met elementor.
Maak nu in Elementor een sectie met één kolom. In deze kolom willen we een HTML-Widget toevoegen. Deze widget wordt het skelet van onze pagina, met shortcodes voor elke afzonderlijke dia. Dit is de code die we vervolgens moeten toevoegen:
<div id="fullpage"> <div class="section">Section 1</div> <div class="section"> <div class="slide">Slide 2.1</div> <div class="slide">Slide 2.2</div> <div class="slide">Slide 2.3</div> </div> <div class="section">Section 3</div> </div>
Zorg ervoor dat je het gedeelte over de volledige breedte instelt (sectie uitrekken). Stel ook de opvulling (marge en padding) van de sectie en kolom in op 0. Deze stap moet je altijd even uitvoeren aangezien Elementor standaard minimale opvullingen aan kolommen toevoegt.
We gaan het Elementor-sjabloon-ID wijzigen in de juiste waarden nadat we de eigenlijke dia’s in de volgende stappen hebben gemaakt.
Stap 3: Het creëren van de Secties (via templates)
De laatste stap is om elke sectie afzonderlijk te maken en op te slaan als template in Elementor.
Om shortcodes te gebruiken, heb je Elementor Pro nodig (of Anywhere Elementor). Als je nog niet hebt overwogen om het te kopen, dan is dit het moment om het wel te doen. Met Elementor heb je alles wat je nodig hebt om een website te maken.
Ga naar Templates (onder het kopje Elementor in je dashboard menu) – Nieuw toevoegen en maak een nieuwe sectie aan.
We zullen nu de eerste dia maken van onze paginavullende scroll-site. Voeg in Elementor een nieuwe sectie toe en stel de hoogte in op “Fit to Screen”. U kunt nu uw inhoud in deze sectie toevoegen en opmaken. Zorg ervoor dat u slechts één sectie in elke template gebruikt (dus niet meerdere onder elkaar). Om wel met levels en hoogtes te werken kan je gebruik maken van een inner-sectie widget om zo de lay-out aan te passen.
Nadat je klaar bent met het maken van je eerste dia, sla je deze op en ga je terug naar je Elementor-templates. De template die je net gemaakt hebt staat nu in het overzicht met templates. Je ziet ook het ID van de template staan bijvoorbeeld: elementor-template id=”12998″. Kopieer de ID (dus 12998) van de template en plaats deze in de pagina die we in stap 2 hebben gemaakt.
Herhaal dit proces nu voor elk van de dia’s. Elke template moet uit één sectie bestaan waarvan de hoogte is ingesteld om op het volledige scherm te passen.
En dat is het! Dit is de meest eenvoudige manier via fullPage.js scrollende pagina’s op een volledig scherm te maken.
Bron en credits voor deze post naar: Picnature.de
