Come creare moduli Blurb fluttuanti con Divi

Vuoi migliorare il tuo prossimo progetto di web design con un po' di creatività ed estro? In questo tutorial, ti mostreremo come creare moduli blurb mobili e creare una sezione di funzionalità che attiri l'attenzione dell'utente mentre scorri. Utilizzando il versatile modulo blurb di Divi e aggiungendo effetti di scorrimento, puoi trasformare layout statici in sezioni dinamiche che mostrano i tuoi contenuti.

Se sei interessato a esplorare le possibilità creative del modulo blurb e a scoprire come gli effetti di scorrimento possono aggiungere un movimento accattivante al tuo sito web, questo post è un'eccellente risorsa per te.

Iniziamo!

Anteprima

Ecco un'anteprima di ciò che progetteremo. La descrizione a sinistra scivola verso l'alto e rimane fluttuante sul posto, attirando immediatamente l'attenzione. A destra, le trascrizioni vengono rivelate singolarmente, ciascuna evidenziando una caratteristica unica del servizio.

Ecco come apparirà il design sui dispositivi mobili. Ogni descrizione apparirà con un sottile effetto di scorrimento a scorrimento.

Cosa ti serve per iniziare

Prima di iniziare, installa e attiva il tema Divi e assicurati di avere l'ultima versione di Divi sul tuo sito web.

Ora sei pronto per iniziare!

Come creare moduli Blurb fluttuanti con Divi

Creeremo una sezione di caratteristiche dinamiche per questo progetto utilizzando quattro moduli blurb. Nella colonna di sinistra, utilizzeremo effetti persistenti per far galleggiare un modulo blurb, catturando l'attenzione con un'immagine di grandi dimensioni e un testo di intestazione che introduce i vantaggi del servizio. Tre moduli di descrizione più piccoli appariranno in sequenza nella colonna di destra, ciascuno con un'icona e del testo. Utilizzando gli effetti di scorrimento di Divi, possiamo rivelare individualmente le trascrizioni, creando un'esperienza utente coinvolgente che comunica in modo efficace le caratteristiche principali.

Crea una nuova pagina con un layout predefinito

Iniziamo utilizzando un layout predefinito dalla libreria Divi. Per questo progetto utilizzeremo la pagina di destinazione del prodotto SaaS dal pacchetto di layout del prodotto SaaS.

Aggiungi una nuova pagina al tuo sito web e assegnagli un titolo, quindi seleziona l'opzione Usa Divi Builder.

Fai clic su Sfoglia layout per utilizzare un layout predefinito dalla libreria Divi.

Cerca e seleziona il layout della pagina di destinazione del prodotto SaaS.

Seleziona Usa questo layout per aggiungere il layout alla tua pagina.

Ora siamo pronti per costruire il nostro progetto.

Modificare il layout per i moduli Blurb mobili

Creeremo una sezione di funzionalità dinamiche utilizzando il contenuto della riga servizi e immagini aggiuntive dal layout. Per iniziare, aggiungi una nuova sezione sotto la sezione dell'eroe.

Successivamente, aggiungi una riga con due colonne.

Puoi anche eliminare la sezione seguente con i tre moduli poiché li ricreeremo con il modulo blurb durante questo tutorial.

Aggiunta dei moduli Blurb

Colonna 1

Nella colonna di sinistra, aggiungi un nuovo modulo blurb.

Aggiungi il seguente contenuto alla descrizione.

• Titolo: Analizza e gestisci i tuoi dati senza sforzo
• Corpo: testo descrittivo
• Immagine: saas-24.png, fornita con il pacchetto layout.

Impostazioni di progettazione

Successivamente, passa alla scheda Progettazione e modifica le impostazioni del testo del titolo come segue:

• Livello dell'intestazione del titolo: H2
• Carattere del titolo: Poppins
• Peso carattere titolo: semigrassetto
• Dimensioni del testo del titolo: desktop 48px, tablet 32px, dispositivi mobili 24px
• Spaziatura delle lettere del titolo: -0,02 em
• Altezza della riga del titolo: 1,2 em

Nelle impostazioni del corpo del testo, modificare quanto segue:

• Carattere del corpo: Poppins
• Peso del carattere del corpo: medio
• Dimensioni del corpo del testo: desktop 16px, tablet 15px, dispositivi mobili 14px
• Spaziatura delle lettere del corpo: -0,02 em
• Altezza della linea del corpo: 1,8 em

Colonna 2

Nella colonna di destra, aggiungi un nuovo modulo blurb.

Aggiungi il seguente contenuto alla descrizione.

• Titolo: Gestione dei contenuti
• Corpo: testo descrittivo
• Immagine: saas-icon-01.png

Impostazioni di progettazione

Nella scheda Progettazione, inizia aprendo le impostazioni di immagine e icona. Imposta la larghezza dell'immagine su 60px e imposta l'allineamento a sinistra.

Successivamente, modifica lo stile per il testo del titolo come segue:

• Livello dell'intestazione del titolo: H3
• Carattere del titolo: Poppins
• Peso carattere titolo: semigrassetto
• Dimensioni del testo del titolo: desktop 36px, tablet 20px, dispositivi mobili 16px
• Spaziatura delle lettere del titolo: -0,02 em
• Altezza della riga del titolo: 1,4 em

Nelle impostazioni del corpo del testo, modifica le seguenti opzioni:

• Carattere del corpo: Poppins
• Peso del carattere del corpo: medio
• Dimensioni del corpo del testo: desktop 16px, tablet 15px, dispositivi mobili 14px
• Spaziatura delle lettere del corpo: -0,02 em
• Altezza della linea del corpo: 1,8 em

Successivamente, apri le impostazioni di spaziatura. Aggiungeremo un margine superiore e inferiore poiché vogliamo che ogni testo sulla destra appaia uno alla volta. Usando vh (altezza del viewport) per impostare il nostro margine, possiamo garantire che il modulo blurb e il suo margine occuperanno l'intera altezza dello schermo. Successivamente aggiungeremo alcuni effetti di scorrimento per migliorare l'effetto. Non avremo un effetto di scorrimento fisso su tablet e dispositivi mobili, quindi il margine sarà molto più piccolo.

• Margine superiore e inferiore sul desktop: 50vh
• Margine superiore e inferiore su tablet e cellulare: 4vh

Infine, apri le impostazioni dell'animazione e imposta l'animazione dell'immagine/icona su nessuna animazione.

Duplica per creare altri 2 blurb

Ora, il primo modulo blurb è stato creato e stilizzato. Duplica il modulo due volte per creare altri due moduli blurb nella colonna di destra.

Apri le impostazioni per il secondo trafiletto e modifica quanto segue:

• Titolo: Gestione dei dati
• Corpo: testo descrittivo
• Immagine: saas-icon-05.png

Successivamente, modifica il contenuto del terzo trafiletto.

• Titolo: Gestione CRM
• Corpo: testo descrittivo
• Immagine: saas-icon-03.png

Dato che è l'ultimo trafiletto, non abbiamo bisogno di un ampio margine inferiore. Modifica le impostazioni di spaziatura.

• Margine inferiore sul desktop: 4vh

Abilita moduli Blurb mobili con effetti di scorrimento

Ora il nostro design è a posto e possiamo aggiungere gli effetti di scorrimento per creare il layout dinamico.

Colonna 1

Innanzitutto, apri le impostazioni per la colonna 1. Passa alla sezione Effetti di scorrimento nella scheda avanzata e modifica le seguenti opzioni per far sì che la colonna rimanga in alto.

• Desktop con posizione fissa: incolla in alto
• Posizione adesiva per tablet e cellulare: non attaccare
• Desktop con offset superiore adesivo: 30vh
• Tablet e cellulare con offset superiore adesivo: 0vh
• Limite adesivo inferiore: sezione

Blurbo 1

Successivamente, vai alle impostazioni per la descrizione nella colonna 1. Aggiungeremo un effetto di trasformazione dello scorrimento con un movimento verticale per evidenziare la colonna quando viene visualizzata.

• Abilita movimento verticale: sì
• Imposta il movimento verticale
  • Scostamento iniziale: 10
  • Offset medio: 30%, 0
  • Scostamento finale: 0

Trama della colonna 2

Per i trascritti nella colonna 2, utilizzeremo un po' di movimento verticale per creare un effetto di scorrimento che catturerà l'attenzione dell'utente. Trascina le frecce per estendere l'offset medio al 20-70% per mantenere la descrizione al centro più a lungo. La versione mobile aggiunge un effetto slide-in più sottile. Modifica le seguenti opzioni dell'effetto di scorrimento per ogni trascrizione nella colonna 2.

• Abilita movimento verticale: sì
• Imposta il movimento verticale del desktop
  • Scostamento iniziale: 4
  • Offset medio: 20%-70%, 0
  • Scostamento finale: 80%, -4
• Imposta tablet e cellulare con movimento verticale
  • Scostamento iniziale: 4
  • Offset medio: 30%, 0
  • Scostamento finale: 0

E questo è tutto! Il layout del modulo di descrizione mobile è ora completo.

Risultato finale

Diamo un'occhiata alla nostra sezione del modulo blurb mobile in azione.

Ed ecco come appare sui dispositivi mobili.

Pensieri finali

Il modulo blurb di Divi semplifica la visualizzazione di richiami informativi concisi e un'immagine o un'icona accattivante. Gli effetti di scorrimento ti consentono di creare layout creativi che guidano l'attenzione dell'utente, come i moduli blurb mobili che abbiamo progettato in questo tutorial. Per ulteriori tutorial sul modulo Blurb di Divi, dai un'occhiata a Moduli Blurb interattivi creativi che utilizzano le opzioni di trasformazione e passaggio del mouse di Divi e 5 design di moduli Blurb creativi di Divi.

Hai aggiunto effetti di scorrimento a un modulo di descrizione nei tuoi progetti? Fateci sapere nei commenti!