Nota
Questo contenuto è rilevante sia per la modalità Flex in Classic Editor che per Editor 2.0. Per identificare la versione attuale dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
La tecnologia Flexbox (chiamata «flex» in breve) è un modulo di layout CSS per disporre gli elementi in sezioni e colonne, consentendo loro di flettersi (aumentare o ridursi) e allinearsi perfettamente all'interno di un contenitore. Ciò consente di progettare sezioni reattive e perfette per i pixel che si adattano a qualsiasiSe utilizzi il Classic Editor, puoi accedere alla modalità flex per progettare con la tecnologia flexbox. Se utilizzi Editor 2.0, utilizzi la tecnologia flexbox
Suggerimento
Corsi consigliati della Duda Academy:
-
Principi di progettazione di base. Scopri i quattro pilastri del design (branding, tipografia, colore
-
Dimensioni e unità. Scopri le diverse unità di dimensioni nel pannello di progettazione e quando utilizzarle.
-
Elementi essenziali del layout. Scopri le colonne e le colonne interne e come allineare e dimensionare gli elementi al loro interno.
-
Layout con griglie avanzate. Scopri come creare layout complessi con griglie avanzate
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, colonna interna o griglia avanzata). Ogni elemento ha proprietà diverse che possono essere regolate nel pannello di progettazione, il che significa che le proprietà di progettazione sono diverse a seconda dell'elemento selezionato. Le proprietà di progettazione includono allineamento, layout, spaziatura, dimensionamento e altro, a seconda dell'
Per aprire il pannello di progettazione, fai clic su un elemento in modalità flessibile, quindi fai clic su Modifica design (è necessario essere in modalità flex solo se si utilizza l'editor classico). Il pannello di progettazione si apre sul lato destro della modalità flessibile in modo da non interferire con la possibilità di visualizzare e modificare il design. Dopo aver chiuso il pannello di progettazione, puoi riaprirlo facendo clic sull'icona del pannello di progettazione nell'angolo in alto a destra
Il pannello di progettazione è composto da 5 sezioni: Allinea, Layout, Spaziatura, Dimensioni e Animazione e sfondo. Di seguito è riportata una descrizione di ciascuna sezione e di cosa è possibile realizzare
Disponibile per singoli elementi all'interno di una colonna o di una colonna interna. I singoli elementi all'interno di una colonna o di una colonna interna 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
Gli elementi possono anche essere allineati dal menu mobile facendo clic su Allinea icona ().
Preimpostazioni
Seleziona da un layout predefinito per gli elementi all'interno di una sezione. Le opzioni includono l'allineamento verticale o orizzontale
Elementi per riga
Se i tuoi contenuti si estendono su più di una riga, puoi utilizzare il menu a discesa per selezionare il numero di elementi visualizzati per riga.
Gli articoli si adattano
Viene visualizzato quando sono presenti righe di contenuto e consente di definire il modo in cui gli elementi si adattano alle righe. Questo può essere utile se hai un numero dispari di elementi.
Larghezza completa
Precedentemente denominata «full bleed», la larghezza completa è disponibile solo per le sezioni e può essere modificata solo dal punto di interruzione principale del desktop. Quando è attivataAttivato, consente al contenuto di estendersi su tutta la larghezza dello schermo. Se è disattivata, la larghezza del contenuto può estendersi su un massimo di 1920 pixel. Per impostazione predefinita, l'impostazione della larghezza completa è disattivata. Per saperne di più sui punti di interruzione Dimensioni dello schermo e dispositivi.
Allineamento dei contenuti
Consente di allineare verticalmente o orizzontalmente più elementi contemporaneamente in una colonna o in una colonna interna. Nell'editor classico, gli elementi possono essere allineati solo singolarmente e orizzontalmente. Per ulteriori informazioni Allineamento e spaziatura.
Allinea righe
Consente di impostare l'allineamento delle righe all'interno di una colonna o di una colonna interna. Questa impostazione non influisce sull'allineamento degli elementi all'interno delle righe, ma solo sulle righe stesse
Per informazioni sulla spaziatura, guarda il seguente video:
Spazio tra gli oggetti
Consente di impostare lo spazio tra le colonne o i 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 percentuali. Questa proprietà non è applicabile agli elementi all'interno delle colonne interne o delle griglie avanzate
Imposta margini e spaziatura interna
I margini sono lo spazio tra il bordo dell'elemento e il bordo della sezione, colonna, colonna interna o griglia avanzata in cui è contenuto. Per impostazione predefinita, i valori del margine orizzontale e della spaziatura interna sono collegati. Se modifichi il valore a sinistra, il valore a destra verrà aggiornato automaticamente in modo che corrisponda. Se non desideri che i valori siano collegati, fai clic sull'icona del collegamento.
Nota che i margini in linea per gli elementi all'interno delle colonne o delle colonne interne possono essere regolati direttamente sulla tela. Per saperne di più Spaziatura esterna e interna.
imbottitura è lo spazio interno dell'elemento. Fate clic sul numero del margine o della spaziatura interna per digitare un nuovo valore, quindi utilizzate il menu a discesa per selezionare l'unità in cui viene misurato lo spazio (px,%, vh, vw o A). Per impostazione predefinita, la spaziatura orizzontale viene misurata in percentuale e la spaziatura verticale
Ad esempio, se si seleziona una colonna e si imposta il padding sinistro su 5 px, verranno aggiunti 5 px di spazio tra il bordo sinistro della colonna e il bordo esterno degli elementi all'interno della colonna. Se, per la stessa colonna, imposti 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
Reimposta spaziatura interna o margine
Quando si fa clic nel pannello di progettazione o nel menu mobile, azzera il padding o i margini per l'elemento selezionato.
A seconda dell'elemento selezionato, è possibile regolare l'altezza e la larghezza e i valori massimi e minimi. 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. Per saperne di più sulle unità di misura Unità di misura.
Le unità di dimensione predefinite sono diverse per ogni elemento. Ad esempio, per impostazione predefinita, le caselle di testo hanno una larghezza del 100%, i pulsanti hanno una larghezza di 280 px
Per le sezioni, puoi modificare solo l'altezza. La larghezza della sezione è impostata dal dispositivo, mentre la larghezza del contenuto della sezione è impostata dall'impostazione Larghezza del contenuto in Tema del sito. Per le colonne, puoi modificare solo la larghezza, l'altezza è definita dall'altezza della sezione o dai suoi elementi interni. Per le colonne interne e i widget è possibile impostare l'altezza e la larghezza, insieme ai valori minimo e massimo per ciascuna colonna. È possibile utilizzare unità di qualsiasi dimensione
Le proprietà di animazione e sfondo in modalità flessibile sono simili all'editor classico. Per saperne di più sull'animazione e sulle proprietà dello sfondo, vediAggiungere animazioniePersonalizza lo sfondo.
Nota
Parallax è disponibile per tutti i widget e contenitori e può essere applicato su schermi di tutte le dimensioni. Per abilitare la parallasse, fai clic sull'immagine, seleziona Modifica design, scorri fino a Sfondo sezione del pannello di progettazione e apri Posizione dell'immagine menu.
L'opzione per mantenere statica un'immagine di sfondo non è disponibile per tablet, dispositivi mobili e Mac OS a causa di una limitazione iOS.
Le griglie avanzate hanno proprietà del pannello di progettazione che non sono disponibili per altri tipi di elementi a causa della capacità di creare composizioni freestyle ed elementi sovrapposti. Ti consigliamo di rivedere il tuo progetto
Allinea
I singoli elementi di una griglia avanzata possono essere allineati e allungati in qualsiasi direzione perché non sono vincolati dal layout automatico.
Ordinare
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, indietro o all'indietro. Per ulteriori informazioni Crea elementi sovrapposti.
Riorganizza il layout
Consente di selezionare la disposizione delle colonne e delle righe all'interno della griglia avanzata per creare un layout.
Personalizza il layout
Consente di selezionare la disposizione delle colonne e delle righe all'interno della griglia avanzata per creare un layout.
Perno
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 che sono stati divisi in colonne e/o righe per creare un layout. Mostra dove si trova l'elemento sulla griglia
Mantieni le proporzioni
Quando è attivata su Attivato, assicura che gli elementi all'interno di una griglia avanzata mantengano le loro proporzioni anche quando la dimensione della griglia cambia.
Il widget Immagine contiene anche un Mantieni le proporzioni toggle, che mantiene le proporzioni originali.
Nota
Questo contenuto è rilevante sia per la modalità Flex in Classic Editor che per Editor 2.0. Per identificare la versione attuale dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Comprendere e utilizzare efficacemente le unità di misura è fondamentale per creare layout che non siano solo visivamente accattivanti ma anche reattivi su vari dispositivi e dimensioni dello schermo. Il pannello di progettazione, situato sul lato destro della tela dell' nell'Editor 2.0 o in modalità Flex nell'Editor classico, funge da centro di controllo per le proprietà di progettazione degli elementi selezionati, tra cui sezioni, colonne, widget, colonne interne e griglie avanzate. Questo articolo esamina le unità di dimensione disponibili nel pannello di progettazione e offre esempi pratici per il loro
Inoltre, Editor 2.0 consente agli utenti di configurare le unità di dimensione dal punto di interruzione principale (desktop), garantendo la scalabilità su tutte le dimensioni dello schermo. Gli utenti possono regolare le unità di dimensione sui breakpoint di tablet e dispositivi mobili senza influire sugli altri punti di interruzione. Per ulteriori informazioniDimensioni dello schermo e dispositivi.
Suggerimento
Corso Duda Academy consigliato:
-
Unità di dimensione. Scopri le diverse unità di dimensioni nel pannello di progettazione e quando utilizzarle.
percentuale (%) è un'unità di dimensione dinamica che determina la proporzione del contenitore (sezione, colonna, colonna interna o griglia avanzata) occupata dall'elemento su varie dimensioni dello schermo. In genere, per impostazione predefinita, le larghezze degli elementi flessibili sono percentuali. L'uso delle percentuali è consigliato quando si mira a mantenere la coerenza del design su tutte le dimensioni dello schermo senza la necessità di regolazioni manuali dei pixel
Ad esempio, l'impostazione di entrambe le colonne in un layout a due colonne al 50% di larghezza garantisce che si ridimensionino automaticamente al 50% su tutte le dimensioni dello schermo.
Le percentuali sono utili per preservare le dimensioni relative degli elementi su diverse dimensioni dello schermo. Ciò significa che gli elementi si ridimensionano proporzionalmente al contenitore principale (sezione o colonna), garantendo
Ad esempio, un'immagine impostata al 50% di larghezza all'interno di una colonna occuperà sempre metà della larghezza della colonna, indipendentemente dalle dimensioni dello schermo. Di conseguenza, mentre la colonna e l'immagine possono apparire più strette sui dispositivi mobili rispetto ai desktop, l'immagine mantiene la larghezza proporzionale. Allo stesso modo, l'impostazione del padding tra le colonne al 4% garantisce una spaziatura uniforme rispetto alle colonne e agli altri elementi dello schermo, adattandosi alle diverse dimensioni dello schermo
pixel (px) forniscono un'unità di misura fissa che non è influenzata dalle variazioni delle dimensioni del dispositivo. Ad esempio, un pulsante impostato su 250 px mantiene le sue dimensioni su dispositivi mobili, tablet e desktop
Tuttavia, affidarsi esclusivamente ai pixel per il dimensionamento può ostacolare la reattività, richiedendo regolazioni manuali ad ogni punto di interruzione. Pertanto, sebbene i pixel garantiscano la coerenza nella dimensione degli elementi, si consiglia di utilizzare le percentuali per promuovere il design reattivo. Questo approccio riduce al minimo la necessità di regolazioni dei singoli pixel nei punti di interruzione, semplificando il processo di progettazione e migliorando la reattività complessiva
Larghezza della finestra (Vw) per un ridimensionamento reattivo in base alla larghezza dello schermo
larghezza della finestra (Vw) regola dinamicamente gli elementi in base alla larghezza dello schermo (viewport), garantendo un ridimensionamento proporzionale tra diversi dispositivi. Ad esempio, l'assegnazione di 50 Vw a un elemento alloca metà della larghezza dello schermo
L'altezza della finestra (Vh) ridimensiona dinamicamente gli elementi in relazione all'altezza dello schermo (finestra). Ad esempio, assegnando 25 Vh a un elemento si riserva un quarto dell'altezza dello schermo per quell'elemento. Ciò è particolarmente utile per gli sfondi a schermo intero (100% Vh) o per gli elementi che richiedono la sincronizzazione
L'unità automatica si regola dinamicamente in base all'altezza del contenuto, rendendola adatta per blocchi di testo e altezze delle colonne, assicurando che si ridimensionino in base al contenuto. In genere, per impostazione predefinita, i blocchi di testo utilizzano unità automatiche. Questa funzionalità consente agli elementi di espandersi o contrarsi senza interruzioni, mantenendo un design del layout proporzionale
[en] Fill sets an element to take up the space left over in its container, along its width or height. Use Fill when you want an element to adapt to whatever space is left, instead of a set proportion (%) or the size of its content (A).
[en] For example, in a section with two columns, if one column's width is 50% and the other's is Fill, the second column takes the remaining width. An image with its height set to Fill stretches to the height of the column it's in.
[en] Fill is available on the Width and Height settings for some elements, such as column width and image height, but not on minimum or maximum values. Inner column width doesn't offer it.
Il concetto padre-figlio regola l'organizzazione degli elementi, con elementi primari come intestazioni, corpi, menu e piè di pagina contenenti almeno una sezione. Ogni sezione, a sua volta, contiene almeno una colonna, che funge da contenitore per vari elementi come testo, immagini o widget come Inner Columns e Advanced
Gli elementi principali mantengono le impostazioni di progettazione, consentendo un controllo centralizzato sul loro aspetto. Tuttavia, se una sezione all'interno di un elemento principale ha impostazioni specifiche per il colore di sfondo, lo sfondo dell'elemento principale potrebbe non riflettere questa personalizzazione. Questa struttura gerarchica garantisce un approccio sistematico all'organizzazione del sito Web, facilitando flussi di lavoro di progettazione efficienti e
La gerarchia degli elementi segue una struttura predefinita: le sezioni contengono colonne e le colonne contengono widget. Questa disposizione gerarchica garantisce che non sia possibile aggiungere un widget direttamente a una sezione senza che sia annidato all'interno di una colonna. Esistono diversi modi per selezionare un elemento (sezione, colonna o
-
Selezione diretta degli oggetti nella tela dell'editor: Gli utenti possono interagire direttamente con gli elementi sulla tela dell'editor, semplificando l'identificazione e la modifica di componenti specifici senza la necessità di una navigazione estesa attraverso pannelli o menu. Dopo aver selezionato un oggetto, il pannello di progettazione con tutte le opzioni di progettazione pertinenti per quell'elemento apparirà nel pannello di progettazione a destra
-
Breadcrumbs del menu mobile: Gli utenti possono tornare ai contenitori principali utilizzando i breadcrumb nel menu mobile. Quando si seleziona un elemento specifico, gli utenti possono semplicemente fare clic sulle briciole di navigazione blu nella parte superiore dell'elemento per tornare al contenitore
-
Breadcrumb nella parte superiore del pannello di progettazione: Il pannello di progettazione include anche opzioni di navigazione nella parte superiore sotto forma di breadcrumb. Questi breadcrumb consentono agli utenti di passare rapidamente tra diverse sezioni
-
Pannello dei livelli: Quando un elemento è selezionato, il pannello dei livelli evidenzia i livelli associati a quell'elemento. Contemporaneamente, l'editor fornisce un feedback visivo, facilitando la navigazione all'interno della tela
Le sezioni flessibili sono righe con due colonne flessibili predefinite che creano un layout di base. Una volta aggiunta una sezione, puoi aggiungere, rimuovere o ridisporre colonne aggiuntive, colonne interne o griglie avanzate per creare il layout desiderato. Quindi puoi aggiungere widget a
Per aggiungere una sezione:
-
Passa il mouse tra le righe e fai clic +Aggiungi sezione. Oppure, fai clic con il pulsante destro del mouse per aprire il menu contestuale, fai clic Aggiungi, quindi seleziona Sezione Flex.
-
Nel pannello laterale, fai clic su Sezioni flessibili.
-
Seleziona la sezione flessibile desiderata.
-
Fare clic Salva.
Nota
-
L'opzione per mantenere statica un'immagine di sfondo non è disponibile per tablet e dispositivi mobili a causa di una limitazione iOS.
-
Puoi anche creare una sezione flessibile con AI. Per istruzioni dettagliate sulla creazione di sezioni flessibili con AICrea una sezione flessibile con AI.
Per salvare una sezione:
-
Passa il mouse sulla sezione desiderata e fai clic su Sezione Flex nell'angolo superiore sinistro della sezione.
-
Fare clic Salva come sezione, quindi fai clic su Seleziona solo questa riga.
-
Digita il nome di una sezione, seleziona la categoria in cui verrà salvata la sezione e seleziona le autorizzazioni per la sezione.
-
Fare clic Inizia a creare.
-
Fare clic Fatto.
Puoi ripristinare facilmente la spaziatura e gli elementi di una sezione in base agli stili del tema. Gli elementi che possono essere ripristinati includono testo, pulsanti, immagini, sfondi, larghezza e spaziatura per la sezione e le sue colonne, oltre a widget come Advanced Accordion, Advanced Tabs
Per reimpostare la spaziatura delle sezioni o gli elementi della sezione sugli stili del tema, fai clic sulla sezione per aprire la barra mobile. Fai clic sull'icona a tre puntini e Reimposta il tema del sito. Da qui, puoi fare clic su Reimposta la spaziatura tra le sezioni o Reimposta lo stile di tutti gli elementi della sezione.
Nota
impostazioni specifiche del punto di interruzione (dimensioni dello schermo) vengono mantenute. Ciò significa che se ripristini la spaziatura delle sezioni o gli elementi agli stili del tema sul desktop, i punti di interruzione per dispositivi mobili e tablet non vengono modificati
Dopo aver aggiunto una sezione al sito, puoi aggiungere colonne per contenere i widget all'interno della sezione. Per impostazione predefinita, tutte le sezioni contengono colonne, ma puoi comunque aggiungere altre colonne
Nota che il numero massimo di colonne è 8.
Nota
Quando aggiungi un elemento a una colonna, la posizione è determinata dalle impostazioni di layout automatico. Per modificare la direzione del layout automatico, aprite il pannello di progettazione e nella sezione Layout, selezionate orizzontale o verticale per il layout automatico.
Puoi duplicare una colonna e questa verrà aggiunta a destra della scheda originale. Non puoi aggiungere colonne che superano il 100% della larghezza
Per duplicare una colonna:
-
Fate clic per selezionare una colonna.
-
Nel menu mobile, fai clic su Duplicato icona. Oppure, puoi fare clic con il pulsante destro del mouse sulla colonna per aprire il menu contestuale e selezionare Duplicato.
È possibile modificare la larghezza di una colonna trascinandone il bordo sull'area di lavoro oppure impostandola nel pannello di progettazione.
Per modificare le dimensioni di una colonna:
-
Clicca per selezionare la colonna.
-
Trascina una delle maniglie quadrate sul bordo della colonna.
È inoltre possibile impostare una larghezza esatta nella sezione Dimensioni del pannello di progettazione.
La maniglia arrotondata sul bordo di una colonna o di un widget modifica il margine (spaziatura esterna), non le dimensioni. Per ulteriori informazioni, consulta la sezione Spaziatura esterna e interna.
Nota
La somma delle larghezze delle colonne in una sezione non può superare il 100% della larghezza della sezione stessa. Se una colonna non può diventare più larga, riduci prima la larghezza di una colonna adiacente.
Puoi eliminare una colonna per rimuoverla dalla sezione. Tuttavia, ogni sezione deve contenere almeno una colonna, il che significa che non è possibile eliminare l'ultima colonna da una sezione.
Per eliminare una colonna:
-
Fate clic per selezionare la colonna.
-
Nel menu mobile, fai clic su Elimina icona. Oppure, puoi fare clic con il pulsante destro del mouse sulla colonna per aprire il menu contestuale e selezionare Elimina.
È possibile aggiungere widget a colonne, colonne interne o griglie avanzate in diversi modi. Se sei già in modalità flessibile, puoi aggiungere i widget direttamente dal pannello laterale facendo clicWidget, quindi selezionando il widget desiderato.
Nota
Se utilizzi la modalità flessibile nell'Editor classico, non puoi trascinare un widget in una colonna flessibile dal pannello laterale.
Per aggiungere un widget:
-
Fai clic su una colonna, su una colonna interna o su una griglia avanzata per selezionarla.
-
Fai clic sull'icona più al centro della colonna, della colonna interna o della griglia avanzata. Oppure, fai clic sull'icona più nel menu mobile.
-
Seleziona un widget.
Puoi anche aggiungere widget dal pannello dei livelli.
Per aggiungere un widget dal pannello dei livelli:
-
Fate clic per selezionare una colonna.
-
Nel pannello dei livelli, passa il mouse sulla colonna, sulla colonna interna o sulla griglia avanzata a cui desideri aggiungere un widget e fai clic sull'icona più.
-
Seleziona un widget.
L'allineamento e la spaziatura possono essere usati insieme per aiutarti a realizzare i tuoi progetti.
Per saperne di più sull'allineamento, guarda il seguente video:
Quando si progetta con Flex, è possibile risparmiare tempo allineando più elementi contemporaneamente all'interno della stessa sezione, colonna o colonna interna.
Per allineare più elementi:
-
Seleziona la sezione, la colonna o la colonna interna e fai clic sull'icona di allineamento (
) nel menu mobile.
-
Seleziona l'allineamento desiderato.
Il pannello di progettazione offre opzioni di allineamento aggiuntive come la modifica della direzione del layout automatico, l'allungamento e altro ancora.
Per allineare gli elementi dal pannello di progettazione:
-
Fai clic con il pulsante destro del mouse sulla sezione, colonna o colonna interna desiderata e seleziona Modifica il design.
-
Nella sezione Layout del pannello di progettazione in Allineamento dei contenuti, seleziona l'allineamento verticale e orizzontale del contenuto desiderato.
Quando si allinea il testo dal menu mobile o dal pannello di progettazione, allinea sia il testo che il div etichetta.
Sebbene sia possibile allineare più elementi contemporaneamente, a volte è sufficiente modificare l'allineamento di un elemento all'interno di una colonna flessibile senza influire sugli altri elementi.
Per allineare un singolo elemento:
-
Seleziona l'elemento desiderato.
-
Nel menu mobile, fai clic sull'icona di allineamento (
Spazio tra gli elementi
È possibile impostare la quantità di spazio orizzontale o verticale tra le colonne all'interno della stessa sezione flessibile o i widget all'interno di una colonna, colonna interna o griglia avanzata.
Per impostare la spaziatura tra gli elementi:
-
Fai clic con il pulsante destro del mouse sulla sezione, colonna, colonna interna o griglia avanzata desiderata e seleziona Modifica il design.
-
Nel Spaziatura sezione del pannello di progettazione sotto Spaziatura tra gli elementi, digita o usa il cursore per impostare il valore percentuale dello spazio orizzontale o il valore in pixel dello spazio verticale che vuoi che esista tra gli elementi nel Spaziatura tra gli elementi campo.
È possibile ripristinare la spaziatura interna sia per le sezioni che per le colonne facendo clic su Reimposta il padding icona nel menu mobile.
Le sezioni flessibili creano un layout e allineano automaticamente gli oggetti, il che consente di progettare facilmente e rapidamente bellissime sezioni. Tuttavia, quando avete un design più complesso con oggetti sovrapposti o composizioni in stile libero, dovete utilizzare una griglia avanzata. Le griglie avanzate consentono di inserire elementi in una composizione freestyle senza un layout automatico. Per questo motivo, ti consigliamo di controllare il tuo design su tutti
Scopri come creare elementi sovrapposti guardando il video seguente o seguendo le istruzioni riportate di seguito.
Per creare elementi sovrapposti:
-
Fate clic per selezionare una colonna flessibile.
-
Nel menu mobile o nella colonna flessibile, fai clic sull'icona più (
).
-
Nella sezione elementi flessibili, seleziona Griglia avanzata (precedentemente denominati contenitori). Per assicurarti di seguire le best practice, trascina i bordi della griglia avanzata in modo che copra l'intera larghezza della colonna flessibile
-
Nella sezione Layout del pannello di progettazione, seleziona una griglia predefinita da Riorganizza il layout. Oppure, se vuoi creare la tua griglia, usa il Colonnee Righemenu a discesa da Personalizza il layout per aggiungere colonne e/o righe.
-
Nel menu mobile, fai clic sull'icona più, quindi seleziona i widget desiderati e disponili nella griglia avanzata.
-
Fai clic per selezionare un elemento e nella sezione Disponi del pannello di progettazione, seleziona Porta in primo piano, Porta avanti, Invia all'indietro, o Invia a indietro.
Ti consigliamo di controllare il tuo progetto in ogni punto di interruzione quando utilizzi griglie avanzate. Con elementi sovrapposti potrebbe essere necessario modificare il design su determinati punti di interruzione
Nel web design, la scelta del sistema di layout appropriato influenza in modo significativo l'esperienza dell'utente, soprattutto quando si integrano elementi di layout dei widget come Inner Column e Advanced Grid in un sito.
Suggerimento
Corsi consigliati della Duda Academy:
-
Elementi di layout. Un'introduzione di 2 minuti alle colonne interne e alle griglie avanzate, e al modo in cui queste contengono e dispongono gli altri widget.
-
Elementi essenziali del layout. Scopri le colonne e le colonne interne e come allineare e dimensionare gli elementi al loro interno.
-
Layout con griglie avanzate. Scopri come creare layout complessi con griglie avanzate
Il widget della colonna interna è consigliato per:
-
Layout modulari: Perfetti per creare layout modulari in cui il contenuto scorre linearmente, il che li rende ideali per menu di navigazione, schede o layout simili a elenchi.
-
Design reattivo: Eccelle nella creazione di design reattivi che si adattano perfettamente a schermi e dispositivi di varie dimensioni, garantendo allineamento e leggibilità ottimali.
-
Contenuti dinamici: Ideale per la gestione di contenuti dinamici che possono variare in lunghezza o dimensione, consentendo ai progettisti di controllare dinamicamente il comportamento e le dimensioni degli articoli all'interno di un contenitore.
-
Layout annidati: Le funzionalità di annidamento delle colonne interne li rendono adatti alla creazione di layout annidati complessi. I progettisti possono inserire più colonne interne all'interno del contenitore esterno in base alle necessità, offrendo flessibilità e adattabilità nell'organizzazione delle gerarchie di contenuti. Analogamente, Advanced Grid offre la possibilità di annidare widget, colonne interne e persino griglie avanzate aggiuntive
Il widget griglia avanzato è consigliato per:
-
Strutture di layout complesse: Indispensabile per creare layout complessi con più righe e colonne, fornendo un controllo preciso sul posizionamento e sul dimensionamento degli elementi.
-
Progetti non lineari: Perfetto per la progettazione di layout non lineari in cui gli elementi devono essere posizionati indipendentemente dall'ordine di origine per composizioni creative e arrangiamenti asimmetrici. Ciò significa che gli elementi possono essere posizionati e disposti in base ai requisiti
-
Web design reattivo: Pur richiedendo un'attenta pianificazione, Advanced Grid fornisce strumenti robusti per la creazione di design reattivi. I progettisti possono definire regolazioni specifiche del layout, come il riordino delle colonne, l'estensione degli elementi e gli spazi tra le griglie in diverse dimensioni della finestra, garantendo una presentazione ottimale su vari
Quando devo usare un widget a colonna interna rispetto a un widget a griglia avanzato?
Le colonne interne sono più adatte per i layout modulari, soprattutto quando è necessario un controllo preciso sui singoli elementi all'interno di una sezione o quando si desidera un layout automatico. Tuttavia, tieni presente che mentre le colonne interne mantengono l'integrità della sezione, lo spostamento dei widget al loro interno è meno flessibile rispetto alle griglie avanzate
Le colonne interne consentono il controllo su righe o colonne singolarmente, ideali per layout unidimensionali. Advanced Grids consente la manipolazione simultanea di righe e colonne, fornendo un controllo completo sull'intera struttura del layout, ideale per i layout bidimensionali
Advanced Grid (CSS Grid) può avere un vantaggio marginale nella gestione di layout complessi ottimizzando la struttura del DOM, l'efficienza del rendering, il caricamento delle risorse, la reattività e riducendo al minimo le richieste HTTP. Le colonne interne, sebbene efficaci, possono comportare un maggior numero di elementi HTML annidati, il che potrebbe comportare tempi di rendering leggermente più lenti rispetto a
Puoi anche utilizzare sia il widget della colonna interna che il widget della griglia avanzato nella stessa sezione e in tutto il sito per ottenere i design desiderati. Ciò comporta il raggiungimento di un equilibrio tra la struttura generale del layout e i dettagli più precisi dell'organizzazione dei contenuti
Comprendere le relazioni genitore-figlio è fondamentale per sfruttare efficacemente Inner Columns e Advanced Grids. In questi sistemi di layout, gli elementi che ospitano le colonne fungono da elementi principali, mentre gli elementi all'interno, come i widget aggiuntivi, sono considerati figli. Questa relazione determina il modo in cui gli elementi vengono posizionati e allineati all'interno del layout, garantendo coerenza e integrità strutturale
È importante notare che non è sempre necessario aggiungere colonne interne. Spesso, una singola colonna può essere sufficiente per molti casi d'uso. La colonna interna consente un facile posizionamento degli elementi in orizzontale o in verticale. I requisiti includono una sezione che funga da contenitore flessibile e una colonna per ospitare le colonne interne, con entrambi i tipi di colonne che fungono da elementi flessibili, che rappresentano rispettivamente l'elemento principale e
Advanced Grid consente il posizionamento degli elementi in entrambe le direzioni verticale e orizzontale. I requisiti includono una sezione che funga da contenitore e una griglia avanzata per dichiarare il layout della griglia sull'elemento o contenitore principale, facendo sì che tutti i suoi elementi secondari diventino elementi della griglia