Come creare un modulo Divi fluido reattivo

Per semplificare ulteriormente il processo di implementazione di un design responsive coerente per un modulo Divi, possiamo applicare le pratiche del web design fluido. A differenza dei metodi più tradizionali di design reattivo, il web design fluido non si interrompe o salta bruscamente a una dimensione/stile diverso in diversi punti di interruzione. Incorpora unità di lunghezza reattive relative alla larghezza della finestra in modo che il design si adatti (o si ridimensioni) in modo fluido, mantenendo il design coerente su tutti i dispositivi.

In questo tutorial, ti mostreremo come creare un modulo Divi fluido. Utilizzando pratiche di progettazione fluida simili per creare una tipografia fluida e/o pulsanti fluidi, creeremo un modulo Divi fluido che si adatterà perfettamente alla finestra del browser. Come scopriremo, la combinazione segreta consiste nell'aggiungere una dimensione del carattere del corpo principale con un'unità di lunghezza relativa (o fluida) al modulo e quindi incorporare l'unità di lunghezza em (che è relativa alla dimensione del carattere del corpo principale) in tutto il modulo impostazioni quando necessario.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Ed ecco un codepen che dimostra questa funzionalità del modulo fluido.

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 i file

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.

SCARICA

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:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Come creare un modulo Divi fluido reattivo

La riga

Per iniziare, crea una nuova riga a una colonna all'interno della sezione normale predefinita.

Apri le impostazioni della riga e aggiorna quanto segue:

• Usa larghezza grondaia personalizzata: S
• Larghezza grondaia: 1
• Larghezza: auto
• Larghezza massima: 100%
• Imbottitura: 5vw superiore, 5vw inferiore

Progettazione di un modulo di invito all'azione fluido

Sebbene le stesse tecniche di progettazione fluida possano essere aggiunte a quasi tutti i moduli Divi, per questo tutorial andremo a uno dei moduli di invito all'azione di Divi.

Aggiungi un nuovo modulo di invito all'azione all'interno della colonna/riga.

Le impostazioni del contenuto

Sotto le impostazioni del contenuto, aggiungi un URL di collegamento al pulsante fittizio e aggiorna il colore di sfondo come segue:

• URL collegamento pulsante: #
• Colore di sfondo: #5e6472

Aggiunta di una dimensione del carattere della radice fluida al modulo

Quando si progetta un modulo fluido, è necessario aggiungere una dimensione del carattere radice fluida al modulo. Una volta aggiunta al modulo, questa dimensione del carattere radice verrà incorporata dinamicamente nel resto delle nostre impostazioni di progettazione del modulo utilizzando l'unità di lunghezza em.

Per aggiungere la dimensione del carattere della radice fluida al modulo, vai alla scheda Avanzate e aggiungi il seguente CSS personalizzato all'elemento principale:

font-size: clamp(16px, 2vw, 24px);

Per questa dimensione del carattere, utilizziamo la funzione CSS Clamp() per impostare una dimensione minima del carattere, una dimensione del carattere fluida (quando necessario) e una dimensione massima del carattere.

Sovrascrivere qualsiasi elemento con spaziatura predefinita con valori di unità di lunghezza em

Sebbene non sia assolutamente necessario, per ottenere un vero design fluido per il modulo, è necessario sovrascrivere qualsiasi spaziatura predefinita (dietro le quinte) che il modulo sta attualmente utilizzando con un valore di unità di lunghezza em per quella proprietà. Puoi identificarli ispezionando il tuo elemento utilizzando gli strumenti di sviluppo di un browser. In questo caso, il modulo di invito all'azione ha un'imbottitura inferiore sia nella descrizione della promozione che nell'elemento del titolo della promozione. Poiché la proprietà del padding inferiore utilizza un'unità di lunghezza in pixel (px), dobbiamo sovrascrivere ciascuna con un'unità di lunghezza em che incorporerà la dimensione del carattere del corpo principale che abbiamo appena aggiunto all'elemento principale.

Aggiornamento del design con le unità di lunghezza em

Ora che la nostra dimensione del carattere della radice fluida per il modulo è a posto, tutto ciò che dobbiamo fare è aggiornare il design del modulo usando le unità di lunghezza em. Poiché l'unità di lunghezza em è relativa alla dimensione del carattere radice, qualsiasi design che utilizza l'unità di lunghezza em erediterà la fluidità della dimensione del carattere e si ridimensiona in modo fluido con la dimensione del carattere quando necessario.

Corpo del testo

La dimensione del carattere radice personalizzata che abbiamo aggiunto in precedenza è stata creata appositamente tenendo presente il corpo del testo. Pertanto possiamo assegnare al corpo del testo un valore di 1em che erediterà il valore esatto della dimensione del carattere radice. Possiamo anche aggiungere un'altezza della linea del corpo. Per fare ciò, aggiorna quanto segue:

• Dimensione del testo del corpo: 1em
• Altezza della linea del corpo: 1,8 em

Testo del titolo

Per l'elemento di testo del titolo del modulo, possiamo dargli una dimensione maggiore usando l'unità di lunghezza em. Aggiorna quanto segue:

• Dimensione del testo del titolo: 1.7em
• Altezza della riga del titolo: 1,3 em

Per darti un'idea di quale sarà effettivamente la dimensione del testo del titolo, moltiplichiamo semplicemente il valore della lunghezza em per il valore del carattere radice. Ricorda, la dimensione del carattere principale utilizza clamp() per stabilire una dimensione del carattere minima (16px), fluida (2vw) e massima (24px). Pertanto, la dimensione minima del testo del titolo sarà 1,7 volte 16 pixel, che è vicina a 27,2 pixel. La dimensione del carattere fluido sarà 1,7 volte 2vw (2% della larghezza della finestra). E la dimensione massima del carattere sarà 1,7 volte 24 px, che è vicina a 69,36 px.

Design del pulsante

Il terzo elemento del modulo è il pulsante. Possiamo aggiornare le impostazioni di progettazione del pulsante utilizzando i valori dell'unità di lunghezza em per incorporare anche il design fluido.
Aggiorna le seguenti impostazioni dei pulsanti:

• Dimensione del testo del pulsante: 1.3 em
• Larghezza bordo pulsante: 0,12 em
• Raggio del bordo del pulsante: 1,5 em
• Spaziatura tra le lettere dei pulsanti: 0,1 em
• Imbottitura pulsanti: 0.1em in alto, 0.1em in basso, 2em a sinistra, 2em a destra

Dimensioni e spaziatura

Per assicurarci che il modulo abbia una dimensione e una spaziatura del fluido, dobbiamo utilizzare anche le unità di lunghezza em per quei valori.

Aggiorna le seguenti impostazioni di dimensione e spaziatura:

• Larghezza massima: 40 em
• Altezza minima: 0vw
• Margine: 0.5em in alto, 0.5em in basso, auto a sinistra, auto a destra
• Imbottitura: 2.5em in alto, 2.5em in basso, 2em a sinistra, 2em a destra

Il risultato

Ora vediamo il risultato del nostro modulo fluido durante la regolazione della larghezza del browser su una pagina live.

Aggiunta di più moduli fluidi in fila con CSS Grid

Per aggiungere più moduli fluidi adiacenti a una riga, dobbiamo assicurarci che il nostro design del modulo fluido non sia limitato o interrotto da alcuna larghezza del contenitore genitore. In altre parole, vogliamo che il contenitore padre dei nostri moduli (la colonna) sia impostato su auto in modo che si adatti alla dimensione del modulo. Possiamo farlo usando CSS Grid a livello di colonna per impostare ciascuno dei moduli in una griglia con ogni colonna con una larghezza automatica.

Regola le dimensioni e la spaziatura del modulo

Prima di creare la griglia CSS per i moduli, dobbiamo regolare la larghezza massima e il margine per il nostro modulo a una dimensione più adatta per un layout a due colonne con due moduli.

Apri le impostazioni per il modulo e aggiorna quanto segue:

• Allineamento del testo: a sinistra
• Larghezza massima: 24 em
• Margine: 0,5 em a sinistra, 0,5 em a destra

Modulo duplicato

Ora duplica il modulo per crearne un altro nella stessa colonna.

Aggiungi griglia CSS alla colonna

Ora possiamo aggiungere il CSS personalizzato alla colonna per creare la griglia CSS per i moduli.

Nella scheda Avanzate, aggiungi il seguente CSS all'Elemento principale nella visualizzazione desktop:

display:grid;
grid-template-columns: auto auto;
justify-content:center;

Quindi aggiungi il seguente CSS all'elemento principale nella visualizzazione del telefono:

display:grid;
grid-template-columns: auto;
justify-content:center;

Questo imposterà i due moduli in una griglia a due colonne (ognuna con una larghezza automatica) sul desktop. Quindi sul telefono, i moduli torneranno a una griglia a una colonna (larghezza automatica).

Il risultato

Ora controlla il risultato.

Risultati finali

Una volta completati i moduli fluidi, è possibile aggiornare gli stili del modulo utilizzando le impostazioni di progettazione integrate per dargli caratteri, colori, ecc.

Ecco uno sguardo al risultato finale utilizzando un carattere, un colore del carattere, un colore del pulsante e un colore di sfondo diversi.

Pensieri finali

Come abbiamo visto in questo tutorial, incorporare un design fluido su un modulo Divi può essere un modo conveniente per garantire che il modulo sia bello e coerente su tutte le dimensioni del browser, senza il fastidio di aggiornare il design in punti di interruzione specifici.

Non dimenticare di dare un'occhiata ai nostri altri articoli sul design fluido, inclusa la nostra guida alla creazione di tipografia fluida e pulsanti Divi fluidi.

Non vedo l'ora di sentirti nei commenti.

Saluti!