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

Anteprima dell'animazione Divi

Cosa ti serve per iniziare

Per iniziare, è necessario quanto segue:

  1. Le Tema Divi installato e attivo
  2. 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

Anteprima dell'animazione DiviPer 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.

Definisci una riga diviQuindi, 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

Configurazione stile linea Divi

Aggiungi il modulo di testo

Quando la riga è completa, aggiungi un nuovo modulo di testo alla riga.

Aggiungi modulo di testo

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.

Modifica allineamento divi

  • 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

Configurazione dell'animazione del modulo di testo Divi

Risultato

Vediamo ora il risultato.

Risultato animazione divi 1Creazione 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

Frase con divi link

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.

Divi frase wordpress

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.

Risultato animazione divi 2

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;

Personalizzazione dell'animazione Divi hover

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.

Risultato dell'animazione Animazione divi interrotta

Questo è tutto per questo tutorial, spero che ti abbia insegnato come aggiungere un testo scorrevole su Divi.