Flex è una modalità per la progettazione di sezioni responsive e pixel-perfect con funzionalità di design aggiuntive. Flex ti consente di creare e modificare rapidamente i Siti web Guesty, continuando a utilizzare le funzionalità di creazione dell'editor classico che già conosci. Rispetto all'editor classico, Flex offre layout automatico, allineamento e distribuzione di più elementi, unità di misura responsive e maggiore controllo sulle colonne. Questo ti consente di creare e modificare design responsive più rapidamente rispetto all'editor classico.
Puoi aggiungere una sezione Flex a un sito esistente o crearne uno nuovo utilizzando un modello Flex. 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, un negozio, un blog o una pagina di iscrizione, questi non verranno creati con Flex per impostazione predefinita, ma puoi aggiungere sezioni Flex a queste pagine.
Nota:
Questo articolo è rilevante solo per gli utenti che hanno iniziato a utilizzare Flex dopo il 18 luglio 2022. Se utilizzi la versione 1.0 di Flex, consulta la panoramica di Flex (1.0).
Terminologia flessibile
Di seguito vengono fornite definizioni per la terminologia specificamente correlata a Flettere .
Modalità Flex. Qui puoi creare e modificare sezioni flessibili. In Modalità Flex, hai accesso a funzionalità di progettazione non presenti nell'editor classico, ma hai comunque accesso alle funzionalità di creazione dell'editor classico.
Sezione flessibile. Una riga con colonne flessibili predefinite che creano un layout. È possibile aggiungere, rimuovere o modificare l'ordine delle colonne flessibili all'interno di una sezione flessibile. Le sezioni flessibili possono essere salvate come modelli per un utilizzo futuro.
Colonna flessibile. Dove aggiungere i widget. Le colonne flessibili hanno un layout automatico, il che significa che i widget al loro interno vengono allineati automaticamente verticalmente o orizzontalmente. A causa del layout automatico, non è possibile spostare liberamente gli elementi all'interno di una colonna flessibile, ma è necessario utilizzare le impostazioni di allineamento, spaziatura e margini per spostare gli elementi.
Flexbox verticali e orizzontali. Un contenitore che allinea automaticamente i widget al suo interno, verticalmente o orizzontalmente. A causa del layout automatico, non è possibile spostare liberamente gli elementi all'interno di un flexbox verticale o orizzontale; è invece necessario utilizzare le impostazioni di allineamento, spaziatura e margini per spostare gli elementi.
Griglia avanzata. Utilizzata per creare composizioni libere o elementi sovrapposti. La griglia avanzata non fornisce il layout automatico o l'allineamento verticale come le colonne flessibili. Per questo motivo, ti consigliamo di controllare il tuo progetto su tutti i punti di interruzione.
Breakpoint. Intervalli di pixel che corrispondono alla larghezza di diversi dispositivi, come desktop, tablet e dispositivi mobili. Quando la larghezza di un dispositivo rientra nell'intervallo di pixel predefinito di un breakpoint, il layout del sito viene adattato in modo che il contenuto e il design siano ottimizzati per le dimensioni e l'orientamento del dispositivo.
Elementi flessibili. Una griglia avanzata o un flexbox orizzontale o verticale che viene posizionato all'interno di una colonna flessibile.
Gerarchia degli elementi
In modalità flessibile, le sezioni flessibili contengono colonne flessibili e le colonne flessibili contengono widget. Questa è una gerarchia predefinita, il che significa che non è possibile aggiungere un widget a una sezione flessibile senza avere una colonna flessibile.
Seleziona elementi
Esistono diversi metodi per selezionare un elemento (sezione flessibile, colonna flessibile o widget):
Passa il mouse sopra l'elemento e clicca . Quando passi il mouse sopra un elemento, cerca il contorno blu che indica quale elemento verrà selezionato con un clic.
Seleziona gli elementi dal pannello Livelli . Nel pannello laterale, fai clic su Livelli . Da qui puoi selezionare qualsiasi elemento dalla sezione selezionata.
Seleziona gli elementi dal pannello di progettazione . Fai clic sul percorso di navigazione nel pannello di progettazione per selezionare un elemento.
Seleziona gli elementi dal menu mobile . Se hai già selezionato un elemento, passa il mouse sul nome dell'elemento sopra il menu mobile e apparirà un breadcrumb di elementi flessibili.
modalità flessibile
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 al livello superiore. Dal pannello dei livelli è possibile aggiungere nuovi elementi, selezionarli, riorganizzarli, rinominarli e nasconderli o mostrarli in corrispondenza di determinati punti di interruzione.
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, dimensioni, allineamento e altro, a seconda dell'elemento selezionato.
Menu mobile
Il menu mobile appare quando selezioni un elemento. Dal menu mobile puoi passare da un elemento all'altro, aggiungerne altri, aprire i pannelli dei contenuti o di progettazione, duplicare l'elemento, regolare l'allineamento, eliminare l'elemento e altro ancora.
Domande frequenti
Qual è la differenza tra Flettere e l'editor classico?
Rispetto all'editor classico, Flettere offre funzionalità di progettazione aggiuntive che consentono di creare siti responsive in modo più rapido e semplice. Di seguito sono elencate le funzionalità di progettazione che Flettere offre ma l'editor classico no:
Risparmia tempo . Flex si basa sul layout automatico, il che significa che il design è ottimizzato per adattarsi a qualsiasi punto di interruzione.
Allineamento del contenuto . Consente di allineare tutti gli elementi di una colonna flessibile contemporaneamente. Nell'editor classico, è necessario allineare ogni elemento singolarmente.
Allineamento automatico . Le colonne flessibili e le flexbox allineano automaticamente gli elementi verticalmente o orizzontalmente.
Numero di colonne . In modalità flessibile è possibile aggiungere più di 4 colonne a una sezione con una larghezza dello schermo fino al 100%.
Spazio tra gli elementi . Consente di impostare lo spazio tra gli elementi una sola volta e si applica a tutti gli elementi in una colonna flessibile.
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 . Grazie alle funzionalità di progettazione avanzate di Flettere, è possibile modificare un progetto esistente molto più rapidamente rispetto all'editor classico.
Qual è la differenza tra la versione 1.0 e la versione 2.0 di Flex?
Tutto ciò che è stato creato con Flettere prima del 18 luglio 2022, è stato creato utilizzando Flettere versione 1.0. I modelli o le sezioni del team creati in precedenza continuano a essere modificati utilizzando Flettere versione 1.0, ma in futuro i nuovi progetti creati utilizzeranno Flettere versione 2.0. Se stai modificando un modello o una sezione del team creata in Flettere 1.0, ci sarà un indicatore con la dicitura Flettere versione 1.0 sulla barra superiore, sul nome della sezione e nel pannello dei livelli. Dopo il 18 luglio 2022, tutti i nuovi siti o siti che in precedenza non utilizzavano Flex saranno basati su Flettere versione 2.0 e non sarà possibile accedere a Flettere versione 1.0.
Flettere versione 2.0 è più semplificata e simile all'editor classico rispetto alla versione 1.0. La versione 2.0 offre più componenti predefiniti, consentendo agli utenti di creare e modificare i progetti più rapidamente. Invece di utilizzare una griglia per posizionare gli oggetti, ora gli utenti possono aggiungere colonne che fungono da layout in cui inserire i widget. Le colonne forniscono all'utente un layout automatico, il che significa che gli oggetti appariranno al meglio in corrispondenza di ogni punto di interruzione senza ulteriori modifiche.
Limitazioni
Al momento, non è possibile aggiungere una o più lingue aggiuntive al sito in modalità flessibile. È necessario prima uscire dalla modalità flessibile. Per ulteriori informazioni sui siti multilingue, consultare Configura un sito multilingua .
