Tutto ciò che devi sapere sulle unità avanzate di Divi 5

Ottimi strumenti di progettazione ti danno il controllo su ogni aspetto del tuo sito web. Che si tratti di inchiodare l'imbottitura perfetta o di garantire scale di testo in modo impeccabile attraverso i dispositivi, ogni dettaglio è importante. Divi è stato un compagno fidato per i designer per anni, offrendo solide basi per la costruzione di siti Web professionali. Divi 5 lo porta ulteriormente, introducendo una funzione chiamata unità avanzate.

Le unità avanzate in Divi 5 aiutano a migliorare il modo in cui si creano siti Web. Dai calcoli dinamici di Calc () al ridimensionamento del fluido del pinza (), una gamma completa di unità CSS come VW e REM e la flessibilità delle variabili CSS. In questo post, ci immergeremo in profondità in unità avanzate, come usarle nel Visual Builder e perché sono necessari per ogni utente Divi. Che tu stia mettendo a punto i layout o sognando nuovi audaci progetti, le unità avanzate offrono ancora più controllo sulla reattività del tuo design.

Immergiamoci.

Cosa sono le unità avanzate in Divi 5?

Le unità avanzate in Divi 5 consentono di controllare elementi di progettazione con il suo campo di unità multifunzionale. È un singolo e potente campo di input che accetta l'intero spettro di unità, funzioni e variabili CSS.

È un piccolo cambiamento nel Visual Builder che supporta tutte le unità CSS con nuovo supporto per variabili Fit-Content, Unset, Calc (), Clamp () e CSS.

Le unità avanzate ti liberano dai vincoli dei valori statici. Non devi indovinare le dimensioni dei pixel fissi o lottare con punti di interruzione per farti bene le cose come se le desideri. Senza lasciare il Visual Builder, è possibile creare layout che si flettono e si ridimensionano senza sforzo-con tipografia fluida, spaziatura adattiva e progetti consapevole della visualizzazione. Non si tratta solo di più opzioni; Si tratta di creatività più intelligente e più scalabile.

Esplorare le unità avanzate in Divi 5

La funzione di unità avanzate di Divi 5 offre varie opzioni di design, ognuna con modi unici per modellare i layout. Esaminiamo i giocatori chiave e vediamo come funzionano.

Unità CSS in Divi 5

Le unità avanzate aprono una tavolozza completa di unità CSS, ben oltre pixel e percentuali. Prendi la larghezza di Viewport (VW), ad esempio: imposta la larghezza di una sezione su 80VW e occuperà sempre l'80% della larghezza di visualizzazione (orizzontalmente), ridimensionando perfettamente dal desktop al cellulare.

ROOT EM (REM) Ties Dimensioni alla dimensione del carattere radice del sito - Idea per una tipografia coerente, come 4.5Rem per un'intestazione.

Puoi anche provare Fit-Content, che dimensioni un elemento in base al suo contenuto. Ad esempio, l'uso del contenuto adatto per la larghezza di un'intestazione può assicurarsi che si adatti perfettamente. È possibile aggiungere il contenuto di adattamento al campo di larghezza di fila per mantenere l'intestazione compatta e proporzionale, evitando spazio eccessivo o troppo pieno mantenendo un aspetto lucido.

Queste unità si adattano alle dimensioni dello schermo e ai contesti, dando layout che si sentono vivi piuttosto che bloccati in atto.

Calc () è un calcolatore dinamico

La funzione Cacl () è come un mini calcolatore integrato in Divi. Ti consente di mescolare le unità con le operazioni - aggiunta, sottrazione, moltiplicazione e divisione - per risultati dinamici. Un esempio classico è CALC (100% - 50px) , che imposta la larghezza di una sezione al 100% e sottrae 50 pixel. Se il tuo elemento è allineato centralmente, 25 px da entrambi i lati si riducono.

È possibile utilizzare calc () per spaziatura reattiva, come l'impostazione di una sezione o una larghezza di riga per lasciare grondaie perfette su ciascun lato. Calc () si regola al volo man mano che il viewport cambia, garantendo che il design rimanga bilanciato senza apportare modifiche manuali.

CLAMP () per il controllo dei fluidi

La funzione CLAMP () ti aiuta a controllare le dimensioni che si regolano senza intoppi tra le dimensioni dello schermo. Utilizza tre valori: una dimensione minima, una dimensione preferita e una dimensione massima. Un buon esempio è un morsetto (36px, 4vw, 48px) .

Ciò significa che le dimensioni iniziano a 36px, aumentano in base al 4% della larghezza della vista, ma non supera mai 48px. È ottimo per il testo, come un modulo di intestazione che sembra buono sia su piccoli telefoni che sugli schermi di grandi dimensioni. Clamp () garantisce che il tuo design rimanga equilibrato e leggibile indipendentemente dal dispositivo.

Variabili CSS per la flessibilità globale

Le variabili CSS (o proprietà personalizzate) consentono di definire valori riutilizzabili, come –font-size: 5em , nelle opzioni del tema di Divi o nel campo CSS Impostazioni della pagina. Quando si aggiungono variabili CSS in Divi 5, assicurarsi di racchiuderle nell'elemento genitore in questo modo:

:root {
--font-size:5em;
}

Una volta definito, è possibile abbandonare var (–font-size) nel campo delle dimensioni del testo di un intestazione per applicarlo.

È un risparmio di tempo che mantiene il tuo design coerente e modificabile al volo.

Valori senza unità

Le unità avanzate di Divi 5 includono anche valori iniziali, nont e auto. La proprietà iniziale ripristina una proprietà CSS al suo valore predefinito come definito dalla specifica CSS. Ad esempio, il colore delle impostazioni: iniziale su un paragrafo lo ritorna in nero, ignorando qualsiasi stile personalizzato o ereditato. UNSET elimina una proprietà al suo stato naturale, agendo come iniziale per le proprietà non ereditarie o ritornere a valori ereditari quando applicabile. Nel frattempo, Auto consente al browser di decidere un valore basato sul contesto, come l'altezza di una sezione per adattarsi al suo contenuto.

Come funzionano le unità avanzate in Divi 5

Le unità avanzate in Divi 5 portano un nuovo livello di controllo direttamente nel Visual Builder, rendendo facile creare design reattivi e dinamici. È possibile digitare istantaneamente qualsiasi unità, funzione o variabile CSS - come VW, Calc () o CLAMP () - e vedere i risultati. Ecco come funzionano le unità avanzate in Divi.

Larghezza della sezione reattiva con calc ()

Supponiamo che tu voglia una sezione che copre l'80% dell'altezza del Viewport ma rimuove un po 'di imbottitura dalla parte superiore e inferiore. Passare alla scheda di progettazione della sezione, individuare il campo di altezza e aggiungere calc (80vh - 60px) nel campo.

Questo calcolo consente alla sezione di ridimensionare in modo fluido con il Viewport, mantenendo l'80% dell'altezza di visualizzazione sottraendo 30px dalla parte superiore e inferiore.

Tipografia fluida con morsetto ()

Clamp () può essere utile se hai bisogno di intestazioni che crescono con le dimensioni dello schermo ma rimangono leggibili. Nella scheda di progettazione di un modulo di intestazione, impostare la dimensione del testo dell'intestazione su un morsetto (52px, 2VW, 36px) .

Questo imposta il testo a 52px, si ridimensiona in base al 2% della larghezza di visualizzazione e limita le dimensioni a 36px, fornendo senza sforzo una tipografia reattiva ed equilibrata.

Dimensioni dei caratteri a base variabile

Le variabili CSS di Divi 5 sono un ottimo modo per ottenere l'uniformità nella spaziatura, nel testo e in altre aree. È possibile impostare le variabili una volta e quindi utilizzarle ripetutamente durante i tuoi progetti semplicemente aggiungendole a un campo di unità di modulo, colonna, riga o sezione. Ad esempio, supponiamo che tu desideri dimensioni di intestazione coerenti senza impostarle manualmente o utilizzare un gruppo di opzioni preimpostata per definirli.

È possibile aggiungere quanto segue nelle opzioni del tema o nelle impostazioni della pagina , in avanzato> CSS personalizzato :

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

Da lì, aggiungi semplicemente una variabile alla dimensione del testo dell'intestazione in qualsiasi modulo di intestazione. Ad esempio, per questa intestazione nella nostra sezione Hero, aggiungiamo semplicemente var (–Text-H1) . Divi lo riconoscerà come una variabile e assegnerà lo stile appropriato alla tua intestazione.

Best practice per unità avanzate

Per ottenere il massimo dalle unità avanzate in Divi 5, un approccio ponderato può risparmiare tempo e garantire che i tuoi progetti brillano. Ecco alcune migliori pratiche per guidarti:

Inizia semplice

Se sei nuovo nell'uso di funzioni e variabili CSS, faciliti con unità familiari come pixel (PX) o percentuali (%), quindi sperimentare calc () per le regolazioni dinamiche di base. Ad esempio, prova CALC (100% - 40px) per una larghezza della sezione prima di immergersi nelle variabili di morsetto () o CSS. Questo costruisce fiducia senza sopraffare presto.

Leva variabili per stili comuni

Definire le variabili CSS nelle opzioni del tema per la coerenza a livello del sito. Ad esempio, Impostazione –gutter: 30px ti consente di riutilizzare quella spaziatura su sezioni, righe e moduli. Le variabili CSS possono anche essere utili per impostare una dimensione di testo uniforme per tutte le intestazioni. Una modifica aggiorna tutto, accelerando il processo di progettazione e mantenendo il tuo design coeso.

Test reattività

Il sistema di vista reattivo di Divi è un ottimo modo per progettare il tuo design su più dimensioni dello schermo. Dopo aver applicato unità come VW o CLAMP (), alternare tra desktop, tablet e vista mobile per assicurarsi che il layout si adatti senza problemi. Un set di intestazioni su un morsetto (20px, 3vw, 40px) potrebbe apparire perfetto su un desktop ma potrebbe essere necessario regolare per schermi più piccoli, quindi provalo per essere sicuro.

Non diventare troppo complicato

Sebbene sia possibile nidificare funzioni come CALC (morsetto (20px, 5vw, 50px) - 10px), dovresti attenersi a semplici formule, almeno mentre stai imparando. L'eccessiva complessità può rallentare le prestazioni e rendere più difficile la risoluzione dei problemi quando le cose non appaiono come dovrebbero. Attenersi a calcoli puliti e intenzionali per semplificare la vita.

Perché le unità avanzate elevano Divi 5

Le unità avanzate sono perfette per semplificare il processo di progettazione. Ecco alcuni dei vantaggi chiave che derivano da questa nuova funzionalità:

• Libertà creativa: unità di miscelazione, funzioni e variabili sblocca i layout che richiedevano più tempo da raggiungere nelle versioni precedenti di Divi. Le formule semplici consentono di regolare altezze, larghezze, dimensioni dei caratteri e altro ancora. Questa flessibilità consente di costruire meglio ed eseguire più velocemente, tutto all'interno del Builder Visual.
• Migliori design reattivi: le unità avanzate spostano Divi verso progetti fluidi che si adattano senza sforzo. L'uso di VW o CLAMP () garantisce che il tuo sito si senta naturale su qualsiasi dispositivo, riducendo la necessità di sovrascrivi manuali e offrendo un'esperienza lucida.
• È a prova di futuro: le unità avanzate si allineano con la missione di Divi 5 di modernizzare il costruttore visivo per il web di oggi. Abbracciando la piena potenza di CSS, Divi 5 ti fornisce gli strumenti necessari per costruire siti Web moderni. Non si tratta solo di tenere il passo; Si tratta di stare davanti alla curva con strumenti che rispecchiano ciò che gli sviluppatori professionisti usano.

Scarica l'ultimo Divi 5 Alpha

Le unità avanzate sono una caratteristica utile che è stata recentemente aggiunta a Divi 5. Dalla precisione di Calc () alla fluidità del morsetto () e all'efficienza delle variabili CSS, questi strumenti rendono la spaziatura, il dimensionamento e la scalabilità più intuitivi che mai. Sia che tu stia usando Divi per anni o che lo abbia appena scoperto, puoi costruire siti Web reattivi e dinamici con meno sforzo.

Pronto a vederlo da solo? Scarica Divi 5 Alpha ora e inizia a sperimentare unità avanzate. Gioca con VW e VH per la spaziatura di Viewport, Test Plamp () per la tipografia o imposta variabili per ripensare il modo in cui si costruisce. È un'opportunità per spingere ulteriormente i tuoi progetti e scoprire cosa è possibile.