Come allineare sezioni e colonne di Elementor

Mentre lavori con Elementor , noterai che è un po' complicato posizionare in modo personalizzato le tue sezioni e colonne. È necessario allineare colonne e sezioni verticalmente e orizzontalmente, per ottenere un layout "stretch-to-fill" reattivo. Senza questo allineamento, gli elementi delle colonne con altezze variabili non potranno essere regolati sullo schermo.

• Perché dobbiamo allineare?
• Come funzionano le colonne o le sezioni per un design reattivo?
• Come allineare sezioni e colonne di Elementor?
• Per risolvere i problemi di larghezza reattiva, utilizzare Overflow nascosto
• Prendersi cura del posizionamento
• Unità relative
• Controlla la profondità di ogni elemento usando Z-Index
• Il trucco sulla funzionalità duplicata
• Offset
• La regola d'oro
• Conclusione

Perché dobbiamo allineare?

In ogni colonna o sezione, il contenuto può essere di diverse categorie. Può essere sotto forma di immagini, testo e valutazioni. Per un aspetto complessivo, si consiglia di uniformare l'aspetto del contenuto. Non dovrebbe essere semplicemente gettato lì, scaricato, solo per il gusto di farlo.

Con un buon allineamento, puoi rendere il sito web più ordinato e di classe, in modo che non appaia disordinato. Con l'opzione di allineamento, puoi regolare diversi widget di dimensioni variabili uno accanto all'altro nella stessa colonna.

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

Elementor 2.5 ti consente di posizionare in modo personalizzato il tuo design e i tuoi contenuti. Con la nuova funzione 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 nella colonna centrale, o comunque ti piaccia.

Tuttavia, ciò andrà a beneficio solo dei visitatori desktop perché sembrerà OK per loro. Tuttavia, causerà un problema se si accede al sito Web da dispositivo mobile poiché Elementor impila le colonne verticalmente sul dispositivo mobile.

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

Tuttavia, puoi modificare in modo intelligente la visualizzazione mobile con un'impostazione nascosta, ma non è garantito che la maggior parte delle persone riesca a trovarla. Quindi, perché frustrare gli utenti? Rendere il design reattivo e adattabile è la soluzione giusta. In modo che non si blocchi da nessuna parte.

Per questo motivo, 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, atterra sulla sezione del layout e imposta le seguenti opzioni di allineamento in base alle tue esigenze:

• Allineamento verticale: puoi selezionare le impostazioni per i widget dai seguenti. Ma una cosa da 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
• Parte inferiore

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

• ^*Spazio tra: imposta lo spazio tra i widget all'inizio e alla fine ai margini della colonna. I widget sono equidistanziati, ovvero c'è uno spazio uguale tra loro.
• ^*Spazio intorno: lo spazio tra i widget è uguale e i bordi hanno 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 è possibile eseguire il posizionamento in linea e allineare i widget in linea, che si trovano nella stessa riga, in orizzontale. 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 imposta tutte le icone a destra
• Spazio tra: lo spazio tra i widget all'inizio e alla fine sul bordo della colonna. I widget sono equidistanziati, cioè c'è lo stesso spazio tra di loro
• Spazio intorno: lo spazio tra i widget è uguale e i bordi sono la metà della dimensione dello spazio tra i widget
• Spazio uniforme: lo spazio tra i widget è uniforme, è uguale tra, prima e dopo di essi

Per risolvere i problemi di larghezza reattiva, utilizzare Overflow nascosto

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

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

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

Devi anche occuparti 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. Quindi, 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 consente alla sezione / elemento di rimanere fissata al punto di vista del visitatore. Quindi, se l'utente scorre la pagina, l'elemento rimarrà lì.

Unità relative

Mentre progetti la tua pagina web, scoprirai che ci sono diversi modi per posizionare gli elementi. Per il posizionamento assoluto, è una buona idea utilizzare 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 relative dello schermo, consentendo quindi agli elementi o alle sezioni di ridimensionarsi e un design più reattivo. Se scegli di utilizzare i pixel, devi creare più sezioni reattive per schermi di dimensioni diverse.

Controlla la profondità di ogni elemento usando Z-Index

Se si intende utilizzare il posizionamento "assoluto" o "fisso" per i widget, ci saranno molte situazioni in cui due o più widget potrebbero sovrapporsi, ovvero sono impilati "uno sopra l'altro". È possibile evitarlo utilizzando la normale impostazione Z-index. Ciò ti consentirà di controllare la profondità e di scegliere quali widget visualizzare in primo piano.

Il trucco sulla funzionalità duplicata

Se utilizzi 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 guarda. Non è vero. La funzionalità di duplicazione ha funzionato perfettamente e ha duplicato l'elemento. È solo che, poiché ogni elemento ha lo stesso identico posizionamento personalizzato, l'elemento duplicato viene impilato ESATTAMENTE sopra l'altro elemento (dando l'impressione che non sia stato creato alcun duplicato).

In termini semplici, se crei correttamente una colonna, puoi duplicare la colonna ogni volta che è necessario. Inoltre, assicurati che le colonne che crei non utilizzino il posizionamento personalizzato. In tal caso, la duplicazione non funzionerà con l'opzione di clic con il pulsante destro del mouse. Tuttavia, è possibile utilizzare la funzione di duplicazione per superare la limitazione e copiare la colonna.

Trascina leggermente l'elemento in alto e rivelerà l'altro. Entrambi gli elementi sono molto presenti. Inoltre, quando duplichi una colonna, verrà sovrapposta a quella vecchia. Potresti essere confuso. Ma non preoccuparti, puoi semplicemente trascinarlo e quindi usarlo nel design della tua pagina web.

Offset

In alcuni casi è necessario impostare gli offset sul contenuto della pagina Web. Con Elementor, puoi facilmente impostare l'offset. Quindi, se imposti un offset di 500 px da sinistra, lo spazio verrà lasciato intorno 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 con un valore simile poiché il contenuto sarà allineato correttamente sullo schermo.

In alcuni casi è necessario impostare gli offset sul contenuto della pagina Web. Con Elementor, puoi facilmente impostare l'offset. Quindi, se imposti un offset di 500 px da sinistra, lo spazio verrà lasciato intorno 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 con 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. L'utilizzo di unità relative, per progettare le sezioni si tradurrà in un design più reattivo. Il cambio di larghezza può essere gestito perfettamente con l'ausilio di relative unità. Per "relativo", intendiamo la variazione di unità come la percentuale o la larghezza della vista (VW), invece di fissare unità come i pixel.

Conclusione

Elementor è un costruttore di siti web super user-friendly. A volte, può rappresentare una sfida nella visualizzazione del sito Web se si accede al sito Web da cellulare o tablet. Con l'aiuto dell'allineamento di sezioni e colonne, puoi rendere perfetti i tuoi siti web con estrema facilità.