Come progettare riflessioni per immagini e testo in Divi
Pubblicato: 2019-05-19Progettare riflessi per immagini e testo è una tecnica di progettazione classica che può essere utilizzata per ravvivare il contenuto di una pagina web. E Divi semplifica la creazione di questi riflessi direttamente dal Divi Builder senza dover utilizzare un editor di foto.
In questo tutorial, ti mostrerò come progettare riflessi per immagini e testo in Divi. La chiave per creare riflessi è utilizzare l'opzione di scala di trasformazione di Divi per creare una versione speculare dell'elemento. Successivamente, puoi aggiungere un overlay personalizzato che ti mostrerò come fare con un modulo di testo.
Iniziamo!
Sbirciata
Ecco un'anteprima dei design che costruiremo in questo tutorial.
Scarica GRATUITAMENTE il layout delle riflessioni di testo e immagine
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 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!
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, tutto ciò di cui hai bisogno è Divi. Assicurati che il tema Divi sia installato e attivo. Creeremo i nostri progetti da zero utilizzando Divi Builder sul front-end (visual builder). Avrai anche bisogno di alcune immagini fittizie per questo tutorial (un'immagine di sfondo di circa 1920 px x 600 px e un'altra immagine di circa 500 px x 350 px).
Quando sei pronto, vai alla dashboard di WordPress e vai a Pagine> Aggiungi nuovo. Dai un titolo alla tua nuova pagina e distribuisci Divi Builder sul front-end. Seleziona l'opzione "Costruisci da zero". Ora sei pronto per partire!
L'idea di base alla base della creazione della riflessione di immagini e testo in Divi
L'idea di base alla base della creazione di progetti di riflessione in Divi prevede tre passaggi:
- Crea un modulo con la tua immagine o testo
- Duplica il modulo e usa la scala di trasformazione per creare l'immagine o il testo speculare
- Aggiungi una sovrapposizione sfumatura all'elemento specchiato Usando un divisore posizionato in modo assoluto o un modulo di testo.
Questa tecnica di progettazione non è limitata ai singoli moduli. Puoi effettivamente aggiungere riflessi a intere righe all'interno di Divi usando questo metodo che è utile per creare design di intestazione unici. Aggiungeremo il riflesso a una riga nel nostro progetto di riflessione del testo un po' più avanti in questo tutorial. Ma per ora iniziamo con come creare il riflesso dell'immagine.
Come creare la riflessione dell'immagine
Per creare un riflesso dell'immagine, iniziamo con la creazione di una nuova sezione regolare con una riga di una colonna.
Quindi aggiungi un modulo immagine alla riga.
Carica l'immagine che desideri dalla galleria multimediale al modulo immagine. Quindi aggiorna le seguenti impostazioni dell'immagine:
Larghezza massima: 600 px
Allineamento del modulo: centro
Margine personalizzato: 0px in basso
Crea l'immagine speculare
Per creare l'effetto riflesso, dobbiamo prima creare un duplicato specchiato dell'immagine direttamente sotto l'immagine.
Per fare ciò, duplica il modulo immagine. Quindi aggiorna le impostazioni dell'immagine duplicata come segue:
Opacità: 40%
Trasforma l'asse X della scala: -100%
La proprietà di scala di trasformazione è ciò che capovolge magicamente l'immagine verticalmente e orizzontalmente per creare una versione speculare dell'immagine.
Questo si occupa del design di riflessione di base. Tuttavia, possiamo aggiungere un'ulteriore sovrapposizione di sfumature alla nostra immagine in basso per un design di riflessione più realistico.
Aggiungi una sovrapposizione sfumatura usando un modulo di testo
Per aggiungere una sovrapposizione sfumata alla nostra immagine in basso, possiamo usare un modulo di testo. Possiamo dare al modulo di testo una posizione assoluta in modo che si trovi sopra l'immagine in basso. Quindi possiamo aggiungere uno sfondo sfumato al modulo di testo. L'uso di un modulo di testo (invece di un divisore) ti darà l'opzione bonus di aggiungere successivamente del contenuto sopra l'immagine riflessa, se lo desideri.
Vai avanti e crea un modulo di testo sotto l'immagine in basso.
Elimina il contenuto predefinito in modo che il modulo di testo sia vuoto.
Quindi aggiorna le impostazioni del modulo di testo come segue:
Colore sfondo sfumato sinistro: rgba (255,255,255,0)
Colore di sfondo sfumato a destra: #ffffff
Larghezza: 100%
Altezza: 50%
Quindi aggiungi il seguente CSS personalizzato all'elemento principale:
position: absolute !important; top: 50%;
Questo posizionamento assoluto del modulo di testo si sovrappone al modulo di testo nella metà inferiore della riga.
Diamo un'occhiata a come appare il design finora.
Aggiunta di un colore di sfondo
Se non vuoi uno sfondo bianco, puoi sperimentare con altri colori di sfondo che creano un design unico di riflessione a tutta larghezza.
Per fare ciò, apri le impostazioni della riga e aggiorna quanto segue:
Colore di sfondo: #000000
Larghezza: 100%:
Larghezza massima: 100%;
Imbottitura personalizzata: 0px in alto, 0px in basso
Ora controlliamo il risultato.
Aggiunta di testo alla sovrapposizione del modulo di testo
Ricorda, poiché stiamo usando il modulo di testo come sovrapposizione sull'immagine in basso, possiamo aggiungere del contenuto se lo desideriamo.
Per fare ciò, apri le impostazioni del modulo di testo e aggiorna quanto segue:
Contenuto: "Riflessione dell'immagine"
Colore del testo del testo: #ffffff
Dimensione del testo del testo: 30px
Orientamento del testo: centro
Progetto definitivo
Ecco il disegno finale del riflesso dell'immagine.
Creare la riflessione del testo in Divi
Per questo prossimo esempio, creeremo un design di riflessione del testo. Il processo è molto simile a come creeresti un riflesso dell'immagine. Tuttavia, per questo esempio, creerò un riflesso per un'intera riga. Ciò consentirà di riflettere sia il testo che l'immagine di sfondo per un bel design dell'intestazione.
Ecco come farlo.
Per prima cosa crea una nuova sezione regolare con una riga di una colonna. Quindi aggiungi un modulo di testo alla riga.
Aggiorna il contenuto con la parola "Riflessione".
Quindi aggiorna le impostazioni di progettazione come segue:
Carattere del testo: Oswald
Stile del carattere del testo: TT
Colore del testo del testo: #333333
Dimensione del testo del testo: 10vw
Altezza riga di testo: 0,9 em
Orientamento del testo: centro
Margine personalizzato: 0px in basso
Imbottitura personalizzata: 4vw top
Aggiorna le impostazioni della riga
Ora che il nostro modulo di testo è personalizzato, è il momento di aggiornare le impostazioni della riga.
Apri le impostazioni della riga e aggiorna quanto segue:
Immagine di sfondo: inserisci l'immagine di sfondo
Larghezza grondaia: 1
Larghezza: 100%
Larghezza massima: 100%
Imbottitura personalizzata: 0px in alto, 0px in basso
Ecco come appare il design finora.
Creazione della riga di testo riflesso
Per creare il testo riflesso per questo disegno, rifletteremo l'intera riga in modo da poter includere l'immagine di sfondo nel riflesso.
Duplica la riga e aggiorna quanto segue:
Trasforma scala asse Y: -100%
Ora la riga sotto è un'immagine speculare della riga sopra. Ora tutto ciò che dobbiamo fare è aggiungere un overlay.
Aggiungi una sovrapposizione sfumatura usando un modulo di testo
Per aggiungere una sovrapposizione sfumatura al riflesso del testo della riga inferiore, possiamo utilizzare un modulo di testo come abbiamo fatto nel primo disegno di riflessione dell'immagine sopra. Come prima, possiamo dare al modulo di testo una posizione assoluta in modo che riempia l'intera riga e si trovi sopra l'altro modulo di testo con il nostro testo di riflessione. Quindi possiamo aggiungere uno sfondo sfumato alla sovrapposizione del modulo di testo.
Vai avanti e crea un nuovo modulo di testo sotto il modulo di testo nella riga in basso.
Apri le nuove impostazioni del modulo di testo ed elimina il contenuto in modo che il modulo di testo sia vuoto.
Quindi aggiorna le impostazioni come segue:
Colore sfondo sfumato sinistro: #ffffff
Gradiente di sfondo a destra Colore: rgba (255,255,255,0.13)
Posizione di partenza: 38%
Larghezza: 100%
Altezza: 100%
Quindi aggiungi il seguente CSS personalizzato all'elemento principale:
position: absolute !important; top: 0;
Questo è tutto!
Risultato finale
Controlla il risultato finale.
Ecco lo stesso design senza immagini di sfondo.
Pensieri finali
I riflessi possono sembrare davvero fantastici se ti prendi il tempo per progettarli nel modo giusto. Per fortuna, Divi ha gli strumenti per realizzarlo. Esistono altri metodi per creare riflessioni CSS, ma sfortunatamente tendono a non avere il supporto cross browser. I design in questo tutorial avranno un bell'aspetto su tutti i browser.
Ho scoperto che i riflessi hanno un bell'aspetto sulle intestazioni delle pagine e sulla presentazione delle immagini per un pezzo del portfolio. E sono sicuro che ci sono anche molte altre implementazioni.
Non vedo l'ora di sentirti nei commenti.
Saluti!