Usando calc () in Divi 5 per spaziatura dinamica

Comunichiamo la spaziatura in Divi, una cosa di cui ogni stilista è a conoscenza potrebbe rendere o danneggiare una struttura. Con Divi 5, i problemi sono stati dati più semplici ed extra rispettosi dell’ambiente, a causa della miscelazione del calc () serve come parte della funzione delle unità avanzate di Divi. Questo trucco CSS è proprio qui per laurearsi nel modo in cui significa spaziatura, ed è troppo giusto per dimenticare.

In questa pubblicazione, scopriremo cosa è calc (), metodi per usarlo per la spaziatura dinamica in Divi 5 e perché semplifica la reattività del tuo sito Web online. Ci arriviamo!

Divi 5 è pronto per essere utilizzato su nuovi siti Internet, tuttavia non suggeriamo di cambiare i siti Internet attuali in Divi 5 semplicemente ma.

Cos’è calc ()?

Nel caso in cui ti sia mai sentito limitato per mezzo di valori di spaziatura statica ai tuoi progetti, Calc () cambierà nel tuo nuovo hack preferito. Danneggiamolo e notiamo perché è un’aggiunta utile a Divi 5.

Calc () è un CSS locale che funziona come un mini calcolatore nei tuoi tipi. Con Calc (), eseguirai operazioni matematiche (aggiunta, sottrazione, moltiplicazione e dipartimento) proprio nel costruttore visibile di Divi, senza il desiderio di codifica personalizzata. Significa che è possibile mescolare ‘n corrispondenti altri dispositivi, come pixel (PX), percentuali (%), EMS, REMS e persino dispositivi di visualizzazione (VW). Ad esempio, una cosa come Calc (100% – 50px) prende l’intera larghezza del contenitore di mamma o papà della parte e sottrae 50 pixel. Il risultato si regola in modo dinamico perché il contenitore si ridimensiona, rendendolo più alto per i layout reattivi. È un sistema facile e nel costruttore visibile di Divi 5, vedrai il risultato finale risiedere mentre progetti.

Perché questo argomento? Come risultato di Calc () ti offre la possibilità di creare layout versatili e reattivi senza scrivere un codice molto. Attraverso la combinazione di dispositivi statici (come i pixel) con quelli relativi (come percentuali o larghezze di viewport), creerai spaziatura che si adatta a qualsiasi dimensione o contesto dello schermo di visualizzazione. I valori montati da solo possono partire per te, troppo esteso su cellulare, troppo snello sul desktop. Con Calc (), ti occuperai facilmente delle eventualità difficili.

Proprio ecco una scrivania per aiutarti a percepire i dispositivi che discuteremo all’interno dell’articolo con una descrizione di breve durata di ciò che ognuno fa insieme a un’istanza:

Ordinamento dell’unità	Unità	Descrizione	Istanza l’uso di calc
Statico	PX (pixel)	Dimensione montata, rispetto alla soluzione dello schermo del display	Calc (100px – 20px)
Parente	% (proporzione)	Relativo alla dimensione della mamma o del papà	Calc (50% – 10px)
Parente	EM (EMS)	Relativo alla dimensione del carattere della parte	Calc (2em + 5px)
Parente	REM (ROOT EMS)	Relativo alla dimensione del carattere della parte della fondazione	Calc (1.5Rem + 3px)
Parente	VW (larghezza di visualizzazione)	Rispetto alla larghezza del viewport del browser (1VW = 1% della larghezza della vista)	CALC (100VW – 50px)
Parente	VH (Viewport Top)	Rispetto alla parte superiore del viewport del browser (1VH = 1% della parte superiore di visualizzazione)	CALC (100VH – 50px)
Parente	min	Relativo alla misurazione più piccola del Viewport (larghezza o in alto)	Calc (5vmin + 10px)
Parente	vmax	Relativo alla misurazione maggiore di Viewport (larghezza o in alto)	CALC (5Vmax – 5px)

calc() In Divi 5

Proprio ecco il posto che diventerà elettrizzante per noi clienti Divi. In Divi 5, le unità avanzate nella Divi 5 portano la capacità di Calc () corretta nel costruttore visibile – nessun CSS personalizzato desiderato. Calc () è ora costruito nei campi dell’unità multifunzionale che si trovi in ​​impostazioni come imbottitura, margine o larghezza. Ciò implica che risolverai immediatamente i tuoi calcoli nel posto in cui stai già operando, vedi le conseguenze in un istante e le modificano al volo.

Ottenere l’accesso a calc () in Divi 5

Passa a qualsiasi modulo, riga o segmento, fai clic sulla scheda Design e cerca la casella di dimensionamento.

Come alternativa dei cursori obsoleti in Divi 4, vedrai la scatola dei dispositivi complessi, il luogo in cui ordinerai un sistema Calc () immediatamente nella sfera al momento della sistemazione.

La sintassi è facile: calc (espressione). Scrivi il tuo calcolo tra le parentesi con operatori come +, -, *o /. Semplicemente dovresti assolutamente caricare aree.

Come calc () semplifica la spaziatura in Divi 5

In Divi 4, dovrai impostare un prezzo per il desktop, dopodiché lo modifichi per pillola e gadget cellulari. Con Calc () in Divi 5, creerai una spaziatura adattiva che risponde alle modifiche di visualizzazione ragionevolmente che destreggiarsi con un paio di punti di interruzione.

In Divi 5, è supportato in modo nativo all’interno del costruttore visibile. Ordina un’espressione calc () nella scatola di dimensionamento e risiede. Non sono richiesti ulteriori passaggi e non è desiderato alcun editor di codice. Combinerai anche dispositivi come percentuali e pixel nell’espressione simile.

Ad esempio, se hai bisogno di una riga per nascondere l’80% del contenitore del segmento, tuttavia, lasciare un foro da 20px su ogni sfaccettatura, utilizzerai CALC (80% – 40px) e assicurate che l’allineamento della riga sia pronto per il mezzo. Ciò significa che la riga si evolve per visualizzare la dimensione dello schermo pur mantenendo la spaziatura costante su tutti i lati. La larghezza dell’80% aiuta a mantenere i problemi fluidi, mentre i pixel sono certi esatti regolarmente attraverso altri punti di interruzione.

Tuttavia calc () in Divi 5 può fare più di quello. Dai un’occhiata a un paio di esempi del modo in cui utilizzerai Calc () in Divi 5 per la spaziatura dinamica.

Un’imbottitura dinamica principalmente basata su Viewport

Caricherai l’imbottitura in riga l’utilizzo di Calc () in Divi 5. Ad esempio, supponiamo che desideri imbottire che si ridimensiona con lo schermo del display. In alternativa a un’imbottitura statica da 20px, vai alla scheda Design di una riga, nel trovare le impostazioni di imbottitura e input CALC (20px + 2VW). Questo inizia con 20px e fornisce il 2% della larghezza di visualizzazione. È una spaziatura fluida e proporzionale senza ulteriori punti di interruzione, tutti impostati immediatamente all’interno del costruttore visibile.

Parti sovrapposte con margini sfavorevoli e calc ()

I disegni sovrapposti sono piacevoli alla folla e calc () li rende reattivi in ​​Divi 5. Supponiamo che tu abbia bisogno di una riga a due colonne con un’immagine che si sovrappone a un modulo di contenuto testuale. All’interno delle impostazioni del margine del simbolo, input Calc (-50px-5VH). Il -50px unisce un overlay di base, mentre -5vh lo ridimensiona con la parte superiore del vista.

Imbottitura adattiva con allineamento del materiale di contenuto

Supponiamo che tu stia progettando una struttura a tre colonne in Divi 5, con una barra laterale e uno spazio di materiale di contenuto importante. Desideri che l’imbottitura della barra laterale della terza barra laterale si evolva alla larghezza della colonna mantenendo un set minimo. All’interno delle impostazioni di imbottitura della colonna, input Calc (10px + 3%). Questo unisce un’imbottitura di base da 10 px più il 3% della larghezza della colonna, assicurandosi una spaziatura proporzionale. Il materiale di contenuto della barra laterale rimane ben spazzato, allineandosi visivamente attraverso i punti di interruzione.

ALTENZIONI DEL SEGGIO DI REGOLAZIONE

Qualche altra istanza Il posto calc () è utile è regolare un po ‘di top. Supponiamo che tu abbia un segmento di eroi che ti piacerebbe attraversare il top del Viewport. Leggermente che cercare di decidere la dimensione più efficiente per tutti i display, utilizzerai un’espressione calc () facile per delinela. In Divi 5, effettuerai semplicemente un calcolo di selezione dal menu a discesa e dall’ingresso (100vh – 60px) nel Top Box di un po ‘. Ciò probabilmente imposterà la parte superiore del segmento a 100VH (Viewport Top) e sottrai 60px.

Dimensioni dei caratteri dell’atmosfera

Anche calc () può delineare dimensioni di contenuti testuali che modificano completamente su ciascun software. Ad esempio, utilizzerai Calc () all’interno del modulo di intestazione di Divi 5. All’interno della scheda Design, trova il Intestazione della dimensione del contenuto testuale scatola e caricamento CALC (5EM + 1VW). Questo unisce la dimensione del carattere su una dimensione di base di 5em più 1 larghezza di visualizzazione, ridimensionando moderatamente il contenuto testuale con la dimensione dello schermo di visualizzazione.

Le migliori pratiche assolute per l’uso di calc () in Divi 5

Calc () è un comodo gizmo, tuttavia come un altro, deve essere usato con conoscenza. Qui sono elencati alcuni suggerimenti sensibili per trarre profitto da Calc in Divi 5.

1. Conosci i fondamenti

È allettante spostarsi con la formulazione nidificata quando si inizia semplicemente, tuttavia le espressioni facili sono più semplici da modificare e risolvere i problemi. Affrontare i fondamentali, quindi laurea in termini di extra avanzati come CALC (50% + 2 VW – 10px). 50% Unità la larghezza o la parte superiore del segmento di mamma o papà. È un’unità relativa, quindi si ridimensiona in linea con le dimensioni del contenitore. Ad esempio, se la parte di mamma o papà è estesa di 1000px, il 50% equivale a 500px. Se la mamma o il papà si riducono a 500px, il 50% si trasforma in 250px.

IL + 2vw Una parte del calcolo sta per la larghezza della vista, il luogo 1VW è l’1% della larghezza della finestra del browser. Quindi, 2VW è il due% della VW. Questa parte del calcolo si regola in linea con la dimensione dello schermo del display, non più la parte di mamma o papà. Nel caso in cui il tuo viewport sia esteso di 1200px, 2VW è 24px. Su una schermata di visualizzazione cellulare da 600px, è 12px. È un approccio per legare il prezzo alla dimensione dello schermo del display del consumatore.

In ogni caso, il -10px Una parte dell’equazione sottrae un set di 10 pixel dal complesso. Contrariamente a % o VW, PX è un’unità statica, in ogni momento 10px, indipendentemente dalla dimensione dello schermo o del contenitore. Ti offre una regolazione esatta rispetto alle conseguenze generali.

2. Dai un’occhiata alla reattività per la coerenza

Calc () è incentrato sull’adattabilità, tuttavia continui a voler ricontrollare la sua efficienza. Usa la macchina di anteprima reattiva di Divi per cambiare tra desktop, pillola e prospettive cellulari.

Un sistema come CALC (100VW – 80px) Può dare un’occhiata al più alto della tua osservazione widescreen, tuttavia, potrebbe semplicemente spremere troppo su un telefono. L’anteprima garantisce che la spaziatura rimane più alta e costante dappertutto.

3. Mescola calc () con variabili

Divi 5 aiuta inoltre le variabili CSS, di solito si abbinano in modo fantastico a Calc (). Delineare una variabile come –Spacing: 20px; All’interno delle impostazioni CSS della pagina Web.

Lo userai quindi in un’espressione calc () come calc (var (–spacing) * 2). Se desideri regolare la spaziatura a livello del sito in seguito, sostituirai la variabile non appena e ogni calc () l’uso di esso segue.

4. Tieni lontano dall’essere troppo sofisticato

Non appena a mio agio l’uso del calc () serve come, trasformarlo direttamente in un puzzle di matematica può semplicemente cambiare in semplice. Positivo, calc () è robusto, tuttavia nidificando un paio di scopi, come calc (calc (50% – 10px) + calc (2VW + 5px)), dipinti di maggio, ma sicuramente è più spesso ridondante. Resta magro e leggibile, e il tuo sé a lungo termine (o qualcuno che ha dei dipinti nella parte posteriore di te) ringrazierà.

Applicare tali suggerimenti e calc () potrebbe essere un compagno fidato, non più un esperimento in fuga. Si tratta di appendere una stabilità tra creatività e regolare – e Divi 5 rende semplice arrivarci.

Layout dinamico senza fusto con calc () in Divi 5

L’integrazione di Calc () di Divi 5 nel Builder visibile è un enorme passo avanti, trasformando la spaziatura in un recupero continuo in tempo reale. Non è più in tema di risparmiare tempo, tuttavia sbloccare un nuovo grado di creatività. Combinerai i dispositivi, si adatterai a qualsiasi viewport e guarderai tutto ciò che rientra in combinazione, il tutto mantenendo facilmente il tuo flusso di lavoro.

Quindi, per coloro che non hanno scaricato l’ultimo Alpha Divi 5, ora è il momento. Immergiti, sperimenta un paio di formulazione e nota il modo in cui trasforma il modo in cui costruisci siti Internet con Divi. È una piccola funzione con un grande effetto su, dimostrando che Divi 5 è proprio qui per rendere gli stili di vita più semplici e rispettosi dell’ambiente.

La pubblicazione usando Calc () in Divi 5 per la spaziatura dinamica sembrava prima sul blog di temi eleganti.

Piani di manutenzione wordpress | hosting wordpress

Per saperne di più