Nota
Questo contenuto è rilevante sia per la modalità Flex nell'editor classico che nell'editor 2.0. Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito .
La tecnologia Flexbox (chiamata semplicemente "flex") è un modulo di layout CSS per disporre gli oggetti in sezioni e colonne, permettendo loro di flettersi (crescere/ridurre) e allinearsi perfettamente all'interno di un contenitore. Questo ti permette di progettare sezioni pixel perfect e reattive che si adattino a qualsiasi dimensione dello schermo. Se usi il Classic Editor, puoi entrare in modalità flex per progettare con la tecnologia flexbox. Se usi l'Editor 2.0, usi di default la tecnologia flexbox.
Suggerimento
Corsi consigliati della Duda Academy:
-
Basic Principi di Design. Scopri i quattro pilastri del design (branding, tipografia, colore e media).
-
Dimensioni e unità. Scopri le diverse dimensioni delle unità nel pannello di progettazione e quando usarle.
-
Essenziali per la disposizione. Impara a conoscere le colonne e le colonne interne e come allineare e dimensionare gli elementi al loro interno.
-
Layout con griglie avanzate. Impara a costruire 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, ridimensionamento e altro ancora, a seconda dell'elemento selezionato.
Per aprire il pannello di design, clicca su un elemento mentre sei in modalità flessibile, poi clicca su Modifica design (devi essere in modalità flessibile solo se usi l'editor classico). Il pannello di design si apre sul lato destro della modalità flessibile in modo da non interferire con la tua capacità di visualizzare e modificare il tuo design. Dopo aver chiuso il pannello di design, puoi riaprirlo cliccando sull'icona del pannello di design 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 ciò che è 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 oppure allargati orizzontalmente per adattarsi al 100% della larghezza del contenitore.
Gli elementi possono anche essere allineati dal menu mobile facendo clic sull'icona Allinea ().
Larghezza completa
Precedentemente denominata "smarginatura completa", la larghezza completa è disponibile solo per le sezioni e può essere modificata solo dal punto di interruzione principale del desktop. Quando è attivato, consente al contenuto di coprire l'intera larghezza dello schermo. Quando l'opzione è disattivata, la larghezza del contenuto può estendersi per un massimo di 1920 pixel. Per impostazione predefinita, l'impostazione dell'intera larghezza è disattivata. Per ulteriori informazioni sui punti di interruzione, vedere Dimensioni dello schermo e dispositivi.
Allineamento dei contenuti
Ti permette di allineare verticalmente o orizzontalmente più elementi in una colonna o in una colonna interna contemporaneamente. Nel classic editor, gli elementi possono essere allineati solo individualmente e orizzontalmente. Per maggiori informazioni, vedi Allineamento e Spaziamento.
Disposizione
Consente di selezionare se gli elementi all'interno di colonne e colonne interne 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.
Allinea righe
Ti permette 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 saperne di più sulla spaziatura, guarda il seguente video:
Spazio tra gli elementi
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 percentuale. Questa proprietà non è applicabile agli elementi all'interno di colonne interne o griglie avanzate.
Imposta margini e spaziatura interna
I margini sono lo spazio tra il bordo dell'elemento e il bordo della sezione, della colonna, della colonna interna o della griglia avanzata in cui è contenuto. Per impostazione predefinita, i valori del margine orizzontale e della spaziatura interna sono collegati. Se si regola il valore sinistro, il valore destro si aggiornerà automaticamente in modo che corrisponda. Se non si desidera collegare i valori, fare clic sull'icona del collegamento.
Si noti che i margini in linea per gli elementi all'interno delle colonne o le colonne interne possono essere regolati direttamente nell'area di disegno. Per ulteriori informazioni, vedere Spaziatura esterna e interna.
La spaziatura interna è lo spazio interno dell'elemento. Clicca sul margine o sul numero di Spaziatura interna per digitare un nuovo valore, poi usa il menu a tendina per selezionare l'unità in cui si misura lo spazio (px, %, vh, vw o A). Per impostazione predefinita, la spaziatura orizzontale è misurata in percentuali, mentre la spaziatura verticale in pixel.
Ad esempio, se si seleziona una colonna e si imposta la spaziatura interna sinistra 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, 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.
Reimposta Spaziatura interna o Margine
Quando viene cliccato nel pannello di progettazione o nel menu mobile, azzera la spaziatura interna o i margini dell'elemento selezionato.
A seconda dell'elemento selezionato, è possibile regolare l'altezza e la larghezza, nonché i valori massimo e minimo. In modalità flex, 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 ulteriori informazioni sulle unità di dimensione, vedere Unità di dimensione.
Le unità di misura predefinite sono diverse per ogni elemento. Ad esempio, per impostazione predefinita, le caselle di testo sono di larghezza 100% e i pulsanti sono di larghezza 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 nel Tema del sito. Per le colonne, è possibile modificare solo la larghezza e 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 ciascuno. È possibile utilizzare qualsiasi unità di dimensione.
Le proprietà di animazione e sfondo in modalità flex sono simili all'editor classico. Per ulteriori informazioni sulle proprietà di animazione e sfondo, vedere Aggiungere animazioni e personalizzare lo sfondo.
Nota
La parallasse è disponibile per tutti i widget e i contenitori e può essere applicata su schermi di tutte le dimensioni. Per abilitare la parallasse, fai clic sull'immagine, seleziona Modifica design, scorri fino alla sezione Sfondo del pannello di progettazione e apri il menu Posizione immagine .
L'opzione per mantenere statica un'immagine di sfondo non è disponibile per tablet, dispositivi mobili e Mac OS a causa di una limitazione di iOS.
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.
Allineare
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 in primo piano, in avanti, in secondo piano o indietro. Per ulteriori informazioni, vedere Creazione di elementi sovrapposti.
Riorganizza layout
Consente di selezionare la modalità di disposizione delle colonne e delle righe all'interno della griglia avanzata per creare un layout.
Personalizza layout
Consente di selezionare la modalità di disposizione delle colonne e delle righe all'interno della griglia avanzata per creare un layout.
Spilla
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 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 proporzioni
Quando è attivato , garantisce che gli elementi all'interno di una griglia avanzata mantengano le loro proporzioni anche quando le dimensioni della griglia cambiano.
Il widget Immagine contiene anche un interruttore Mantieni proporzioni , che mantiene le proporzioni originali.
Nota
Questo contenuto è rilevante sia per la modalità Flex nell'editor classico che nell'editor 2.0. Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito .
Comprendere e utilizzare in modo efficace 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 dell'area di disegno dell'editor 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 misura disponibili nel pannello di progettazione e offre esempi pratici per il loro utilizzo.
Inoltre, Editor 2.0 consente agli utenti di configurare le unità di misura dal punto di interruzione principale (desktop), garantendo la scalabilità su tutte le dimensioni dello schermo. Gli utenti possono regolare le unità di misura su tablet e dispositivi mobili senza influire su altri punti di interruzione. Per ulteriori informazioni, vedere Dimensioni dello schermo e dispositivi.
Suggerimento
Corso consigliato di Duda Academy:
-
Unità di dimensione. Scopri le diverse dimensioni delle unità nel pannello di progettazione e quando usarle.
La percentuale (%) è un'unità di dimensione dinamica che determina la proporzione del contenitore (sezione, colonna, colonna interna o griglia avanzata) occupata dall'elemento in varie dimensioni dello schermo. In genere, le larghezze degli elementi flessibili sono predefinite in percentuale. L'uso delle percentuali è consigliato quando si mira a mantenere la coerenza del design tra le dimensioni dello schermo senza la necessità di regolazioni manuali dei pixel a ogni punto di interruzione.
Ad esempio, impostando entrambe le colonne in un layout a due colonne al 50% di larghezza, ci si assicura che si ridimensionino automaticamente al 50% su tutte le dimensioni dello schermo.
Le percentuali sono utili per mantenere le dimensioni relative degli elementi tra le diverse dimensioni dello schermo. Ciò significa che gli elementi vengono scalati proporzionalmente al loro contenitore genitore (sezione o colonna), garantendo l'uniformità nell'aspetto del layout.
Ad esempio, un'immagine impostata su una larghezza del 50% 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 sua larghezza proporzionale. Analogamente, l'impostazione della spaziatura interna tra le colonne su 4% garantisce una spaziatura coerente rispetto alle colonne e agli altri elementi dello schermo, adattandosi alle diverse dimensioni dello schermo.
I pixel (px) rappresentano un'unità di misura fissa non influenzata dalle variazioni di dimensione dei dispositivi. Ad esempio, un pulsante impostato su 250px mantiene le sue dimensioni su dispositivi mobili, tablet e desktop.
Tuttavia, affidarsi esclusivamente ai pixel per il dimensionamento può ostacolare la reattività, richiedendo aggiustamenti manuali ad ogni punto di rottura. Pertanto, mentre i pixel assicurano la coerenza delle dimensioni degli elementi, l'utilizzo delle percentuali è consigliato per promuovere il design reattivo. Questo approccio riduce al minimo la necessità di regolare i singoli pixel nei punti di interruzione, semplificando il processo di progettazione e migliorando la reattività complessiva.
La larghezza del viewport (Vw) regola dinamicamente gli elementi in base alla larghezza dello schermo (viewport), garantendo il ridimensionamento proporzionale tra i diversi dispositivi. Ad esempio, l'assegnazione di 50 Vw a un elemento alloca metà della larghezza dello schermo.
L'altezza del viewport (Vh) ridimensiona dinamicamente gli elementi in relazione all'altezza dello schermo (viewport). Ad esempio, l'assegnazione di 25 Vh a un elemento riserva un quarto dell'altezza dello schermo per quell'elemento. Si tratta di una soluzione particolarmente vantaggiosa per gli sfondi a tutto schermo (100% Vh) o per gli elementi che richiedono la sincronizzazione con l'altezza dello schermo.
L'unità automatica si regola dinamicamente in base all'altezza del contenuto, rendendola adatta ai blocchi di testo e alle altezze delle colonne, garantendo il ridimensionamento in base al loro contenuto. In genere, i blocchi di testo hanno come impostazione predefinita l'unità automatica. Questa funzione permette agli elementi di espandersi o contrarsi senza problemi, mantenendo un layout proporzionale.
Il concetto genitore-figlio governa l'organizzazione degli elementi, con elementi primari come intestazioni, corpi, menu e piè di pagina contenenti almeno una sezione. Ogni sezione, a sua volta, ospita almeno una colonna, fungendo da contenitore per vari elementi come testo, immagini o widget come Colonne interne e Griglie avanzate.
Gli elementi padre mantengono le loro impostazioni di design, consentendo un controllo centralizzato sul loro aspetto. Tuttavia, se una sezione all'interno di un elemento genitore ha impostazioni specifiche per il colore di sfondo, lo sfondo dell'elemento genitore potrebbe non riflettere questa personalizzazione. Questa struttura gerarchica garantisce un approccio sistematico all'organizzazione del sito web, facilitando flussi di lavoro efficienti e una presentazione coerente dei contenuti.
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 nidificato all'interno di una colonna. Esistono diversi modi per selezionare un elemento (sezione, colonna o widget):
-
Selezione diretta degli oggetti nell'area di disegno dell'editor: Gli utenti possono interagire direttamente con gli elementi nell'area di disegno dell'editor, semplificando l'identificazione e la modifica di componenti specifici senza la necessità di una navigazione estesa tra pannelli o menu. Dopo aver selezionato un oggetto, il pannello di progettazione con tutte le opzioni di progettazione rilevanti per quell'elemento apparirà sul pannello di progettazione a destra.
-
Breadcrumb del menu fluttuante: 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 sui breadcrumb blu nella parte superiore dell'elemento per tornare al contenitore principale.
-
Parte superiore del pannello di progettazione Breadcrumb: Il pannello di progettazione include anche opzioni di navigazione nella parte superiore sotto forma di breadcrumb. Questi breadcrumb consentono agli utenti di passare rapidamente da una sezione all'altra o da un elemento all'altro all'interno dell'area di disegno.
-
Pannello Livelli: Quando un elemento è selezionato, il pannello dei livelli evidenzia i livelli associati a tale elemento. Allo stesso tempo, l'editor fornisce un feedback visivo, facilitando la navigazione all'interno dell'area di disegno.
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 riorganizzare colonne aggiuntive, colonne interne o griglie avanzate per creare il layout desiderato. Quindi puoi aggiungere widget a quel layout.
Per aggiungere una sezione:
-
hover tra le righe e fai clic su +Aggiungi sezione. In alternativa, fare clic con il pulsante destro del mouse per aprire il menu contestuale, fare clic su Aggiungi, quindi selezionare la sezione Flex.
-
Nel pannello laterale, fare clic su Sezioni flessibili.
-
Seleziona la sezione flex desiderata.
-
Fai clic su Salva.
Nota
-
L'opzione per mantenere statica un'immagine di sfondo non è disponibile per tablet e dispositivi mobili a causa di una limitazione di iOS.
-
Puoi anche creare una sezione flessibile con l'intelligenza artificiale. Per istruzioni dettagliate sulla creazione di sezioni flessibili con l'intelligenza artificiale, consulta Creazione di una sezione flessibile con l'intelligenza artificiale.
Per salvare una sezione:
-
hover sulla sezione desiderata e fare clic su Sezione flessibile nell'angolo in alto a sinistra della sezione.
-
Fai clic su Salva come sezione, quindi fai clic su Seleziona solo questa riga.
-
Digitare il nome della sezione, selezionare la categoria in cui verrà salvata e selezionare le eventuali autorizzazioni.
-
Fare clic su Inizia creazione.
-
Fare clic su Fine.
Dopo aver aggiunto una sezione al sito, è possibile aggiungere delle colonne in cui inserirvi i widget. Per impostazione predefinita, tutte le sezioni contengono delle colonne, ma è comunque possibile aggiungerne altre.
Si noti che il numero massimo di colonne è 8.
Nota
Quando si aggiunge un elemento a una colonna, la posizione è determinata dalle impostazioni di layout automatico. Per modificare la direzione del layout automatico, apri il pannello di progettazione e nella sezione Layout, seleziona orizzontale o verticale per il layout automatico.
Puoi duplicare una colonna e verrà aggiunta a destra della carta originale. Non è possibile aggiungere colonne che superano il 100% della larghezza.
Per duplicare una colonna:
-
Clicca per selezionare una colonna.
-
Nel menu mobile, fare clic sull'icona Duplica . In alternativa, è possibile fare clic con il pulsante destro del mouse sulla colonna per aprire il menu contestuale e selezionare Duplica.
Puoi eliminare una colonna per rimuoverla dalla sezione, ma tieni presente che ogni sezione deve contenere almeno una colonna, pertanto non sarà possibile eliminare l'ultima colonna da una sezione.
Per eliminare una colonna:
-
Fare clic per selezionare la colonna.
-
Nel menu mobile, fare clic sull'icona Elimina . In alternativa, è possibile fare clic con il pulsante destro del mouse sulla colonna per aprire il menu contestuale e selezionare Elimina.
È possibile aggiungere widget alle colonne, alle colonne interne o alle griglie avanzate in diversi modi. Se sei già in modalità flex, puoi aggiungere widget direttamente dal pannello laterale cliccando widget, quindi selezionando il widgetdesiderato .
Nota
Se si utilizza la modalità flessibile nell'editor classico, non è possibile trascinare e rilasciare un widget in una colonna flessibile dal pannello laterale.
Per aggiungere un widget:
-
Clicca su una colonna, una colonna interna o una griglia avanzata per selezionarla.
-
Clicca sull'icona più al centro della colonna, della colonna interna o della griglia avanzata. In alternativa, fai clic sull'icona "più" nel menu mobile.
-
Seleziona un widget.
È possibile aggiungere widget anche dal pannello dei livelli.
Per aggiungere un widget dal pannello dei livelli:
-
Clicca per selezionare una colonna.
-
Nel pannello dei livelli, passa il mouse sulla colonna, sulla colonna interna o sulla griglia avanzata alla quale desideri aggiungere un widget e fai clic sull'icona "più".
-
Seleziona un widget.
L'allineamento e la spaziatura possono essere utilizzati insieme per aiutarti a realizzare i tuoi progetti.
Per ulteriori informazioni sull'allineamento, guarda il seguente video:
Quando si progetta con Flex, è possibile risparmiare tempo allineando contemporaneamente più elementi all'interno della stessa sezione, colonna o colonna interna.
Per allineare più elementi:
-
Selezionare la sezione, la colonna o la colonna interna e fare clic sull'icona di allineamento (
) nel menu mobile.
-
Selezionare 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:
-
Fare clic con il pulsante destro del mouse sulla sezione, sulla colonna o sulla colonna interna desiderata e selezionare Modifica design.
-
Nella sezione Layout del pannello di progettazione, sotto Allineamento Contenuti, seleziona l'allineamento verticale e orizzontale desiderato dei contenuti.
Quando si allinea il testo dal menu mobile o dal pannello di progettazione, vengono allineati sia il testo che il div tag.
Sebbene sia possibile allineare più elementi contemporaneamente, a volte è necessario solo modificare l'allineamento di un elemento all'interno di una colonna flex senza toccare gli altri elementi.
Per allineare un singolo elemento:
-
Selezionare l'elemento desiderato.
-
Nel menu mobile, fare 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 flex o widget all'interno di una colonna, colonna interna o griglia avanzata.
Per impostare la spaziatura tra gli elementi:
-
Fare clic con il pulsante destro del mouse sulla sezione, la colonna, la colonna interna o la griglia avanzata desiderata e selezionare Modifica design.
-
Nella sezione Spaziatura del pannello di progettazione, in Spaziatura tra gli elementi, digitare o utilizzare il dispositivo di scorrimento per impostare il valore percentuale dello spazio orizzontale o il valore in pixel dello spazio verticale che si desidera esista tra gli elementi nel campo Spaziatura tra gli elementi .
È possibile reimpostare la Spaziatura interna sia per le sezioni che per le colonne facendo clic sull'icona Ripristina Spaziatura interna nel menu mobile.
Le sezioni flex creano un layout e allineano automaticamente gli oggetti per permetterti di progettare facilmente e rapidamente bellissime sezioni. Tuttavia, quando si dispone di un design più complesso, con oggetti sovrapposti o composizione a stile libero, è necessario utilizzare una griglia avanzata. Le griglie avanzate consentono di posizionare gli elementi in composizione freestyle senza layout automatico. Per questo motivo ti consigliamo di controllare il tuo design in tutti i breakpoint.
Scopri come creare elementi sovrapposti guardando il seguente video o seguendo le istruzioni riportate di seguito.
Per creare elementi sovrapposti:
-
Clicca per selezionare una colonna flex.
-
Nel menu mobile o nella colonna flex, fare clic sull'icona più (
).
-
Nella sezione degli elementi flessibili, selezionare Griglia avanzata (contenitori precedentemente denominati). Per assicurarsi di seguire le procedure consigliate, trascinare i bordi della griglia avanzata in modo che si estenda per l'intera larghezza della colonna flessibile.
-
Nella sezione Layout del pannello di progettazione, seleziona una griglia predefinita da Riordina layout. Oppure, se vuoi creare la tua griglia, usa i menu a discesa Colonne e Righe da Personalizza 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, Porta indietro o Porta in secondo piano.
Ti consigliamo di controllare il tuo progetto a ogni breakpoint quando usi le griglie avanzate. In caso di sovrapposizione di più elementi, potrebbe essere necessario modificare il design in alcuni breakpoint.
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 widget come Colonna interna e Griglia avanzata in un sito.
Suggerimento
Corsi consigliati della Duda Academy:
-
Essenziali per la disposizione. Impara a conoscere le colonne e le colonne interne e come allineare e dimensionare gli elementi al loro interno.
-
Layout con griglie avanzate. Impara a costruire layout complessi con griglie avanzate.
Il widget colonna interna è consigliato per:
-
Layout modulari: Perfetto per creare layout modulari in cui il contenuto scorre in modo lineare, il che li rende ideali per menu di navigazione, schede o layout simili a elenchi.
-
Design Responsivo: Eccelle nel creare design responsive che si adattano perfettamente a diverse dimensioni di schermo e dispositivi, garantendo allineamento e leggibilità ottimali.
-
Contenuto dinamico: adatto per la gestione di contenuti dinamici che possono variare in lunghezza o dimensioni, consentendo ai progettisti di controllare dinamicamente il comportamento e il dimensionamento degli elementi all'interno di un contenitore.
-
Layout nidificati: le funzionalità di annidamento delle colonne interne li rendono adatti per la creazione di layout nidificati complessi. I progettisti possono annidare più colonne interne all'interno del contenitore esterno in base alle esigenze, offrendo flessibilità e adattabilità nella disposizione delle gerarchie di contenuto. Allo stesso modo, Advanced Grid offre la possibilità di nidificare widget, colonne interne e persino griglie avanzate aggiuntive all'interno della sua struttura di layout.
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 il dimensionamento degli elementi.
-
Disegni non lineari: Perfetto per la progettazione di layout non lineari in cui gli elementi devono essere posizionati indipendentemente dal loro ordine di origine per composizioni creative e disposizioni asimmetriche. Ciò significa che gli elementi possono essere posizionati e disposti in base ai requisiti di progettazione.
-
Web design reattivo: pur richiedendo un'attenta pianificazione, Advanced Grid fornisce un solido tool per la creazione di design reattivi. I designer possono definire regolazioni specifiche del layout, come il riordino delle colonne, l'estensione degli elementi e gli spazi della griglia a diverse dimensioni del viewport, garantendo una presentazione ottimale su vari dispositivi.
Quando dovrei usare un widget colonna interna rispetto a un widget griglia avanzata?
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 individualmente, 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 DOM, l'efficienza del rendering, il caricamento delle risorse, la reattività e riducendo al minimo le richieste HTTP. Le colonne interne, sebbene efficaci, possono coinvolgere più elementi HTML nidificati, portando potenzialmente a tempi di rendering leggermente più lenti rispetto alle griglie avanzate.
Puoi anche utilizzare sia il widget della colonna interna che il widget della griglia avanzata nella stessa sezione e in tutto il sito per ottenere i design desiderati. Ciò comporta la ricerca di un equilibrio tra la struttura generale del layout e i dettagli più fini dell'organizzazione dei contenuti.
Comprendere le relazioni genitore-figlio è fondamentale per sfruttare in modo efficace le colonne interne e le griglie avanzate. In questi sistemi di layout, gli elementi che ospitano le colonne fungono da genitore, mentre gli elementi all'interno, come i widget aggiuntivi, sono considerati come figli. Questa relazione determina il modo in cui gli elementi vengono posizionati e allineati all'interno del layout, garantendo coerenza e integrità strutturale nel tuo web design.
È 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 sia orizzontalmente che verticalmente. I requisiti includono una sezione che funga da contenitore flessibile e una colonna che ospiti le colonne interne con entrambi i tipi di colonne che fungono da elementi flessibili, che rappresentano rispettivamente l'elemento padre e figlio.
La griglia avanzata consente il posizionamento di elementi sia in direzione verticale che orizzontale. I requisiti includono una sezione che funga da contenitore e una griglia avanzata per dichiarare il layout della griglia sull'elemento padre o sul contenitore, facendo in modo che tutti i suoi figli diventino elementi della griglia.