Sei nuovo ai contenitori Elementor Flexbox? Quindi la nuova struttura del layout del page builder può creare un po’ di confusione. Ma abbiamo ciò di cui hai bisogno.
Elementor Flexbox è il nuovo framework di layout che rende la progettazione del sito web più semplice e user-friendly. I contenitori Flexbox segnano un aggiornamento incrementale al vecchio layout sezione-colonna che tutti conosciamo.
Sebbene il layout sezione-colonna rendesse pratica la progettazione del sito Web utilizzando sezioni, sottosezioni e colonne, mancava ancora flessibilità in termini di design.
Una sezione in Elementor può avere solo colonne e una sottosezione. Più aggiungi a una pagina, più lentamente verrà caricato il tuo sito web.
Per non parlare di quanto sia difficile creare design ottimizzati per i dispositivi mobili con questa vecchia struttura.
Sebbene il layout di sezioni e colonne sia stato utile ai designer, è ora di passare a un modo migliore, più efficiente e più flessibile di progettare siti Web utilizzando il generatore di pagine Elementor.
Quindi, se vuoi padroneggiare i contenitori Flexbox, aggiungi questo blog ai preferiti. In questa guida Elementor Flexbox, ti guideremo attraverso tutti i dettagli di questa nuova struttura di layout.
Capiremo anche come sia migliore rispetto al vecchio layout sezione-colonna.
contenuto
- Cos'è un contenitore Elementor Flexbox?
- Differenza tra vecchie sezioni e nuovi contenitori Elementor Flex
- Vantaggi dell'utilizzo dei contenitori Elementor Flexbox
- Come utilizzare i contenitori Elementor Flexbox (passo dopo passo)
- Passaggio 1. Abilita Flexbox nelle Impostazioni di Elementor
- Passaggio 2. Crea una nuova pagina Web
- Passaggio 3. Apri Elementor
- Passaggio 4. Aggiungi un nuovo contenitore
- Passaggio 5. Modellare il contenitore
- Passaggio 6. Trascina e rilascia i widget nei contenitori
- Passaggio 7. Personalizza i widget
- Passaggio 8. Pubblica la tua prima pagina web Flexbox
- Come convertire una pagina Elementor basata su sezioni in un contenitore Flexbox?
- Posso combinare i componenti aggiuntivi di Elementor con il nuovo contenitore flexbox?
- Conclusione
- Domande frequenti
Cos'è un contenitore Elementor Flexbox?
I contenitori Elementor Flexbox sono l'implementazione di Elementor del modello CSS Flexbox nel loro generatore di pagine. CSS Flexbox o Fixed Box Layout è un nuovo layout web basato su CSS 3.
È ottimizzato per prestazioni e reattività, offrendo layout che si adattano a diversi dispositivi e dimensioni dello schermo.
Rilasciati con l'aggiornamento Elementor 3.6, Elementor Flexbox Containers ti consente di progettare pagine Web ottimizzate per i dispositivi utilizzando contenitori come Flexbox CSS.
Questi contenitori Elementor contengono tutti gli elementi della tua pagina come testo, immagini, widget, ecc. Ma ecco la parte migliore: puoi mettere contenitori all'interno di contenitori.
Se hai utilizzato il layout standard sezioni-colonne, sai già quanto sia difficile lavorare con più layout.
Sebbene disponiamo di tutti i tipi di layout come blocchi, tabelle, inline, ecc., lavorare con essi è una seccatura ed è difficile garantirne la reattività.
Ma con Flexbox puoi posizionare contenitori all'interno di contenitori all'infinito. Ciò può creare infinite possibilità quando si tratta di layout e design unici.
In poche parole, i contenitori sono le tue nuove sezioni, ma sono flessibili sia a livello individuale che globale. La flessibilità si trova in quasi ogni aspetto di un contenitore, che si tratti di allineamento, imbottitura o posizionamento in linea.
Casi d'uso comuni per i contenitori Flexbox
Ecco alcuni casi d'uso popolari per i contenitori Flexbox:
1. Sezioni regolari
Un sito Web è principalmente suddiviso in sezioni come introduzione, eroe, invito all'azione, ecc. I contenitori offrono molta più flessibilità durante la progettazione di una qualsiasi di queste sezioni. Puoi aggiungere immagini, posizionare testo e pulsanti cliccabili. Allo stesso tempo, puoi controllare la direzione, l'allineamento e la spaziatura dei tuoi contenuti.
2. Layout delle carte
Poiché i contenitori Flexbox possono ospitare più contenitori in righe e colonne, vengono comunemente utilizzati per creare layout di carte. Hai il controllo completo su allineamento, portata e vestizione. Inoltre, i contenitori Elementor nidificati ti consentono di inserire widget di contenuto diversi in ciascuna scheda.
3. Galleria di immagini dell'eroe
La possibilità di annidare contenitori secondari all'interno di un contenitore principale rende Flexbox ideale per la creazione di gallerie di immagini. Puoi creare gallerie con un flusso di immagini orizzontale o verticale. Inoltre, puoi controllare lo spazio bianco tra le immagini, la dimensione di ciascuna immagine e persino aggiungere elementi come testo, pulsanti, ecc.
4. Modelli per la creazione di temi
I contenitori sono ottimi per creare modelli per elementi come un'intestazione, un piè di pagina o una singola pagina. Puoi utilizzare i contenitori per creare un layout di base per questi elementi e salvarlo. Quindi puoi usarlo mentre crei più pagine. Inoltre, il contenuto di un contenitore è ottimizzato per i dispositivi mobili, quindi le pagine create utilizzando questi modelli si adatteranno alle diverse dimensioni dello schermo.
5. Elementi centrati
In una struttura a sezione-colonna, centrare verticalmente gli elementi in una sezione era un po' difficile. Tuttavia, i contenitori semplificano questo compito. È possibile impostare le proprietà di allineamento e giustificazione su Center per posizionare un elemento al centro del contenitore.
Differenza tra vecchie sezioni e nuovi contenitori Elementor Flex
Vediamo le principali differenze tra il contenitore Elementor e la sezione sulle varie impostazioni.
1. Differenza tecnica
Le sezioni di Elementor forniscono un quadro strutturale per l'organizzazione di elementi come widget, immagini, testo, ecc. Puoi dividere una sezione in colonne e inserire in esse gli elementi della pagina web.
Al contrario, i contenitori Elementor Flexbox offrono un modo più flessibile e adattivo per organizzare gli elementi della pagina web. Un contenitore è come una sezione ma senza una griglia predefinita.
Hai invece la possibilità di posizionare contenitori all'interno di un contenitore.
Inoltre, i widget nelle sezioni sono a larghezza intera, mentre nei contenitori sono in linea per impostazione predefinita. Pertanto, puoi posizionare tutti gli elementi che desideri in un contenitore principale.
E man mano che aggiungi più elementi, l'allineamento, il posizionamento e le dimensioni del contenitore cambieranno automaticamente per adattarli.
2. Differenza visiva
Il passo successivo sulla differenza tra il contenitore e la sezione Elementor sono le modifiche visive.
Il generatore di pagine Elementor con contenitori Flexbox mantiene la classica interfaccia utente del generatore di pagine. Ma ci sono alcuni cambiamenti notevoli.
Hai ancora la dashboard sul lato sinistro, dove puoi accedere a tutti i tuoi widget, elementi e impostazioni. Ma il browser ora mostra i contenitori e gli elementi sottostanti anziché suddivisioni e sezioni.
Puoi sempre fare clic sull'icona + oppure trascina e rilascia gli elementi per aggiungerli alla tua pagina web. L'unica differenza è che devi scegliere un contenitore e una direzione anziché sezioni e numero di colonne.
Inoltre, sono disponibili nuove opzioni incentrate sul contenitore, come direzione, allineamento, giustificazione, spaziatura degli elementi, deformazione, ecc.
![Differenza visiva su come utilizzare Elementor Flexbox Container [Guida per principianti]](https://blogpascher.com/wp-content/uploads/2024/09/conteneur-Elementor-Flexbox.png "Differenza visiva | I componenti aggiuntivi Plus per Elementor")
3. Differenza di prestazioni
La differenza di prestazioni tra i contenitori Flexbox e il layout sezione-colonna è enorme, soprattutto se il design del tuo sito web è pieno di layout e sottosezioni complessi.
Devi aver notato che le sezioni tradizionali di Elementor hanno una proprietà di visualizzazione impostata come " blocco ". Pertanto, quando aggiungi una nuova sezione o widget, questi si impilano uno sopra l'altro.
Se vuoi visualizzarli fianco a fianco, devi creare più suddivisioni e DOM, il che rallenta il tuo sito web finale.
D'altra parte, i contenitori Flexbox utilizzano una proprietà di visualizzazione chiamata " flettere", come flessibile. Pertanto, quando aggiungi nuovi componenti a un contenitore, puoi impilarli verticalmente o affiancarli orizzontalmente.
Non è quindi necessario creare ulteriori divisioni. In questo modo il codice della pagina web rimane di facile esecuzione, riducendo notevolmente i tempi di caricamento.
Vantaggi dell'utilizzo dei contenitori Elementor Flexbox
Ci sono diversi vantaggi nell’utilizzare i contenitori Flexbox rispetto ai blocchi tradizionali per la progettazione di siti web. Alcuni dei principali vantaggi sono:
1. Controllo granulare del layout
I contenitori Flexbox forniscono un elevato livello di controllo sul posizionamento e sul layout dei contenuti. Puoi creare facilmente layout orizzontali o verticali. Inoltre, puoi impostare la direzione, l'allineamento, il riempimento, la larghezza, ecc. del contenuto, a livello di singolo elemento e a livello globale.
2. Layout reattivi del dispositivo
Le nuove sezioni flessibili sono progettate per piccoli dispositivi. Puoi modificare il layout nel modo che preferisci per le diverse dimensioni dello schermo, inclusi desktop, tablet e dispositivi mobili. Pertanto, tutto il contenuto delle tue pagine web è adatto a diversi dispositivi ed è facilmente accessibile all'utente finale.
3. Markup pulito
Come spiegato in precedenza, la creazione di più sezioni o divisioni orizzontali con la proprietà di visualizzazione del blocco crea un rigonfiamento del DOM e ingombra il markup. Tuttavia, i contenitori Flex consentono il posizionamento orizzontale del contenuto senza richiedere colonne e sezioni. Ciò rende il codice del sito Web facile da eseguire e si carica più velocemente su vari dispositivi.
4. Sezioni nidificate infinite
La limitazione più grande del tradizionale generatore di blocchi era che poteva ospitare solo una sottosezione all'interno di una sezione. Tuttavia, un Flexbox ti consente di aggiungere un contenitore all'interno di un contenitore all'infinito. Quindi puoi creare layout più complessi senza problemi o ingombrare il markup con DOM eccessivo.
5. Sezioni cliccabili
In precedenza, era possibile rendere selezionabili solo i widget di una sezione, non l'intera sezione. Ma con Flex Containers, Elementor ti consente di creare collegamenti ipertestuali a un'intera sezione. Questa è una caratteristica essenziale dal punto di vista dell'utente finale, che non dovrà più cercare specifici elementi cliccabili per spostarsi su un'altra pagina, ma dovrà invece cliccare sulla sezione.
Come utilizzare i contenitori Elementor Flexbox (passo dopo passo)
L'esperienza del generatore di pagine Elementor Flexbox è simile al generatore di blocchi Elementor standard. Quindi, che tu sia completamente nuovo a Elementor o passi dal vecchio builder, non avrai problemi ad abituarti.
Potresti avere diverse domande in mente, come: "Come abilito/attivo il contenitore in Elementor? Come si usano i contenitori in Elementor? Come si aggiunge un contenitore in Elementor?". Questa sezione ti aiuterà a rispondere.
Per aiutarti a iniziare, ecco i passaggi per utilizzare i contenitori Flexbox per progettare un sito Web:
Passaggio 1. Abilita Flexbox nelle Impostazioni di Elementor
Il primo passo per utilizzare Flexbox in Elementor è attivare Flexbox. Quindi, vai alle impostazioni di Elementor dalla dashboard di WordPress. Successivamente, fai clic sulla scheda Esperienza, scorri verso il basso, trova il contenitore Flexbox e seleziona l'opzione Attivo dal menu a discesa. Infine, salva le modifiche e vai al passaggio successivo.
Nota: Sui nuovi siti web, il contenitore Flexbox è attivo per impostazione predefinita.
Passaggio 2. Crea una nuova pagina Web
Ora dobbiamo creare una nuova pagina come facciamo di solito. Vai alla sezione Pagine, seleziona Tutte le pagine e fai clic Aggiungi una pagina.
Passaggio 3. Apri Elementor
Ora avrai la finestra del generatore di pagine WordPress sullo schermo. Dai un titolo a questa nuova pagina e clicca su Modifica con Elementor per accedere ai contenitori Flexbox.
![Apri Elementor: come utilizzare Elementor Flexbox Container [Guida per principianti]](https://blogpascher.com/wp-content/uploads/2022/11/Modifier-avec-Elementor.png "Apri Elementor | I componenti aggiuntivi Plus per Elementor")
Passaggio 4. Aggiungi un nuovo contenitore
Sullo schermo verrà visualizzata un'interfaccia utente familiare del generatore di pagine Elementor. Inoltre, puoi trascinare e rilasciare un contenitore dalla barra laterale per aggiungere un nuovo contenitore o fare clic sull'icona + e scegli la struttura desiderata.
![Aggiungi un nuovo contenitore come utilizzare il contenitore Elementor Flexbox [guida per principianti]](https://blogpascher.com/wp-content/uploads/2024/09/Ajouter-un-nouveau-conteneur.gif "Aggiungi un nuovo contenitore | I componenti aggiuntivi Plus per Elementor")
Passaggio 5. Modellare il contenitore
Una volta aggiunto un contenitore, puoi accedere a molte opzioni di personalizzazione. Puoi modificare opzioni come tipo di contenitore, larghezza, altezza, direzione, allineamento, ecc.
![Contenitore per lo styling Come utilizzare il contenitore Elementor Flexbox [Guida per principianti]](https://blogpascher.com/wp-content/uploads/2024/09/Styliser-le-conteneur.png)
Passaggio 6. Trascina e rilascia i widget nei contenitori
Anche aggiungere widget ai contenitori è semplice. Scegli semplicemente il widget desiderato dalla scheda Elementi, quindi trascinalo sull'icona + nel contenitore.
![Trascina e rilascia i widget nei contenitori come utilizzare il contenitore Elementor Flexbox [guida per principianti]](https://blogpascher.com/wp-content/uploads/2024/09/Glisser-deposer-des-widgets-dans-des-conteneurs.gif "Trascina e rilascia i widget nei contenitori | I componenti aggiuntivi Plus per Elementor")
Passaggio 7. Personalizza i widget
Come le impostazioni globali del contenitore, puoi anche personalizzare il contenuto di un contenitore. Puoi personalizzare opzioni come direzione, allineamento, giustificazione, spazio, avvolgimento, ecc.
Passaggio 8. Pubblica la tua prima pagina web Flexbox
Puoi creare molti contenitori, duplicarli e scambiare le loro posizioni. Ripeti i passaggi man mano che aggiungi altri elementi e, una volta terminato, fai clic sul pulsante pubblicare per mettere online la tua pagina web. Puoi anche fare clic sul pulsante Anteprima per interagire con la tua nuova pagina web Flexbox.
Come convertire una pagina Elementor basata su sezioni in un contenitore Flexbox?
Puoi convertire facilmente una struttura sezione-colonna in un contenitore Flexbox. Basta seguire questi semplici passaggi:
Passaggio 1. Seleziona la sezione
Seleziona la sezione che desideri convertire in un contenitore facendo clic sui sei punti nella parte superiore della sezione. In alternativa, puoi anche scegliere la sezione nel popup Elementor Navigator.
Passaggio 2. Converti la sezione in contenitore
Dopo aver selezionato una sezione, vedrai il pulsante CONVERTI nella scheda Layout. Fare clic su di esso per convertire la sezione in un contenitore.
Passaggio 3. Aggiorna layout
Una volta completata la conversione, vedrai due versioni separate della sezione selezionata. La sezione superiore è quella originale, mentre quella inferiore è il nuovo contenitore. Elimina la sezione originale e fai clic su Aggiorna per salvare il layout.
Ripeti i passaggi per ogni sezione che intendi convertire in un contenitore.
Posso combinare i componenti aggiuntivi di Elementor con il nuovo contenitore flexbox?
Sì, puoi combinare i componenti aggiuntivi di Elementor con i contenitori Flexbox. Non è necessaria alcuna soluzione alternativa poiché i contenitori Flexbox si integrano perfettamente con componenti aggiuntivi e plug-in di terze parti.
In effetti, i componenti aggiuntivi sono necessari per abilitare funzionalità avanzate e opzioni di personalizzazione nel generatore di pagine Elementor. Puoi installare
Risorse correlate
- Come utilizzare i caratteri globali in Elementor
- Come creare un pulsante mobile con Elementor Z Index
- Come creare una pagina 404 in Elementor
- Come creare una fisarmonica di immagini con JetTabs in Elementor
- Come creare un menu a schermo intero in Elementor
Conclusione
Il contenitore Flexbox di Elementor è uno strumento potente che trasforma il modo in cui progetti e strutturi le tue pagine web. Grazie alle sue funzionalità flessibili, puoi gestire l'allineamento, la spaziatura e l'organizzazione dei tuoi elementi con una precisione eccezionale. Che tu voglia creare layout complessi o semplicemente migliorare la reattività dei tuoi design, Flexbox offre una soluzione elegante e intuitiva.
Utilizzando il contenitore Flexbox, hai accesso a una gamma di controlli che facilitano la gestione di spaziatura e allineamento, semplificando al contempo le regolazioni necessarie per una presentazione fluida su tutti i dispositivi. Questo livello di personalizzazione non solo migliora l'esperienza utente, ma ottimizza anche il processo di progettazione rendendo le tue pagine più dinamiche e reattive.
Non esitate a esplorare le varie opzioni offerte da Flexbox per scoprire come possono migliorare i vostri progetti Elementor. Con il giusto utilizzo di questi strumenti, potete creare layout fluidi e professionali che catturano e coinvolgono i vostri visitatori. Continuate a sperimentare e sfruttare le possibilità offerte da Elementor per ottenere il massimo dai vostri web design.
COSÌ ! Ti abbiamo appena mostrato come utilizzare il contenitore Elementor Flexbox. Se hai dubbi su come arrivarci, faccelo sapere all'interno commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
Domande frequenti
Qual è la differenza tra Flexbox Container e Sezione in Elementor?
Le sezioni di Elementor ospitano widget a larghezza intera su una pagina, ma con i contenitori Flexbox i widget sono in linea all'interno di un contenitore. Inoltre, le sezioni sono rigide e possono avere solo una sezione interna, mentre i contenitori Flex possono essere annidati indefinitamente.
Posso utilizzare Elementor Flexbox Containers con qualsiasi tema WordPress?
Sì, puoi utilizzare i contenitori Elementor Flexbox con qualsiasi tema WordPress. Tutto quello che devi fare è abilitare i contenitori Flexbox nelle impostazioni di Elementor e saranno disponibili la prossima volta che accederai al generatore di pagine.
Come posso rendere i miei contenitori Elementor Flexbox reattivi su schermi di diverse dimensioni?
Con il contenitore Flexbox Elementor, hai più opzioni per garantire che il contenuto della tua pagina web sia reattivo su schermi di diverse dimensioni. Ad esempio, puoi selezionare la direzione del contenuto del contenitore per visualizzare il contenuto in righe o colonne. Puoi anche allineare il contenuto orizzontalmente e verticalmente e decidere quando racchiuderlo all'interno di ciascun elemento. Inoltre, puoi anche abilitare/disabilitare un widget in base al dispositivo.