Le maiuscole di testo forniscono una casella di testo scorrevole al tuo sito web che coinvolge i lettori con estratti utili da contenuto. Sono anche chiamati ticker (o news ticker) e vengono spesso utilizzati per visualizzare un flusso costante di aggiornamenti di notizie nella parte superiore o inferiore della 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>
Poiché il tag html è obsoleto, oggigiorno ci affidiamo a CSS e JavaScript per creare marque. Tuttavia, con Divi, puoi creare un semplice rettangolo di selezione senza preoccuparti del codice personalizzato.
In questo tutorial spiegheremo quanto sia facile creare un semplice testo di selezione con Divi. Vedremo anche come mettere in pausa l'animazione del testo scorrevole al passaggio del mouse e come aggiungere testo scorrevole di grandi dimensioni come elemento di design unico per le tue intestazioni.
Cominciamo.
Panoramica
Cosa ti serve per iniziare
Per iniziare, è necessario quanto segue:
- Le Tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (costruttore visivo)
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Inizio della concezione
Per questo primo esempio, creeremo un semplice rettangolo di testo per una riga di testo. Per fare ciò, daremo a una riga una larghezza massima con l'overflow nascosto. Successivamente, aggiungeremo l'animazione della diapositiva a ciclo continuo a un modulo di testo contenente la riga di testo in modo che scivoli ripetutamente nella riga, come un rettangolo.
Ecco come farlo.
Inizia creando una sezione regolare con una riga di una colonna.
Quindi, prima di aggiungere un modulo, aggiorna la riga con una larghezza fissa, una casella ombra e un raggio, come segue:
- Larghezza massima: 200px
- Tappezzeria: 10px nella parte superiore, 10px nella parte inferiore
- Angoli arrotondati: 10px
- Box Shadow: vedi screenshot
- Straripamento orizzontale: nascosto
- Straripamento verticale: nascosto
Aggiungi il modulo di testo
Quando la riga è completa, 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 divida in un'altra riga.
- Corpo: "Questa è una frase"
Design del modulo di testo
Aggiornare i parametri di progettazione del modulo di testo come segue:
- Margine: -100% a sinistra, 100% a destra
Questo posiziona il modulo di testo all'esterno della sinistra della riga. Poiché la visibilità nascosta della linea è nascosta, il modulo sarà nascosto fino a quando non aggiungeremo l'animazione per renderlo visibile.
- Stile animazione: diapositiva
- Direzione dell'animazione: destra
- Durata dell'animazione: 5000 ms
- Intensità dell'animazione: 100%
- Animazione Avvio opacità: 100%
- Animazione della curva di velocità: lineare
- Ripeti l'animazione: Loop
Risultato
Vediamo ora il risultato.
Creazione di righe di testo più lunghe
Nel design del testo di selezione semplice sopra, abbiamo limitato la larghezza della linea di testo alla stessa larghezza della linea. Tuttavia, se vogliamo creare una riga di testo più lunga con la stessa larghezza, avremo bisogno di modificare un po 'le impostazioni.
Innanzitutto, sul modulo di testo e sostituisci il corpo del testo con il seguente:
Questa è una fase con un collegamento
Aggiungi più larghezza e margine per adattare la riga di testo più lunga
Come potresti notare, il testo è diviso in tre righe invece di una.
Pertanto, dobbiamo regolare il margine e l'intensità dell'animazione.
- Larghezza: 207%
- Margine: -207% a sinistra, 207% a destra
- Intensità dell'animazione: 75%
Il trucco qui è aumentare la larghezza e aggiornare i valori dei margini in modo che rimanga solo spazio sufficiente per una singola riga di testo. Quindi regola l'intensità dell'animazione in modo che non ci siano grandi interruzioni tra l'animazione in loop.
Risultato
Ecco il risultato finale.
Mette in pausa l'animazione del testo di selezione al passaggio del mouse
Poiché questa selezione di marquee include un collegamento, sarà difficile per gli utenti fare clic sul collegamento durante lo spostamento. Tuttavia, possiamo aggiungere un piccolo snippet css al modulo di testo che metterà in pausa l'animazione al passaggio del mouse.
Aggiungi 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 codice CSS personalizzato all'elemento principale nella scheda hover :
animazione-stato-di-riproduzione: in pausa;
Risultato finale
Ora controlla il risultato finale. Notare che l'animazione del testo si interrompe quando il cursore passa sopra il testo, consentendo all'utente di fare clic sul collegamento.
Questo è tutto per questo tutorial, spero che ti abbia insegnato come aggiungere un testo scorrevole su Divi.
Credo che la versione sia cambiata troppo da questo tutorial e che non sia più possibile essere orgogliosi del tuo articolo
Sì lo penso anche io. Lo aggiorneremo.
Buongiorno,
Grazie per questo tutorial, è proprio quello di cui ho bisogno!
Comunque ho fatto esattamente la stessa configurazione sulla linea e sul modulo ma purtroppo non funziona o forse di più.
È anche questo il caso?
Merci d'avance pour il tuo ritorno.
Alexis v
Grazie per questo tutorial, molto chiaro e preciso. Molto bene !