Come allineare sezioni e colonne di Elementor

Mentre lavori con Elementor , noterai che è un po' complicato posizionare in modo personalizzato le sezioni e le colonne. È necessario allineare colonne e sezioni verticalmente e orizzontalmente, per ottenere un layout reattivo "allungamento per riempimento". Senza questo allineamento, gli elementi delle colonne con altezze diverse non potranno adattarsi sullo schermo.

• Perché dobbiamo allinearci?
• Come funzionano le colonne o le sezioni per un responsive design?
• Come allineare sezioni e colonne di Elementor?
• Per risolvere i problemi di larghezza reattiva utilizzare Overflow Hidden
• Prendersi cura del posizionamento
• Unità relative
• Controlla la profondità di ciascun elemento utilizzando Z-Index
• Il trucco della funzionalità duplicata
• Compensazioni
• La regola d'oro
• Conclusione

Perché dobbiamo allinearci?

In ciascuna colonna o sezione, il contenuto può appartenere a diverse categorie. Può essere sotto forma di immagini, testo e valutazioni. Per un aspetto omogeneo, è consigliabile che vi sia uniformità nell'aspetto del contenuto. Non dovrebbe essere semplicemente gettato lì, scaricato, solo per il gusto di farlo.

Con un buon allineamento, puoi far apparire il sito web più ordinato ed elegante, in modo che non sembri disordinato. Con l'opzione di allineamento puoi posizionare diversi widget di diverse dimensioni uno accanto all'altro nella stessa colonna.

Come funzionano le colonne o le sezioni per un responsive design?

Elementor 2.5 ti consente di posizionare in modo personalizzato il tuo design e i tuoi contenuti. Con la nuova funzionalità di posizionamento personalizzato, puoi spostare i widget in qualsiasi posizione. Ma non puoi davvero farlo oltre una certa sezione. Questi widget sono relativi alla colonna in cui si trovano. Ciò può causare un problema nella reattività del progetto.

Supponiamo di avere un layout a tre colonne. Con l'aiuto del posizionamento personalizzato, puoi trascinare e rilasciare un widget dalla colonna di destra alla colonna centrale o come preferisci.

Ma farlo andrà a vantaggio solo dei visitatori desktop perché sembrerà loro OK. Tuttavia, causerà un problema se si accede al sito Web da dispositivi mobili perché Elementor impila le colonne verticalmente sui dispositivi mobili.

Pertanto, invece di avere tre colonne affiancate, potresti riscontrare tutte e tre le colonne impilate l'una sull'altra. L'elemento non apparirà più nella colonna centrale come sui desktop.

Sebbene sia possibile modificare in modo intelligente la visualizzazione mobile con un'impostazione nascosta, non vi è alcuna garanzia che la maggior parte delle persone possa trovarla. Quindi, perché frustrare gli utenti? Rendere il design responsivo e adattabile è la soluzione giusta. In modo che non si blocchi da nessuna parte.

Del resto, devi prestare attenzione alla relazione del widget con la colonna in cui si trova.

Come allineare sezioni e colonne di Elementor?

Per ogni sezione/colonna, posizionati sulla sezione di layout e imposta le seguenti opzioni di allineamento in base alle tue esigenze:

• Allineamento verticale: puoi scegliere le impostazioni per i widget dalle seguenti. Ma una cosa che devi tenere a mente è che il contenuto di una colonna non può essere allineato con le prime tre opzioni verticali della colonna, ovvero superiore, centrale e inferiore.
• Superiore
• Mezzo
• Metter il fondo a

Del resto, ci sono ^* tre nuove opzioni che rendono davvero conveniente allineare i contenuti secondo i tuoi gusti.

• ^*Spazio tra: imposta lo spazio tra i widget all'inizio e alla fine sul bordo della colonna. I widget sono equispaziati, ovvero c'è uguale spazio tra di loro.
• ^*Spazio intorno: lo spazio tra i widget è uguale e i bordi sono la metà dello spazio tra i widget.
• ^*Spazio uniformemente: lo spazio tra i widget è uniforme: è uguale tra, prima e dopo di essi.

• Allineamento orizzontale: con questa opzione puoi eseguire il posizionamento in linea e allineare orizzontalmente i widget in linea, che si trovano nella stessa riga. Puoi allineare il contenuto delle colonne orizzontalmente utilizzando queste opzioni:
• Avvia: allinea tutte le icone a sinistra
• Centro: posiziona le icone al centro della colonna
• Fine: posiziona tutte le icone a destra
• Spazio tra: lo spazio tra i widget all'inizio e alla fine sul bordo della colonna. I widget sono equispaziati, ovvero c'è uguale spazio tra di loro
• Spazio intorno: lo spazio tra i widget è uguale e i bordi sono la metà dello spazio tra i widget
• Spazio uniformemente: lo spazio tra i widget è uniforme: è uguale tra, prima e dopo di essi

Per risolvere i problemi di larghezza reattiva utilizzare Overflow Hidden

Quando si tratta dell'aspetto di un sito web sui dispositivi mobili, è molto probabile che potresti riscontrare un problema in cui un widget con posizionamento personalizzato supera la larghezza di una colonna.  

Ciò causa una situazione davvero frustrante per i visitatori mobili, che possono scorrere orizzontalmente. E questo non è qualcosa che avresti voluto per il tuo sito web. Questo può essere risolto:

Impostazioni layout > Imposta l' opzione Overflow Nascosto

In questo modo l'area in eccesso verrà tagliata e non sarà necessario scorrere orizzontalmente

Prendersi cura del posizionamento

Bisogna anche occuparsi del posizionamento delle colonne. Puoi impostare il posizionamento personalizzato con Elementor 2.5: assoluto e fisso.

La posizione assoluta è il posizionamento dell'elemento rispetto alla sezione o colonna in cui ti trovi. Pertanto, se utilizzi il posizionamento assoluto su un elemento o una sezione, quella sezione non si sposterà lungo la finestra del visitatore.

La posizione fissa è diversa da quella assoluta in quanto lascia che la sezione/elemento rimanga fissa al punto di vista del visitatore. Pertanto, se l'utente scorre la pagina, l'elemento rimarrà lì.

Unità relative

Mentre progetti la tua pagina web, scoprirai che esistono diversi modi per posizionare gli elementi. Per il posizionamento assoluto, è una buona idea utilizzare le unità relative in quanto renderà il design reattivo più funzionale quando si tratta di dimensioni dello schermo diverse.

L'unità relativa si regola in base alla larghezza e all'altezza relativa dello schermo, consentendo quindi il ridimensionamento degli elementi o delle sezioni e un design più reattivo. Se scegli di utilizzare i pixel, devi creare più sezioni reattive per diverse dimensioni dello schermo.

Controlla la profondità di ciascun elemento utilizzando Z-Index

Se utilizzerai il posizionamento 'assoluto' o 'fisso' per i widget, ci saranno molte situazioni in cui due o più widget potrebbero sovrapporsi, ovvero essere impilati "sopra" l'uno sull'altro. Puoi evitare questo problema utilizzando la normale impostazione dell'indice Z. Ciò ti consentirà di controllare la profondità e di scegliere quali widget visualizzare in primo piano.

Il trucco della funzionalità duplicata

Se stai utilizzando il clic con il pulsante destro del mouse per duplicare un elemento con posizionamento personalizzato, potrebbe sembrare che il clic con il pulsante destro del mouse non abbia funzionato.

Ma ecco. Non è vero. La funzionalità di duplicazione ha funzionato perfettamente e ha duplicato l'elemento. È solo che, poiché ogni elemento ha esattamente lo stesso posizionamento personalizzato, l'elemento duplicato si sovrappone ESATTAMENTE sopra l'altro elemento (dando l'impressione che non sia stato creato alcun duplicato).

In termini semplici, se crei una colonna con successo, puoi duplicarla quando necessario. Inoltre, assicurati che le colonne che crei non utilizzino il posizionamento personalizzato. In tal caso, la duplicazione non funzionerà con l'opzione del tasto destro. Tuttavia, puoi utilizzare la funzione duplicata per superare la limitazione e copiare la colonna.

Trascina leggermente l'elemento superiore e rivelerà l'altro. Entrambi gli elementi sono molto presenti. Inoltre, quando duplichi una colonna, questa si sovrapporrà a quella vecchia. Potresti sentirti confuso. Ma non preoccuparti, puoi semplicemente trascinarlo e utilizzarlo nel design della tua pagina web.

Compensazioni

Ci sono casi in cui è necessario impostare gli offset sul contenuto della pagina web. Con Elementor puoi impostare facilmente l'offset. Pertanto, se imposti un offset di 500 px da sinistra, verrà lasciato spazio attorno al contenuto in base al tuo input. Allo stesso modo, puoi anche impostare l'offset sul lato destro. È buona norma impostare l'offset sinistro e destro su un valore simile poiché il contenuto sarà allineato correttamente sullo schermo.

Ci sono casi in cui è necessario impostare gli offset sul contenuto della pagina web. Con Elementor puoi impostare facilmente l'offset. Pertanto, se imposti un offset di 500 px da sinistra, verrà lasciato spazio attorno al contenuto in base al tuo input. Allo stesso modo, puoi anche impostare l'offset sul lato destro. È buona norma impostare l'offset sinistro e destro su un valore simile poiché il contenuto sarà allineato correttamente sullo schermo.

La regola d'oro

Per una migliore progettazione reattiva, utilizzare le unità relative. Questo perché il posizionamento assoluto può essere complicato quando si accede al sito Web da una piattaforma diversa. Utilizzando le unità relative, per progettare le tue sezioni si otterrà un design più reattivo. La variazione di larghezza può essere gestita perfettamente con l'ausilio delle relative unità. Per “relativo” intendiamo unità variabili come la percentuale o la larghezza di visualizzazione (VW), anziché fissare unità come i pixel.

Conclusione

Elementor è un costruttore di siti Web estremamente intuitivo. A volte, può creare problemi nella visualizzazione del sito Web se si accede al sito Web da dispositivo mobile o tablet. Con l'aiuto dell'allineamento di sezioni e colonne, puoi rendere perfetti i tuoi siti web con estrema facilità.