Progettare punti salienti per immagini e testo è una tecnica di progettazione classica che può essere utilizzata per ravvivare il contenuto di una pagina web. Inoltre, Divi semplifica la creazione di questi riflessi direttamente da Divi Builder senza dover utilizzare un editor di foto.
In questo tutorial, ti mostrerò come progettare i riflessi per le immagini su Divi. La chiave per fare riflessioni è usare l'opzione di trasformazione di Divi per creare una versione speculare di un oggetto. Dopodiché puoi aggiungere un overlay personalizzato che ti mostrerò come usare con un modulo di testo.
Cominciamo!
Panoramica
Ecco una panoramica dei progetti che costruiremo in questo tutorial.
Cosa ti serve per iniziare
Per iniziare, tutto ciò di cui hai bisogno è Divi. Assicurati che il Tema Divi è 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 1920px x 600px e un'altra immagine di circa 500px x 350px).
Quando sei pronto, vai alla dashboard di WordPress e vai su Pagine> Aggiungi. Dai un titolo alla tua nuova pagina e distribuisci Divi Builder sul front-end. Seleziona l'opzione "Crea da zero". Ora sei pronto per partire!
L'idea di base dietro la creazione di un'immagine e un riflesso del testo in Divi
L'idea di base della creazione di schemi di riflessione in Divi comprende tre passaggi:
- Crea un modulo con la tua immagine o testo
- Duplica il modulo e usa la scala di trasformazione per creare l'immagine speculare o il testo
- Aggiungi una sovrapposizione sfumatura all'elemento specchiato utilizzando un divisore o un modulo di testo posizionato in modo assoluto.
Questa tecnica di progettazione non è limitata ai singoli moduli. Puoi effettivamente aggiungere riflessioni a intere righe in Divi usando questo metodo, utile per creare design di intestazione unici. Aggiungeremo la riflessione a una riga del nostro progetto di riflessione del testo più avanti in questo tutorial. Ma per ora, iniziamo creando un riflesso dell'immagine.
Come creare un riflesso dell'immagine
Per creare un riflesso dell'immagine, iniziamo creando una nuova sezione regolare con una riga di una colonna.
Quindi aggiungere un modulo immagine alla linea.
Scarica l'immagine che desideri dalla libreria multimediale al modulo immagine. Quindi aggiorna le seguenti impostazioni dell'immagine:
Larghezza massima: 600px
Allineamento del modulo: centro
Margine personalizzato: 0px in basso
Crea l'immagine speculare
Per creare l'effetto riflesso, dobbiamo prima creare una copia duplicata dell'immagine direttamente sotto l'immagine.
Per fare ciò, duplica il modulo immagine. Quindi aggiorna le impostazioni dell'immagine duplicata come segue:
Opacità: 40%
Asse X della scala di trasformazione: -100%
La proprietà Transform scale è ciò che magicamente capovolge l'immagine verticalmente e orizzontalmente per creare una versione speculare dell'immagine.
Questo supporta il design di base della riflessione. Tuttavia, possiamo aggiungere una sovrapposizione di gradiente aggiuntiva alla nostra immagine inferiore per un design di riflessione più realistico.
Aggiungi una sovrapposizione sfumatura utilizzando un modulo di testo
Per aggiungere una sovrapposizione di gradiente alla nostra immagine in basso, possiamo utilizzare un modulo di testo. Possiamo dare al modulo di testo una posizione assoluta in modo che sia sopra l'immagine in basso. Successivamente, possiamo aggiungere uno sfondo sfumato al modulo di testo. L'uso di un modulo di testo (invece di un separatore) ti darà l'ulteriore opzione di aggiungere contenuto sopra l'immagine riflessa in un secondo momento, se lo si desidera.
Vai avanti e crea un modulo di testo sotto l'immagine in basso.
Cancellalo contenuto per impostazione predefinita in modo che il modulo di testo sia vuoto.
Quindi aggiornare le impostazioni del modulo di testo come segue:
Gradiente di sfondo sinistro Colore: rgba (255,255,255,0)
Gradiente di sfondo a destra Colore: #ffffff
Larghezza: 100%
Altezza: 50%
Quindi aggiungi il seguente codice CSS personalizzato all'elemento principale:
posizione: assoluta! importante; in alto: 50%;
Questo posizionamento assoluto del modulo di testo sovrappone il modulo di testo nella metà inferiore della riga.
Aggiunta di un colore di sfondo
Se non si desidera uno sfondo bianco, è possibile utilizzare altri colori di sfondo per creare un motivo di riflessione su tutta la larghezza.
Per fare ciò, apri le impostazioni della linea e aggiorna quanto segue:
Colore di sfondo: #000000
Larghezza: 100%:
Larghezza massima: 100%;
Imbottitura personalizzata: 0px alta, 0px verso il basso
Vediamo ora il risultato.
I riflessi possono sembrare davvero fantastici se ti prendi il tempo per progettarli correttamente. Fortunatamente, Divi ha il outils avere successo. Esistono altri metodi per eseguire le riflessioni CSS, ma sfortunatamente tendono a non essere supportati dai browser. I design in questo tutorial staranno benissimo su tutti i browser.
Ho scoperto che i riflessi hanno un bell'aspetto nelle intestazioni delle pagine e nelle immagini in mostra per un elemento del portfolio. E sono sicuro che ci sono molte altre implementazioni.
Questo è tutto per questo tutorial, spero che ti permetta di aggiungere riflessioni sul tuo sito WordPress utilizzando le funzionalità interne di Divi.
