Vorresti creare una sezione Eroe in Divi quale è fluido invece del tradizionale responsive?
La sezione Eroe di a sito web è uno dei migliori candidati per la progettazione fluida. A differenza del design reattivo tradizionale che si adatta a diversi punti di interruzione, il design fluido si adatta perfettamente alla finestra del browser e mantiene il design coerente su qualsiasi dispositivo. Dopotutto, la sezione Eroe è la prima cosa che gli utenti vedono su a sito web.
In questo tutorial, ti mostreremo come creare un'intera sezione di eroi fluidi Divi. La chiave per creare questo design fluido è aggiungere una dimensione del carattere della radice fluida a ciascuno dei moduli utilizzati e quindi incorporare l'unità di lunghezza em (chi è rispetto alla dimensione del carattere del corpo della radice ) nelle impostazioni del modulo.
Cominciamo!
Panoramica
Ecco una rapida occhiata al design che creeremo in questo tutorial.
Nota come il design fluido si adatta facilmente alla larghezza della finestra del browser.
Crea una nuova pagina con Divi Builder
Per iniziare, dovrai fare quanto segue:
Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.
Dagli un titolo che abbia senso per te e fai clic Usa il Divi Costruttore
quindi fare clic su Inizia a costruire (Costruisci da zero)
Dopodiché avrai una tela bianca su cui iniziare a progettare Divi.
Leggi anche: Divi: come creare una sezione Eroe con il modulo Intestazione a larghezza intera
Come progettare una sezione di eroe fluido in Divi
Impostazioni della sezione
Per iniziare, aggiorniamo le impostazioni di progettazione esistenti per la sezione. Apri le impostazioni della sezione e aggiorna quanto segue:
- Gradiente si ferma:
- 30%: #ff2000
- 30%: #121212
- Direzione del gradiente: 45 gradi
Sotto la scheda Design, aggiorna il riempimento:
- Padding: 0px in alto, 0px in basso
Crea una linea
Quindi, aggiungi una riga di una colonna alla sezione.
Impostazioni linea
Apri le impostazioni della linea e aggiorna quanto segue nella scheda Design :
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 1 px
- Altezza minima: 100 vh (desktop), nessuna (tablet e telefono)
- Imbottitura: 0px (superiore e inferiore)
Crea testo di intestazione scorrevole con bordo
Ora che la sezione e la riga sono complete, possiamo aggiungere il testo scorrevole dell'intestazione alla sezione Eroe. Aggiungeremo anche un bordo fluido al modulo Testo per un elemento di design creativo.
Aggiungi un modulo di testo
Per creare il testo e il bordo del titolo, aggiungi un nuovo modulo Testo alla colonna.
Impostazioni del testo
Sotto la scheda Contenuti, aggiornalo contenuto del corpo con il seguente codice HTML:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
Per rendere fluidi gli elementi di design, dobbiamo prima aggiungere una dimensione del carattere della radice fluida al modulo utilizzando la funzione CSS Clamp().
Sotto la scheda Tecnologia, incolla il seguente snippet CSS:
font-size: clamp(32px, 4.1vw, 70px);
Sotto la scheda Design, aggiorna le seguenti impostazioni di progettazione del testo dell'intestazione:
- Testo dell'intestazione:
- Tipo: H1
- Fonte: Montserrat
- Peso del carattere: pesante
- Colore: #ffffff
- Dimensioni: 1 em
- Spaziatura lettere: 0,1 em
- Altezza della linea: 1,2 em
Aggiorna anche il riempimento della mod come segue:
- Imbottitura: 1a (superiore, inferiore, sinistra e destra)
Per creare il design del bordo fluido, aggiorna quanto segue:
- Larghezza bordo: 1em
- Colore bordo: #ffffff
- Colore bordo inferiore: trasparente
- Colore bordo sinistro: chiaro
Creazione del bordo di accento
Per creare il bordo dell'accento, possiamo duplicare il modulo Testo esistente.
Cancellalo contenuto del corpo esistente e aggiornare i parametri di progettazione come segue:
- Larghezza massima: 6,5 cm
- Altezza: 3,25 em
- Larghezza del bordo: 0,5 em
- Colore bordo: #ff2000
Per posizionare il bordo dell'accento, aggiungi una posizione assoluta con un offset uguale alla larghezza del bordo nel modulo Testo dell'intestazione (1em).
Sotto la scheda Tecnologia, aggiorna le seguenti opzioni di Posizione:
- Posizione: Assoluta
- Posizione: in alto a destra
- Spostamento verticale: 1em
- Offset orizzontale: 1em
Crea testo per i sottotitoli
Sotto il testo del titolo, aggiungeremo il testo scorrevole dei sottotitoli. Poiché questo testo è più piccolo, aggiungeremo una dimensione del carattere della radice fluida più piccola.
Aggiungi un nuovo modulo di testo
Per creare il testo della didascalia, aggiungi un nuovo modulo Testo sotto il modulo Testo intestazione esistente.
Puoi aggiungere alcune frasi di testo di riempimento come segue:
- Contenuto: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aggiungi la dimensione del carattere della radice fluida
Successivamente, dobbiamo aggiungere una nuova dimensione del carattere fluido che funzioni meglio per il testo di piccole dimensioni. Nella scheda Avanzate, incolla il seguente snippet CSS sotto l'elemento principale:
font-size: clamp(14px, 1.4vw, 24px);
Impostazioni di progettazione del testo
Sotto la scheda Design, aggiorna quanto segue:
- Testo :
- Peso del carattere: semigrassetto
- Colore: #ffffff
- Dimensioni: 1 em
- Altezza: 1,6 em
Quindi aggiorna le dimensioni e la spaziatura come segue:
- Larghezza massima: 19 cm
- Margine: 2 em (in basso), auto (a sinistra), 5 em (a destra)
Crea il pulsante fluido
Per creare il pulsante fluido, aggiungi un nuovo modulo Pulsante sotto il modulo Testo sottotitoli.
Quindi, aggiorna il testo del pulsante per leggere "7 Day Free Tral".
Aggiungi la dimensione del carattere della radice fluida
Successivamente, dobbiamo aggiungere una nuova dimensione del carattere fluido adatta a un pulsante.
Sotto la scheda Tecnologia, incolla il seguente snippet CSS sotto l'elemento principale:
font-size: clamp(20px, 2.35vw, 40px);
Impostazioni di progettazione dei pulsanti
Sotto la scheda Design, aggiorna quanto segue:
- Allineamento dei pulsanti: a destra
- Usa la dimensione personalizzata per il pulsante: SÌ
- Colore testo pulsante: #ff2000
- Gradiente si ferma:
- Colore 1 25%: trasparente
- Colore 2 25%: #ffffff
- Direzione gradiente: 45 gradi
- Pulsante:
- Larghezza bordo: 0 pixel
- Raggio bordo: 0 pixel
- Fonte: Montserrat
- Peso del carattere: spesso
- Stile: corsivo
- Mostra icona pulsante: SÌ
- Icona: freccia a forma di triangolo a destra (vedi screenshot)
- Posizionamento dell'icona: a destra
- Margine: 8em (a destra)
- Imbottitura: 0,2 em (superiore e inferiore), 1,5 em (sinistra), 1 em (destra)
Crea un'immagine per la sezione Eroe
Con tutto il contenuto della sezione Eroe alla dimensione corretta della pagina, siamo pronti per aggiungere l'immagine della sezione Eroe sul lato sinistro. Per fare ciò, aggiungi prima un modulo Immagine sotto il pulsante.
Apri le impostazioni dell'immagine e carica un'immagine.
Impostazioni di progettazione dell'immagine
Sotto la scheda Design, aggiorna le seguenti impostazioni:
- Allineamento immagine: sinistra (desktop e tablet), centro (telefono)
- Larghezza massima: 48% (desktop e tablet), 70% (telefono)
- Imbottitura: 4% (sinistra)
Infine, dai all'immagine una posizione assoluta con un offset usando l'unità di lunghezza vmin come segue:
- Posizione: Assoluta (Desktop e Tablet), Relativa (Telefono)
- Posizione: in alto a sinistra (Desktop e Tablet)
- Offset verticale: 30vmin (desktop e tablet), 0px (telefono)
Risultato finale
Ecco il risultato finale su una pagina live.
Guarda anche: Divi: come utilizzare maschere e motivi di sfondo per una sezione eroe
È così che il design fluido si adatta perfettamente alla larghezza della finestra del browser.
Scarica DIVI ora!!!
Conclusione
L'aggiunta di un design fluido a una sezione Hero può essere un modo pratico per garantire che il top of the fold sia perfettamente coerente su tutte le dimensioni del browser, senza dover aggiornare il design in punti, fermate specifiche o utilizzare query multimediali.
Si spera che questa tecnica aggiunga un'altra utile abilità di progettazione per progetti futuri.
Speriamo anche che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
