Elementor è uno dei page builder più conosciuti e se si decide di utilizzarlo sarà capitato di sicuro di imbattersi nelle sue diverse opzioni di dimensionamento. Nell’articolo di oggi ti spiegheremo come utilizzare le opzioni di dimensionamento su Elementor.

Iniziamo con le basi…

In CSS, è possibile specificare dimensioni o lunghezze degli elementi utilizzando varie unità di misura. Le unità di misura che troverai in alcune opzioni Elementor includono PX, EM, REM, %, VW e VH, anche se ce ne sono molte altre disponibili in CSS. Non tutti gli elementi Elementor offriranno tutte queste unità. Elementor presenta solo le opzioni che hanno più senso per l’elemento dato.

L’aspetto più importante da conoscere è che tra le diverse unità alcune, come PX, sono unità assolute, e altre sono unità relative.

Unità assolute

PX: i pixel (px) sono considerati unità assolute, sebbene siano relativi al DPI e alla risoluzione del dispositivo di visualizzazione. Ma sul dispositivo stesso, l’unità PX è fissa e non cambia in base ad altri elementi. L’utilizzo di PX può essere problematico per i siti responsive, ma sono utili per mantenere un dimensionamento coerente per alcuni elementi. Se hai elementi che non dovrebbero essere ridimensionati, l’uso di PX è una buona scelta.

Unità relative

EM: è relativo all’elemento padre

REM: è relativo all’elemento radice (tag HTML)

%: è relativo rispetto all’elemento padre

VW: è relativo alla larghezza della finestra

VH: è relativo rispetto all’altezza della finestra

A differenza di PX, le unità relative come %, EM e REM sono più adatte alla progettazione responsive. Le unità relative scalano meglio su diversi dispositivi perché possono scalare su e giù in base alle dimensioni di un altro elemento.

Ecco spiegato con un semplice esempio:

Nella maggior parte dei browser, la dimensione del carattere predefinita è di 16px. Le unità relative calcolano le dimensioni da questa base. Se si modifica quella base impostando una dimensione di base per il tag HTML tramite CSS, questa diventa la base per il calcolo delle unità relative nel resto della pagina. Allo stesso modo, se un utente regola la dimensione del carattere, ciò diventa la base per il calcolo delle unità relative.

Quindi come funzionano queste unità quando si tratta del valore predefinito di 16px?

Il numero specificato moltiplicherà quel numero per la dimensione predefinita.

1em = 16px (1 * 16)

2em = 32px (2 * 16)

.5em = 8px (.5 * 16)

1rem = 16px

2rem = 32px

.5rem = 8px

100% = 16px

200% = 32px

50% = 8px

Ma cosa succede se cambi la dimensione predefinita?
Dato che si tratta di unità relative, i valori di dimensione finali si baseranno sulla nuova dimensione di base. Anche se il valore predefinito è 16px, se questo viene cambiato in 14px le dimensioni finiranno per basarsi sulla nuova.

Qual è la differenza tra EM e REM?

Vedendo i calcoli fatti sopra sembrerebbe che questi siano uguali. E quindi in cosa cambiano?

In poche parole, differiscono in base all’eredità. Come accennato, REM si basa sull’elemento radice (HTML). Ogni elemento figlio che utilizza REM utilizzerà quindi la dimensione della radice HTML come punto di calcolo, indipendentemente dal fatto che un elemento padre abbia o meno dimensioni diverse.

EM, d’altra parte, si basa sulla dimensione del carattere dell’elemento padre. Se un elemento padre ha una dimensione diversa dall’elemento radice, il calcolo EM si baserà sull’elemento padre.

E la %, la VW e la VH? Di cosa si tratta?

La principale differenza è che questi vengono utilizzati per la spaziatura e dimensionamento degli elementi rispetto agli altri visti prima che vengono utilizzati principalmente per i caratteri.

Per ribadire, VH sta per “altezza del viewport”, che è l’altezza dello schermo visualizzabile. 100VH rappresenterebbe il 100% dell’altezza della finestra o l’intera altezza dello schermo. E, naturalmente, VW sta per “larghezza del viewport”, che è la larghezza dello schermo visualizzabile. 100VW rappresenterebbe il 100% della larghezza della finestra o l’intera larghezza dello schermo. % riflette una percentuale delle dimensioni dell’elemento padre, indipendentemente dalle dimensioni della finestra.

Dove si utilizzano le opzioni %, VW e VH?

Larghezza colonna: se si modifica il layout di una colonna Elementor, rende disponibile una sola unità di dimensionamento della larghezza – %. Le larghezze delle colonne funzionano bene e in modo reattivo solo quando si utilizzano le percentuali; quindi, non viene fornita alcuna altra opzione.

Margini: i margini di una sezione possono essere specificati in PX o in %. L’utilizzo di % è solitamente preferibile per garantire che i margini non siano più grandi del contenuto quando si ridimensiona per un dispositivo mobile, ad esempio. Utilizzando una percentuale della larghezza del dispositivo, i tuoi margini rimarranno relativi alla dimensione del contenuto, che è quasi sempre meglio.

Padding: il padding di una sezione può essere specificato in PX, EM o %.
Come per i margini, è spesso preferibile usare EM o % in modo che il padding rimanga relativo alla dimensione delle scale della pagina.

Spesso la chiave per risolvere i problemi responsive è utilizzare EM, REM o VW invece dei PX.
Ovviamente la scelta va sempre in base alle situazioni in cui ci troviamo ma se hai la possibilità ti consigliamo di utilizzare le opzioni relative, anche in base a quello che ti abbiamo spiegato oggi.

Se l’articolo ti è stato utile condividilo e seguici sui nostri social!