Il pannello di progettazione viene visualizzato sul lato destro della modalità flessibile e contiene le proprietà di progettazione per l'elemento selezionato (sezione, colonna, widget, flexbox o griglia avanzata). Ogni elemento ha proprietà diverse che possono essere modificate nel pannello di progettazione, il che significa che le proprietà di progettazione variano a seconda dell'elemento selezionato. Le proprietà di progettazione includono allineamento, layout, spaziatura, dimensioni e altro, a seconda dell'elemento selezionato.
Per aprire il pannello di progettazione, fai clic su un elemento in modalità flessibile, quindi fai clic su Progettazione . Il pannello di progettazione si apre sul lato destro della modalità flessibile, in modo da non interferire con la visualizzazione e la modifica del progetto. In alternativa, puoi fare clic sull'icona Modifica progettazione nel menu mobile. Dopo aver chiuso il pannello di progettazione, puoi riaprirlo facendo clic sull'icona Modifica progettazione nell'angolo in alto a destra.
Termini di progettazione
Di seguito sono riportati i termini di progettazione e le abbreviazioni utilizzati nel pannello di progettazione:
- Px. I pixel sono un'unità di misura che rimane invariata indipendentemente dalle dimensioni del dispositivo. Ad esempio, se un pulsante è di 280 px, avrà le stesse dimensioni su dispositivi mobili, tablet o desktop.
- Vw. La larghezza della finestra è un'unità di misura basata sulla larghezza dello schermo (finestra) su cui viene visualizzato il sito. Ad esempio, 10 Vw significa che l'elemento verrà ridimensionato per occupare il 10% della larghezza dello schermo su cui viene visualizzato.
- Vh. L'altezza della finestra è un'unità di misura basata sull'altezza dello schermo (finestra) su cui viene visualizzato il sito. Ad esempio, 25 Vh significa che l'elemento verrà ridimensionato per occupare il 25% dell'altezza dello schermo su cui viene visualizzato.
- %. Percentuale del contenitore (sezione, colonna, flexbox o griglia avanzata) occupata dall'elemento. Ad esempio, se la dimensione di un elemento è del 10%, significa che l'elemento verrà ridimensionato per occupare il 10% del contenitore in cui si trova.
- A. Unità di misura automatica determinata dall'altezza del contenuto.
Allineare
Disponibile per singoli elementi all'interno di una colonna o di un flexbox. I singoli elementi all'interno di una colonna o di un flexbox verticale con layout automatico verticale possono essere allineati a sinistra, al centro, a destra o allungati orizzontalmente per adattarsi al 100% della larghezza del contenitore.
Nota:
Gli elementi possono anche essere allineati dal menu mobile cliccando sull'icona Allinea ( 
).
Disposizione
Sanguinamento completo
Disponibile solo per le sezioni e può essere modificato solo dal punto di interruzione principale del desktop. Se impostato su On , consente al contenuto di estendersi sull'intera larghezza dello schermo. Se impostato su Off , la larghezza del contenuto può estendersi fino a un massimo di 1.200 pixel. Per impostazione predefinita, l'impostazione di visualizzazione a tutto schermo è disattivata .
Per ulteriori informazioni sui punti di interruzione, vedere Punti di interruzione flessibili .
Allinea gli elementi
Consente di allineare verticalmente più elementi contemporaneamente in una colonna o in un flexbox. Nell'editor classico, gli elementi possono essere allineati solo individualmente e orizzontalmente. L'allineamento verticale è utile perché mantiene la posizione degli elementi coerente tra tutti i breakpoint senza dover apportare ulteriori modifiche. Per ulteriori informazioni, consultare Allineamento e spaziatura flex .
Disposizione automatica
Consente di selezionare se gli elementi all'interno di colonne e flexbox debbano essere allineati automaticamente in orizzontale o in verticale. Per impostazione predefinita, gli elementi sono allineati verticalmente. Gli elementi possono essere spostati solo nella stessa direzione dell'allineamento automatico del layout. Ad esempio, se gli elementi sono allineati verticalmente, è possibile spostarli solo verticalmente e non orizzontalmente. Il layout automatico aiuta a garantire che il design sia ottimizzato per adattarsi a qualsiasi punto di interruzione.
Avvolgere
Disponibile per colonne e flexbox solo quando è selezionato Orizzontale per il layout automatico. Se impostato su A capo, consente agli elementi all'interno della colonna o del flexbox di mantenere le proprie dimensioni e di andare a capo quando cambia la larghezza dello schermo.
Allinea le righe
Disponibile per colonne e flexbox solo quando è selezionato "Avvolgi" per il layout automatico. Consente di impostare l'allineamento delle righe all'interno di una colonna o di un flexbox. Questa impostazione non influisce sull'allineamento degli elementi all'interno delle righe, ma solo sulle righe stesse.
Spaziatura
Spazio tra gli elementi
Consente di impostare lo spazio tra colonne o widget una sola volta e si applica a tutte le colonne di una sezione o a tutti i widget di una colonna. Per le colonne, se la proprietà di layout automatico è impostata su verticale, lo spazio tra i widget viene misurato in pixel. Se il layout automatico è orizzontale, lo spazio tra i widget viene misurato in percentuale. Questa proprietà non è applicabile agli elementi all'interno di flexbox o griglie avanzate.
Imposta margini e spaziatura
I margini sono lo spazio tra il bordo dell'elemento e il bordo della sezione, colonna, flexbox o griglia avanzata in cui è contenuto.
Il padding è lo spazio interno dell'elemento. Fai clic sul margine o sul numero di padding per digitare un nuovo valore, quindi utilizza il menu a discesa per selezionare l'unità di misura dello spazio (px, %, vh o vw). Per impostazione predefinita, la spaziatura orizzontale è misurata in percentuale e quella verticale in pixel.
Ad esempio, se selezioni una colonna e imposti il padding sinistro a 5 px, verranno aggiunti 5 px di spazio tra il bordo sinistro della colonna e il bordo esterno degli elementi al suo interno. Se per la stessa colonna imposti il margine sinistro a 5 px, verranno aggiunti 5 px di spazio tra il bordo della colonna e il bordo della sezione che la contiene.
Reimposta il padding o il margine
Facendo clic nel pannello di progettazione o nel menu mobile, si reimposta a zero la spaziatura o i margini dell'elemento selezionato.
Misurare
A seconda dell'elemento selezionato, è possibile regolare l'altezza e la larghezza, nonché i valori massimo e minimo. In modalità flessibile, l'altezza può essere misurata in px, vh, percentuale e A. Tuttavia, l'altezza delle colonne flessibili e lo spazio tra le colonne possono essere misurati solo in percentuale.
Nota:
Le unità di misura predefinite sono diverse per ogni elemento. Ad esempio, per impostazione predefinita le caselle di testo hanno una larghezza del 100% e i pulsanti una larghezza di 280 px.
Per le sezioni, è possibile modificare solo l'altezza. La larghezza della sezione è impostata dal dispositivo, mentre la larghezza del contenuto nella sezione è impostata dall'impostazione Larghezza contenuto in Design globale. Per le colonne, è possibile modificare solo la larghezza, mentre l'altezza è definita dall'altezza della sezione o dai suoi elementi interni. Per i flexbox e i widget è possibile impostare l'altezza e la larghezza, insieme ai valori minimo e massimo per ciascuna. È possibile utilizzare qualsiasi unità di misura.
Animazione e sfondo
Le proprietà di animazione e sfondo in modalità Flex sono le stesse dell'editor classico. Per ulteriori informazioni sulle proprietà di animazione e sfondo, consulta "Aggiungi animazioni" e "Personalizza sfondo".
Pannello di progettazione per griglie avanzate
Le griglie avanzate dispongono di proprietà del pannello di progettazione non disponibili per altri tipi di elementi, grazie alla possibilità di creare composizioni libere ed elementi sovrapposti. Ti consigliamo di revisionare il tuo progetto in diversi punti di interruzione.
Allineamento
I singoli elementi di una griglia avanzata possono essere allineati e allungati in qualsiasi direzione, poiché non sono vincolati dal layout automatico.
Ordine
Nella sezione Disposizione del pannello di progettazione, questa proprietà può essere utilizzata solo quando sono presenti più elementi all'interno di una griglia avanzata. Consente di portare un elemento selezionato in primo piano, in avanti, sullo sfondo o all'indietro. Per ulteriori informazioni, consultare Creare elementi sovrapposti in Flex.
Riorganizzazione del layout
Consente di selezionare la disposizione delle colonne e delle righe all'interno della griglia avanzata per creare un layout.
Personalizzazione del layout
Utilizza i menu a discesa per selezionare il numero di colonne e righe che desideri per la tua griglia avanzata. Puoi anche utilizzare il campo Distanza per specificare lo spazio tra le colonne. La distanza per le colonne può essere definita in pixel o vw e la distanza per le righe può essere definita in pixel o vh.
Spillo
Permette di definire la posizione dell'elemento all'interno della griglia. Una volta impostata, l'elemento rimarrà nella stessa posizione anche quando la dimensione della griglia cambia.
Posizione della griglia
Disponibile per gli elementi all'interno di griglie avanzate che sono stati divisi in colonne e/o righe per creare un layout. Mostra dove si trova l'elemento sulla griglia.
Mantenere le proporzioni
Se attivata , questa opzione garantisce che gli elementi all'interno di una griglia avanzata mantengano le loro proporzioni anche quando cambiano le dimensioni della griglia.
Nota:
Il widget Immagine contiene anche un interruttore Mantieni proporzioni , che mantiene le proporzioni originali.
