Vuoi creare un layout di griglia di immagini reattivo con DUE ?
Il costruttore Divi ha fantastici moduli integrati che utilizzano viste a griglia,
Ma a volte potresti voler creare il tuo layout personalizzato della griglia di immagini con collegamenti CTA. Questo ti dà un maggiore controllo sulla progettazione e contenuto che desideri visualizzare per ciascun elemento della griglia senza dover ricorrere a un plugin.
Oggi ti mostreremo come creare un layout di griglia di immagini reattivo con collegamenti CTA utilizzando le opzioni di progettazione integrate di Divi.
Cominciamo!
Panoramica
Ecco una breve panoramica del risultato che otterremo alla fine di questo tutorial.
Crea una pagina con Divi Theme Builder
Dalla dashboard di WordPress, crea una nuova pagina web andando su Pagine >> Aggiungi
Vedi anche: Come creare un menu scorrevole e a pressione in DIVI?
Quindi, dai un titolo alla tua pagina, quindi fai clic su " Usa Divi Builder ".
Quindi fare clic su " iniziare a costruire«
Creazione del layout della sezione speciale
Aggiungi una nuova sezione "Specialità". layout della barra laterale sinistra un terzo due terzi.
Scegli il layout delle colonne come mostrato nello screenshot qui sotto:
Elimina la sezione predefinita in modo che rimanga solo la nuova sezione specializzata.
Apri le impostazioni della sezione e cambia il colore di sfondo come segue:
- Sfondo: #84dbda
Sotto la scheda Style, aggiorna le seguenti opzioni:
- Equalizza le altezze delle colonne: SÌ
- Usa larghezza grondaia personalizzata: SÌ
- Larghezza grondaia: 1
- Larghezza interna: 100%
Leggi anche: Come faccio a fluttuare i post del blog in DIVI?
- Larghezza interna massima: 1px (desktop), 080px (tablet e telefono)
- Margine interno (superiore e inferiore): 12vh
- Imbottitura colonna 1 (superiore e inferiore): 0px
Con gli stili di sezione in atto, aggiungi una riga di una colonna alla sezione.
Impostazioni linea
Aggiorna i parametri della linea come segue:
- Usa larghezza grondaia personalizzata: SÌ
- Spaziatura delle colonne: 1
- Armonizzare le altezze delle colonne: SÌ
- Margine interno (superiore e inferiore): 0px
Crea una seconda riga duplicando la prima.
Quindi cambia la riga duplicata in un layout a due colonne.
Aggiunta di immagini come immagini di sfondo delle colonne
Ora che tutte le righe e le colonne sono a posto, siamo pronti per aggiungere le nostre immagini al layout della griglia.
Per garantire che le immagini siano reattive nel layout della griglia, aggiungeremo ciascuna delle nostre immagini come immagini di sfondo a ciascuna delle quattro colonne nella sezione.
Poiché ogni immagine di sfondo avrà una dimensione di sfondo di " coperchio ", l'immagine riempirà sempre l'intera colonna durante la regolazione delle dimensioni del browser.
Immagine di sfondo della colonna della riga superiore
Per iniziare, apri le impostazioni della colonna della riga superiore.
Quindi aggiungi un'immagine di sfondo alla colonna.
Immagini di sfondo della colonna della riga inferiore
Quindi, apri le impostazioni per la colonna 1 nella seconda riga (in basso) e aggiungi anche un'immagine di sfondo a questa colonna.
Quindi, aggiungi un'immagine di sfondo alla colonna 2 della stessa riga.
Immagine di sfondo della colonna 1 della sezione
E infine, apri le impostazioni della sezione "specialità" e aggiungi un'immagine di sfondo alla colonna 1.
Aggiunta del modulo "Call to Action" sovrapposto alle immagini ad ogni colonna
Ora che le nostre immagini di sfondo sono state aggiunte a ciascuna colonna del layout della griglia, aggiungeremo un modulo "Invito all'azione" a ciascuna colonna.
L'utilizzo di una sovrapposizione del modulo "Invito all'azione" sull'immagine di sfondo della colonna ti consentirà di aggiungere facilmente stili di sovrapposizione di sfondo personalizzati ed effetti al passaggio del mouse all'immagine di sfondo della colonna.
Per questo esempio utilizzeremo semplicemente l'elemento button dal modulo Action Call, ma puoi facilmente aggiungerlo al file contenuto del titolo o del corpo sopra il pulsante.
Aggiungeremo il primo modulo "Call to Action" nella colonna della riga superiore.
Contenuto
Aggiorna le impostazioni del modulo "Call to Action" come segue:
- rimuovere il testo del titolo
- elimina il corpo del testo
- URL collegamento pulsante: #
NOTA : L'aggiunta di un "#" per l'URL del collegamento del pulsante è solo un riempitivo per ora in modo che il pulsante venga visualizzato. L'aggiunta del colore di sfondo semitrasparente al passaggio del mouse ti darà un bel colore di sovrapposizione personalizzato quando passi il mouse sopra il modulo (e l'immagine dietro di esso).
- Colore di sfondo: trasparente (desktop), rgba (255,235,77,0.5) (hover)
Stili dei pulsanti
Vai alla scheda Style e modificare le impostazioni dei pulsanti del modulo "Call to action" come segue:
- Usa stili personalizzati per Button: SÌ
- Dimensione testo pulsante: 22px
- Colore testo pulsante: #ffeb4d
- Pulsante in background: #000000 (desktop), #ec5f00 (al passaggio del mouse)
Vedi anche: Come creare un menu scorrevole ea pressione in DIVI
- Larghezza bordo pulsante: 0 pixel
- Raggio bordo pulsante: 100 px
- Carattere del pulsante: Sabbie mobili
- Pulsante luce fioca: semi grassetto
- Pulsante di riempimento: 0,5 mm in alto, 0,5 mm in basso, 2 mm a sinistra, 2 mm a destra
Dimensioni, imbottitura e bordo
Successivamente, dobbiamo assicurarci che il nostro modulo abbia una certa altezza per esporre l'immagine di sfondo della colonna dietro di esso.
Per fare ciò, aggiungeremo i margini interni (in alto e in basso) al modulo.
Aggiungeremo anche un bordo sottile al modulo per dargli una piccola separazione dalle altre immagini nel layout della griglia.
Applicare le seguenti impostazioni:
- Larghezza: 100%
- Margine interno (superiore e inferiore): 15vh
- Larghezza bordo inferiore: 5px
- Larghezza bordo sinistro: 5px
- Colore bordo: rgba (255,255,255,0.5)
NOTA : L'utilizzo dell'unità di lunghezza vh per il riempimento renderà il valore del riempimento relativo all'altezza della finestra del browser. Quindi gli elementi della griglia dell'immagine aumenteranno e si ridurranno in altezza in proporzione alla finestra del browser.
Centratura verticale del contenuto del modulo "Call to action".
Per garantire che il contenuto del modulo “Action Call” rimane centrato verticalmente, possiamo aggiungere un piccolo snippet di CSS personalizzato utilizzando la proprietà flex.
Nella scheda Avanzate, aggiungi il seguente CSS all'elemento principale:
display:flex;
flex-direction:column;
justify-content:center;
Aggiunto invito all'azione in sovrapposizione ad altre colonne
Ora che il primo modulo "Call to Action" è personalizzato, copia e incolla il modulo nelle altre 3 colonne del layout, comprese le 2 colonne nella riga inferiore e la colonna 1 nella sezione.
Per garantire che il modulo "Call to Action" copra l'intera altezza della colonna 1 nella sezione specializzata, impostare l'altezza minima al 100%.
- Altezza minima: 100%
È finita ! Vediamo il risultato finale.
Risultato finale
Ecco il risultato finale del layout della griglia dell'immagine reattiva su una pagina Web con gli effetti al passaggio del mouse.
Ed è così che la griglia reagisce quando si regola la dimensione del browser.
Scarica DIVI ora!!!
Conclusione
I layout reattivi della griglia di immagini continuano a essere un aspetto popolare di molti siti Web. L'attrattiva visiva fornita dall'immagine di sfondo combinata con l'overlay di invito all'azione può davvero far apparire questi importanti collegamenti di navigazione.
Inoltre, la natura reattiva del layout della griglia dell'immagine sarà perfetta su tutti i dispositivi, il che è sempre una necessità.
Ci auguriamo che questa guida ti sia utile nei tuoi futuri progetti di creazione sito web. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Tuttavia, puoi anche consultare le nostre risorse se hai bisogno di più elementi per completare i tuoi progetti di creazione di siti web.
Puoi anche seguire la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
