Creazione di un layout a schermo intero con transizioni di immagini di sfondo parallasse in Divi

La creazione di una pagina Web con sezioni a schermo intero è un ottimo modo per migliorare l'esperienza dell'utente con transizioni fluide e layout di sezione puliti che coprono l'intera larghezza e altezza del browser. In genere, questo funziona bene per mostrare prodotti o servizi una sezione alla volta, consentendo all'utente di concentrarsi facilmente su ciascuno di essi mentre scorre la pagina. Questo tipo di design funziona molto bene anche con immagini di sfondo che parlano al contenuto e forniscono un bellissimo accento di design. E se vuoi essere un po' creativo, puoi aggiungere alcune funzionalità di parallasse alle tue immagini di sfondo per creare delle transizioni piuttosto uniche quando scorri da una sezione a schermo intero all'altra.

In questo tutorial, ti mostrerò come aggiungere alcune transizioni di immagini di sfondo parallasse a un layout di pagina a schermo intero in Divi. Il processo è semplice e con esso puoi creare risultati potenti.

Sbirciata

Dai un'occhiata ad alcuni dei progetti che costruiremo insieme.

Iniziare

Iscriviti al nostro canale Youtube

Per questo tutorial, tutto ciò di cui hai bisogno è Divi e una raccolta di immagini da utilizzare per le diverse immagini del prodotto e le immagini di sfondo. Sto usando le immagini le immagini del nostro Juice Shop Layout Pack. Puoi scaricare il file zip con queste immagini in fondo al post del blog con questo pacchetto di layout. Basta fare clic sul pulsante "Scarica le risorse immagine ad alta risoluzione".

Preparare la tua nuova pagina

Una volta che hai le immagini pronte. Crea una nuova pagina e dai un titolo alla tua pagina. Quindi distribuisci Divi Builder e seleziona "Crea da zero". Quindi fare clic sul pulsante per costruire sul front-end.

Ora sei pronto per partire!

L'idea di base

L'idea alla base di questo concetto prevede l'impilamento di più sezioni a larghezza intera, ciascuna con un modulo di intestazione a larghezza intera. A ogni modulo di intestazione viene assegnata una larghezza personalizzata che può essere allineata a sinistra, al centro o a destra durante l'esposizione dello sfondo della sezione. Quindi ad ogni sezione viene fornita un'immagine di sfondo con un certo metodo di parallasse. Questo crea diversi effetti di transizione dell'immagine di sfondo mentre scorri la pagina.

Ecco come farlo.

Creazione della sezione di intestazione a larghezza intera

Innanzitutto, dovrai creare una nuova sezione a larghezza intera e quindi aggiungere un modulo di intestazione a larghezza intera alla sezione.

Aggiorna le impostazioni dell'intestazione a larghezza intera con alcuni contenuti con quanto segue:

Titolo: "Succo di pomodoro"
Testo del collegamento del pulsante n. 1: "Vedi ricetta"
Contenuto: “Il tuo contenuto va qui. Modifica o rimuovi questo testo in linea o nelle impostazioni del contenuto del modulo.
Immagine del logo: [vedi screenshot] (l'immagine è 240 px per 300 px)

Ora continua ad aggiornare il design dell'intestazione come segue:

Colore di sfondo: rgba (255,255,255,0.92)

Rendi schermo intero: SI

Mostra pulsante di scorrimento verso il basso: S
Icona: vedi screenshot
Scorri verso il basso Colore icona: #222222

Colore del testo: scuro

Livello titolo titolo: H2
Carattere del titolo: Raleway
Dimensione del testo del titolo: 50px

Carattere del corpo: Lato
Dimensione del testo del corpo: 16px
Spaziatura delle lettere del corpo: 1px

Pulsante One Dimensione del testo: 16px
Pulsante fUn colore del testo: #ffffff
Colore di sfondo del pulsante uno: #222222
Raggio bordo pulsante uno: 50 px
Spaziatura di una lettera del pulsante: 2px
Stile carattere pulsante uno: TT

Larghezza: 45% (desktop), 60% (tablet), 100% (smartphone)

Salva le impostazioni.

I principali elementi chiave del design qui sono l'opzione "Crea schermo intero" e la "Larghezza: 45%". Ciò consentirà alla sezione di occupare sempre l'intera larghezza e altezza della finestra del browser. E la larghezza personalizzata riduce il modulo di intestazione per esporre lo sfondo della sezione che aggiungeremo in seguito.

Aggiunta dello sfondo della sezione

Ora che abbiamo progettato il nostro modulo di intestazione, possiamo aggiungere l'immagine di sfondo della nostra sezione. Vai alle impostazioni della sezione a larghezza intera e aggiungi un'immagine di sfondo. Assicurati che sia abbastanza grande da coprire l'intera larghezza e altezza della finestra del browser. Quindi selezionare per utilizzare il metodo CSS Parallax.

Duplicazione delle sezioni

Poiché ogni sezione mostrerà nuovi contenuti, dobbiamo duplicare la nostra sezione a larghezza intera tre volte in modo da avere un totale di quattro sezioni sulla tua pagina ciascuna con un modulo di intestazione.

Creazione di un'immagine di sfondo statica utilizzando la stessa immagine di sfondo della sezione con CSS Parallax

Ora che abbiamo quattro sezioni identiche, possiamo aggiornare il contenuto dell'intestazione a larghezza intera con nuove immagini del logo e titoli per avere un'idea migliore del design. Tuttavia, se manteniamo la stessa immagine di sfondo utilizzando la parallasse CSS per tutte e quattro le sezioni, il risultato è un'immagine di sfondo statica che rimane al suo posto mentre scorri le diverse sezioni a schermo intero. E poiché utilizziamo un pulsante di scorrimento verso il basso su ciascuna intestazione, gli utenti hanno la possibilità di fare clic sulla freccia per scorrere in modo pulito in ogni nuova sezione.

Controlla il risultato.

Utilizzo di immagini di sfondo diverse con transizioni di parallasse CSS

L'uso di un'immagine di sfondo diversa (con parallasse CSS) per ogni sezione cambierà la sensazione del design mentre scorri. Poiché abbiamo già abilitato la parallasse CSS per le nostre immagini di sfondo a quattro sezioni, tutto ciò che dobbiamo fare è cambiare ciascuna delle immagini in qualcosa di diverso. In questo caso, sto semplicemente aggiungendo una versione grande del prodotto come immagine di sfondo per ogni sezione.

Una volta che hai un'immagine di sfondo diversa (con CSS Parallax) per ciascuna delle quattro sezioni, controlla il risultato.

Utilizzo di immagini di sfondo diverse con transizioni di parallasse reali

Se vuoi cambiare l'effetto di transizione dell'immagine di sfondo, puoi cambiare il metodo di parallasse da CSS a True Parallax per tutte e quattro le immagini di sfondo della sezione.

Apri una delle impostazioni della sezione e cambia il metodo CSS in "True Parallax".

Quindi dovrai fare lo stesso per le restanti tre sezioni. Oppure puoi semplicemente fare clic con il pulsante destro del mouse sull'opzione Metodo parallasse e selezionare "Estendi metodo parallasse" a tutti i moduli di intestazione a larghezza intera in tutta la pagina.

Una volta fatto, controlla l'effetto di transizione dell'immagine di sfondo.

Esplorazione di diversi allineamenti di moduli

Modificare l'allineamento del modulo Header a larghezza intera è un gioco da ragazzi. Poiché il nostro modulo di intestazione a larghezza intera ha una larghezza personalizzata del 45%, puoi facilmente regolare l'allineamento del modulo a sinistra, al centro o a destra per ottenere un layout diverso. Mi piace soprattutto l'allineamento centrato con uno sfondo statico.

Per centrare il modulo, apri le impostazioni dell'intestazione a larghezza intera e aggiorna l' allineamento del modulo su Centrato .

Per allineare il modulo a destra della pagina, è sufficiente aggiornare l' allineamento del modulo su allineato a destra.

Una volta stabilito un allineamento, puoi semplicemente estendere lo stile di "allineamento del modulo" al resto dei moduli di intestazione in tutta la pagina.

Ecco un esempio di allineamento centrato con uno sfondo statico (stessa immagine di sfondo per ciascuno con parallasse CSS).

Ecco un esempio di allineamento centrato con diverse immagini di sfondo utilizzando il metodo CSS Parallax.

Ecco un esempio dell'allineamento centrato con diverse immagini di sfondo utilizzando il metodo True Parallax.

Ecco un esempio di allineamento corretto con diverse immagini di sfondo utilizzando una combinazione di css e parallasse reale.

Pensieri finali

Queste transizioni dell'immagine di sfondo hanno davvero un bell'aspetto se utilizzate in combinazione con sezioni a schermo intero e moduli di intestazione personalizzati. La funzionalità è pulita e il design è sottile e unico. Semmai, è un modo semplice e veloce per creare sfondi statici per i tuoi contenuti. Sentiti libero di esplorare design più avanzati utilizzando sfumature di sfondo, caratteri e immagini!

Non vedo l'ora di sentirti nei commenti.

Saluti!