Come passare da un'immagine all'altra in uno splendido design a sezione divisa Divi

Pubblicato: 2019-10-31

I design interattivi possono far brillare qualsiasi sito web. In questo tutorial, ti mostreremo come passare da un'immagine all'altra in uno straordinario design a sezione divisa. Quando passi il mouse su un'immagine, verrà in primo piano coprendo l'altra. Segui i passaggi seguenti per ricreare il design o scarica il file JSON tramite il link di registrazione. Assicurati di utilizzare immagini con sfondi trasparenti in modo da poter controllare i colori di sfondo di ogni colonna.

Arriviamo ad esso!

Anteprima

Diamo un'occhiata al design su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il Toggle Image Design

Per mettere le mani sul design dell'immagine di commutazione gratuita, 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.

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!

Iniziamo a ricreare

Aggiungi nuova sezione

Spaziatura

Crea una nuova pagina o aprine una esistente. Aggiungi una sezione normale, apri le impostazioni della sezione e rimuovi tutto il riempimento superiore e inferiore predefinito.

Imbottitura superiore + inferiore: 0vw

Visibilità

Quindi, imposta gli overflow della sezione su nascosti.

Overflow orizzontale + verticale: nascosto

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Prima di aggiungere qualsiasi modulo, regolare il dimensionamento della riga.

Larghezza grondaia: 1
Larghezza: 100%
Larghezza massima: 100%

Spaziatura

Rimuovi anche l'imbottitura superiore e inferiore predefinita della riga.

Imbottitura superiore e inferiore: 0vw

Impostazioni colonna 1

Sfondo

Successivamente apri le impostazioni della colonna 1 e aggiungi un colore di sfondo.

Colore: rosa pallido # E7BAC6

Frontiera

Quindi, regola le impostazioni del bordo della colonna su diverse dimensioni dello schermo.

Angoli arrotondati: in alto a destra + in basso a destra
- Desktop: 10vw
- Tablet e telefono: 0vw

Visibilità

Passa alla scheda Avanzate e regola le impostazioni di visibilità come segue:

Overflow orizzontale + verticale
- Desktop: predefinito
- Al passaggio del mouse: visibile
Indice Z:
- Scrivania: 10
- Al passaggio del mouse: 11

Impostazioni colonna 2

Sfondo

Ora aggiungi il colore di sfondo alla colonna 2.

Colore: verde pallido #bfd5a5

Frontiera

Modificare le impostazioni del bordo della seconda colonna come segue:

Angoli arrotondati: in alto a sinistra + in basso a sinistra
- Desktop: 10vw
- Tablet e telefono: 0vw

Visibilità

Ultimo ma non meno importante, modifica le impostazioni di visibilità di conseguenza:

Overflow orizzontale + verticale
- Desktop: predefinito
- Al passaggio del mouse: visibile
Indice Z:
- Scrivania: 9
- Al passaggio del mouse: 11

Aggiungi modulo immagine alla colonna 1

Aggiungi immagine

È ora di iniziare ad aggiungere moduli! Aggiungi un modulo immagine alla colonna 1 e carica un'immagine semitrasparente a tua scelta.

Sfondo

Usa il colore di sfondo della colonna come colore di sfondo dell'immagine.

Colore: rosa pallido # E7BAC6

Dimensionamento

Quindi, nella scheda Design, regola le impostazioni di dimensionamento.

Forza intera larghezza: Sì

Spaziatura

Aggiungi anche un'imbottitura personalizzata.

Imbottitura destra:
- Compressa: 18vw
- Telefono: 20vw

Trasformare

Ultimo ma non meno importante, regola le impostazioni di conversione di trasformazione del modulo.

Trasforma Traduci: asse x 19vw

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Al modulo successivo, che è un modulo di testo. Aggiungi del contenuto H2 e del paragrafo a tua scelta.

Testo

Passa alla scheda Design e modifica le impostazioni del testo come segue.

Carattere: Verdana
Colore: Bianco #ffffff
Taglia:
- Desktop: 2vw
- Tablet: 3vw
- Telefono: 3.5vw
Spaziatura lettere: 1px
Allineamento: centrato

Testo dell'intestazione

Modella il testo dell'intestazione in seguito.

Livello di intestazione: H2
Carattere: Verdana
Peso: grassetto
Allineamento: Centro
Colore: Magenta #9d3056
Taglia:
- Desktop: 6vw
- Tablet + Telefono: 8vw

Dimensionamento

Quindi, regolare il dimensionamento del modulo.

Larghezza:
- Desktop: 56%
- Tablet + Telefono: 43%

Spaziatura

Completa le impostazioni del modulo modificando le impostazioni di spaziatura tra le diverse dimensioni dello schermo.

Margine superiore:
- Desktop: -55vw
- Tablet: -70vw
- Telefono: -90vw
Imbottitura inferiore:
- Desktop + Tablet: 0vw
Imbottitura sinistra: 2vw

Aggiungi il modulo dei contatori a barre alla colonna 1

Impostazioni bancone bar 1-4

Titoli

Il prossimo e ultimo modulo di cui abbiamo bisogno nella colonna 1 è il modulo dei banconi bar. Aggiungi titoli ai banconi del bar.

Fragole
mirtilli
More
lamponi

Percentuali

Insieme alle percentuali.

Dimensionamento

Fare clic sulla prima barra e impostare l'altezza. Ripeti questo passaggio per tutte e quattro le battute.

Altezza: 1.5vw

Impostazioni generali dei banconi bar

Elementi

Nelle impostazioni generali del bancone bar, apri le impostazioni degli elementi. Imposta la percentuale su "No".

Mostra percentuale: No

Sfondo

Ora aggiungi uno sfondo semitrasparente.

Colore: rosa pallido con trasparenza rgba (157,48,86,0.18)

Sbarra

Nella scheda Design, dai alle barre un colore magenta.

Colore di sfondo: Magenta #9d3056

Testo del titolo

Modella le impostazioni del testo del titolo in seguito.

Carattere: Verdana
Colore: Bianco #ffffff
Taglia:
- Desktop: 1vw
- Tablet: 2vw
- Telefono: 3vw

Dimensionamento

Continua regolando le impostazioni di dimensionamento del modulo.

Larghezza:
- Desktop: 49%
- Tablet + Telefono: 33%

Spaziatura

Modifica anche le impostazioni di spaziatura.

Margine superiore:
- Tablet + Telefono: -3vw
Margine inferiore:
- Desktop: 21vw
- Tablet + Telefono: 28vw
Margine sinistro:
- Desktop: 3vw
- Tablet + Telefono: 6vw
Imbottitura inferiore + sinistra: 0vw

Frontiera

Modifica le impostazioni del bordo in seguito.

Angoli arrotondati: 1vw tutti e quattro gli angoli

Visibilità

Infine, regola l'indice z e gli overflow nella scheda visibilità.

Overflow orizzontale: visibile
Overflow verticale: nascosto
Indice Z: 11

Aggiungi modulo immagine alla colonna 2

Aggiungi immagine

Alla seconda colonna! Aggiungi un nuovo modulo immagine e carica un'immagine semitrasparente a tua scelta.

Sfondo

Usa il colore di sfondo della colonna 2 come colore di sfondo dell'immagine successiva.

Colore: verde pallido #bfd5a5

Dimensionamento

Nella scheda Progettazione, regola le dimensioni del modulo.

Forza intera larghezza: Sì

Spaziatura

Aggiungi un'imbottitura sinistra personalizzata anche su schermi di dimensioni più piccole.

Imbottitura sinistra:
- Tablet: 16vw
- Telefono: 18vw

Trasformare

Ultimo ma non meno importante, cambia le impostazioni di traduzione della trasformazione.

Trasforma Trasla: asse x -19,6vw

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Continua aggiungendo un modulo di testo alla colonna 2 con alcuni contenuti di H2 e paragrafo.

Testo

Quindi, nella scheda Design, modella il testo.

Carattere: Verdana
Colore: Bianco #ffffff
Taglia:
- Desktop: 2vw
- Tablet: 3vw
- Telefono: 3.5vw
Spaziatura lettere: 1px
Allineamento: Centro

Testo dell'intestazione

Modifica anche le impostazioni del testo dell'intestazione.

Livello di intestazione: H2
Carattere: Verdana
Peso: grassetto
Allineamento: Centro
Colore: Verde #2c5b00
Taglia:
- Desktop: 6vw
- Tablet + Telefono: 8vw

Dimensionamento

E regola le impostazioni di dimensionamento del modulo.

Larghezza: 60%
Allineamento: Destra

Spaziatura

Ultimo ma non meno importante, utilizza alcuni valori di spaziatura personalizzati su diverse dimensioni dello schermo.

Margine superiore:
- Desktop: -55vw
- Tablet: -63vw
- Telefono: -90vw
Imbottitura inferiore:
- Desktop + Tablet: 37vw
Imbottitura sinistra:
- Desktop: 0vw
- Tablet + Telefono: 16vw
Imbottitura destra:
- Tablet + Telefono: 2vw

Aggiungi il modulo dei contatori a barre alla colonna 2

Impostazioni bancone bar 1-4

Titoli

L'ultimo modulo di cui abbiamo bisogno nella colonna 2 è il modulo banconi bar. Aggiungi quattro banconi da bar.

Broccoli
Sedano
Cetriolo
cavolo

Percentuali

Assegna una percentuale a ogni bancone bar.

Dimensionamento

Apri le impostazioni individuali della prima barra e modifica l'altezza nelle impostazioni di dimensionamento. Ripeti questo passaggio per tutte e quattro le battute.

Altezza: 1.5vw

Impostazioni generali dei banconi bar

Elementi

Nelle impostazioni generali del contatore della barra, modifica l'interruttore della percentuale su "No".

Mostra percentuale: No

Sfondo

Quindi, aggiungi un colore di sfondo semitrasparente.

Colore: verde pallido con trasparenza rgba (17,119,3,0.18)

Sbarra

Quindi, nella scheda Design, aggiungi il colore alla barra del contatore.

Colore barra: verde # 9d3056

Testo del titolo

Continua stilizzando il testo.

Carattere: Verdana
Colore: Bianco #ffffff
Taglia:
- Desktop: 1vw
- Tablet: 2vw
- Telefono: 3vw

Dimensionamento

Modifica anche la larghezza tra le diverse dimensioni dello schermo.

Larghezza:
- Desktop: 49%
- Tablet + Telefono: 33%

Spaziatura

Passa alle impostazioni di spaziatura e aggiungi alcuni valori di spaziatura personalizzati su diverse dimensioni dello schermo.

Margine superiore:
- Desktop: -37vw
- Tablet + Telefono: -40vw
Margine inferiore:
- Desktop: 21vw
- Tablet + Telefono: 28vw
Margine sinistro:
- Desktop: 23vw
- Tablet + Telefono: 60vw
Imbottitura inferiore + sinistra: 0vw

Frontiera

Stiamo aggiungendo anche degli angoli arrotondati.

Angoli arrotondati: 1vw tutti e quattro gli angoli

Visibilità

Completa le impostazioni del modulo regolando gli overflow e l'indice z nella scheda visibilità.

Overflow orizzontale: visibile
Overflow verticale: nascosto
Indice Z: 11

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

È un involucro!

In questo post, ti abbiamo mostrato come passare da un'immagine all'altra in un bellissimo design. Questo è un ottimo modo per creare un design interattivo e utilizzare l'indice z integrato di Divi per determinare quale immagine viene visualizzata. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!