Come progettare una sezione Fluid Hero in Divi
Pubblicato: 2021-07-26La sezione degli eroi di un sito Web è uno dei migliori candidati per il design fluido. 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 degli eroi è la prima cosa che gli utenti vedono su un sito web.
Potresti aver visto la progettazione fluida dimostrata in precedenti esercitazioni sulla tipografia fluida, moduli fluidi e/o pulsanti fluidi. In questo tutorial, ti mostreremo come creare un'intera sezione di eroi fluidi in Divi. La chiave per creare questo design fluido è aggiungere una dimensione del carattere radice fluida a ciascuno dei moduli utilizzati e quindi incorporare l'unità di lunghezza em (che è relativa alla dimensione del carattere del corpo radice) in tutte le impostazioni del modulo.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
Notare come il design fluido si ridimensiona uniformemente con la larghezza della finestra del browser.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Come progettare una sezione Fluid Hero in Divi
Per costruire la sezione Fluid Hero, aggiungeremo una dimensione del carattere di root fluida a ciascuno dei tre moduli. Questi moduli costituiranno l'intestazione, il sottotitolo e il pulsante. Quindi useremo l'unità di lunghezza em all'interno delle impostazioni di progettazione dei moduli per assicurarci che gli elementi di progettazione siano relativi alla dimensione del carattere della radice fluida. Quindi posizioneremo l'immagine sul lato sinistro della pagina con una posizione e un offset assoluti. Il risultato sarà una sezione eroe fluida che si adatta perfettamente alla larghezza della finestra in modo che il design sia coerente su tutti i dispositivi.
Impostazioni della sezione
Per iniziare, aggiorniamo le impostazioni di progettazione esistenti per la sezione. Apri le impostazioni della sezione e aggiorna quanto segue:
- Colore sfondo sfumato sinistro: #ff2000
- Colore di sfondo sfumato a destra: #121212
- Direzione del gradiente: 45 gradi
- Posizione di partenza: 30%
- Posizione finale: 0%
Nella scheda Design, aggiorna l'imbottitura:
- Imbottitura: 0px in alto, 0px in basso
Crea riga
Quindi, aggiungi una riga a una colonna alla sezione.
Impostazioni riga
Apri le impostazioni per la riga e aggiorna quanto segue nella scheda Progettazione:
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 1700 px
- Altezza minima: 100vh (desktop), nessuno (tablet e telefono)
- Imbottitura: 0px in alto, 0px in basso
Crea testo di intestazione fluida con bordo
Ora che la sezione e la riga sono finite, possiamo aggiungere il testo dell'intestazione fluida alla sezione dell'eroe. Aggiungeremo anche un bordo fluido al modulo di testo per un elemento di design creativo.
Modulo Aggiungi testo
Per creare il testo e il bordo dell'intestazione, aggiungi un nuovo modulo di testo alla colonna.
Impostazioni testo
Nella scheda contenuto, aggiorna il contenuto del corpo con il seguente codice HTML:
<h1>Fluid Fullscreen Page Design<span style="color: #ff2000;">.</span></h1>
Per rendere fluidi gli elementi di progettazione, dobbiamo prima aggiungere una dimensione del carattere di radice fluida al modulo utilizzando la funzione CSS Clamp(). Nella scheda Avanzate, oltre il seguente snippet CSS:
font-size: clamp(32px, 4.1vw, 70px);
Con la dimensione del carattere della radice fluida in atto, siamo pronti per aggiornare le impostazioni di progettazione. È importante utilizzare l'unità di lunghezza em in tutto perché l'unità di lunghezza em è relativa alla dimensione del carattere radice dell'elemento.
Nella scheda Progettazione, aggiorna le seguenti impostazioni di progettazione del testo dell'intestazione:
- Tipo di intestazione: H1
- Carattere dell'intestazione: Montserrat
- Peso del carattere dell'intestazione: pesante
- Colore del testo dell'intestazione: #ffffff
- Dimensione del testo dell'intestazione: 1em
- Spaziatura delle lettere dell'intestazione: 0,1 em
- Altezza della linea di prua: 1.2em
Inoltre, aggiorna l'imbottitura dei moduli come segue:
- Imbottitura: 1em (in alto, in basso, a sinistra, a destra)
Per creare il design del bordo fluido, aggiorna quanto segue:
- Larghezza bordo: 1 em
- Colore bordo: #ffffff
- Colore bordo inferiore: trasparente
- Colore bordo sinistro: trasparente
Creare il bordo di accento
Per creare il bordo dell'accento, possiamo duplicare il modulo di testo esistente.
Elimina il contenuto del corpo esistente e aggiorna le impostazioni di progettazione come segue:
- Larghezza massima: 6.5em
- Altezza: 3,25 cm
- Larghezza del bordo: 0,5 em
- Colore bordo: #ff2000
Ricorda, la stessa dimensione del carattere della radice fluida è inclusa in questo modulo duplicato. Quindi, possiamo usare l'unità di lunghezza em per regolare le dimensioni e la larghezza del bordo. Ciò assicurerà che il design si adatterà insieme al design del modulo di testo dell'intestazione.
Per posizionare il bordo dell'accento, aggiungi una posizione assoluta con un offset uguale alla larghezza del bordo nel modulo di testo dell'intestazione (1em). Nella scheda Avanzate, aggiorna le seguenti opzioni di Posizione:
- Posizione: Assoluta
- Posizione: in alto a destra
- Offset verticale: 1em
- Offset orizzontale: 1em
Crea il testo fluido del corpo dei sottotitoli
Sotto il testo dell'intestazione, aggiungeremo il testo del corpo dei sottotitoli fluido. Poiché questo testo è più piccolo, aggiungeremo una dimensione del carattere della radice fluida più piccola.
Aggiungi nuovo modulo di testo
Per creare il testo dei sottotitoli, aggiungi un nuovo modulo di testo sotto il modulo di testo dell'intestazione esistente.
Puoi aggiungere alcune frasi di testo di riempimento come segue:
- Contenuto del corpo: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aggiungi dimensione carattere radice fluida
Successivamente, dobbiamo aggiungere una nuova dimensione del carattere fluido che sia più appropriata per il testo più piccolo. Nella scheda Avanzate, incolla il seguente frammento CSS sotto l'Elemento principale:
font-size: clamp(14px, 1.4vw, 24px);
Impostazioni di progettazione del testo
Nella scheda Progettazione, aggiorna quanto segue:
- Peso del carattere del testo: semi grassetto
- Colore del testo del testo: #ffffff
- Dimensione del testo del testo: 1em
- Altezza riga di testo: 1,6 em
Quindi aggiorna le dimensioni e la spaziatura come segue:
- Larghezza massima: 19em
- Margine: 2em in basso, auto a sinistra, 5em a destra
Crea il pulsante del fluido
Per creare il pulsante fluido, aggiungi un nuovo modulo pulsante sotto il modulo di testo dei sottotitoli.
Quindi aggiorna il testo del pulsante per leggere "Prova gratuita di 7 giorni".
Aggiungi dimensione carattere radice fluida
Successivamente, dobbiamo aggiungere una nuova dimensione del carattere fluido che sia appropriata per un pulsante. Nella scheda Avanzate, incolla il seguente frammento CSS sotto l'Elemento principale:
font-size: clamp(20px, 2.35vw, 40px);
Impostazioni del design dei pulsanti
Nella scheda Progettazione, aggiorna quanto segue:
- Allineamento dei pulsanti: a destra
- Colore del testo del pulsante: #ff2000
- Colore sfondo sfumato a sinistra del pulsante: trasparente
- Colore sfondo sfumato a destra pulsante: #ffffff
- Direzione del gradiente: 45 gradi
- Posizione di partenza: 25%
- Posizione finale: 0%
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 0px
- Carattere pulsante: Montserrat
- Peso del carattere del pulsante: pesante
- Stile carattere pulsante: corsivo
- Icona pulsante: freccia triangolare destra (vedi screenshot)
- Posizionamento dell'icona del pulsante: a sinistra
- Margine: 8em a destra
- Imbottitura: 0.2em in alto, 0.2em in basso, 1.5em a sinistra, 1em a destra
Crea immagine per la sezione Hero
Con tutto il contenuto della sezione dell'eroe nella giusta dimensione della pagina, siamo pronti per aggiungere l'immagine della sezione dell'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
Nella scheda Progettazione, aggiorna le seguenti impostazioni:
- Allineamento immagine: a sinistra (desktop e tablet), al centro (telefono)
- Larghezza massima: 48% (desktop e tablet), 70% (telefono)
- Imbottitura: 4% a sinistra
Infine, assegna all'immagine una posizione assoluta con un offset utilizzando 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.
Ecco come il design fluido si adatta perfettamente alla larghezza della finestra del browser.
Supporto browser
La funzione CSS clamp() (utilizzata per la dimensione del carattere fluido in questo tutorial) è sorprendentemente ben supportata da tutti i principali browser tranne IE. C'è uno strano bug di Safari che non si ridimensiona dinamicamente quando si regola la finestra del browser, ma viene visualizzato correttamente al caricamento della pagina. Per risolvere questo problema, tutto ciò che apparentemente devi fare è dare a ciascuno dei moduli un'altezza minima di 0vw.
Pensieri finali
L'aggiunta di un design fluido a una sezione eroe può essere un modo conveniente per garantire che il above the fold appaia splendidamente coerente su tutte le dimensioni del browser, senza il fastidio di aggiornare il design in punti di interruzione specifici o utilizzare query multimediali.
Non dimenticare di dare un'occhiata ai nostri altri articoli sulla progettazione fluida, incluso come creare tipografia fluida, moduli fluidi e pulsanti fluidi.
Non vedo l'ora di sentirti nei commenti.
Saluti!