Interfaccia di editing web con molteplici pulsanti di chiamata all'azione. Vista della configurazione delle colonne in un costruttore visuale.
Indice dei contenuti
Questo contenuto utilizza una struttura precedente di Elementor basata su sezioni e colonne. Attualmente, Elementor ha adottato un sistema di contenitori, che migliora la flessibilità e l’organizzazione del design.
Video passo dopo passo
Cos’è una sezione?
Le sezioni in Elementor sono blocchi di costruzione di tipo contenitore; all’interno delle sezioni si trovano le colonne, che è dove andremo a posizionare i nostri widget di design. Una sezione ha sempre almeno una colonna.
Le sezioni possono essere manipolate e progettate tramite le opzioni nel Pannello di Elementor a sinistra o cliccando con il tasto destro sull’indicatore della Sezione e scegliendo dal menu contestuale che appare.
Opzioni del tasto destro
Se vuoi duplicare una sezione, fai clic con il tasto destro sul suo identificatore di sezione e clicca su Duplica nel menu contestuale. Puoi anche copiare e incollare una sezione in un altro punto dello stesso documento che stai modificando e persino in un altro documento (pagina, template, …) purché faccia parte dello stesso sito web, usando le opzioni Copia e Incolla. Puoi anche copiare e incollare solo lo stile (senza il contenuto) da una sezione all’altra. Fai clic su Salva come template per salvare la sezione come un modello da inserire ovunque in seguito. Cliccando su Navigator qui, si aprirà il Navigator già configurato per quella particolare sezione. E, naturalmente, cliccando su Elimina qui, la sezione verrà eliminata.
Se fai clic su Modifica sezione, le opzioni della colonna verranno visualizzate nel Pannello di Elementor a sinistra con tutte le seguenti opzioni a tua disposizione.
Scheda Layout
Se fai clic su Modifica sezione, le opzioni della colonna verranno visualizzate nel Pannello di Elementor a sinistra con tutte le seguenti opzioni disponibili.
Larghezza contenuto: imposta la Larghezza del contenuto su Boxed o Larghezza intera. Se selezioni Boxed, la larghezza predefinita per il contenuto sarà di 1140px (puoi cambiarla dal menu hamburger in alto a sinistra) > Impostazioni sito > Layout), anche se potrai usare il cursore per impostare la tua larghezza preferita.
Spazio tra le colonne: lo spazio tra le colonne predefinito è 20px, ma puoi modificarlo da questo selettore (Nessuno, Stretto, Esteso, Largo, Più ampio e Personalizzato).
Altezza: per impostazione predefinita la sezione adatta la sua altezza al contenuto, ma ha altre due opzioni:
Adatta alla schermata: la sezione si adatta per riempire completamente lo schermo.
Posizione colonna: se selezioni Adatta alla schermata, verrà mostrata quest’altra opzione che ti permette di allineare verticalmente la posizione della colonna (estesa, sopra, mezzo, sotto).
Altezza minima: questa opzione ti permette di impostare un’altezza minima tramite il cursore, ma tieni presente che se inserisci un valore inferiore all’altezza già occupata dal contenuto, non avrà effetto.
Posizione colonna: se selezioni Adatta alla schermata, verrà mostrata quest’altra opzione che ti permette di allineare verticalmente la posizione della colonna (estesa, sopra, mezzo, sotto).
Allineamento verticale: ti permette di impostare l’allineamento verticale dei widget che aggiungi, ma affinché questo abbia senso l’altezza della sezione deve essere impostata su Adatta alla schermata o su un’altezza minima superiore all’altezza occupata dal contenuto esistente. In ogni caso, la Colonna ha un altro controllo identico a questo per l’allineamento verticale che ha la precedenza, quindi il mio consiglio per l’allineamento verticale è usare il controllo della colonna.
Overflow: seleziona come gestire il contenuto che fuoriesce dal tuo contenitore. Il valore predefinito permette l’overflow. Seleziona Nascosto per nascondere il contenuto in eccesso. Ad esempio, usando gli Effetti di movimento della scheda Avanzato, il contenuto può entrare dall’esterno della colonna tramite un’animazione; se questo controllo è impostato su Predefinito l’elemento animato verrà mostrato in tutto il suo percorso, mentre con Overflow nascosto vedremo l’elemento animato solo nell’area delimitata dalla colonna. Questo è spiegato molto meglio nel videotutorial di questo argomento.
Estendi sezione: forza la sezione a estendersi per tutta la larghezza della pagina tramite JavaScript. Useremo questa opzione solo nel caso in cui abbiamo impostato il controllo all’inizio di questo box Larghezza contenuto su Larghezza intera e non abbia avuto effetto.
Tag HTML: imposta un tag HTML per la tua sezione, questo punto viene approfondito di seguito.
Come aggiungere tag HTML alla mia sezione e colonna
I tag HTML sono essenziali per la SEO del tuo sito. Usarli correttamente avrà un impatto positivo sul traffico del tuo sito web.
Se stai modificando l’header, usa l’header
Vai alle impostazioni della tua sezione o colonna .
In Layout, fai clic sul menu a discesa Tag HTML.
Scegli il tag che vuoi usare.
Ecco i diversi tipi di tag HTML che puoi scegliere:
<div>: definisce una divisione. Questo tag permette di raggruppare diversi elementi blocco (paragrafi, intestazioni, liste, tabelle, divisioni, ecc.).
<header>: definisce un’intestazione per un documento o una sezione. È utile quando stai creando un template di header. Può contenere gli elementi relativi all’intestazione di un sito web come il logo, un menu di navigazione, un modulo di ricerca, …
<footer>: definisce un piè di pagina per un documento o una sezione. È utile quando stai creando un template di footer. Rappresenta un piè di pagina che tipicamente contiene informazioni sull’autore del sito web, link ai testi legali e copyright.
<main>: rappresenta il contenuto principale di un documento. Questo contenuto deve essere unico per il documento, escludendo qualsiasi contenuto che si ripete in altri documenti come barre laterali, link di navigazione, informazioni sul copyright, loghi del sito e moduli di ricerca (a meno che, ovviamente, la funzione principale del documento non sia un modulo di ricerca).
<article>: rappresenta una composizione indipendente e complementare al contenuto principale del documento, ad esempio potrebbe essere un messaggio in un forum, un articolo di una rivista o di un giornale, un post di un blog, un commento di un utente, un widget interattivo o gadget, o qualsiasi altro elemento indipendente dal contenuto.
<sezione>: progettato per contenere una parte di un documento tematicamente definita. I contenuti di un elemento section sono solitamente preceduti da un’intestazione. Gli autori solitamente ricorrono all’elemento section per dividere un documento esteso in capitoli, per separare le diverse schede in un’applicazione o per dividere tematicamente le sezioni di un documento (sezione annunci, sezione ultimi articoli, sezione link correlati, ecc.).
<aside>: rappresenta una sezione di una pagina che consiste in contenuti indirettamente correlati al contenuto principale del documento. Queste sezioni sono spesso rappresentate come barre laterali o come inserti e contengono spiegazioni a margine come definizioni di glossario o elementi correlati indirettamente, come la pubblicità.
<nav>: rappresenta una parte di una pagina il cui scopo è fornire link di navigazione, sia all’interno del documento corrente che verso altri documenti. Esempi comuni di sezioni di navigazione sono menu, indici e tabelle dei contenuti.
Scheda Struttura
Quando una sezione ha più di una colonna possiamo usare queste configurazioni di distribuzione delle colonne predefinite; i numeri indicano la percentuale di larghezza di ogni colonna rispetto al totale 100.
Indipendentemente dalla struttura che selezioniamo, che per impostazione predefinita prevede colonne di uguale larghezza, possiamo definire la larghezza delle colonne a nostro piacimento, sia trascinando lo spazio tra le colonne sia tramite un numero nel campo di testo Larghezza colonna che si trova nelle opzioni della scheda Layout di una Colonna.
Cos’è una colonna?
Una colonna in Elementor è una divisione verticale di una sezione; come abbiamo detto in precedenza, le colonne sono figlie delle sezioni, e in una sezione possono esserci da una a diverse colonne. Le colonne sono il contenitore finale dei widget che comporranno il design di un documento in Elementor.
Se un documento ha più di una colonna, queste possono avere la stessa larghezza o larghezze diverse. Nel box di configurazione di una sezione c’è la scheda Struttura dove possiamo scegliere tra diverse opzioni predefinite, ma possiamo anche impostare larghezze predefinite per ogni colonna espresse in percentuali di un 100%. Ad esempio, abbiamo tre colonne e ne impostiamo una al 22,5%, un’altra al 27,5% e l’ultima al 50%.
L’altezza di una colonna è determinata dalla dimensione della sezione; affinché una colonna abbia un’altezza superiore al suo contenuto dobbiamo impostare nella sezione un’altezza minima o un
Opzioni del tasto destro
Se desideri aggiungere una nuova colonna o duplicarne una, fai clic con il tasto destro su un identificatore di colonna e scegli +Aggiungi nuova colonna o Duplica nel menu contestuale. Puoi anche copiare e incollare una colonna in un’altra sezione usando le opzioni Copia e Incolla, oppure puoi copiare e incollare solo lo stile (senza il contenuto) da una colonna all’altra.
Cliccando su Navigator, si aprirà il Navigator già configurato per quella particolare colonna. E, naturalmente, cliccando su Elimina qui, la colonna verrà eliminata. Se la sezione ha una sola colonna e la elimini, verrà rimossa ma sostituita da un’altra colonna vuota.
Se fai clic su Modifica colonna, le opzioni della colonna verranno visualizzate nel Pannello di Elementor a sinistra con le seguenti opzioni disponibili.
Scheda Layout
Larghezza colonna (%): imposta la larghezza delle tue colonne, tenendo presente che è una percentuale del totale che è 100%; aumentando la dimensione di una colonna, questa verrà sottratta alla colonna adiacente.
Alineación vertical: establezca la alineación vertical de los widgets que contenga la columna. Para que esta alineación tenga sentido se tienen que pasar dos cosas. Una que el alto de la sección sea mayor que el espacio que ocupa el contenido y esto se estableciendo el alto de la sección a un tamaño mayor que el que ocupa el contenido, ya sea seleccionando la opción Ajustar a pantalla o Altura mínima. Y otra que tras establer Ajustar a pantalla o Altura mínima establezcamos la opción Posición de la columna en Estirar.
Predefinito: i widget si allineano in alto.
Sopra: i widget si allineano in alto.
Mezzo: i widget si allineano al centro.
Sotto: i widget si allineano in basso.
Spazio intermedio: i widget iniziano e finiscono al bordo della colonna, con lo stesso spazio tra loro.
Spazio intorno: i widget hanno lo stesso spazio e i bordi hanno metà della dimensione dello spazio tra i widget.
Spazio uniforme: i widget hanno lo stesso spazio tra, prima e dopo di loro.
Allineamento orizzontale: questo amplia la capacità del posizionamento in linea e ti permette di allineare orizzontalmente i widget in linea che sono posizionati sulla stessa riga. Affinché questo allineamento sia possibile, è necessario che i widget che vogliamo allineare abbiano impostato nella scheda Avanzato > Posizionamento > Larghezza: Inline (auto) in modo che i widget non occupino tutta la larghezza dello schermo e possano essere allineati orizzontalmente.
e clicca su Duplica nel menu contestuale. Puoi anche copiare e incollare una sezione in un altro punto dello stesso documento che stai modificando e persino in un altro documento (pagina, template, …) purché faccia parte dello stesso sito web, usando le opzioni Copia e Incolla. Puoi anche copiare e incollare solo lo stile (senza il contenuto) da una sezione all’altra. Fai clic su Salva come template per salvare la sezione come un modello da inserire ovunque in seguito. Cliccando su Navigator qui, si aprirà il Navigator già configurato per quella particolare sezione. E, naturalmente, cliccando su Elimina qui, la sezione verrà eliminata. 
.
