Come creare un semplice riquadro di testo con Divi

I tendoni di testo forniscono un'area di testo scorrevole al tuo sito web che coinvolge i lettori con utili frammenti di contenuto. Sono anche chiamati ticker (o news ticker) e sono spesso usati per mostrare un flusso costante di aggiornamenti di notizie nella parte superiore o inferiore di una pagina . Di solito l'animazione a scorrimento viene eseguita con una singola riga di contenuto in un ciclo in modo che le informazioni vengano visualizzate ripetutamente. Sfortunatamente, il <marquee> html <marquee> è obsoleto, quindi contiamo su CSS e JavaScript per creare tendoni in questi giorni. Tuttavia, con Divi, puoi creare un semplice riquadro di selezione senza doversi preoccupare del codice personalizzato.

In questo tutorial, ti spiegheremo come è facile creare un semplice riquadro di testo con Divi. Tratteremo anche come mettere in pausa l'animazione del testo scorrevole al passaggio del mouse e come aggiungere un grande riquadro di testo come elemento di design unico per le tue intestazioni.

Iniziamo.

Sbirciata

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!

Iscriviti al nostro canale Youtube

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai avere quanto segue:

1. Il tema Divi installato e attivo
2. Una nuova pagina creata per costruire da zero sul front-end (visual builder)

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

Parte 1: Creazione di un semplice riquadro di testo in Divi

Per questo primo esempio, creeremo un semplice riquadro di testo per una riga di testo. Per fare ciò, daremo a una riga una larghezza massima con l'overflow nascosto. Quindi aggiungeremo un'animazione di diapositiva in loop a un modulo di testo contenente la riga di testo in modo che scorra attraverso la riga ripetutamente in vista come un riquadro di selezione.

Ecco come farlo.

Innanzitutto, crea una sezione regolare con una riga di una colonna.

Quindi, prima di aggiungere un modulo, aggiorna la riga con una larghezza fissa, un'ombra del riquadro e un raggio del bordo come segue:

• Larghezza massima: 200 px
• Imbottitura: 10px in alto, 10px in basso
• Angoli arrotondati: 10px
• Box Shadow: vedi screenshot
• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiungi il modulo di testo

Una volta terminata la riga, aggiungi un nuovo modulo di testo alla riga.

Quindi aggiorna il contenuto del corpo con una singola riga di testo. Per ora assicurati che la riga di testo non si interrompa in un'altra riga.

• Corpo: "Questa è una frase"

Progettazione del modulo di testo

Aggiorna le impostazioni di progettazione del modulo di testo come segue:

• Margine: -100% sinistro, 100% destro

Questo posiziona il modulo di testo all'esterno della sinistra della riga. Poiché la riga ha la visibilità dell'overflow nascosta, il modulo sarà nascosto fino a quando non aggiungeremo l'animazione per visualizzarlo.

• Stile di animazione: diapositiva
• Direzione dell'animazione: destra
• Durata dell'animazione: 5000 ms
• Intensità animazione: 100%
• Opacità iniziale dell'animazione: 100%
• Curva di velocità di animazione: lineare
• Ripetizione animazione: loop

Risultato

Ora controlliamo il risultato.

Creare righe di testo più lunghe

Nel semplice disegno del riquadro di testo sopra, abbiamo limitato la larghezza della riga di testo alla stessa larghezza della riga. Tuttavia, se vogliamo creare una riga di testo più lunga con la stessa larghezza di riga, dovremo modificare un po' le impostazioni.

Innanzitutto, sul modulo di testo e sostituisci il corpo del testo con quanto segue:

<p>This is a sentence in a marquee with a <a href="#">link</a></p>

Aggiungi più larghezza e margine per adattarsi alla linea di testo più lunga

Come puoi notare, il testo ora si divide in tre righe invece di una.

Pertanto, dobbiamo regolare il margine e l'intensità dell'animazione.

• Larghezza: 207%
• Margine: -207% sinistro, 207% destro
• Intensità animazione: 75%

Il trucco qui è aumentare la larghezza e aggiornare i valori dei margini in modo da fornire spazio sufficiente per la singola riga di testo. Quindi regola l'intensità dell'animazione in modo che non ci sia una grande interruzione tra l'animazione in loop.

Risultato

Questo è il risultato finale.

Mettere in pausa l'animazione del testo di selezione al passaggio del mouse

Poiché questo riquadro di selezione include un collegamento, sarà difficile per gli utenti fare clic sul collegamento mentre è in movimento. Tuttavia, possiamo aggiungere un piccolo frammento di css al modulo di testo che metterà in pausa l'animazione al passaggio del mouse.

Aggiungi uno snippet CSS per mettere in pausa l'animazione al passaggio del mouse

Per aggiungere lo snippet CSS, apri le impostazioni del modulo di testo e aggiungi il seguente CSS personalizzato all'elemento principale nella scheda al passaggio del mouse :

animation-play-state: paused;

Risultato finale

Ora controlla il risultato finale. Nota come l'animazione del testo si interromperà quando il cursore passa sopra il testo, consentendo all'utente di fare clic sul collegamento.

Parte 2: Creazione di un riquadro di testo come elemento di design reattivo in Divi

Ora che abbiamo capito come creare un semplice riquadro di testo in Divi, possiamo prendere lo stesso concetto per creare un elemento di design del riquadro di testo reattivo. Questo funzionerebbe bene per creare progetti di animazione unici per intestazioni o intestazioni di sezione.

Per fare ciò, utilizzeremo il layout predefinito della home page di Job Recruiter di Divi.

Aggiungi il layout predefinito

Per aggiungere il layout alla tua pagina, apri il menu delle impostazioni nella parte inferiore del Divi builder e fai clic sul simbolo più. Dal popup Carica dalla libreria, seleziona il pacchetto di layout del reclutatore di lavoro. Quindi fare clic per utilizzare il layout della home page.

Elimina il contenuto extra con il layout

Una volta che il layout è stato caricato nella pagina, distribuisci la modalità di visualizzazione wireframe ed elimina tutto il contenuto del layout tranne l'intestazione a larghezza intera e la sezione direttamente sotto di essa.

Creazione dell'animazione del riquadro di testo

Come puoi vedere, la parola "assunto" è già utilizzata come elemento di progettazione di testo di grandi dimensioni in un modulo di testo nella seconda sezione. Trasformeremo quel modulo di testo in un elemento di design del riquadro di testo reattivo. La chiave per rendere reattivo il riquadro di testo è assicurarsi che la riga e il modulo di testo si estendano per l'intera larghezza della finestra del browser. Possiamo farlo usando una larghezza del 100%. Quindi possiamo usare l'unità di lunghezza vw per la dimensione del testo. Questo renderà il testo scalabile con le larghezze del browser. Successivamente applicheremo gli stessi principi che abbiamo usato per creare il nostro semplice esempio di selezione di testo in precedenza.

Ecco come farlo.

Aggiorna le impostazioni della riga

Come accennato in precedenza, la riga deve essere al 100% affinché questo design di selezione testo reattivo funzioni. Ciò consente al nostro modulo di testo di utilizzare unità di lunghezza vw che sono relative alla larghezza del browser. Poiché il nostro layout predefinito ha già una riga con una larghezza del 100%, non dobbiamo fare nulla.

Tuttavia, dobbiamo regolare il resto delle impostazioni come segue.

• Margine: -24vw inferiore
• Trasforma Trasla asse Y: -24vw
• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Il margine inferiore negativo serve per eliminare lo spazio negativo rimasto ogni volta che spostiamo la riga verso l'alto usando la trasformazione trasla. E dobbiamo nascondere l'overflow della riga per il nostro effetto di selezione del testo.

Aggiorna il design del testo del modulo di testo

Ora tutto ciò che devi fare è aggiornare il modulo di testo per convertirlo in un grande elemento di design del riquadro di testo.

Apri il modulo di testo e aggiorna quanto segue:

• Colore del testo del testo: rgba (255,255,255,0.16)
• Dimensione del testo del testo: 36vw
• Margine: -100% sinistro, 100% destro

La dimensione del testo utilizza un'unità di lunghezza vw, quindi il testo si adatterà perfettamente alla larghezza del browser.

Aggiungi animazione al modulo di testo

• Stile di animazione: diapositiva
• Direzione animazione: Sinistra
• Durata dell'animazione: 10000 ms
• Intensità animazione: 100%
• Curva di velocità di animazione: lineare
• Ripetizione animazione: loop

Progetto definitivo

Ora controlla il progetto finale.

Pensieri finali

I tendoni di testo possono essere uno strumento conveniente da avere nel web design. Non si limitano nemmeno a funzionare strettamente come news ticker. Possono anche aggiungere un bel elemento di animazione al tuo web design. E la parte migliore è che Divi rende facile crearli e progettarli in tutti i modi più belli. Spero che questo tutorial ti aiuti a creare alcuni semplici tendoni di testo ogni volta che arriva il momento in cui ne hai bisogno.

Non vedo l'ora di sentirti nei commenti.

Saluti!