Come progettare sovrapposizioni di immagini personalizzate in Divi

Le sovrapposizioni di immagini sono in circolazione da molto tempo nel web design. Sono ottimi per coinvolgere i visitatori rivelando contenuti aggiuntivi ed elementi di design quando si passa con il mouse sull'immagine. Poiché questa è una caratteristica di design così popolare, ci sono molti plugin là fuori dedicati alla creazione di sovrapposizioni di immagini. Tuttavia, a seconda del plugin, possono essere abbastanza limitanti o possono essere un po' eccessivi per ciò di cui potresti aver bisogno. Ecco perché è utile avere il know-how per costruirli da soli in Divi.

In questo tutorial, ti mostreremo come progettare sovrapposizioni di immagini personalizzate in Divi. Queste sovrapposizioni cambieranno e riveleranno elementi quando si passa sopra l'immagine. La parte migliore è che hai il controllo completo sul design delle tue sovrapposizioni di immagini utilizzando le opzioni di design integrate di Divi. E, con alcuni frammenti di CSS personalizzati, puoi avere delle splendide sovrapposizioni di immagini per portare il tuo sito al livello successivo. Non è necessario alcun plug-in.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Scarica GRATUITAMENTE il layout delle sovrapposizioni di immagini Divi

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 della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout della sezione sarà disponibile in 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 di sovrapposizioni di immagini personalizzate in Divi

Costruire la sezione, la riga e le colonne

Per iniziare, crea una riga a tre colonne all'interno della sezione predefinita.

Apri le impostazioni della sezione e aggiungi il seguente colore di sfondo:

• Colore di sfondo: #3a0ca3

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

• Classe CSS: et-overlay-container
• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

La classe CSS è necessaria per attivare gli effetti al passaggio del mouse degli elementi di sovrapposizione che andremo a costruire. L'overflow nascosto è necessario perché avremo un effetto hover che ridimensiona l'immagine oltre il contenitore della colonna.

Aggiunta dell'immagine

Ora che la sezione, la riga e la colonna sono pronte, vai avanti e aggiungi un nuovo modulo immagine alla colonna 1. Questa sarà l'immagine principale dietro i nostri progetti di sovrapposizione.

Carica un'immagine che sia più un ritratto che un paesaggio. Sto usando uno che è di circa 800 px per 1050 px. Assicurati che sia abbastanza largo da coprire l'intera larghezza della colonna su tutte le dimensioni del browser.

(NOTA: è possibile utilizzare immagini orizzontali ma potrebbe essere necessario regolare di conseguenza il posizionamento degli elementi di sovrapposizione in modo che non si sovrappongano.)

Nella scheda Progettazione, aggiorna quanto segue:

• Margine: 0px in basso

Nella scheda Avanzate, aggiungi la seguente Classe CSS:

• Classe CSS: et-overlay-image

Aggiunta del colore di sovrapposizione dell'immagine utilizzando un modulo divisore

Per creare il colore di sovrapposizione dell'immagine, utilizzeremo un modulo divisore. L'idea è quella di creare una copertura sull'immagine facendo in modo che il divisore si estenda per l'intera altezza e larghezza della colonna in modo che si adatti perfettamente all'immagine. Una volta in posizione, puoi regolare il colore di sfondo del modulo divisore per ottenere il colore di sovrapposizione che desideriamo.

Innanzitutto, aggiungi un modulo divisore sotto l'immagine.

Quindi posiziona il divisore come assoluto in modo che si trovi sopra l'immagine:

• Posizione: Assoluta

Nella scheda contenuto, aggiorna quanto segue:

• Mostra divisore: NO
• Colore di sfondo: rgba (247,37,133,0.8)

Quindi aggiorna l'altezza e la larghezza del divisore:

• Larghezza: 100%
• Altezza: 100%

Una volta che il design è a posto, aggiungi la seguente classe CSS al divisore:

• et-overlay-item

(NOTA: questa classe dovrebbe essere aggiunta a tutti gli elementi di design di sovrapposizione che si desidera mostrare solo al passaggio del mouse. Se non si desidera che l'elemento venga inizialmente nascosto, lasciarlo fuori.)

Per tenere traccia degli elementi/moduli di progettazione, apri i livelli modali ed etichetta il modulo divisore ("colore di sovrapposizione").

Aggiunta del testo dell'intestazione in sovrimpressione

Sotto il modulo divisore, aggiungi un nuovo modulo di testo. Questo servirà come testo di intestazione sovrapposto che apparirà nella parte superiore dell'immagine al passaggio del mouse.

Aggiorna il contenuto con un'intestazione H2:

<h2>Coaching</h2>

Quindi aggiorna l'etichetta del modulo di testo per fare riferimento in seguito.

Sotto le impostazioni di progettazione del testo, aggiorna quanto segue:

• Allineamento del testo: Centro
• Colore del testo: chiaro

• Carattere titolo 2: Cormorant Garamond
• Intestazione 2 Peso del carattere: grassetto
• Intestazione 2 Dimensioni del testo: 40 px

• Larghezza: 100%
• Larghezza massima: 85%

Nella scheda Avanzate, aggiorna la posizione come segue:

• Posizione: Assoluta
• Posizione: in alto al centro
• Scostamento verticale: 10%

(NOTA: potrebbe essere necessario regolare l'offset verticale in base alle dimensioni delle proporzioni dell'immagine. Ad esempio, un'immagine di tipo orizzontale potrebbe richiedere un offset inferiore)

Quindi, aggiungi le seguenti classi CSS al modulo di testo:

• Classe CSS: et-overlay-item sposta verso il basso

Oltre alla classe "et-overlay-item", stiamo aggiungendo un'ulteriore classe "move-down" per utilizzare CSS personalizzati per spostare leggermente l'intestazione verso il basso al passaggio del mouse.

Creazione del corpo del testo in sovrimpressione

Per creare il testo del corpo dell'overlay, possiamo duplicare il modulo di testo utilizzato per l'intestazione dell'overlay. Prima di aggiornare le impostazioni per il duplicato, cambia l'etichetta in "overlay body".

Apri le impostazioni del testo per il nuovo modulo di testo e aggiorna il contenuto del corpo con alcune frasi di testo in paragrafi.

Nella scheda Avanzate, cambia la posizione assoluta del modulo al centro.

Poiché non vogliamo che questo si sposti al passaggio del mouse (appare solo), aggiorna la classe CSS per includere solo quanto segue:

• Classe CSS: et-overlay-item

Creazione del pulsante di sovrapposizione

L'ultimo elemento di sovrapposizione su questa immagine sarà il pulsante. Per creare il pulsante, aggiungi un nuovo modulo pulsante sotto il modulo di testo "corpo del testo".

Prima di modificare il design, aggiornare la posizione del pulsante come segue:

• Posizione: assoluta
• Scostamento verticale: 10%

Ora il pulsante dovrebbe essere centrato nella parte inferiore dell'immagine.

Nella scheda Avanzate, aggiorna la Classe CSS e aggiungi uno snippet di CSS personalizzato all'Elemento principale come segue:

• Classe CSS: spostamento su et-overlay-item
• Elemento principale CSS:

  min-width: 15em

Notare che è stata aggiunta una classe aggiuntiva al pulsante per spostarlo leggermente verso l'alto al passaggio del mouse. Questo serve a completare il movimento verso il basso del testo dell'intestazione al passaggio del mouse.

Quindi aggiorna le seguenti impostazioni di progettazione:

• Allineamento dei pulsanti: centro
• Dimensione del testo del pulsante: 14px
• pulsante Colore di sfondo: #4361ee
• pulsante Larghezza bordo: 0px
• Spaziatura tra le lettere dei pulsanti: 0,1 em
• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: TT
• Imbottitura: 0.8em in alto, 0.8em in basso, 0px a sinistra, 0px a destra

Aggiunta del CSS personalizzato con il modulo di codice

Prima di creare alcune altre versioni di questo design di sovrapposizione, aggiungiamo il CSS personalizzato necessario per gli effetti al passaggio del mouse di sovrapposizione. Per fare ciò, aggiungi un modulo di codice sotto il pulsante.

Quindi incolla il seguente CSS all'interno del contenuto del codice. Non dimenticare di racchiudere il codice nei tag di script necessari.

<style>
 @media all and (min-width: 981px) {
  
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }

}
</style>

Il codice è commentato in modo che tu possa capire dove puoi regolare il CSS secondo necessità.

Duplicazione della colonna per più design

Sebbene abbiamo già due colonne vuote aggiuntive con cui lavorare, è più facile trasferire tutti i moduli e il design all'interno della prima colonna su una nuova colonna duplicando l'intera colonna. Per fare ciò, apri i livelli modali, elimina le due colonne vuote e quindi duplica due volte la colonna contenente il disegno di sovrapposizione dell'immagine. Dovresti avere un totale di tre colonne con design identici.

Creazione di un disegno di sovrapposizione di immagini n. 2

Ora che abbiamo tutti gli elementi di design in posizione all'interno di ciascuna delle colonne, possiamo modificare il design per creare sovrapposizioni di immagini aggiuntive. Per questo prossimo progetto, posizioneremo il pulsante al centro dell'immagine (sempre visibile). Quindi sposteremo l'intestazione e il corpo del testo in vista dalla parte superiore e inferiore dell'immagine.

Regola la posizione del corpo del testo e la classe CSS

Apri le impostazioni per il modulo di testo del corpo dell'overlay nella colonna 2 e aggiorna la posizione:

• Posizione: in basso al centro
• Scostamento verticale: 5%

Quindi aggiorna la classe CSS con quanto segue:

• Classe CSS: spostamento su et-overlay-item

Regola la posizione del pulsante e la classe CSS

Quindi, apri le impostazioni per il pulsante nella colonna 2 e aggiorna la seguente posizione:

• Posizione: Centro Centro

Quindi elimina la classe CSS perché vogliamo mantenere il pulsante sempre visibile.

Apri le impostazioni per il modulo divisore (colore di sovrapposizione) e cambia lo sfondo come segue:

• Colore di sfondo: rgba (67,97,238,0.8)

Quindi apri le impostazioni per il pulsante e cambia il colore di sfondo:

• Colore di sfondo del pulsante: #f72585

Regola immagine e classe CSS

Quindi, apri le impostazioni per l'immagine e carica una nuova immagine (se lo desideri).

Quindi aggiungi la seguente classe CSS all'immagine:

• Classe CSS: et-overlay-image et-scale

Notare che oltre alla classe "et-overlay-image", esiste una classe aggiuntiva chiamata "et-scale" che farà aumentare le dimensioni dell'immagine, creando un effetto di ingrandimento al passaggio del mouse.

Creazione di un disegno di sovrapposizione di immagini n. 3

Ora è il momento di creare il terzo disegno di sovrapposizione dell'immagine nella colonna 3.

Regola il contenuto del testo del corpo dell'overlay e la classe CSS

Inizia aprendo le impostazioni per il modulo di testo del corpo in sovrimpressione nella colonna 3 e aggiungi l'intestazione H2 sopra il testo del paragrafo. Ora i due saranno all'interno di un modulo invece di due.

Quindi estrai la classe CSS in modo che il testo rimanga visibile sopra l'immagine.

Regola l'offset del pulsante e la classe CSS

Aprire le impostazioni per il modulo pulsanti e aggiornare l'offset verticale di posizione:

• Scostamento verticale: 5%

Elimina intestazione sovrapposta

Quindi, elimina il modulo di testo dell'intestazione in sovrimpressione.

Regola il colore della sovrapposizione e la classe CSS

Apri le impostazioni per il modulo divisore (colore di sovrapposizione) e aggiorna lo sfondo con quanto segue:

• Colore sfondo sfumato sinistro: rgba (67,97,238,0.8)
• Colore di sfondo sfumato a destra: rgba (247,37,133,0.8)
• Posizione di partenza: 25%
• Posizione finale: 75%

E poiché vogliamo mantenere sempre visibile la sovrapposizione del gradiente, elimina la classe CSS.

Regola la classe CSS dell'immagine

Infine, aggiungeremo una classe CSS aggiuntiva ("et-rotate") all'immagine principale che scalerà e ruoterà l'immagine al passaggio del mouse.

• Classe CSS: et-overlay-image et-rotate

Tocchi finali

Prima di controllare i nostri risultati finali, dobbiamo apportare alcune modifiche.

Elimina il margine inferiore predefinito per tutti i moduli

Per impostazione predefinita, ogni modulo viene fornito con un margine inferiore di 30 px a causa della larghezza della grondaia predefinita (3) nelle impostazioni della riga. Questo può annullare il posizionamento dei moduli nel nostro design di sovrapposizione. Per eliminarli, apri le impostazioni del modulo immagine per una delle immagini nel disegno. Poiché abbiamo già aggiornato il margine con un margine inferiore di 0 px, possiamo estendere questo margine a tutti i moduli.

Fare clic con il pulsante destro del mouse sull'impostazione del margine e scegliere "Estendi margine".

Quindi scegli di estendere il margine a Tutti i moduli sulla pagina.

Elimina moduli di codice duplicati

Assicurati di eliminare i moduli di codice aggiuntivi che sono stati trasferiti durante la duplicazione della prima colonna. Dovresti averne solo uno. Puoi farlo facilmente dai livelli modali.

Risultati finali

Ora che i nostri tre progetti sono completi, diamo un'occhiata ai risultati finali dei nostri progetti di sovrapposizione di immagini.

Ed ecco il design su mobile. Gli effetti di sovrapposizione al passaggio del mouse si applicano solo al desktop tramite la query multimediale CSS personalizzata nel modulo di codice. Pertanto gli overlay saranno visibili sempre su mobile.

Pensieri finali

Costruire sovrapposizioni di immagini personalizzate è in realtà molto divertente. Ci sono innumerevoli design che puoi testare visivamente con Divi builder e basta una piccola quantità di CSS personalizzati per applicare gli effetti al passaggio del mouse. Anche gli effetti al passaggio del mouse per gli elementi di sovrapposizione richiedono CSS personalizzati, puoi comunque sfruttare le opzioni di passaggio del mouse integrate per scegliere come target ciascuno degli elementi di sovrapposizione individualmente.

Non vedo l'ora di sentirti nei commenti.

Saluti!