Il pannello di progettazione viene visualizzato sul lato destro della modalità flex 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 regolate nel pannello di progettazione, il che significa che le proprietà del progetto sono diverse a seconda dell'elemento selezionato. Le proprietà del progetto includono allineamento, layout, spaziatura, ridimensionamento e altro, a seconda dell'elemento selezionato.

Per aprire il pannello di progettazione, fai clic su un elemento in modalità flex, quindi su Progettazione. Il pannello di progettazione si apre sul lato destro della modalità flex, perché non interferisca con la possibilità di visualizzare e modificare il progetto. In alternativa, puoi fare clic sull'icona Modifica design nel menu mobile. Dopo aver chiuso il pannello di progettazione, puoi riaprirlo facendo clic sull'icona Modifica design in alto a destra.

Termini di progettazione

Di seguito sono riportati i termini e le abbreviazioni utilizzati nel pannello di progettazione:

• Px. I pixel sono un'unità di misura che rimane la stessa indipendentemente dalla dimensione del dispositivo. Ad esempio, se un pulsante ha una dimensione di 280 pixel, avrà le stesse dimensioni su dispositivo mobile e su tablet o desktop.

• Vw. La larghezza del riquadro di visualizzazione è un'unità basata sulla larghezza dello schermo (viewport) 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 del riquadro di visualizzazione è un'unità basata sull'altezza dello schermo (viewport) 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) che l'elemento occupa. Ad esempio, se la dimensione di un elemento è pari al 10%, significa che l'elemento verrà ridimensionato per occupare il 10% del contenitore in cui si trova.
• R. Unità automatica di misura determinata dall'altezza del contenuto.

Allinea

Disponibile per singoli elementi all'interno di una colonna o di una flexbox. I singoli elementi all'interno di una colonna o di una flexbox verticale con layout automatico verticale possono essere allineati a sinistra, al centro, a destra oppure allargati orizzontalmente per adattarsi al 100% della larghezza del contenitore.

Layout

Pagina intera

Disponibile solo per le sezioni e modificabile solo dal breakpoint principale desktop . Quando è impostato su On, consente al contenuto di espandersi per l'intera larghezza dello schermo. Quando è impostato su Off, la larghezza del contenuto può estendersi fino a un massimo di 1.200 pixel. Per impostazione predefinita, l'impostazione di pagina intera è impostata su Off .

Per saperne di più sui punti di interruzione, vedere Breakpoint di Flex.

Allinea elementi

Consente di allineare verticalmente più elementi in una colonna o una flexbox contemporaneamente. 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 bisogno di ulteriori regolazioni. Per ulteriori informazioni, vedere Allineamento e spaziatura su Flex.

Layout automatico

Consente di selezionare se gli elementi all'interno di colonne e flexbox vengono allineati automaticamente orizzontalmente o verticalmente. 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 progetto sia ottimizzato per adattarsi a qualsiasi breakpoint.

Disponi

Disponibile per colonne e flexbox solo quando è selezionato Orizzontale per il layout automatico. Se impostato su Disponi, consente agli elementi all'interno della colonna o della flexbox di mantenere le loro dimensioni e di disporsi quando la larghezza dello schermo cambia.

Allinea le righe

Disponibile per colonne e flexbox solo quando Disponi è selezionato per il layout automatico. Consente di impostare l'allineamento delle righe all'interno di una colonna o di una 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 volta, e si applica a tutte le colonne in una sezione o a tutti i widget in una colonna. Per le colonne, se la proprietà di layout automatico è impostata su verticale, lo spazio tra widget viene misurato in pixel. Se il layout automatico è orizzontale, lo spazio tra widget viene misurato in percentuali. Questa proprietà non è applicabile agli elementi all'interno di flexbox o griglie avanzate.

Imposta i margini e la spaziatura interna

I margini sono lo spazio tra il bordo dell'elemento e il bordo della sezione, colonna, flexbox o griglia avanzata in cui è contenuto.

La spaziatura è lo spazio interno dell'elemento. Fai clic sul margine o sul numero di spaziatura per digitare un nuovo valore, quindi utilizza il menu a discesa per selezionare l'unità in cui viene misurato lo spazio (px, %, vh o vw). Per impostazione predefinita, la spaziatura orizzontale viene misurata in percentuali e la spaziatura verticale in pixel.

Ad esempio, se selezioni una colonna e imposti la spaziatura sinistra su 5 px, aggiungerai 5 px di spazio tra il bordo sinistro della colonna e il bordo esterno degli elementi al suo interno. Se per la stessa colonna si imposta il margine sinistro su 5 px, verranno aggiunti 5 px di spazio tra il bordo della colonna e il bordo della sezione che la contiene.

Reimpostare la spaziatura interna o il margine

Quando viene cliccato nel pannello di progettazione o nel menu mobile, azzera la spaziatura interna o i margini dell'elemento selezionato.

Dimensione

A seconda dell'elemento selezionato, è possibile regolare l'altezza e la larghezza e i valori massimi e minimi. In modalità flex, l'altezza può essere misurata in px, vh, percentuale e A. Tuttavia, l'altezza delle colonne flex e lo spazio tra le colonne possono essere misurati solo in percentuale.

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 Tema del sito. Per le colonne è possibile modificare solo la larghezza, mentre l'altezza è definita dall'altezza della sezione o dai suoi elementi interni. Per le flexbox e i widget, è possibile impostare l'altezza e la larghezza, nonché i valori minimi e massimi per ciascuno. È possibile utilizzare unità di qualsiasi dimensione.

Animazione e sfondo

Le proprietà di animazione e sfondo in modalità flex sono le stesse di quelle dell'editor classico. Per ulteriori informazioni sulle proprietà di animazione e sfondo, vedo Aggiungere animazioni e Personalizzare lo sfondo.

Pannello di progettazione per griglie avanzate

All'interno del pannello di progettazione, le griglie avanzate dispongono di proprietà non disponibili per altri tipi di elemento a causa della possibilità di creare composizioni freestyle ed elementi sovrapposti. Ti consigliamo di controllare il tuo progetto su diversi breakpoint.

Allinea

I singoli elementi in una griglia avanzata possono essere allineati e allungati in qualsiasi direzione perché 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 davanti, sopra, dietro o sotto. Per ulteriori informazioni, vedere Creare elementi sovrapposti in Flex

Riorganizza il layout

Consente di selezionare la modalità di disposizione delle colonne e delle righe all'interno della griglia avanzata per creare un layout.

Personalizza il layout

Utilizza i menu a discesa per selezionare il numero di colonne e righe che desideri includere nella griglia avanzata. È anche possibile utilizzare il campo Distanza per specificare lo spazio tra le colonne. La distanza per le colonne può essere definita in pixel o vw, mentre quella per le righe può essere definita in pixel o vh.

PIN

Consente di definire la posizione dell'elemento all'interno della griglia. Una volta impostato, 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 divise in colonne e/o righe per creare un layout. Mostra la posizione dell'elemento sulla griglia.

Mantieni le proporzioni

Se attivato, assicura che gli elementi all'interno di una griglia avanzata mantengano le loro proporzioni anche quando le dimensioni della griglia cambiano.