Come convertire le righe Divi in ​​schede Hover orizzontali e verticali

Le schede sono sicuramente utili per rendere disponibili informazioni importanti in un'area concisa del tuo sito web. Ciò riduce la necessità per l'utente di scorrere il contenuto della pagina lunga. Il modulo a schede di Divi è facile da usare e ottimo per passare da un contenuto semplice al clic.

Ma in questo tutorial, ti mostrerò come convertire intere righe Divi in ​​schede al passaggio del mouse. Ti mostrerò anche come creare schede sia orizzontali che verticali. Ciò sbloccherà la potenza di Divi per progettare layout di riga completi con più moduli per ciascuna area di contenuto della scheda. Nessun plugin necessario!

Iniziamo.

Sbirciata

Ecco una rapida occhiata alle schede al passaggio del mouse orizzontale e verticale che creeremo insieme in questo tutorial.

Scarica GRATUITAMENTE il layout delle schede al passaggio del mouse di Divi Rows

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.

Andiamo al tutorial, vero?

Iscriviti al nostro canale Youtube

Cosa ti serve per iniziare

Per iniziare, dovrai avere la seguente configurazione:

1. Il tema Divi installato e attivo
2. Una nuova pagina creata per costruire da zero sul front-end (visual builder)
3. Tre immagini da utilizzare per i contenuti fittizi

Dopodiché, avrai una tela bianca per iniziare a creare alcune schede al passaggio del mouse in Divi.

Creazione di schede al passaggio del mouse orizzontali utilizzando Divi Rows

Per iniziare, crea una nuova sezione regolare con una riga a due colonne.

Sfondo della riga, imbottitura e ombra del riquadro

Prima di aggiungere i nostri moduli, personalizziamo un po' le impostazioni delle righe. Avremo bisogno di tornare alla riga in seguito per posizionarla per la nostra funzionalità di tabulazione.

Apri le impostazioni della riga e aggiorna quanto segue:

Colore sfondo sfumato sinistro: #284f91
Colore di sfondo sfumato a destra: #4646c4

Imbottitura: 50px in alto, 50px in basso, 50px a sinistra, 50px a destra
Box Shadow: vedi screenshot
Colore scatola ombra: rgba (70,70,196,0.66)

Aggiunta di contenuto alla riga

Ora aggiungeremo del contenuto fittizio alla nostra riga. Tieni presente che puoi aggiungere qualsiasi combinazione di colonne e moduli per la tua area di contenuto.

Nella colonna 1, aggiungi un'immagine con un modulo immagine. Sto usando uno dal Pacchetto Layout Design Conference.

Nella colonna di destra, aggiungi un modulo di invito all'azione e aggiorna quanto segue:

URL collegamento pulsante: # (solo per visualizzare il pulsante per ora)
Usa il colore di sfondo: NO

Allineamento del testo: a sinistra
Carattere del titolo: Lato
Dimensione del testo del titolo: 60 px (desktop), 50 px (telefono)

Creazione della scheda

Per creare la scheda reale su cui gli utenti passeranno il mouse per rivelare il contenuto di questa riga, dobbiamo creare un modulo di testo e posizionarlo in alto a destra con del CSS personalizzato.

Vai avanti e aggiungi un nuovo modulo di testo sotto l'immagine nella colonna 1 e aggiorna quanto segue:

Contenuto: "Scheda uno"

Colore di sfondo: #284f91 (questo dovrebbe corrispondere al colore del gradiente sinistro della riga)
Testo Allineamento del testo: centro
Colore del testo del testo: #ffffff
Larghezza: 100 px
Altezza: 50 px
Margine: -100px in alto, -50px a sinistra
Imbottitura: 14px in alto

Infine, aggiungi il seguente CSS personalizzato all'elemento principale per dargli una posizione assoluta nella parte superiore della riga.

position: absolute !important;
top: 0;

Questo CSS più i margini personalizzati che abbiamo aggiunto assicureranno che la scheda sia posizionata esattamente in alto a sinistra della riga. È importante che le schede si trovino effettivamente sopra la riga in modo che l'utente possa passarci sopra con il mouse in un secondo momento.

Altezza e spaziatura della sezione

Ora, prima di continuare a creare le righe e le schede rimanenti, diamo alle nostre righe un po' di respiro aggiungendo un margine superiore e inferiore alla sezione. Per questo design, è importante utilizzare i margini per distanziare la nostra sezione perché daremo anche alla nostra sezione un'altezza impostata. Dobbiamo dare alla nostra sezione un'altezza prestabilita perché vogliamo che le nostre righe ricoprano l'intera altezza della nostra sezione. Ciò significa che ciascuna delle nostre righe (il contenuto della scheda) avrà la stessa altezza della nostra sezione. Quindi è meglio che ciascuna delle righe abbia una quantità simile di contenuto o ci sarà spazio negativo indesiderato in alcune delle schede di riga. Questo dovrebbe avere più senso in seguito.

Per ora, apri le impostazioni della sezione e aggiorna quanto segue:

Altezza: 500 px (desktop), 900 px (tablet), 750 px (telefono)
Margine: 100 px in alto, 100 px in basso
Imbottitura: 0px in alto, 0px in basso

Si noti che l'altezza della sezione dovrà essere regolata per tenere conto dello spazio di contenuto più lungo quando le colonne delle righe si impilano sui dispositivi mobili. Quindi ci sarà bisogno di qualche ritocco a questa altezza per le tue esigenze.

Ora salva le tue impostazioni e torniamo ad aggiungere quelle altre righe.

Creazione della seconda riga del contenuto della scheda

Per creare la seconda riga, duplica la riga creata in precedenza. Sposta il modulo di testo nella colonna 1 e l'immagine nella colonna 2. Quindi aggiorna l'immagine con una nuova. Questo ti aiuterà a farti un'idea di come appaiono i diversi contenuti in ciascuna scheda.

Apri le impostazioni della seconda riga e cambia i colori del gradiente di sfondo passando il mouse sull'area di anteprima dello sfondo e fai clic sulla piccola icona "interruttore".

Quindi apri le impostazioni del modulo di testo utilizzato per creare la scheda nella colonna 1 e assegnagli un colore che corrisponda al nuovo gradiente superiore.

Colore di sfondo: #4646c4

Quindi dobbiamo spostare la scheda a destra in modo che quando questa riga si sovrappone alla riga sopra, puoi vedere la scheda direttamente a destra della scheda nella prima riga.

Margine: 50 px a sinistra

Aggiunta dell'effetto al passaggio del filtro di opacità per la seconda riga

Per la riga, possiamo aggiungere un effetto al passaggio del mouse del filtro di opacità in modo che ci sia una bella transizione al passaggio del mouse quando si passa con il mouse sulla scheda e si rivela il contenuto della riga.

Apri le impostazioni della riga e aggiungi il seguente filtro:

Opacità: 70% (predefinito), 100% (al passaggio del mouse)

Quindi aggiungi una durata della transizione e una curva di velocità per l'effetto al passaggio del mouse del filtro di opacità.

Durata della transizione: 500 ms
Curva di velocità di transizione: lineare

Creazione della terza riga del contenuto della scheda

Ora possiamo aggiungere la nostra ultima riga di contenuto della scheda. Per fare ciò, duplica la seconda riga appena creata. Quindi sposta il modulo di testo nella colonna 1 e l'immagine nella colonna 2. E aggiorna il modulo immagine con una nuova immagine.

Aggiorna le impostazioni della riga con un nuovo gradiente di sfondo.

Colore sfondo sfumato sinistro: #333333
Colore di sfondo sfumato a destra: #4646c4

Quindi apri l'impostazione del modulo di testo utilizzato per creare la scheda nella colonna 1 e aggiorna il colore e il margine.

Colore di sfondo: #333333
Margine: 150 px a sinistra

Questo è l'aspetto che dovrebbe avere la tua pagina prima di posizionare le nostre righe in modo che si sovrappongano l'una all'altra.

Sovrapposizione delle righe con posizionamento assoluto

Per sovrapporre le nostre righe, dobbiamo utilizzare il posizionamento assoluto. Quindi utilizzeremo l'opzione Indice Z per portare ogni riga in primo piano quando passi con il mouse sulle schede. Ma poiché diamo alle nostre righe una posizione assoluta (e il genitore/sezione ha un'altezza impostata), possiamo aggiungere il 100% di altezza a ciascuna delle righe in modo che ricoprano l'intera altezza della sezione.

Ecco come farlo.

Innanzitutto, distribuisci la modalità wireframe. Quindi utilizzare la selezione multipla per selezionare tutte e tre le righe e aprire le impostazioni di una di esse per distribuire le impostazioni modali dell'elemento. Quindi aggiorna l'altezza al 100%.

Altezza: 100%

Questo imposterà l'altezza per tutte e tre le righe al 100%.

Quindi aggiungi il seguente CSS personalizzato all'elemento principale:

position: absolute !important;
left: 0;
right: 0;
margin: auto;

Ora distribuisci la modalità di visualizzazione desktop per vedere come le righe si sovrappongono bene per creare le nostre schede.

Modifica dell'ordine delle righe al passaggio del mouse con l'indice Z

In questo momento potresti aver notato che la terza riga/scheda è in primo piano. Quindi dobbiamo riordinare le righe usando Z Index in modo che la prima scheda venga mostrata per prima finché non passi con il mouse su un'altra scheda.

Per fare ciò, torna alla modalità di visualizzazione wireframe e apri le impostazioni per la prima riga creata (con la scheda uno). Quindi aggiorna l'indice z come segue:

Indice Z: 10

Quindi usa la selezione multipla per selezionare la seconda e la terza riga. Quindi apri il modal delle impostazioni dell'elemento e aggiungi il seguente indice z al passaggio del mouse su entrambe le righe.

Indice Z: 11 (al passaggio del mouse)

Questo è tutto. Diamo un'occhiata al risultato finale.

Risultato finale

Il motivo per cui funziona è perché tecnicamente ogni scheda (modulo di testo) fa parte di ogni riga anche se è posizionata sopra e all'esterno della riga. Ecco perché passando con il mouse su una scheda verrà visualizzata la riga in cui è contenuta.

Ed ecco come appare sui dispositivi mobili.

Creazione di schede al passaggio del mouse verticali

Se desideri aggiungere schede verticali alle righe, tutto ciò che devi fare è riposizionare i moduli di testo utilizzati per creare ciascuna scheda. Avremo anche bisogno di modificare le dimensioni delle nostre righe e la spaziatura delle sezioni per fare spazio alle schede.

Ecco cosa fare.

Vai avanti e duplica la sezione contenente le schede al passaggio del mouse che abbiamo appena creato in modo da avere un nuovo design con cui lavorare.

Quindi apri le impostazioni della sezione e aggiorna quanto segue:

Imbottitura: 10% sinistra, 10% destra

Quindi usa la selezione multipla per selezionare tutte e tre le righe e aggiorna le impostazioni dell'elemento con quanto segue:

Larghezza: 70% (desktop), 70% (tablet), 80% (telefono)
Larghezza massima: 980 px

Quindi aggiorna la direzione del gradiente a 90 gradi per tutte e tre le macchie in modo che quando posizioniamo le schede a sinistra, il colore del gradiente sinistro si fonderà con il colore di sfondo della scheda.

Direzione gradiente: 90 gradi

Ora è il momento di posizionare le schede del modulo di testo a sinistra delle nostre righe per ottenere le schede verticali che desideriamo.

Apri l'impostazione della scheda del modulo di testo nella prima riga e aggiorna quanto segue:

Margine (desktop): -50px in alto, -150px a sinistra
Margine (telefono): -100px in alto, -50px a sinistra

L'impostazione del margine per il telefono consiste nel riportare la scheda sopra la riga per una visualizzazione della scheda orizzontale.

Quindi, apri le impostazioni per la scheda del modulo di testo nella riga della sezione e aggiorna quanto segue:

Margine (desktop): 0px in alto, -150px a sinistra
Margine (telefono): -100px in alto, 50px a sinistra

E per la scheda finale nella terza riga, aggiorna quanto segue:

Margine (desktop): 50px in alto, -150px a sinistra
Margine (telefono): -100px in alto, 150px a sinistra

Risultato finale

Ora diamo un'occhiata al risultato finale.

Ed ecco un tablet e un telefono.

Pensieri finali

Con un po' di pensiero creativo e la potenza di Divi, puoi creare delle fantastiche schede al passaggio del mouse personalizzate utilizzando le righe Divi. Ci sono alcune limitazioni a ciò che puoi visualizzare. Ad esempio, con questa configurazione tutte le righe devono avere la stessa altezza della sezione. Ma, per non aver bisogno di usare un plugin, penso che questa sia un'ottima soluzione. E non dimenticare, dal momento che puoi utilizzare le righe Divi per i tuoi contenuti, ci sono un sacco di modi in cui puoi utilizzare queste schede al passaggio del mouse nel tuo prossimo progetto.

Non vedo l'ora di sentirti nei commenti.

Saluti!