Come utilizzare il contenitore Elementor Flexbox in 6 semplici passaggi

Hai provato il nuovo  Contenitore Elementor Flexbox caratteristica?

Bene, il buzz è che è un'ottima aggiunta per rendere il tuo sito web più ottimizzato per tutti i dispositivi e velocizzare il caricamento del tuo sito.

Come? 

Bene, il nuovo contenitore flessibile funziona in modo leggermente diverso (sia front-end che back-end) rispetto alle sezioni/sezioni interne precedenti. E questi modi nuovi e diversi di lavorare sono ciò che fa la magia.

In questo blog imparerai le nuove opzioni che il contenitore Elementor flexbox offre per creare un sito Web e come utilizzare Elementor Flexbox Container in una guida passo passo.

Quindi continua a leggere…

Cos'è un contenitore Elementor Flexbox?

Il contenitore Elementor Flexbox porta tutte le funzionalità CSS Flexbox nel tuo editor Elementor. Con la nuova aggiunta, puoi creare facilmente layout avanzati per garantire che le pagine web abbiano un bell'aspetto su tutti i dispositivi, indipendentemente dalle dimensioni.

Nota: il contenitore CSS flexbox, come suggerisce il nome, offre flessibilità avanzata per creare un design reattivo al dispositivo. Prima dell'introduzione di flexbox, era piuttosto complicato creare un design reattivo utilizzando più modalità di layout come Blocco, In linea, Tabella e Posizione. Ma con i contenitori flexbox non sono più necessarie modalità di layout multiple.

E quando si tratta del contenitore Elementor flexbox, non dovrai più utilizzare le sezioni. Puoi aggiungere widget all'interno di un contenitore senza alcuna sezione. Puoi anche aggiungere un numero infinito di contenitori all'interno del contenitore.

Dopo aver aggiunto widget e contenitori, puoi controllare la distribuzione dei widget all'interno del contenitore insieme al layout per ciascun dispositivo. Inoltre, ottieni impostazioni di personalizzazione separate per ciascun contenitore (anche contenitori all'interno di un contenitore). Ciò ti offre la massima flessibilità per rendere reattivo il tuo dispositivo di progettazione. 

Differenza tra i nuovi contenitori e sezioni Elementor Flex

Ti starai chiedendo quali sono le differenze tra contenitori e sezioni. Bene, ci sono alcune differenze. Queste sono alcune differenze fondamentali:

• Puoi aggiungi widget ai contenitori con flexbox mentre con le sezioni è necessario aggiungere colonne e quindi aggiungere widget.
• Nel contenitore flessibile, la larghezza del widget è in linea per impostazione predefinita mentre, con la struttura della sezione a colonne, la larghezza del widget è intera per impostazione predefinita.
• In precedenza, potevi aggiungere solo una sezione interna all'interno di una sezione, ma con gli ultimi contenitori flessibili, puoi aggiungere tutti i contenitori che desideri.
• Con la struttura a sezione di colonna, puoi modificare la direzione del widget utilizzando la colonna o il posizionamento in linea. Ora con l'ultimo contenitore flessibile, puoi modificare la direzione del widget utilizzando Colonna, Riga, Colonna inversa o Riga inversa.
• Nella struttura delle sezioni delle colonne, sono state utilizzate colonne inverse o sezioni duplicate per rendere reattive le pagine Web. Nell'ultimo metodo del contenitore flessibile, puoi utilizzare a Ordine personalizzato di widget o contenitori per ciascun dispositivo.
• Le opzioni di allineamento nella struttura della sezione/colonna sono Sinistra, Centro e Destra. D'altra parte, con i contenitori flessibili, ottieni opzioni di allineamento come flex-start, flex-center e flex-End.

Ora, devi pensare a come questi cambiamenti possono avvantaggiarti. Per saperne di più, passa alla sezione successiva.

Vantaggi dell'utilizzo del contenitore Elementor Flexbox

Viene effettuata molta ricerca prima che una nuova funzionalità venga aggiunta a un plug-in per garantire che la funzionalità sia utile ai clienti. Lo stesso vale con il contenitore flessibile Elementor. Questo Elementor è stata aggiunta perché andrà a vantaggio in larga misura degli utenti.

Ecco alcuni dei vantaggi di cui potrai usufruire se utilizzi il contenitore Elementor flexbox:

• Poiché la sezione e la sezione interna verranno sostituite con contenitori flessibili, puoi creare siti web più ottimizzati.
• Flexbox ridurrà il numero di colonne e sezioni interne di Elementor Flexbox. Di conseguenza, nel backend verrà prodotto meno codice. E iomeno DOM risulterà in una migliore velocità per il tuo sito WordPress.
• Le impostazioni del contenitore Flexbox ti consentiranno di farlo creare siti Web reattivi ai dispositivi con maggiore flessibilità rispetto a prima.
• Ora puoi collegamento ipertestuale a una sezione completa. In precedenza era possibile collegare solo i widget tramite collegamenti ipertestuali.
• Se prima non eri soddisfatto perché potevi aggiungere solo una sezione interna in una sezione, allora il contenitore flessibile fa al caso tuo. Con il contenitore flessibile, puoi aggiungere contenitori all'interno del contenitore a tempo indeterminato.

Come utilizzare il contenitore Elementor Flexbox in 6 passaggi

Segui i passaggi seguenti per scoprire come utilizzare il contenitore Elementor Flexbox sul tuo sito Web per ottenere un aspetto più ottimizzato. Il processo si compone di 6 semplici passaggi:

Passaggio 1: attiva il contenitore Flexbox in Elementor Experiments

Innanzitutto, avrai bisogno di una funzionalità del contenitore flexbox per sfruttare il contenitore flexbox in Elementor. Per quello, vai a Elementor ⇒ Impostazioni dalla dashboard di WordPress. Ora passa alla scheda Esperimenti e scorri verso il basso per trovare l'opzione "Contenitore Flexbox".

Dopo aver trovato l'opzione scegli Attivo dal menu a discesa per attivare Elementor Flexbox Container. Infine, scorri fino in fondo e fare clic su "Salva modifiche"." per salvare lo stato.

Passaggio 2: crea una nuova pagina

Dopo aver attivato il contenitore flessibile, è il momento di creare una nuova pagina in modo da poter utilizzare questa funzionalità. Per questo, vai a Pagine ⇒ Tutte le pagine poi fare clic su Aggiungi nuovo. Ora, fornisci un titolo e fai clic su Modifica con Elementor

Passaggio 3: aggiungi un contenitore

Ora, invece di una sezione, devi aggiungere un contenitore. Per quello,  clicca sull'icona +, quindi scegli la struttura che preferisci.

Nota: Se noti la struttura nel navigatore, scoprirai che la struttura è in realtà un contenitore che contiene altri contenitori anziché colonne. Puoi anche trascina e rilascia un singolo contenitore dal menu a sinistra. 

Puoi personalizzare molte opzioni per il contenitore come

• Larghezza contenitore: Puoi scegliere la larghezza del contenitore come In scatola o a larghezza intera.
• Larghezza: Se scegli Boxed come larghezza del contenitore, la larghezza sarà 928Px. D'altra parte, se scegli Larghezza intera, la larghezza del contenitore sarà 100% della larghezza del viewport. Tuttavia, puoi modificare entrambi i valori di larghezza.
• Traboccamento: Puoi scegliere il valore di overflow come predefinito, nascosto o automatico.
• Etichetta HTML: Puoi anche modificare il tag HTML del contenitore. Ottieni opzioni come div, intestazione, piè di pagina, principale, articolo, sezione, ecc. C'è una nuova aggiunta di un tag. In questo modo puoi trasformare una el'intero contenitore in un collegamento con un tag.

Nota:  Hai anche molte opzioni in "Articoli" (più avanti che dopo). Inoltre, puoi personalizzare tutte le impostazioni sopra per ciascun contenitore interno anche.

Passaggio 4: aggiungi widget

Il processo di aggiunta dei widget è lo stesso della struttura della sezione della colonna. Devi cerca il widget quindi trascina e rilascia sull'icona + di ciascun contenitore. Ad esempio, aggiungerò un'intestazione, un video e un'icona di condivisione social.

Passaggio 5: personalizzare il contenuto del contenitore 

Ora è il momento di personalizzare i widget del contenitore. Per questo, modifica il contenitore. Quindi, vai su Layout nel pannello di sinistra ed espandi l'opzione Articoli. Ecco le opzioni con cui puoi giocare:

• Indicazioni: La direzione predefinita è la riga. Tuttavia, ottieni quattro opzioni come Riga, Colonna, Riga invertita e Colonna invertita. Se scegli la colonna o la colonna invertita, tutti i contenitori all'interno del contenitore principale verranno visualizzati come colonne flexbox Elementor diverse.

Nota: se scegli una colonna, devi regolare la larghezza dei contenitori interni.

• Allinea i contenitori: È possibile impostare l'allineamento come Flex Start, center, flex-end e Scratch. Flex inizia a posizionare l'elemento contenitore dal punto inizialet, e con un valore Flex center puoi posizionare gli elementi al centro. D'altra parte, con Flex end puoi esporre tutti i contenitori interni sul fondo. E con l'opzione allungabile, i contenitori interni occuperanno spazio extra se assegnati. Tutti questi saranno applicabili se scegli la direzione come riga.

D'altra parte, se scegli il direzione come una colonna, i valori flex-start e center funzioneranno allo stesso modo della riga. Ma con il flex-end, i contenitori verranno spostati a destra e con scratch, occuperà qualsiasi spazio a sinistra.

• Giustificare il contenuto:  Hai sei opzioni per giustificare il contenuto: inizio flessibile, centro, fine flessibile, spazio tra, spazio intorno e spazio uniforme. Spazio tra aggiungerà lo stesso spazio tra ciascuno degli elementi. Tuttavia, non verrà aggiunto spazio nella parte superiore o inferiore degli elementi.

L'opzione Spazio intorno aggiungerà spazio sia sulla parte superiore che inferiore di ciascun contenitore. E l'opzione Spazio uniforme aggiungerà lo stesso spazio attorno a tutti i widget e i contenitori interni.

• Divario tra gli elementi:  Puoi utilizzare questa opzione per aggiungere spazio tra gli elementi (widget e sezioni interne).

• Avvolgere: Scegliere Nessun avvolgimento mettere tutti gli elementi in un'unica riga E Avvolgi per far scorrere il contenuto su più righe.

Passaggio 6: pubblicazione e anteprima

Puoi ripetere il passaggio 4 per personalizzare tutte le impostazioni del contenitore. Una volta terminata la personalizzazione, fare clic sul pulsante Pubblica per pubblicare la pagina. Quindi, puoi fare clic sul pulsante di anteprima per vedere la tua pagina con la nuova struttura del contenitore flessibile.

Come convertire la pagina Elementor basata su sezioni in Flexbox Container

Convertire la struttura basata su sezioni/colonne nel nuovo contenitore Elementor Flex è semplicissimo. Puoi farlo seguendo i 4 semplici passaggi mostrati di seguito:

Passaggio 1: seleziona la sezione che desideri convertire

È necessario convertire ciascuna sezione separatamente. Quindi, per prima cosa, seleziona la sezione che desideri convertire. Puoi fare clic sui sei punti per selezionare una sezione o seleziona una sezione dal navigatore (puoi trovare l'opzione nell'angolo in basso a sinistra).

Passaggio 2: fare clic su Converti per effettuare la conversione

Ora per convertire, nel pannello di sinistra, troverai un file Opzione Converti in contenitore sotto il layout. Clic sul CONVERTIRE pulsante.

Passaggio 3: elimina la sezione precedente

Una volta completato il processo di conversione, troverai due versioni della stessa sezione. Uno è basato su sezioni e un altro è basato su contenitori. La versione in alto è basata su sezioni. Elimina la versione precedente/originale.

Passaggio 4: aggiornamento e anteprima

Puoi ripetere i passaggi da 1 a 3 per tutte le sezioni della tua pagina. Una volta terminata la conversione di tutte le sezioni nel layout del contenitore Flexbox, fare clic su pulsante aggiorna per salvare. Ora puoi fare clic sul pulsante di anteprima per vedere la stessa pagina ma con un layout contenitore.

Puoi creare contenitori Flexbox orizzontali e verticali in Elementor?

Sì, Elementor supporta la creazione di contenitori flexbox orizzontali e verticali in meno di pochi secondi. Devi solo selezionare i sei punti del contenitore Elementor e selezionare la direzione orizzontale o verticale dalla scheda layout. In questo modo potrete realizzare il vostro contenitore flexbox senza intoppi.

Posso utilizzare le funzionalità aggiuntive di Elementor con il nuovo Flexbox Container?

SÌ. Puoi assolutamente. 

Puoi usare ElementsKit: il componente aggiuntivo definitivo per Elementor per aggiungere widget aggiuntivi e altre funzionalità al generatore di pagine Elementor. Questo Elementor Aggiungi su È 100% compatibile con il nuovo contenitore Flexbox di Elementor.

Puoi utilizzare lo stesso processo di conversione di qualsiasi sezione Elementor nel layout Contenitore (mostrato nella sezione precedente) per convertire sezioni/pagine ElementsKit. 

ElementsKit viene fornito con Oltre 500 sezioni pronte, oltre 35 pagine pronte e oltre 85 componenti aggiuntivi personalizzati funzionalità per semplificarti la vita. Puoi facilmente creare un sito web completo utilizzando il modello ElementsKit Premade in pochi minuti.

Ecco un esempio in cui puoi vedere con quale facilità le pagine predefinite di ElementsKit vengono convertite in Elementor Flexbox Container.

Incartare

Sono sicuro che ora capisci perché c'è così tanto intorno a questa nuova aggiunta di Elementor. Il contenitore Elementor Flex è davvero una benedizione per tutti i costruttori di siti Web WordPress che erano alla ricerca di modi per creare siti Web più ottimizzato, Più veloce e reattivo indipendentemente dalle dimensioni del dispositivo.

E la ciliegina sulla torta è che puoi trasformare il tuo sito web creato in precedenza in un sito web ottimizzato basato su container in pochissimo tempo. Tuttavia, il contenitore flessibile è ancora in modalità sperimentale. Pertanto, non è consigliabile utilizzarlo su un sito Web attivo finché non viene pubblicato come funzionalità attiva

Fino ad allora, sentiti libero di giocare con il contenitore flessibile Elementor sul tuo sito di staging. E provalo ElementsKit per ottenere maggiore flessibilità per progettare un sito Web dall'aspetto sorprendente che attiri l'attenzione dei tuoi clienti e aumenti il successo del tuo sito Web.