Come creare ombre di immagini in movimento su scorrimento in Divi

Nel mondo del web design, di solito pensiamo alle ombre come qualcosa che possiamo aggiungere in Photoshop o come una proprietà CSS (come box-shadow o text-shadow). Ma con Divi possiamo pensare fuori dagli schemi (o box-shadow). Con poche modifiche al filtro integrato di Divi e alle opzioni dell'effetto di scorrimento, possiamo trasformare qualsiasi immagine in un'ombra realistica.

In questo tutorial, ti mostreremo come creare ombre di immagini in movimento sullo scorrimento in Divi. Il trucco è trovare un'immagine PNG con una forma unica in modo che, una volta trasformata, l'immagine mantenga la forma e assomigli a un'ombra realistica dell'immagine. Dopo che l'immagine/ombra è pronta, possiamo aggiungere alcuni effetti di scorrimento per spostare l'ombra mentre l'utente scorre. Questo effetto insolito (ma familiare) aggiungerà uno straordinario elemento di design che darà nuova vita al tuo sito.

Iniziamo!

Sbirciata

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

Scarica il layout GRATUITAMENTE

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".

Dopodiché, avrai una tela bianca per iniziare a progettare in Divi,

Parte 1: Progettazione del layout della sezione

In questa prima parte, progetteremo un layout di sezione rapido per completare l'effetto di scorrimento dell'ombra dell'immagine in movimento.

Aggiungi la riga a due colonne

Per iniziare, aggiungi una riga a due colonne alla sezione normale.

Aggiungi il modulo di testo

Nella colonna di sinistra, aggiungi un nuovo modulo di testo. Questo servirà come nostro contenuto di testo fittizio.

Contenuto del testo

Quindi incolla il seguente codice HTML all'interno del contenuto del corpo:

<h2>Our Wedding</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Progettazione del testo

Nella scheda Progettazione, aggiorna le impostazioni come segue:

• Dimensione del testo del testo: 16px
• Altezza riga di testo: 2em

• Intestazione 2 Carattere: comfortaa
• Colore testo titolo 2: #444235
• Titolo 2: Dimensione testo: 60 px (desktop), 40 px (tablet)

Aggiungi accento di design dell'immagine

Sotto il modulo di testo, aggiungeremo un'immagine che servirà da accento di design al testo. Useremo l'immagine di un ramo di un albero dal pacchetto di layout di Holistic Healer. Questa sarà la stessa immagine che useremo in seguito per le nostre ombre in movimento.

Aggiungi immagine

Aggiungi un nuovo modulo immagine sotto il modulo testo.

Quindi carica l'immagine.

Disegno dell'immagine

Nella scheda Design, riduci l'opacità dell'immagine utilizzando le impostazioni del filtro.

• Opacità: 20%

Quindi, sposta l'immagine verso sinistra e verso l'alto utilizzando la seguente opzione di trasformazione:

• Trasforma Trasla asse X: -20%
• Trasforma Trasla Asse Y: -90%

Posizione dell'immagine

Quindi dai all'immagine una posizione assoluta.

• Posizione: Assoluta

Parte 2: Creazione delle ombre dell'immagine in movimento

Una volta terminato il contenuto fittizio nella colonna di sinistra, siamo pronti per iniziare a creare l'immagine e le ombre dell'immagine in movimento.

Aggiungi immagine principale

Aggiungi un nuovo modulo immagine alla colonna di destra.

Quindi carica un'immagine di almeno 800 px di larghezza. Dal momento che aggiungeremo un'ombra in movimento di un ramo di un albero, ha senso usare un'immagine di un luogo esterno.

Quindi estrai il margine inferiore predefinito sotto il modulo come segue:

• Margine inferiore: 0px

Creazione dell'ombra dell'immagine in movimento 1

Ora siamo pronti per creare la prima ombra dell'immagine in movimento. L'idea di base è utilizzare un'immagine nel formato file PNG in modo che lo sfondo trasparente dell'immagine non venga visualizzato. Quindi utilizzeremo gli effetti del filtro per regolare la luminosità, l'opacità e la sfocatura per trasformare l'immagine in modo che assomigli a un'ombra. Poiché l'immagine PNG ha una forma unica, anche l'ombra manterrà la stessa forma.

Iniziamo aggiungendo la stessa immagine PNG di un ramo dall'Holistic Healer Layout Pack.

Ecco qui…

Aggiungi il modulo immagine sotto l'immagine nella colonna di destra.

Quindi carica l'immagine nel modulo.

Filtri immagine

Nella scheda Design, aggiorna i filtri per far sembrare l'immagine un'ombra.

• Luminosità: 0%
• Opacità: 25%
• Sfocatura: 8px

Posizione dell'immagine

Quindi dai all'ombra dell'immagine una posizione assoluta in modo che si trovi sopra l'immagine principale sopra.

Effetti di scorrimento immagine

Per spostare l'ombra dell'immagine, aggiorna i seguenti effetti di scorrimento.

Nella scheda Movimento orizzontale...

• Abilita movimento orizzontale: S
• Scostamento iniziale: 0 (allo 0%)
• Compensazione media: -3 (al 50%)
• Scostamento finale: -6 (al 100%)

Nella scheda Ridimensionamento su e giù...

• Abilita ridimensionamento su e giù: S
• Scala iniziale: 160% (allo 0%)
• Scala media: 160% (al 50%)
• Scala finale: 160% (al 100%)

(NOTA: questo ingrandirà l'ombra al 160% e la manterrà lì durante l'intero effetto di scorrimento. Ma sentiti libero di regolare le percentuali di scala in punti diversi.)

Nella scheda Rotazione...

• Abilita movimento orizzontale: S
• Rotazione iniziale: 30° (allo 0%)
• Rotazione media: 0° (al 50%)
• Rotazione finale: -30° (al 100%)

Controllo del risultato finora

A questo punto, possiamo visualizzare il risultato fino a quel momento aggiungendo temporaneamente il seguente margine alla sezione in modo da poter scorrere verso il basso la pagina live.

• Margine: 70vh in alto, 70vh in basso

Ecco come appare l'effetto finora.

Nascondere l'overflow della colonna

Per contenere l'ombra dell'immagine all'interno della stessa colonna dell'immagine principale, apri le impostazioni per la colonna 2 e aggiorna le opzioni di overflow come segue:

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Ora controlla il risultato.

Creazione dell'ombra dell'immagine in movimento 2

Una volta posizionata la nostra prima ombra immagine, è facile crearne un'altra. Tutto ciò che dobbiamo fare è duplicare l'ombra dell'immagine esistente e aggiornare gli effetti di scorrimento. Le doppie ombre dell'immagine in movimento creeranno un bellissimo effetto di svelamento dell'immagine.

Duplica l'ombra dell'immagine esistente

Usando il modale Livelli, duplica l'immagine dell'ombra.

Aggiorna effetti di scorrimento

Quindi apri le impostazioni per il duplicato e aggiorna gli effetti di scorrimento come segue:

Nella scheda Movimento orizzontale...

• Abilita movimento orizzontale: S
• Scostamento iniziale: 0 (allo 0%)
• Compensazione media: 3 (al 50%)
• Scostamento finale: 6 (al 100%)

Nella scheda Rotazione...

• Abilita movimento orizzontale: S
• Rotazione iniziale: 210° (allo 0%)
• Rotazione media: 180° (al 50%)
• Rotazione finale: 150° (al 100%)

Ecco il risultato...

Aggiunta di un effetto di ingrandimento all'immagine principale

Poiché l'overflow della colonna è nascosto, possiamo ridimensionare l'immagine principale sullo scorrimento per creare un leggero ingrandimento (o effetto ken burns) che completerà le ombre dell'immagine in movimento.

Per fare ciò, apri le impostazioni per l'immagine principale e aggiorna quanto segue:

Nella scheda Ridimensionamento su e giù...

• Abilita ridimensionamento su e giù: S
• Scala iniziale: 100% (allo 0%)
• Scala media: 115% (al 50%)
• Scala finale: 130% (al 100%)

Questo creerà un effetto di ingrandimento mentre l'utente scorre.

Risultato finale

Ed ecco il risultato finale.

Pensieri finali

Spero che queste ombre in movimento siano state divertenti da costruire per te come lo sono state per me. È un elemento di design semplice ma sorprendente che ha il potenziale per aggiunte ancora più creative. Sentiti libero di esplorare l'aggiunta di diversi colori, modalità di fusione e altri effetti di scorrimento per personalizzare il design.

Non vedo l'ora di sentirti nei commenti.

Saluti!