Vai al contenuto principale

Come creare una zona di supereroi con testo animato

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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 ti mostreremo come utilizzare la stessa tecnica, per aggiungere una sezione "super eroe" (espressione usata per descrivere un'ampia 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 generatore Divi e fai clic sul simbolo più. Nella finestra a comparsa Carica dalla libreria, seleziona il Pacchetto layout reclutatore lavoro. Quindi fare clic per utilizzare il layout della home page.

Modello modello divi

Rimuovi contenuti aggiuntivi con il layout

Una volta che la presentazione è stata caricata sulla pagina, distribuisci la visualizzazione wireframe e rimuovi tutto il contenuto dalla presentazione tranne l'intestazione a larghezza intera e la sezione appena sotto di essa.

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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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 telescriventi. Possono anche aggiungere un interessante elemento di animazione al tuo web design. E la parte migliore è che 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.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Spero di sentirti nei commenti.

Alla tua salute!

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
2 azioni
quota2
Tweet
Enregistrer