Come visualizzare il contenuto al passaggio del mouse con le schede angolari espandibili in Divi (download GRATUITO)

È sempre divertente scoprire modi nuovi e creativi per coinvolgere gli utenti con i tuoi contenuti utilizzando effetti al passaggio del mouse unici. Un ottimo modo per farlo è mostrare il contenuto al passaggio del mouse utilizzando le schede angolari espandibili. Ciò consente all'utente di passare con il mouse su una scheda nell'angolo di una colonna o di un'immagine per espandere una sovrapposizione con ulteriori contenuti utili per l'utente.

Per questo tutorial, creeremo un layout Divi completamente unico che rivelerà il contenuto al passaggio del mouse utilizzando le schede angolari espandibili. In effetti, ti mostreremo come progettare una scheda d'angolo espandibile per tutti e quattro gli angoli di una colonna in Divi.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al layout della scheda d'angolo in espansione che costruiremo insieme. Nota come gli effetti al passaggio del mouse e il contenuto sono meravigliosamente simmetrici.

Scarica il layout GRATUITAMENTE

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?

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 di sovrapposizione dei contenuti espandibili da zero

Parte 1: Creazione di una scheda d'angolo espandibile dalla posizione in basso a destra

Per iniziare, aggiungi una riga a due colonne (metà metà) alla sezione normale.

Prima di aggiungere un modulo, aggiorna le impostazioni della riga con una larghezza della grondaia personalizzata come segue:

• Larghezza grondaia: 4

Per questo primo elemento in primo piano, creeremo un'immagine di sfondo della colonna che avrà una scheda d'angolo (usando un modulo blurb) in basso a destra della colonna che si espande e si sovrappone all'intera colonna/immagine al passaggio del mouse.

Iniziamo con l'aggiunta di un modulo blurb.

Aggiungi modulo Blurb

Aggiungi un modulo blurb alla colonna 1.

Non lo stileremo ancora. Fondamentalmente avevamo bisogno di alcuni contenuti in modo da poter modellare la colonna che contiene il blurb.

Impostazioni colonna 1

Con il blurb in posizione, apri le impostazioni della riga e quindi fai clic per modificare le impostazioni della colonna 1. Quindi aggiorna quanto segue:

• Immagine di sfondo [inserire immagine]
• Dimensione dell'immagine di sfondo: dimensione reale

NOTA: per il mio esempio, sto usando le immagini della birra di sfondo trasparente prese dal Brewery Layout Pack. Sono 128 px per 359 px, motivo per cui sto usando la dimensione effettiva dell'immagine.

Bordo colonna 1

• Angoli arrotondati: 10 px in basso a destra
• Larghezza bordo destro: 2px
• Colore bordo destro: #e94558
• Larghezza bordo inferiore: 2px
• Colore bordo inferiore: # e94558

CSS e overflow personalizzati

Nella scheda Avanzate, aggiungi il seguente CSS personalizzato all'elemento principale:

height: 400px;

L'aggiornamento quanto segue:

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Questa altezza personalizzata è necessaria affinché il nostro modulo blurb (scheda d'angolo) espanda l'intera altezza della colonna. E l'overflow nascosto è necessario in modo da poter nascondere la maggior parte del modulo blurb all'esterno della colonna fino allo stato di passaggio del mouse.

Aggiungere il contenuto del modulo Blurb

Ora siamo pronti per iniziare a personalizzare il modulo blurb all'interno della colonna 1. Apri le impostazioni del blurb e aggiorna quanto segue:

• Titolo: Mango IPA
• Corpo:

  <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
  <p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
  <p>4.8% ABV / 4 IBUs</p>
  

• Immagine: aggiungi la stessa immagine utilizzata per lo sfondo della colonna

Progettare il modulo Blurb

Dai al blurb un colore di sfondo al passaggio del mouse come segue:

• Colore di sfondo (desktop): trasparente
• Colore di sfondo (al passaggio del mouse): rgba (255,255,255,0.9)

Nella scheda Progettazione, aggiorna quanto segue:

• Posizionamento immagine/icona: a sinistra
• Carattere del titolo: Oswald
• Stile carattere titolo: TT
• Dimensione del testo del titolo: 40px
• Peso del carattere del corpo: semi grassetto
• Colore del corpo del testo (desktop): trasparente
• Colore del corpo del testo (al passaggio del mouse): #121212

• Larghezza immagine: 100 px (desktop), 64 px (telefono)
• Larghezza contenuto: 100%
• Altezza: 100%
• Imbottitura (desktop): 15% in alto, 15% in basso, 8% a sinistra, 8% a destra
• Imbottitura (hover): 8% in alto, 8% in basso, 8% a sinistra, 8% a destra

• Angoli arrotondati (predefinito): 20 px in alto a sinistra
• Angoli arrotondati (hover): 10px in alto a sinistra
• Larghezza bordo superiore: 4 px (desktop), 2 px (passa il mouse)
• Colore bordo superiore: #e94558
• Larghezza bordo sinistro: 4 px (desktop), 2 px (passa il mouse)
• Colore bordo sinistro: #e94558

Opzione di trasformazione (desktop)

• Trasforma l'asse Y della scala: 50%
• Trasforma l'asse X della scala: 50%
• Trasforma Trasla Asse Y: 50%
• Trasforma Trasla Asse X: 30%
• Trasforma origine: in basso a destra

Opzioni di trasformazione (passa il mouse)

• Trasforma l'asse Y della scala (hover): 100%
• Asse X della scala di trasformazione (hover): 100%
• Trasforma Trasla Asse Y (hover): 0%
• Trasforma Trasla asse X (hover): 0%

Per capovolgere l'immagine blurb sul lato destro, aggiungi il seguente CSS personalizzato alla casella Contenuto Blurb:

direction: rtl

NOTA: la direzione "rtl" sta per "da destra a sinistra" che cambia l'ordine predefinito del contenuto (da sinistra a destra).

Risultato

Diamo un'occhiata al risultato finale della nostra scheda d'angolo in espansione dalla posizione in basso a destra. Nota come si espande per riempire l'intera colonna al passaggio del mouse.

Parte 2: Creazione di una linguetta d'angolo espandibile dalla posizione in basso a sinistra

Duplica la colonna

Per creare la scheda dell'angolo in espansione dalla posizione in basso a sinistra, possiamo avviare il progetto duplicando l'intera colonna. Apri le impostazioni della riga e duplica la colonna 1. Quindi elimina la colonna aggiuntiva in modo da avere solo due duplicati esatti.

Aggiorna le impostazioni della colonna 2

Quindi, apri le impostazioni per la colonna 2 e aggiorna quanto segue:

• Angoli arrotondati: 10 px in basso a sinistra
• Larghezza bordo destro: 0px
• Larghezza bordo sinistro: 2px
• Colore bordo sinistro: #e94558

Aggiorna le impostazioni di Blurb

Successivamente, aggiorna le impostazioni di Blurb come segue:

• Allineamento del testo: a destra
• Angoli arrotondati (desktop): 20 px in alto a destra
• Angoli arrotondati (al passaggio del mouse): 10 px in alto a destra
• Larghezza bordo sinistro: 0px
• Larghezza bordo destro: 4 px (desktop), 2 px (passa il mouse)
• Colore bordo destro: #e94558

• Transform Translate X Axis (desktop): -30%
• Trasforma origine (desktop): in basso a sinistra

Quindi assicurati di eliminare il CSS personalizzato nella casella Contenuto Blurb.

Risultato

Ecco il risultato. Nota come questo è simmetrico al primo e si espande dalla posizione in basso a sinistra della colonna.

Parte 3: creazione di una scheda d'angolo espandibile dalla posizione in alto a destra

Ora siamo pronti per iniziare i nostri ultimi due progetti di schede angolari espandibili. Per iniziare, duplichiamo l'intera riga contenente il blurb che abbiamo già progettato.

Aggiorna le impostazioni della colonna 1

Quindi apri le impostazioni della riga duplicata, quindi apri le impostazioni per la colonna 1 e aggiorna quanto segue:

• Angoli arrotondati 10px in alto a destra
• Larghezza bordo inferiore: 0px
• Larghezza bordo superiore: 2px
• Colore bordo superiore: #e94558

Aggiorna le impostazioni del modulo Blurb

Quindi, apri l'impostazione per il modulo blurb e aggiorna quanto segue:

• Angoli arrotondati (desktop): 20 px in basso a sinistra
• Angoli arrotondati (hover): 10px in basso a sinistra
• Larghezza bordo superiore: 0px
• Larghezza bordo inferiore: 4 px (desktop), 2 px (passa il mouse)
• Colore bordo inferiore: # e94558
• Trasforma Trasla Asse Y (desktop): -50%
• Trasforma origine: in alto a destra

Blurb CSS personalizzato

In questo momento possiamo vedere solo la parte in basso a sinistra del modulo blurb che non mostra il nostro titolo come gli altri due blurb nella riga sopra. Per mostrare il titolo all'interno della scheda, dobbiamo riposizionare il titolo in basso a sinistra del blurb con del CSS personalizzato.

Aggiungi il seguente CSS personalizzato alla casella Titolo Blurb:

position: absolute;
bottom: 0;
left: 15px;

Quindi aggiungi il seguente CSS alla casella dei contenuti di Blurb:

direction: rtl;
height: 100%;

Parte 4: Creazione di una linguetta d'angolo espandibile dalla posizione in alto a sinistra

Per il nostro quarto e ultimo effetto al passaggio del mouse sulla scheda dell'angolo in espansione, lo posizioneremo nell'angolo in alto a sinistra per completare il design simmetrico dell'intero layout della griglia.

Aggiorna le impostazioni della colonna 2

Sotto le impostazioni della riga, apri le impostazioni per la colonna 2 e aggiorna quanto segue:

• Angoli arrotondati: 10 px in alto a sinistra
• Larghezza bordo inferiore: 0px
• Larghezza bordo superiore: 2px
• Colore bordo superiore: #e94558

Aggiorna le impostazioni di Blurb

Quindi, apri le impostazioni per il blurb nella colonna 2 e aggiorna quanto segue:

• Angoli arrotondati (desktop): 20 px in basso a destra
• Angoli arrotondati (al passaggio del mouse): 10 px in basso a destra
• Larghezza bordo superiore: 0px
• Larghezza bordo inferiore: 4 px (desktop), 2 px (passa il mouse)
• Colore bordo inferiore: # e94558

Quindi aggiorna le opzioni di trasformazione:

• Transform Translate X Axis (desktop): -30%
• Origine trasformazione: in alto a sinistra

Blurb CSS personalizzato

Quindi aggiungi il seguente CSS personalizzato alla casella Titolo Blurb:

position: absolute;
bottom: 0%;
right: 0%;

Quindi aggiungi il seguente CSS alla casella Contenuto Blurb:

height: 100%;

Parte 4: Finitura del design del layout

Colore di sfondo della sezione

Aggiungi un colore di sfondo della sezione come segue:

• Colore di sfondo: #efefef

Aggiunta del titolo

Per creare il titolo, aggiungi una riga al centro delle due righe e aggiungi un modulo di testo alla riga di una colonna.

Aggiungi il contenuto: "Stagionale".

Quindi aggiorna le seguenti impostazioni:

• Carattere titolo 2: Merriweather
• Intestazione 2 Peso del carattere: grassetto
• Stile carattere titolo 2: TT
• Intestazione 2 Allineamento del testo: Centro
• Colore testo titolo 2: #999999
• Titolo 2: Dimensione testo: 50 px (desktop), 30 px (tablet), 24 px (telefono)
• Intestazione 2 Spaziatura lettere: 1em
• Imbottitura: 50 pixel a sinistra (desktop), 30 pixel a sinistra (tablet), 24 pixel a sinistra (telefono)

Risultato finale

Controlla il risultato finale del layout con le schede angolari espandibili.

Ed ecco il design su mobile.

Pensieri finali

Le schede angolari espandibili presenti in questo design di layout funzioneranno sicuramente per tutti i tipi di contenuti che desideri inserire nel tuo sito Web Divi. Non devi nemmeno usare tutti e quattro gli angoli. Ad esempio, puoi creare un layout a griglia per le immagini utilizzando solo le schede nell'angolo in alto a destra per rivelare il contenuto al passaggio del mouse. Le capacità di progettazione sono abbondanti con questo. Divertiti.

Non vedo l'ora di sentirti nei commenti.

Saluti!