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.
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.
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.
Tuttavia, dobbiamo regolare il resto delle impostazioni come segue.
- Margine: -24vw in basso
- Trasforma trasla asse Y: -24vw
- Straripamento orizzontale: nascosto
- Straripamento verticale: nascosto
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.
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
Disegno finale
Ora controlla il progetto finale.
Considerazioni 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!