Come creare un sito Web a scorrimento della pagina intera in Elementor

Anche creare pagine a scorrimento a schermo intero in Elementor è molto semplice e conveniente. Per raggiungere questo obiettivo, utilizzeremo un plugin 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 in termini di compatibilità, reattività e usabilità.

Creazione di siti Web con 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 poter utilizzare le funzioni del plugin 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 plugin per eseguire questo codice perché Elementor attualmente non offre un mezzo per aggiungere codice all'intestazione del sito. Sebbene esistano diversi plugin che possono aggiungere codice alla nostra intestazione, ho scoperto che questo è il più semplice da usare.

Seleziona Aggiungi HTML personalizzato in CSS e JS personalizzati nella dashboard di WordPress dopo aver installato il plug-in. Ora incolla il codice sopra menzionato, assicurandoti di posizionarlo 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 con 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 configuriamo anche le nostre impostazioni FullPage. L'esempio precedente include i punti di navigazione, che appariranno sul lato destro del nostro sito a scorrimento, nonché 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: configura la pagina Elementor

Il seguente markup è richiesto da fullPage.js per la nostra pagina di 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>

Ciascuno dei div individuali della nostra pagina a scorrimento con la sezione della classe sarà una sezione 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 subito 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 aggiunge per impostazione predefinita 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 con il valore corretto.

Passaggio 3: imposta le sezioni

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

Avrai bisogno di Elementor Pro per utilizzare gli shortcode. È giunto il momento di acquistarlo se non hai ancora pensato di farlo. Hai tutti gli strumenti necessari per creare un sito Web utilizzando Elementor. Non è necessario 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 diapositiva quando hai finito, quindi torna ai 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.