Elementor: come utilizzare il Flexbox Container

  1. Home
  2. >
  3. Elementor
  4. >
  5. Elementor: come utilizzare il Flexbox Container

Sei pronto a cambiare il tuo modo di lavorare con Elementor? Conosci il widget Flexbox Container?

In questo articolo ti mostrerò una della novità introdotte da Elementor che miglioreranno e velocizzeranno il tuo lavoro.

Se stai cercando un modo per creare layout flessibili e reattivi per il tuo sito web, il widget di Elementor Flexbox Container potrebbe essere la soluzione che stavi cercando. In questo articolo, esploreremo come utilizzare questo widget per creare layout flessibili e reattivi in pochi semplici passaggi.

Partiamo!

Layout Flessibile

Innanzitutto, è importante capire cosa sia un layout flessibile. In sintesi, un layout flessibile è un layout che si adatta in modo fluido alle dimensioni del dispositivo su cui viene visualizzato. Ciò significa che il layout apparirà diverso su un dispositivo desktop rispetto a un dispositivo mobile, ma entrambi i layout si adatteranno perfettamente alle dimensioni del dispositivo su cui vengono visualizzati.

Prima di vedere come utilizzarlo devi sapere che al momento in cui scrivo questo articolo il widget flexbox container è attivo di default su tutte le nuove installazioni di Elementor, se, invece, hai già attivo Elementor sul tuo sito non devi fare altro che andare nel menu di elementor>impostazioni>features e attivare il Flexbox container.

Attiva flexbox in Elementor

Questo widget sostituisce la struttura come la conoscevamo di Elementor e il widget sezione interna.

Nei prossimi mesi dovremo aggiornare le pagine dei nostri siti con questo nuovo widget e ti mostrerò come farlo alla fine di quest’articolo.

Come utilizzarlo

Per creare un layout flessibile utilizzando il widget di Elementor Flexbox Container, segui questi semplici passaggi:

  1. Aggiungi un nuovo blocco Elementor alla pagina del tuo sito web.
  2. Cerca il widget Flexbox Container nella sezione dei widget di Elementor e aggiungilo al tuo blocco.
  3. Personalizza le impostazioni del widget Flexbox Container per adattarlo alle tue esigenze. Puoi scegliere tra diversi stili di allineamento, orientamento e spaziatura per il tuo layout.
  4. Aggiungi i widget di Elementor desiderati all’interno del widget Flexbox Container. Questi widget si adatteranno automaticamente alle dimensioni del container flessibile, creando un layout reattivo e flessibile per il tuo sito web.

Ecco alcuni suggerimenti per l’utilizzo del widget Flexbox Container:

  • Utilizza l’allineamento flessibile per posizionare i tuoi widget esattamente dove vuoi all’interno del tuo layout flessibile.
  • Utilizza l’orientamento flessibile per creare layout orizzontali o verticali, a seconda delle tue esigenze.
  • Utilizza la spaziatura flessibile per creare spazi tra i tuoi widget che si adattano in modo fluido alle dimensioni del dispositivo su cui vengono visualizzati.

Per trasformare le vecchie sezioni nel nuovo widget non devi fare altro che andare nella sezione e nel menu a sinistra ti troverai il tasto converti in contenitore.

Una volta cliccato Elementor copierà il contenuto in una nuova sezione con il flexbox, non dovrai fare altro che controllare che tutto sia corretto e al massimo allineare qualche widget e poi potrai cancellare la vecchia sezione.

Elementor Converti flexbox

Conclusioni

Concludendo, il widget di Elementor Flexbox Container è uno strumento estremamente utile per creare layout flessibili e reattivi per il tuo sito web. Non avrai più problemi di visualizzazione sui diversi dispositivi.

Inoltre il flexbox risolve alcuni problemi riscontrati con vecchia struttura di Elementor quando si andavano ad allineare i widget nella sezione.

Segui i passaggi sopra indicati per creare un layout flessibile personalizzato che si adatta perfettamente alle dimensioni del dispositivo su cui viene visualizzato.

Spero che questo articolo ti sia piaciuto, se hai domande puoi scriverle nei commenti.

A presto!

Vota questo articolo

Potrebbe anche piacerti

Elementor la guida completa

Ultimi articoli

Categorie
Passa a Elementor Pro
Per il tuo hosting
Per creare la tua Privacy Policy
Picture of Giovanni Chianese
Giovanni Chianese

Giovanni Chianese è uno sviluppatore di siti ed E-commerce & un esperto di Digital Marketing

Potrebbe anche piacerti

Copyright 2024 © Wp Semplice - Privacy Policy
error: Content is protected !!

Gli articoli ti sono stati utili?

Iscriviti alla newsletter per restare sempre aggiornato!