Modi creativi per combinare effetti di scorrimento di rotazione con elementi circolari in Divi

Siamo sempre alla ricerca di modi nuovi e creativi per mostrare gli articoli in primo piano (come prodotti e servizi) durante la progettazione di un nuovo sito web. E, con gli effetti di scorrimento di Divi, sono state aperte nuove porte per portare i tuoi layout di blurb a un livello completamente nuovo. In questo tutorial, ti mostreremo come creare un layout di modulo blurb con elementi circolari rotanti sullo scorrimento. Questo layout unico presenta un uso intelligente delle combinazioni di colori con più elementi circolari che ruotano dietro i blur quando l'utente scorre la pagina. Non c'è dubbio che questo design avrebbe molte applicazioni per qualsiasi contenuto.

Divertiti!

Sbirciata

Ecco una rapida occhiata al layout della trama con elementi circolari rotanti che stiamo costruendo in questo tutorial.

Scarica GRATIS il layout Blurb degli elementi circolari rotanti

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file JSON nel Divi Builder.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Creazione del layout Blurb con elementi circolari rotanti sullo scorrimento in Divi

Aggiunta della riga

Innanzitutto, aggiungi una riga di tre colonne alla sezione.

Margine di sezione temporaneo

Quindi, aggiungi un margine superiore e inferiore alla sezione per creare spazio per lo scorrimento.

Creazione di un design Blurb di elementi circolari rotanti n. 1

Per il nostro primo progetto, creeremo un modulo blurb con tre moduli divisori colorati che siederanno dietro il blurb e ruoteranno mentre l'utente scorre. Questo primo design servirà da buon modello per i prossimi due design che aggiungeremo alle altre colonne.

Ecco come costruirlo.

Aggiungi modulo Blurb

Nella colonna 1, aggiungi un modulo blurb.

Blurb 1 Contenuto

Apri le impostazioni per il modulo blurb e aggiorna il contenuto del corpo con quanto segue:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

Quindi aggiungi un'icona a tua scelta per sostituire l'immagine predefinita.

Blurb 1 Impostazioni disegno

Nella scheda Progettazione, aggiorna quanto segue:

• Colore di sfondo: #121212
• Colore icona: #41828d
• Usa la dimensione del carattere dell'icona: S
• Dimensione carattere icona: 75 px
• Allineamento del testo: centro
• Carattere del titolo: Oswald
• Stile carattere titolo: TT
• Colore del testo del titolo: #ffffff
• Dimensione del testo del titolo: 22px
• Colore del corpo del testo: #ffffff

Per rendere circolare il blurb, aggiorna le dimensioni e gli angoli arrotondati come segue:

• Larghezza: 300 px
• Larghezza massima: 300 px
• Imbottitura: 25px in alto, 25px in basso, 25px a sinistra, 25px a destra
• Angoli Arrotondati: 50%

La combinazione di uguale larghezza e altezza combinata con gli angoli arrotondati è ciò che rende circolare il blurb.

Quindi aggiornare la posizione con un offset.

• Posizione: Parente
• Offset verticale: 25px
• Offset orizzontale: 25px
• Indice Z: 1

Questo centrerà il blurb all'interno dei divisori che aggiungeremo in seguito. L'indice Z farà in modo che il blurb si trovi anche sopra gli altri divisori.

Quindi, aggiungi un effetto di scorrimento rotante al blurb.

Nella scheda Effetti di rotazione...

• Abilita rotazione: SI
• Rotazione iniziale: 45 gradi (a 0% viewport)
• Rotazione media: 0deg (al 40% -60% di viewport)
• Rotazione finale: -45° (al 100% di visualizzazione)

Questo ruoterà leggermente il blurb in posizione verticale verso il centro della pagina e poi ruoterà di altri 45 gradi mentre lascia la parte superiore della pagina.

Aggiungi divisore circolare n. 1

Ora aggiungeremo il nostro primo dei tre moduli divisori che comporranno il nostro design di elementi circolari rotanti.

Aggiungi un modulo divisore sotto il modulo blurb.

Divisore 1 Impostazioni

Apri le impostazioni del divisore e aggiorna quanto segue:

• Mostra divisore: NO
• Colore sfondo sfumato sinistro: #311847
• Colore di sfondo sfumato a destra: #ec4067
• Posizione di partenza: 50%
• Posizione finale: 50%

E ora lo rendiamo circolare come segue:

• Larghezza: 350 px
• Larghezza massima: 350 px
• Altezza: 350 px
• Angoli Arrotondati: 50%

Nota che il divisore è leggermente più grande del modulo del blurb in modo che saremo in grado di vedere il bordo esterno del divisore una volta posizionato dietro il blurb.
Ora aggiorniamo semplicemente la posizione del divisore su assoluto e si posizionerà perfettamente dietro il blurb.

• Posizione: Assoluta

Se il tuo divisore si trova sopra il blurb, assicurati di aver aggiornato l'indice blurb z a 1.

Quindi, aggiungi i seguenti effetti di scorrimento al divisore:

Nella scheda Effetto di rotazione...

• Abilita rotazione: SI
• Rotazione iniziale: 0deg (a 0% viewport)
• Rotazione media: 45 gradi (al 50% di visualizzazione)
• Rotazione finale: -180 gradi (al 100% di visualizzazione)

Aggiungi divisore circolare 2

Per creare il secondo divisore circolare, apri la casella dei livelli facendo clic sull'icona dei livelli nel menu delle impostazioni. Quindi duplica il modulo divisore per crearne uno nuovo.

Aggiorna divisore 2 Impostazioni di progettazione

Per questo divisore, diamogli un diverso colore di sfondo sfumato come segue:

• Colore di sfondo sfumato a sinistra: rgba (160,26,125,0,5)
• Colore di sfondo sfumato a destra: rgba (255,255,255,0)

NOTA: è importante utilizzare colori semitrasparenti qui per esporre lo sfondo dietro di esso. Questo crea una bella combinazione di colori.

Quindi, aggiorna gli effetti di scorrimento come segue:

Nella scheda Effetti di rotazione...

• Rotazione media: 90 gradi (al 50% di visualizzazione)
• Rotazione finaleg: 180 gradi (al 100% di visualizzazione)

Aggiungi divisore circolare 3

Continua lo stesso processo per creare il terzo e ultimo divisore duplicando il divisore 2.

Aggiorna divisore 3 Impostazioni di progettazione

Per questo divisore, diamo anche un diverso colore di sfondo sfumato come segue:

• Colore sfondo sfumato sinistro: rgba (255,255,255,0)
• Colore di sfondo sfumato a destra: rgba (41,196,169,0,5)

Quindi aggiorna gli effetti di scorrimento come segue:

Nella scheda Effetti di rotazione...

• Rotazione media: 180 gradi (al 50% di visualizzazione)
• Rotazione finaleg: 360deg (al 100% di viewport)

Nella scheda Ridimensionamento su e giù...

• Abilita ridimensionamento su e giù: S
• Scala iniziale: 110% (a 0% viewport)
• Scala media: 110% (al 50% di visualizzazione)
• Scala finale: 100% (al 100% di visualizzazione)

Creazione di un design Blurb di elementi circolari rotanti #2

Dato che abbiamo già un progetto completato nella colonna 1, avviamo il secondo progetto duplicando l'intera prima colonna. Questo riporterà anche i quattro moduli. Dovrai eliminare una delle colonne vuote per mantenere il layout a tre colonne.

Aggiorna il design del modulo Blurb

Per questo design andremo con uno sfondo sfocato bianco in modo da poter utilizzare l'effetto del filtro dello schermo per mostrare i colori in movimento dietro il testo del blurb. Aggiungeremo anche un effetto di scorrimento ridimensionamento per ingrandire il divisore posteriore.

Ecco come farlo.

Apri le impostazioni del modulo blurb nella colonna 2 e aggiorna quanto segue:

• Sfondo: #ffffff

Quindi cambia il colore del titolo e del corpo del testo in nero.

• Colore del testo del titolo: #000000
• Colore del corpo del testo: #000000

Quindi aggiungi la seguente modalità di fusione:

• Modalità di fusione: schermo

Aggiorna gli effetti di scorrimento del divisore 1

Apri le impostazioni del modulo divisore direttamente sotto il modulo blurb nella colonna 2 e aggiorna i seguenti effetti di scorrimento:
Nella scheda degli effetti Ridimensionamento su e giù...

• Abilita ridimensionamento su e giù: S
• Scala iniziale: 100% (a 0% viewport)
• Scala media: 120% (al 40% -60% di viewport)
• Scala finale: 100% (al 100% di visualizzazione)

Ciò farà sì che il divisore cresca del 20% rispetto alla sua dimensione originale a metà mentre l'utente scorre la pagina verso il basso.

Creazione di un design Blurb di elementi circolari rotanti n. 3

Per quest'ultimo disegno, creeremo una macchia circolare rotante simile a quella nella colonna 1. Tuttavia, aggiungeremo una modalità di fusione diversa per mostrare i colori attraverso il testo bianco su uno sfondo scuro.

Ecco come farlo.

Duplica colonna 1

Dato che abbiamo già un progetto completato nella colonna 1, avviamo il terzo progetto duplicando l'intera prima colonna e spostandola nella posizione della terza colonna utilizzando la casella dei livelli. Quindi elimina la colonna vuota in più.

Aggiorna le impostazioni del modulo Blurb

Innanzitutto, aggiungiamo la modalità di fusione multipla per mostrare i colori del divisore attraverso il testo bianco come segue:

• Modalità di fusione: multipla

Quindi aggiorna anche il colore dell'icona al bianco.

• Colore icona: #ffffff

Aggiorna le impostazioni del divisore 3

Ora eliminiamo l'effetto di scorrimento del ridimensionamento sull'ultimo (terzo) divisore nella colonna 3.
Apri le impostazioni per il terzo divisore e aggiorna quanto segue:

Nella scheda Effetti di ridimensionamento su e giù...

• Abilita ridimensionamento su e giù: NO

Regola la posizione della colonna 2 sul cellulare

In questo momento i tre design della trama si allineeranno a sinistra dello schermo sui display del tablet e del telefono. Per bilanciare il design, possiamo spostare facilmente la colonna centrale a destra usando la scala di trasformazione.

Apri le impostazioni per la colonna 2 e aggiorna quanto segue:

Transform Scale X Axis: 40% (sul tablet), 15% (sul telefono)

Risultato finale

Questo è tutto! Diamo un'occhiata al risultato finale su una pagina live.

Ecco il design sul desktop mentre l'utente scorre il layout.

Ecco il design su tablet.

Ed eccolo al telefono.

Pensieri finali

Una delle migliori caratteristiche di questo layout è la creatività che puoi ottenere con gli effetti di scorrimento e le combinazioni di colori, ognuno dei quali può essere facilmente modificato utilizzando le opzioni integrate di Divi. E una volta che hai capito meglio come incorporare gli effetti filtro, le cose iniziano davvero a scoppiare. Speriamo che questo ti dia qualche ispirazione per il prossimo layout di blurb che crei.

Non vedo l'ora di sentirti nei commenti.

Saluti!