Come riordinare gli elementi su diversi punti di interruzione in Divi 5

Il design reattivo richiede più che ridimensionamento dei layout, richiede anche il controllo di come si accumula i contenuti tra i dispositivi. Un design che sembra strutturato sul desktop può essere un ordine confuso sul cellulare, con barre laterali o elementi secondari che spingono i contenuti chiave fuori dalla vista. Divi 5 affronta questo con il suo nuovo sistema Flexbox, che introduce strutture di colonne reattive predefinite e controlli di ordinazione precisi.

In questo post, esamineremo perché gli elementi di riordino sono importanti, come gli strumenti Flexbox di Divi 5 lo rendono semplice e camminano attraverso i passaggi per ristrutturare i layout in diversi punti di interruzione.

Perché vorresti riordinare gli elementi

Quando un layout si sposta dal desktop al cellulare, l'ordine di impilamento non riflette sempre l'esperienza prevista. Un design del desktop a tre colonne equilibrato può crollare in uno stack verticale in cui la colonna sinistra viene sempre prima, spingendo un invito all'azione, il modulo di iscrizione o le informazioni di contatto lontano dalla pagina, in cui gli utenti potrebbero non vederlo mai.

Iscriviti al nostro canale YouTube

Il sistema Flexbox di Divi 5 fissa questo consentendo di riordinare gli elementi visivamente ad ogni punto di interruzione. È possibile spostare un CTA direttamente sotto il titolo su dispositivo mobile, portare testimonianze al di sopra di una tabella dei prezzi o evidenziare le informazioni di contatto prima del contenuto lungo. Invece di essere bloccato con la logica di impilamento predefinita del browser, decidi la gerarchia. Questo garantisce che i tuoi contenuti più importanti appaiano sempre dove conta di più.

Come Flexbox di Divi 5 semplifica il riordino

Divi 5 ti dà il controllo diretto su come gli elementi si accumulano nei punti di interruzione. È possibile utilizzare strutture di colonne flessibili predefinite per impostare layout che si adattano in modo naturale, quindi perfezionare le strutture della colonna e gli ordini di colonna ad ogni dimensione dello schermo.

Flexbox si comporta come un grande contenitore che si regola in base allo spazio. Invece di impilare il contenuto in modo casuale, si controlla l'ordine su ciascun dispositivo.

Divi 5 gestisce anche i layout nidificati e complessi. È possibile modificare le strutture delle righe, le dimensioni delle colonne e l'ordine del modulo in ciascun punto di interruzione senza copiare il contenuto o la codifica.

Gestisce anche automaticamente l'allineamento e il posizionamento verticali, rendendo i tuoi contenuti intenzionali, pienamente reattivi e non disposti casualmente.

Una guida passo-passo per il riordino reattivo in Divi 5

Diamo un'occhiata a come è possibile riordinare gli elementi in Divi 5 utilizzando il suo nuovo sistema Flexbox. I passaggi seguenti camminano attraverso l'impostazione delle strutture della colonna e la regolazione dell'ordine in diversi punti di interruzione in modo che i layout rimangano chiari e coerenti su ogni dispositivo.

1. Imposta i tuoi sette punti di interruzione personalizzati

Divi 5 ti dà sette punti di interruzione anziché tre. Puoi modificare ogni valore di pixel in modo che il tuo sito appaia proprio su qualsiasi dispositivo.

Fai clic sul menu Ellipsis nella barra delle applicazioni e trova gli interruttori a disattivazione del punto di interruzione. Ognuno ha intervalli predefiniti, ma puoi cambiare questi numeri per adattarsi meglio al tuo pubblico.

Vedrai il telefono (Under 767px), il telefono largo (sotto 860px), il tablet (sotto 980px), il tablet largo (sotto 1024px), il desktop (oltre 981px), il widescreen (oltre 1280px) e l'ultra largo (oltre 1440px).

Dopo averli attivati, le piccole icone compaiono nella tua barra delle attività. Fai clic su qualsiasi icona per vedere come il tuo sito esamina immediatamente quella dimensione dello schermo.

Invece di fare clic su ogni icona ed essere limitato nei test, puoi afferrare il bordo della tela e trascinarlo a sinistra oa destra. Il tuo design si restringe o si espande mentre tiri, mostrando come il tuo layout cambia in larghezze diverse.

Trascina la tela su 300px e guarda il layout desktop a tre colonne trasformarsi in un singolo stack mobile. Riportalo a 1200px e vedi di nuovo i contenuti. Non è necessario cambiare le modalità di anteprima o ridimensionare la finestra del browser.

2. Accedi ai controlli Flex

Fare clic sull'icona Impostazioni di qualsiasi riga per aprire il pannello Impostazioni sul lato destro. Passare alla scheda Design nella parte superiore di questo pannello. Nel menu Layout, troverai tutti i controlli Flexbox di Divi 5. Per impostazione predefinita, Flex è selezionato in stile layout.

Se non viene applicato al layout esistente, puoi cambiarlo in flessione con un clic.

Scorri verso il basso per individuare il campo di direzione del layout. Ciò determinerà l'ordine e il modo in cui compaiono le colonne (fianco a fianco o sopra e sotto l'altra).

Di seguito sono riportate le opzioni di contenuto giustificare per il controllo dell'allineamento e della distribuzione. Nel frattempo, le opzioni di allineamento degli articoli appaiono proprio sotto le opzioni di posizionamento.

3. Struttura del layout di perfezionamento per ogni dimensione dello schermo

I controlli Flexbox sono ora attivi, ma i layout desktop potrebbero richiedere regolazioni strutturali per schermi più piccoli. Un layout a tre colonne potrebbe funzionare magnificamente su un desktop ma diventare travolgente e affollato su un tablet, che richiede invece una griglia 2 × 2, ancora di più su un dispositivo mobile dove c'è solo spazio per una griglia.

Fortunatamente, le icone del dispositivo in alto a destra dei controlli ti consentono di visualizzare in anteprima il layout su schermi diversi e perfezionare le impostazioni Flexbox per ogni punto di interruzione. Questo ti consente di regolare il design in modo che sembri buono e funzioni bene su ogni dispositivo.

Passa al punto di interruzione del tablet e fai clic sul pulsante Modifica della struttura della colonna. Invece della configurazione corrente, scegli un layout simmetrico 2 × 2. Ciò rende immediatamente la vista meno schiacciante mostrando meno carte in ogni riga. Regola gli spazi verticali e orizzontali in base alle necessità per un aspetto equilibrato. Quindi selezionare la colonna CTA, impostare la sua classe di colonna su FullWidth sotto le impostazioni di dimensionamento e selezionare "Crescita per riempire".

La versione del tablet ora mostra due schede contemporaneamente, mantenendo quell'aspetto uniforme. Il pulsante di invito all'azione si trova bene nella riga in basso, facendolo risaltare, simile al layout del desktop. Questo aggiornamento aiuta a creare un'esperienza più pulita e più invitante che evita la sensazione ingombra di troppe opzioni affollate.

Per dispositivi mobili, utilizzare l'opzione della struttura della colonna Modifica per passare a una struttura a colonna singola. Nei controlli Flexbox, impostare la direzione del layout su una colonna inversa. Regola il divario su ciò che sembra migliore per i tuoi contenuti.

4. Riordinare le colonne attraverso i punti di interruzione

L'uso dei valori degli ordini è un ottimo modo per decidere manualmente l'ordine degli elementi figlio dei contenitori flessibili (spesso colonne) attraverso varie dimensioni dello schermo. La scheda Ordine nelle impostazioni della riga fornisce a ciascuna colonna un numero che dice al browser: "Mostra questa colonna in posizione 1, questa in posizione 2" e così via. I numeri più bassi appaiono per primi e numeri più alti appaiono per ultimi. Semplice come quello.

Puoi persino usare i numeri dell'ordine "0" o negativi come "-1" per forzare il contenuto specifico per apparire per primo, indipendentemente da altri valori.

Ogni Breakpoint supporta il proprio sistema di ordinazione, dando il controllo completo sul posizionamento degli elementi attraverso i dispositivi.

Diamo un'occhiata a un esempio pratico: sul desktop, seleziona la colonna 1 e imposta il suo ordine su 1. Seleziona la colonna 2 e imposta il suo ordine su "2" e facciamo lo stesso per il resto della colonna. Il layout del desktop scorre naturalmente da sinistra a destra, terminando con un invito all'azione.

Personalizzare l'ordine su tablet e cellulari

Ora, passare al punto di interruzione del tablet utilizzando il sistema di intervento del dispositivo. E modificare gli ordini di colonna:

Imposta la colonna 6 (invito all'azione) su "3" in modo che appare nella riga centrale. Lascia le colonne 1 e 2 come è, colonna 3 come 4 e il resto come desiderato. Gli utenti di tablet vedono la tua chiamata all'azione immediatamente dopo la proposta di valore, seguita dai dettagli di supporto.

Quindi, passa a Mobile utilizzando il sistema di intervento del dispositivo. Cambia l'ordine della colonna CTA in "3" e lascia l'ordine delle prime due colonne così com'è. Rendi il resto dell'ordine della colonna simile alla disposizione del tablet.

L'ordine di origine sottostante del tuo contenuto rimane lo stesso, ma il CTA si sposta dall'ultima posizione al terzo senza influire sul layout del desktop. In questo modo, puoi controllare come appaiono le sezioni in diversi punti di interruzione senza duplicare o ristrutturare i tuoi contenuti.

Controlla come tutto si accumula con Divi 5

Il nuovo sistema Flexbox di Divi 5 offre un controllo preciso su come il contenuto si accumula tra i dispositivi. Con sette punti di interruzione personalizzabili e ridimensionamento della tela live, è possibile visualizzare in anteprima e regolare i layout a qualsiasi dimensione dello schermo in tempo reale.

Invece di fare affidamento sull'ordine di impilamento predefinito del browser, decidi esattamente dove compaiono barre laterali, CTA e contenuti chiave. Flexbox ti consente di mantenere la gerarchia e la chiarezza su ogni dispositivo senza soluzioni o codice extra.