Hoe u een scrollende website op volledige pagina kunt maken in Elementor

Het maken van scrollpagina's op volledig scherm in Elementor is ook heel gemakkelijk en handig. Om dit te bereiken, gaan we een plug-in gebruiken met de naam fullPage.js . Er zijn andere methoden om dit effect te bereiken, zoals CSS-scrollen of Elementor Addons. FullPage.js biedt echter de beste oplossing voor compatibiliteit, reactievermogen en bruikbaarheid.

Scrollende websites op volledig scherm maken in Elementor

Nu gaan we het proces demonstreren van het maken van een scrollende website op volledige pagina in Elementor.

Stap 1: FullPage.js laden

Om de plug-infuncties van fullPage.js te kunnen gebruiken, moeten we deze eerst laden.

De volgende code moet aan de header van onze website worden toegevoegd om deze correct te kunnen laden:

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

We hebben een plug-in nodig om deze code uit te voeren, omdat Elementor momenteel geen manier biedt om code aan de siteheader toe te voegen. Hoewel er verschillende plug-ins zijn die code aan onze header kunnen toevoegen, heb ik ontdekt dat deze het gemakkelijkst te gebruiken is.

Selecteer Aangepaste HTML toevoegen onder Aangepaste CSS & JS in het WordPress Dashboard nadat u de plug-in hebt geïnstalleerd. Plak nu de bovengenoemde code en zorg ervoor dat u deze zowel in de header als in de frontend plaatst.

De volgende stap is het toevoegen van enkele unieke JS. Om fullPage.js te initialiseren en de opties en procedures in te stellen, moeten we jQuery gebruiken. Hier volgen enkele fundamentele keuzes die van toepassing zijn op alle sites met verticaal scrollen.

jQuery(document).ready(function($) {
    $('#fullpage').fullpage({
        //options here
        scrollingSpeed: 1000,
        navigation: true,
        slidesNavigation: true
    });
    //methods
    $.fn.fullpage.setAllowScrolling(true);
});

Zorg ervoor dat u deze code opneemt in de voettekst van de frontend.

In deze fase stellen we ook onze FullPage-instellingen in. Het vorige voorbeeld bevat navigatiepunten, die aan de rechterkant van onze scrollende site verschijnen, evenals het absolute minimum aan opties die nodig zijn voor een scrollende site die een volledige pagina beslaat. Wanneer we ons ontwerp aanpassen om responsief te zijn, zal ik meer alternatieven bespreken. Bezoek de officiële documentatie voor meer informatie over uw opties.

Stap 2: Elementor-pagina instellen

De volgende opmaak is vereist door fullPage.js 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>

De individuele divs van onze scrollpagina met de klassensectie zijn elk secties op volledig scherm. Het gebruik van sjablonen is de eenvoudigste manier om dit met Elementor te laten werken.

Laten we eerst onze eigenlijke pagina configureren. Maak een nieuwe pagina in Pages, geef deze een geschikte titel en URL en bewerk deze vervolgens met Elementor.

Maak nu een sectie met één kolom in Elementor. We willen een HTML-Widget aan deze kolom toevoegen. Deze widget, die shortcodes bevat voor elke afzonderlijke dia, zal dienen als het raamwerk van onze pagina. We willen de volgende code toevoegen:

<div id="fullpage">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

Controleer of de sectie de volledige breedte heeft. Omdat we bovendien niet de opvulling willen die Elementor standaard aan kolommen toevoegt, stelt u de opvulling van de sectie en kolom in op 0.

Nadat we in de latere stappen de daadwerkelijke dia's hebben gemaakt, zullen we de Elementor-sjabloon-ID wijzigen in de juiste waarde.

Stap 3: Secties instellen

De laatste stap is het afzonderlijk bouwen en opslaan van elke sectie als sjabloon.

Om Shortcodes te kunnen gebruiken, heb je Elementor Pro nodig. Het is tijd om het te kopen als je er nog niet over hebt nagedacht. Je beschikt over alle tools die je nodig hebt om een ​​website te bouwen met Elementor. Het is niet nodig om steeds een nieuw thema aan te schaffen!

Maak een nieuwe sectie aan door naar Sjablonen - Nieuw toevoegen te gaan.

De eerste dia van onze paginagrote scrollsite wordt nu gemaakt. Maak een nieuwe sectie in Elementor en stel de hoogte in op 'Aanpassen aan scherm'. Nu je je materiaal hebt toegevoegd, kun je het stylen. Zorg ervoor dat elke sjabloon maximaal één onderdeel bevat. Om een ​​unieke lay-out te creëren, kunt u zoveel kolommen en binnenkolommen gebruiken als u wilt.

Sla uw dia op als u klaar bent en keer terug naar uw Elementor-sjablonen. De sjabloon die u onlangs hebt ontwikkeld, zou nu in de lijst moeten verschijnen. Neem de ID van deze sjabloon en plak deze in de pagina die we in stap 2 hebben gemaakt door deze te kopiëren.

Herhaal deze procedure nu voor elke dia die u heeft. Elke sjabloon moet één gebied hebben met een hoogte die is aangepast aan het scherm.

Afsluiten

Dat is alles dan! Dit is de eenvoudigste manier om scrollende pagina's op volledig scherm te bouwen met fullPage.js in Elementor . Ik hoop dat dit je kan helpen bij het ontwerpen van een eenvoudige en minimalistische website voor je toekomstige ondernemingen.