Anche la creazione di pagine a scorrimento a schermo intero in Elementor è molto semplice e conveniente. Per ottenerlo, utilizzeremo un plug-in chiamato fullPage.js . Esistono altri metodi per ottenere questo effetto, come lo scorrimento CSS o i componenti aggiuntivi di Elementor . Tuttavia, fullPage.js fornisce la migliore soluzione per compatibilità, reattività e usabilità.

Creazione di siti Web a scorrimento a schermo intero in Elementor

Ora dimostreremo il processo di creazione di un sito Web a scorrimento a pagina intera in Elementor.

Passaggio 1: caricamento di fullPage.js

Per utilizzare le funzioni del plug-in fullPage.js , dobbiamo prima caricarlo.

Il seguente codice deve essere aggiunto all'intestazione del nostro sito Web affinché venga caricato correttamente:

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

Abbiamo bisogno di un plug-in per eseguire questo codice perché Elementor attualmente non offre un mezzo per aggiungere codice all'intestazione del sito. Sebbene ci siano diversi plugin che possono aggiungere codice alla nostra intestazione, ho scoperto che questo è il più facile da usare.

Seleziona Aggiungi HTML personalizzato in CSS personalizzato & JS nella dashboard di WordPress dopo aver installato il plug-in. Ora, incolla il suddetto codice, assicurandoti di inserirlo sia nell'intestazione che nel front-end.

Il prossimo passo è includere alcuni JS unici. Per inizializzare fullPage.js e impostarne le opzioni e le procedure, dobbiamo utilizzare jQuery. Ecco alcune scelte fondamentali che valgono per tutti i siti a scorrimento verticale.

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

Assicurati di includere questo codice nel piè di pagina del front-end.

In questa fase impostiamo anche le nostre impostazioni FullPage. L'esempio precedente include punti di navigazione, che appariranno sul lato destro del nostro sito a scorrimento, così come il minimo indispensabile di opzioni necessarie per un sito a scorrimento a pagina intera. Quando modificheremo il nostro design per renderlo reattivo, esaminerò più alternative. Visita la documentazione ufficiale per maggiori dettagli sulle tue opzioni.

Passaggio 2: impostare la pagina Elementor

Il seguente markup è richiesto da fullPage.js per la nostra pagina a scorrimento.

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

I singoli div della nostra pagina a scorrimento con la sezione della classe saranno sezioni a schermo intero. L'utilizzo dei modelli è l'approccio più semplice per farlo funzionare con Elementor.

Per prima cosa configuriamo la nostra pagina attuale. Crea una nuova pagina in Pages, assegnagli un titolo e un URL adatti, quindi modificala utilizzando Elementor.

Crea ora una sezione con una colonna in Elementor. Vogliamo aggiungere un widget HTML a questa colonna. Questo widget, che include codici brevi per ogni singola diapositiva, fungerà da struttura della nostra pagina. Vogliamo aggiungere il seguente codice:

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

Verificare che la sezione sia a larghezza intera. Inoltre, poiché non vogliamo il riempimento che Elementor per impostazione predefinita aggiunge alle colonne, imposta il riempimento della sezione e della colonna su 0.

Dopo aver creato le diapositive effettive nei passaggi successivi, modificheremo l'ID del modello Elementor al suo valore corretto.

Passaggio 3: impostare le sezioni

L'ultimo passaggio consiste nel creare e salvare separatamente ogni sezione come modello.

Avrai bisogno di Elementor Pro per utilizzare gli Shortcode. È giunto il momento di acquistarlo se non ci hai già pensato. Hai tutti gli strumenti necessari per creare un sito Web utilizzando Elementor. Non c'è bisogno di acquistare sempre un nuovo tema!

Crea una nuova sezione andando su Modelli - Aggiungi nuovo.

Verrà ora creata la prima diapositiva del nostro sito a scorrimento a pagina intera. Crea una nuova sezione in Elementor e imposta la sua altezza su "Adatta allo schermo". Ora che hai aggiunto il tuo materiale, puoi modellarlo. Assicurati solo che ogni modello contenga al massimo una parte. Per creare un layout unico, puoi utilizzare tutte le colonne e le colonne interne che desideri.

Salva la tua diapositiva quando hai finito, quindi torna ai tuoi modelli Elementor. Il modello che hai sviluppato di recente dovrebbe ora apparire nell'elenco. Prendi l'ID di questo modello e incollalo nella pagina che abbiamo creato nel passaggio 2 copiandolo.

Ora ripeti questa procedura per ogni diapositiva che hai. Ogni modello deve avere un'area con un'altezza regolata per adattarsi allo schermo.

Avvolgendo

Questo è tutto, allora! Questo è il modo più semplice per creare pagine a scorrimento a schermo intero con fullPage.js in Elementor . Spero che questo possa aiutarti a progettare un sito web semplice e minimalista per le tue iniziative future.