Utilizzo delle nuove opzioni di altezza e larghezza di Divi per creare un design reattivo

Sebbene di solito non siano la prima cosa che i visitatori notano del tuo sito Web, le proprietà CSS di larghezza e altezza aiutano a mantenere il tuo sito Web insieme e ad avere un aspetto fantastico. E ora, con le nuove opzioni di ridimensionamento trascinabili di Divi, puoi letteralmente controllare la larghezza, la larghezza massima, l'altezza minima, l'altezza e l'altezza massima di ogni elemento all'interno del builder stesso. Questo ti dà la libertà di creare siti Web altamente reattivi su schermi di diverse dimensioni.

Ora, tutto questo suona alla grande, ma come si traduce in un bellissimo sito web, in pratica? Questo è esattamente ciò di cui parleremo in questo post. Inizieremo spiegando prima la differenza tra tutte le proprietà di altezza e larghezza disponibili all'interno delle impostazioni Divi e poi le useremo in diversi scenari per far sì che i nostri progetti di pagina si comportino esattamente come vogliamo.

Arriviamo ad esso!

Iscriviti al nostro canale Youtube

Comprendere la differenza tra le proprietà

Prima di utilizzare la larghezza e la larghezza massima nei nostri processi di progettazione quotidiani, è importante capire cosa fanno. Questa è la spiegazione teorica:

Larghezza: la larghezza effettiva di un elemento di design. Se questo è il 100%, è largo quanto il contenitore lo consente. La larghezza viene solitamente espressa utilizzando %. Più bassa è la percentuale per la larghezza, più stretto sarà l'elemento del disegno.

Larghezza massima: la larghezza massima ha potere sulla larghezza. Se la larghezza di un modulo è impostata al 100%, aderirà a quel valore finché rimarrà al di sotto del valore di larghezza massima. Una volta raggiunto il valore di larghezza massima, non lo supererà.

Ma come si traduce in un design reattivo? Per aiutare a spiegare la differenza, creeremo un confronto visivo abilitando Visual Builder su una pagina completamente nuova. Aggiungeremo una sezione con una riga a una colonna. Quindi, inserisci un modulo di testo con del contenuto, un colore di sfondo e un'imbottitura personalizzata.

Modifica della larghezza

Quando cambi la larghezza del modulo di testo all'80%, vedrai il modulo di testo ridursi di dimensioni. Viene visualizzata anche la possibilità di allineare il modulo come si desidera.

Modifica della larghezza massima

Quando si modifica la larghezza massima, il valore assegnato inizierà ad essere applicato solo dal momento in cui la larghezza effettiva supera il valore della larghezza massima. Dimostriamolo molto velocemente:

Non superato

Superato

Oltre alla larghezza e alla larghezza massima, sarai anche in grado di trovare l'altezza minima, l'altezza e l'altezza massima nelle impostazioni di dimensionamento di ciascun elemento. Questo è ciò che puoi teoricamente capire da questi termini:

Altezza minima: l'altezza minima che si desidera assegnare a un elemento. Se questo valore è maggiore dell'input dell'altezza, prevarrà l'input dell'altezza minima.

Altezza: definisce l'altezza effettiva che si desidera assegnare all'elemento.

Altezza massima: questo valore diventa la nuova altezza una volta che l'altezza supera il valore assegnato all'altezza.

Modifica dell'altezza minima

Se modifichi l'altezza minima di un elemento, quel valore diventa la norma. Durante il test, vedrai automaticamente cambiare l'altezza del modulo di testo in tempo reale.

Modifica dell'altezza

Se stai combinando un'altezza minima e un'altezza, dovrai assicurarti che l'altezza sia maggiore dell'altezza minima. In caso contrario, l'altezza verrà ignorata. Nelle due GIF sottostanti potrai vedere la differenza in tempo reale.

non supera

supera

Modifica dell'altezza massima

L'altezza massima prende il sopravvento se supera l'altezza minima ma è inferiore all'altezza. Se, ad esempio, assegnassi un valore più alto all'altezza minima rispetto all'altezza massima, l'altezza minima dominerebbe.

Modifica della larghezza massima per le righe

Una delle migliori pratiche nel web design è decidere su una particolare larghezza massima per l'intero sito web. Ciò aiuta a mantenere tutto reattivo su schermi di diverse dimensioni. Aiuta anche i progettisti a creare wireframe accurati.

Modifica della larghezza massima globale

Potresti sapere o meno che puoi impostare una determinata larghezza massima predefinita per i tuoi contenuti nel Personalizzatore di temi andando alle Impostazioni generali e continuando alle Impostazioni di layout. Mantenere persistente la larghezza massima aiuta a potenziare la reattività.

Modifica la larghezza massima per una riga in particolare

Con il nuovo aggiornamento del dimensionamento trascinabile, hai anche l'opportunità di definire individualmente una larghezza massima per le righe. Questo è ottimo per le eccezioni in cui ha più senso utilizzare una larghezza massima maggiore.

Dare ai moduli la stessa altezza

Un'altra tecnica che dovresti tenere a mente si concentra sul dare a elementi simili la stessa altezza. Questo è esteticamente gradevole alla vista e aiuta i visitatori a cercare facilmente i contenuti. Ci sono due modi comuni per avvicinarsi a questo:

Utilizzo dell'equalizzatore di colonna

Il primo metodo è quello che è stato con Divi per molto tempo. Se vuoi creare la stessa altezza per ciascuna delle colonne della tua riga, puoi abilitare l'equalizzatore di colonna nelle impostazioni di dimensionamento della tua riga. Se utilizzi i colori di sfondo delle colonne, noterai subito la differenza.

Assegnazione dell'altezza a ciascun modulo

Un altro modo per affrontarlo è assegnare un'altezza predefinita ai moduli che stai aggiungendo.

Allineamento del contenuto all'interno di un modulo

Dopo aver assegnato un'altezza a tutti i moduli, puoi anche giocare con l'allineamento del contenuto. Per fare ciò, puoi utilizzare il riempimento personalizzato per determinare manualmente lo spazio bianco in un modulo o utilizzare alcune righe di codice CSS per allineare automaticamente il contenuto.

display: flex;
flex-wrap: wrap;
align-content: center;

Scegliere l'altezza o la larghezza dell'elemento di design e trasformare l'overflow in scorrimento

Un'altra cosa interessante che puoi fare con le nuove opzioni di dimensionamento trascinabili è trasformare l'overflow in scorrimento. Questo ti aiuterà facilmente a risparmiare spazio sulle tue pagine e ad aggiungere ulteriore interazione. Ci sono due passaggi per questo; imposta un'altezza per il tuo elemento e modifica l'overflow nelle impostazioni di visibilità. Inizia modificando l'altezza del tuo elemento.

Quindi, vai alle impostazioni di visibilità del tuo elemento e cambia l'overflow verticale in scorrimento.

Creazione di una sezione eroe a schermo intero su tutte le dimensioni dello schermo

Al prossimo e ultimo consiglio! Vuoi creare una sezione degli eroi a schermo intero? Apri la sezione degli eroi sulla tua pagina, vai alle impostazioni di dimensionamento e modifica l'altezza. È importante utilizzare l'unità di visualizzazione dell'altezza per assicurarti che tutto rimanga reattivo su tutte le dimensioni dello schermo.

• Altezza: 100vh

Vuoi allineare centralmente il contenuto nella tua sezione degli eroi a schermo intero? Aggiungi anche le seguenti righe di codice CSS personalizzate all'elemento principale della tua sezione:

display: flex;
flex-wrap: wrap;
align-content: center;

Pensieri finali

In questo post, abbiamo esaminato le nuove opzioni di larghezza e altezza fornite con l'aggiornamento del dimensionamento trascinabile di Divi. Ti abbiamo mostrato come funzionano e come puoi usarli per creare un design di pagina reattivo per qualsiasi tipo di sito web che stai costruendo. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.