Questo tutorial si aggiunge a un tutorial che abbiamo realizzato qualche giorno fa. Ti abbiamo infatti mostrato come aggiungere testo scorrevole in una colonna su Divi. Oggi vi mostreremo come utilizzare la stessa tecnica, per aggiungere una sezione "super eroe" (espressione usata per dscrivere una vasta area di una pagina web progettata per attirare l'attenzione ed evidenziare determinati elementi).

Cominciamo.

Aggiungi il layout predefinito

Per aggiungere il layout alla tua pagina, apri il menu delle impostazioni nella parte inferiore del builder Divi e fare clic sul simbolo più. Nella finestra a comparsa Carica dalla libreria, selezionare il pacchetto di layout di Job Recruiter. Quindi fare clic per utilizzare il layout della home page.

Modello modello divi

Rimuovi contenuti aggiuntivi con il layout

Una volta caricata la presentazione sulla pagina, distribuisci la visualizzazione wireframe e rimuovi tutto contenuto della presentazione, ad eccezione dell'intestazione a larghezza intera e della sezione immediatamente sottostante.

Sezione modifica progetto divi

Creazione dell'animazione del testo di selezione

Come puoi vedere, la parola "assunto" è già utilizzata come un grande elemento di design del testo in un modulo di testo nella seconda sezione. Trasformeremo questa mod di testo in un elemento di design di altoparlanti di testo reattivo. La chiave per rendere reattivo il rettangolo di testo è assicurarsi che la riga e il modulo di testo si estendano per l'intera larghezza della finestra del browser. Possiamo farlo utilizzando il 100% di larghezza. Quindi possiamo usare l'unità di lunghezza vw per la dimensione del testo. Questo renderà il testo adatto alla larghezza del browser. Successivamente, applicheremo gli stessi principi che abbiamo utilizzato in precedenza per illustrare il nostro semplice esempio di testo scorrevole.

Ecco come farlo.

Aggiorna i parametri della linea

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

Configurazione larghezza modulo linea Divi

Tuttavia, dobbiamo regolare il resto delle impostazioni come segue.

  • Margine: -24vw in basso
  • Trasforma trasla asse Y: -24vw
  • Straripamento orizzontale: nascosto
  • Straripamento verticale: nascosto

Configurazione delle impostazioni della linea Divi

Il margine inferiore negativo serve a rimuovere lo spazio negativo che rimane ogni volta che spostiamo la riga utilizzando il comando di traduzione di trasformazione. E dobbiamo nascondere l'overflow della riga per il nostro effetto di testo di selezione.

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

Apri il modulo di testo e aggiorna quanto segue:

  • Colore testo testo: rgba (255,255,255,0.16)
  • Dimensione del testo: 36vw
  • Margine: -100% a sinistra, 100% a destra

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

Configurazione del modulo di testo Divi

Aggiungi un'animazione al modulo di testo

  • Stile animazione: diapositiva
  • Direzione dell'animazione: sinistra
  • Durata dell'animazione: 10000 ms
  • Intensità dell'animazione: 100%
  • Animazione della curva di velocità: lineare
  • Ripeti l'animazione: Loop

Configurazione dell'animazione del testo DiviDisegno finale

Ora controlla il progetto finale.

Assunto animazione diviConsiderazioni finali

Le caselle di testo possono essere uno strumento utile per il web design. Non si limitano a funzionare solo come ticker. Possono anche aggiungere un interessante elemento di animazione al tuo web design. E la parte migliore è questa Divi rende facile creare e progettare tutti i tipi di cose belle. Spero che questo tutorial ti aiuti a creare semplici testi di selezione ogni volta che ne hai bisogno.

Spero di sentirti nei commenti.

Alla tua salute!