Flex è una modalità per progettare sezioni reattive e perfette dal punto di vista dei pixel, con ulteriori funzionalità di progettazione. Flex ti consente di creare e modificare siti rapidamente, continuando a utilizzare le funzioni dell'editor classico che già conosci bene. Rispetto all'editor classico, Flex offre layout automatico, allineamento e distribuzione di più elementi, unità di misura reattive e maggiore controllo sulle colonne. Queste funzionalità di progettazione consentono di creare e modificare progetti reattivi più rapidamente rispetto all'editor classico.

Puoi aggiungere una sezione flessibile a un sito esistente o creare un nuovo sito utilizzando un modello flessibile. Se utilizzi un modello flex, tutte le sezioni vengono create con flex. L'intestazione non viene creata con flex e, se aggiungi una nuova pagina, store, blog o pagina di registrazione, questi non verranno creati con flex per impostazione predefinita, ma potrai aggiungere sezioni flex a queste pagine.

Terminologia di Flex

Di seguito riportiamo le definizioni della terminologia specificamente correlata a Flex.

• Modalità Flex. Dove crei e modifichi le sezioni flex. In modalità flex, è possibile accedere a funzionalità di progettazione che non sono presenti nell'editor classico, mantenendo comunque la possibilità di accedere alle funzionalità di creazione dell'editor classico.

• Sezione flex. Una riga con colonne flex predefinite che creano un layout. Puoi aggiungere, rimuovere o modificare l'ordine delle colonne flex all'interno di una sezione flex. Le sezioni flex possono essere salvate come modelli da riutilizzare in futuro.

• Colonna flex. Dove aggiungere i widget. Le colonne flex hanno un layout automatico, il che significa che i widget all'interno sono allineati automaticamente verticalmente o orizzontalmente. A causa del layout automatico, non è possibile spostare liberamente gli elementi all'interno di una colonna flex, ma è necessario utilizzare le impostazioni di allineamento, spaziatura e margine per spostare gli elementi.

• Flexbox verticali e orizzontali. Un contenitore che allinea automaticamente i widget al suo interno in senso verticale o orizzontale. A causa del layout automatico, non è possibile spostare liberamente gli elementi all'interno di un flexbox verticale od orizzontale, ma è necessario utilizzare le impostazioni di allineamento, spaziatura e margine per spostare gli elementi.

• Griglia avanzata. Utilizzata per creare composizioni a forma libera o elementi sovrapposti. La griglia avanzata non offre il layout automatico o l'allineamento verticale come le colonne flex. Per questo motivo ti consigliamo di controllare il tuo design in tutti i breakpoint.

• Breakpoint. Intervalli di pixel che corrispondono alla larghezza di diversi dispositivi, come desktop, tablet e dispositivi mobili. Quando la larghezza di un dispositivo si trova all'interno dell'intervallo di pixel predefinito di un breakpoint, il layout del sito viene regolato in modo che il contenuto e il design siano ottimizzati per le dimensioni e l'orientamento di tale dispositivo.

• Elementi flex. Una griglia avanzata o una flexbox orizzontale o verticale posizionata all'interno di una colonna flex.

Gerarchia degli elementi

Nella modalità flex, le sezioni flex contengono colonne flex e le colonne flex contengono widget. Questa è una gerarchia predefinita, pertanto non è possibile aggiungere un widget a una sezione flex senza avere una colonna flex.

Selezionare gli elementi

Esistono diversi metodi per selezionare un elemento (sezione flex, colonna flex o widget):

• Passa il puntatore del mouse sull'elemento e fai clic. Quando passi il mouse su un elemento, cerca il contorno blu che indica l'elemento selezionato dal tuo clic.

• Seleziona gli elementi dal pannello dei livelli. Nel pannello laterale, fai clic su Layer. Da qui puoi selezionare qualsiasi elemento dalla sezione scelta.

• Seleziona elementi dal pannello di progettazione. Fai clic sui breadcrumb nel pannello di progettazione per selezionare un elemento.

• Seleziona elementi dal menu mobile. Se hai già selezionato un elemento, passa il mouse sul nome dell'elemento sopra il menu mobile e si visualizzerà una panoramica degli elementi flessibili.

MODALITÀ FLEX

Pannello Livelli

Il pannello dei livelli viene visualizzato sul lato sinistro della modalità flex e mostra gli elementi flex nella sezione selezionata. Gli elementi vengono visualizzati in base alla loro gerarchia, con le sezioni come livello superiore. Dal pannello dei livelli puoi aggiungere nuovi elementi, selezionare elementi, riordinare elementi, rinominare elementi e nascondere o mostrare elementi su determinati breakpoint.

Pannello di progettazione

Il pannello di progettazione viene visualizzato sul lato destro della modalità flex e contiene i controlli di progettazione per l'elemento selezionato (sezione flex, colonna flex o widget). Le opzioni di progettazione includono layout, ridimensionamento, allineamento e altro a seconda dell'elemento selezionato.

Menu mobile

Il menu mobile viene visualizzato quando si seleziona un elemento. Dal menu mobile puoi passare da un elemento all'altro, aggiungere elementi, aprire il contenuto o i pannelli di progettazione, duplicare l'elemento, regolare l'allineamento, eliminare l'elemento e altro ancora.

Domande frequenti

Qual è la differenza tra Flex e l'editor classico?

Rispetto all'editor classico, Flex offre ulteriori funzionalità di progettazione che consentono di creare siti reattivi più velocemente e facilmente. Le seguenti sono funzionalità di progettazione che Flex offre, non disponibili nell'editor classico:

• Risparmia tempo. Flex si basa sul layout automatico, il che significa che il design è ottimizzato per adattarsi a qualsiasi breakpoint.

• Allineamento dei contenuti. Permette di allineare contemporaneamente tutti gli elementi in una colonna flex. Nell'editor classico, devi allineare ogni elemento singolarmente.

• Allineamento automatico. Colonne flex e flexbox allineano automaticamente gli elementi verticalmente o orizzontalmente.

• Numero di colonne. Nella modalità flex è possibile aggiungere più di 4 colonne a una sezione con una larghezza dello schermo fino al 100%.

• Spazio tra gli elementi. Consente di impostare una sola volta lo spazio tra gli elementi, che viene poi applicato a tutti gli elementi in una colonna flex.

• Dimensionamento degli elementi. Regola le dimensioni degli elementi per ottimizzare l'altezza dello schermo in pixel e la larghezza dello schermo in percentuale.

• Modifica più veloce. Con le funzionalità avanzate di progettazione di Flex è possibile modificare un progetto esistente in modo molto più rapido rispetto all'editor classico.

Qual è la differenza tra Flex versione 1.0 e versione 2.0?

Tutto ciò che è stato creato con Flex prima del 18 luglio 2022 è stato creato utilizzando Flex versione 1.0. I modelli o le sezioni di team creati in precedenza continueranno a essere modificati con Flex versione 1.0, ma in futuro i progetti di nuova creazione utilizzeranno Flex versione 2.0. Se stai modificando un modello o una sezione del team creata in Flex 1.0, si visualizzerà l'indicatore Flex versione 1.0 sulla barra superiore, sul nome della sezione e nel riquadro dei livelli. Dopo il 18 luglio 2022, tutti i nuovi siti o i siti che non utilizzavano Flex in precedenza sono su Flex versione 2.0 e non possono accedere a Flex versione 1.0.

Flex versione 2.0 è più semplificato e simile all'editor classico rispetto alla versione 1.0. La versione 2.0 fornisce componenti più predefiniti, per consentire agli utenti di creare e modificare i progetti più rapidamente. Invece di utilizzare una tabella su cui posizionare gli oggetti, gli utenti possono ora aggiungere colonne che fungono da layout in cui inserire i widget. Le colonne forniscono all'utente un layout automatico, quindi gli oggetti avranno un aspetto perfetto su ogni breakpoint senza ulteriori modifiche.