Come creare un effetto di scorrimento del testo di taglio in Divi

Creare un effetto di testo tagliente è un modo divertente per dare vita ai tuoi contenuti. L'idea è quella di dare l'illusione che il testo venga tagliato a metà e si spezzi mentre l'utente scorre la pagina. In questo tutorial, ti mostreremo quanto sia facile creare questo design in Divi!

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

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Parte 1: Progettazione della sezione

In questa prima parte, progetteremo lo sfondo della sezione per il layout della nostra sezione.

Colore di sfondo

Per iniziare, aggiungi un colore di sfondo alla sezione predefinita come segue:

• Colore di sfondo sfumato a sinistra: #29c4a9
• Colore sfondo sfumato a destra: #2b87da

Divisore

Nella scheda Design, aggiungi un divisore superiore come segue:

• Stile divisore superiore: vedi screenshot
• Colore divisorio: bianco
• Flip divisore: verticale

Spaziatura

Per aiutare a testare gli effetti di scorrimento per il design, aggiungiamo un margine temporaneo nella parte superiore e inferiore della sezione. Possiamo sempre eliminarlo quando aggiungiamo la sezione a un'altra pagina. Dobbiamo anche aggiungere la stessa quantità di imbottitura nella parte superiore e inferiore.

• Margine: 80vh in alto, 80vh in basso
• Imbottitura: 200px in alto, 200px in basso

Ombra della scatola per spazio inferiore extra

Per ottenere un colore/spazio di progettazione extra nella parte inferiore della sezione senza compromettere lo spazio effettivo della sezione, possiamo aggiungere un'ombra di riquadro come segue:

• Box Shadow: vedi screenshot
• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione verticale dell'ombra del riquadro: 100 px
• Colore ombra: #2b87da

Visibilità nascosta

Quindi imposta l'overflow su nascosto in modo che i nostri effetti di scorrimento non diventino visibili quando ci si sposta all'esterno della sezione.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Parte 2: Creazione dell'effetto di taglio del testo

In questa parte successiva, creeremo l'effetto del testo di taglio. Impileremo due righe una sopra l'altra, ognuna con un modulo di testo che contiene lo stesso contenuto di testo. Quindi, usando un margine negativo, spingeremo verso il basso il testo in alto, nascondendo la metà inferiore del testo. Quindi useremo un margine negativo per spingere verso l'alto il testo in basso, nascondendo la metà superiore del testo. Una volta fatto, possiamo spostare la riga/colonna superiore usando l'effetto di scorrimento per creare l'illusione che il testo venga tagliato.

Aggiungi riga per la metà superiore del testo

Innanzitutto, aggiungiamo una riga a una colonna.

Quindi aggiorna le impostazioni della riga come segue:

• Larghezza grondaia: 1
• Imbottitura: 0px in alto, 0px in basso

Visibilità colonna nascosta

Quindi, apri le impostazioni della colonna e aggiorna l'overflow su nascosto:

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Modulo Aggiungi testo

Nella colonna aggiungi un nuovo modulo di testo.

Contenuto del testo

Nell'area del corpo del contenuto, aggiungi la parola "Slash".

Progettazione del testo

Passa alla scheda Design e aggiorna lo stile del testo come segue:

• Carattere del testo: B612 Mono
• Peso del carattere del testo: grassetto
• Stile del carattere del testo: TT
• Colore del testo del testo: #ffffff
• Testo Dimensioni testo: 150 px (desktop), 100 px (tablet), 60 px (telefono)
• Spaziatura delle lettere del testo: 0,1 em
• Allineamento del testo: centro

Margine del testo

Qui dobbiamo assicurarci di aggiungere un margine inferiore che sia esattamente la metà delle dimensioni del testo.

• Margine: -75px inferiore (desktop), -50px (tablet), -30px (telefono)

Aggiungi riga per la metà inferiore del testo

Riga duplicata

Una volta che la prima riga con il testo è a posto, duplica l'intera riga per creare la riga inferiore.

Aggiorna margine modulo testo

Quindi aggiorna il margine del modulo di testo nella riga duplicata con un margine superiore negativo anziché un margine inferiore per nascondere la metà superiore del testo.

• Margine: -75px superiore (desktop), -50px superiore (tablet), -30px superiore (telefono)

Aggiungi effetti di scorrimento alla colonna della riga superiore

Successivamente, siamo pronti per aggiungere l'effetto di scorrimento alla colonna nella riga superiore. Non possiamo aggiungere l'effetto di scorrimento al modulo di testo perché il testo verrebbe nascosto a causa del valore nascosto di overflow della colonna che nasconde la parte inferiore del testo.

Apri le impostazioni della colonna per la riga superiore e aggiorna quanto segue:

Sotto la scheda del movimento verticale...

• Abilita movimento verticale: S
• Scostamento iniziale: 0 (allo 0%)
• Scostamento medio: 0 (al 50%)
• Scostamento finale: -.02 (al 75%)

Nella scheda Movimento orizzontale...

• Abilita movimento orizzontale: S
• Scostamento iniziale: 0 (allo 0%)
• Scostamento medio: 0 (al 50%)
• Scostamento finale: 0,2 (al 75%)

Nella scheda Rotazione...

• Abilita rotazione: SI
• Rotazione iniziale: 0 (allo 0%)
• Rotazione media: 0 (al 50%)
• Rotazione finale: 1° (al 75%)

Ora il nostro effetto di taglio del testo è completo!

Parte 3: Creazione del divisore mobile

Con il nostro effetto di testo tagliente completo, possiamo aggiungere un ulteriore elemento divertente: un piccolo divisore volante che taglia il testo! Per creare questo, utilizzeremo un modulo divisore che si sposta attraverso il centro della pagina della sezione nel punto esatto in cui il modulo di testo divide.

Ecco come farlo.

Aggiungi riga

Aggiungi una riga a una colonna sotto la seconda riga.

Aggiungi modulo divisore

Nella colonna, aggiungi un nuovo modulo divisore.

Sfondo divisore

Quindi selezionare NON per mostrare il divisore. Invece, dai al divisore un colore di sfondo come segue:

• Colore sfondo sfumato sinistro: trasparente
• Colore di sfondo sfumato a destra: # 29c4a9

Trasforma scala

Quindi aggiorna l'altezza e spostala a sinistra usando l'opzione di conversione di trasformazione.

• Altezza: 4px
• Trasforma Trasla Asse X: -100%

Effetto di scorrimento

Ora aggiungi l'effetto di scorrimento per spostare il divisore a destra.

Sotto la scheda del movimento orizzontale...

• Abilita movimento orizzontale: S
• Scostamento iniziale: -18 (al 25%)
• Scostamento medio: 0 (al 50%)
• Scostamento finale: 13 (al 75%)

Impostazioni riga

Per assicurarci che il divisore "squarcia" il centro del testo, dobbiamo aggiornare le impostazioni della riga come segue:

• Larghezza: 100%
• Larghezza massima: 100%
• Imbottitura: 0px in alto, 0px in basso
• Posizione: Assoluta
• Posizione: centro sinistra
• Indice Z: 9

Ora il divisore viaggerà da sinistra a destra tagliando attraverso il centro del testo.

Parte 4: aggiunta del corpo del testo

Per quest'ultima parte, aggiungeremo un blocco di testo per completare il layout.

Aggiungi riga

Aggiungi una nuova riga a una colonna sotto la riga con il divisore.

Modulo Aggiungi testo

Quindi aggiungi un nuovo modulo di testo alla riga.

Contenuto del testo

Quindi incolla il seguente codice HTML nell'area del corpo:

<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>
<a href=""> | Learn More ></a>

Progettazione del testo

Nella scheda Progettazione, aggiorna quanto segue:

• Colore del testo del testo: #ffffff
• Colore del testo del collegamento: #121212
• Dimensione del testo del collegamento: 20 px

Impostazioni riga

Apri le impostazioni per la riga padre e aggiorna quanto segue:

• Larghezza grondaia: 1
• Larghezza massima: 400 px
• Posizione: Assoluta
• Posizione: in basso al centro
• Offset verticale: 20 px (desktop e tablet), -25 px (telefono)

Risultato finale

Questo è il risultato finale.

Pensieri finali

Per questo design, è importante mantenere il testo su una riga su tutti i dispositivi in ​​modo da limitare la quantità di testo che verrà tagliata. Ma questa tecnica di effetto di scorrimento tagliente può essere applicata a più di un semplice testo. Puoi facilmente tagliare anche le immagini!

Non vedo l'ora di sentirti nei commenti.

Saluti!