Tutto ciò che devi sapere sui punti di interruzione personalizzabili di Divi 5

Preparati a migliorare drasticamente il modo in cui crei siti Web. Divi 5 ha una nuova entusiasmante funzionalità, breakpoint personalizzabili, che ti dà un incredibile controllo sulla reattività del tuo sito. Con i nuovi punti di interruzione personalizzabili di Divi 5, puoi creare un'esperienza senza soluzione di continuità su tutti i dispositivi. Sia che tu stia progettando per un enorme display desktop o lo schermo mobile più piccolo, Divi 5 aiuta a garantire che il tuo sito Web appaia perfetta ogni volta.

In questo post, tratteremo tutto ciò che devi sapere su questa nuova funzionalità e ti mostreremo come usarla!

Guarda il seguente video per vedere la nuova funzionalità in azione.

Scarica Divi 5 con punti di interruzione personalizzabili

Con i punti di interruzione personalizzabili, ora puoi mettere a punto la reattività del tuo sito Web per adattarsi meglio alle dimensioni dello schermo diverse. Che tu stia progettando per desktop ultra larghi o ampi schermi mobili, Divi 5 mette il controllo nelle tue mani.

Posso già usare Divi 5 sul mio sito web?

Puoi utilizzare Divi 5 sul tuo sito Web, ma la sua disponibilità dipende dal tuo caso d'uso specifico. Divi 5 è attualmente nella fase pubblica alfa, il che significa che è ancora attivamente sviluppato e raffinato. Sebbene non sia ancora consigliato per tutti gli ambienti di produzione, ci sono scenari specifici in cui puoi iniziare a usarlo senza problemi.

Usa Divi 5 su siti locali e di gestione

Divi 5 è attualmente disponibile per ambienti locali e di gestione temporanei, consentendo agli utenti di testare in sicurezza le sue nuove funzionalità senza influire sui loro siti Web in diretta. Poiché Divi 5 è ancora nella fase pubblica alfa, questo approccio garantisce che gli utenti possano sperimentare i miglioramenti di Divi 5, segnalare i bug e fornire feedback mantenendo la stabilità dei loro siti di produzione.

È possibile utilizzare in sicurezza Divi 5 su nuovi siti Web di produzione

Divi 5 è stabile e pronto a lanciare siti Web nuovi di zecca. Se stai iniziando da zero, puoi sfruttare appieno le sue prestazioni veloci, il framework modulare e la tecnologia a prova di futuro senza preoccuparti dei problemi di compatibilità arretrati. Tuttavia, una fase di test approfondita è essenziale per i siti esistenti che si basano su estese integrazioni di terze parti prima della migrazione. A questo punto, non consiglia ancora di convertire i siti Web esistenti in Divi 5.

Comprendere i punti di interruzione personalizzabili di Divi

I punti di interruzione sono un aspetto fondamentale del design reattivo. Agiscono come soglie in cui i contenuti del tuo sito si riorganizzano per garantire un'esperienza utente ottimale, sia che qualcuno sta sfogliando uno smartphone, un tablet o un desktop.

I punti di interruzione di Divi 5 sono stati significativamente migliorati, offrendo maggiore flessibilità e controllo rispetto alle versioni precedenti di Divi. La personalizzazione di fino a sette punti di interruzione ti consente di mettere a punto la reattività del tuo sito per ospitare una gamma più ampia di dispositivi e dimensioni dello schermo.

Cos'è un punto di interruzione?

Un breakpoint è una larghezza specifica dello schermo in cui il design del tuo sito Web si adatta per fornire un'esperienza di visualizzazione ottimale su diversi dispositivi. I punti di interruzione aiutano a garantire che il contenuto rimanga leggibile, visivamente accattivante e facile da navigare, indipendentemente dalle dimensioni dello schermo.

I siti Web reattivi sono progettati utilizzando le query multimediali CSS, che consentono di applicare diversi stili quando una schermata raggiunge una larghezza particolare. Quando le dimensioni dello schermo di un visitatore attraversano un breakpoint definito, il sito Web regola automaticamente il suo layout, i caratteri, la spaziatura o altri elementi di design per mantenere l'usabilità.

Con l'introduzione di più punti di interruzione in Divi 5, è possibile limitare la necessità di query multimediali CSS per definire i punti di interruzione per altri dispositivi.

Quanti punti di interruzione dovrei usare?

Il numero di punti di interruzione dipende dall'utilizzo del dispositivo del tuo pubblico. Gli utenti accedono ai siti Web su varie dimensioni dello schermo, dai piccoli smartphone alle schermi desktop ultra larghi. Tradizionalmente, i web designer hanno utilizzato tre punti di interruzione standard - desktop, tablet e dispositivi mobili - ma Divi 5 espande questa capacità, consentendo fino a 7 punti di interruzione personalizzabili per una maggiore flessibilità.

Abilitare più punti di interruzione rallenterà il mio sito?

No, abilitare più punti di interruzione in Divi 5 non rallenterà i tuoi siti Web. A differenza dei vecchi metodi di gestione del design reattivo, il nuovo framework di Divi 5 è ottimizzato per le prestazioni, garantendo che ulteriori punti di interruzione non aggiungano carichi inutili al tuo sito.

I punti di interruzione sono abilitati a livello di sito Web o pagina?

I punti di interruzione in Divi 5 sono abilitati e applicati a livello del sito Web, non su base per pagina. Una volta abilitato e personalizzato i punti di interruzione, influenzeranno l'intero sito Web, garantendo un design coerente e reattivo in tutte le pagine. Qualsiasi modifica apportata ai punti di interruzione regolerà universalmente il modo in cui il tuo sito risponde alle diverse dimensioni dello schermo piuttosto che essere limitato alle singole pagine.

Come funzionano i punti di interruzione personalizzabili in Divi

Il sistema altamente flessibile e intuitivo di Divi 5 è perfetto per gestire i punti di interruzione, dandoti un maggiore controllo sul design reattivo del tuo sito Web. A differenza delle versioni precedenti, Divi 5 consente di personalizzare fino a 7 punti di interruzione, garantendo che il tuo sito sembra perfetto su ogni dispositivo. Questo sistema è progettato per essere intuitivo mentre offre opzioni avanzate per coloro che ne hanno bisogno.

Dove trovare punti di interruzione

In Divi 5, i punti di interruzione sono integrati nelle impostazioni della tua pagina, rendendoli facili da individuare e personalizzare. Puoi accedervi direttamente all'interno del Visual Builder, garantendo un flusso di lavoro semplificato.

Come abilitare i punti di interruzione

Apri la pagina che si desidera modificare e attivare Visual Builder facendo clic su Modifica con Divi .

Fai clic sul menu Ellispsis (tre punti) situato nella barra delle applicazioni principali del Visual Builder.

All'interno delle impostazioni, troverai una serie di interruttori a levetta che consentono di abilitare o disabilitare i punti di interruzione secondo necessità.

Una volta attivato, ogni punto di interruzione sarà visibile nella barra delle applicazioni, consentendo di apportare modifiche in tutto il design senza fare clic sui controlli reattivi in ​​singoli righe o moduli per regolare le impostazioni.

Dovresti usare i punti di interruzione standard o il tuo?

I punti di interruzione standard di Divi 5 sono progettati per coprire le dimensioni dello schermo più comuni, inclusi telefoni, tablet e desktop. Questi punti di interruzione predefiniti sono più che sufficienti per molti designer, in quanto soddisfano la maggior parte degli utenti e dei dispositivi.

Tuttavia, ci sono scenari in cui la creazione di punti di interruzione personalizzati può essere utile. Ad esempio, se si desidera ospitare monitor ultra larghi, smartphone pieghevoli o tablet più piccoli, i punti di interruzione personalizzati possono aiutarti a modificare il design per questi casi d'uso.

Utilizzo di punti di interruzione personalizzati in Divi 5

Personalizzare i punti di interruzione reattivi è utile per affrontare le stranezze del design o i problemi di visualizzazione dei contenuti su dispositivi meno comuni o risoluzioni dello schermo. Possono anche aiutare a migliorare le prestazioni del sito Web caricando solo gli stili necessari per una determinata dimensione dello schermo, riducendo i tempi di caricamento della pagina.

Per fortuna, Divi 5 rende incredibilmente facile personalizzare questi punti di interruzione reattivi con pochi clic.

Con le impostazioni reattive del dispositivo, imposta il punto di interruzione del telefono sulla larghezza desiderata, quindi ripeti i passaggi per altri dispositivi. Dal momento che vogliamo rendere il sito accessibile per dispositivi più piccoli, imposteremo il numero su 360px per i telefoni. Dopo aver aggiunto i pixel desiderati, fai clic sul pulsante Salva per continuare.

Divi 5 ti farà sapere che stai per regolare i punti di interruzione del tuo sito. Fai clic sul pulsante Aggiorna per confermare la modifica.

Aggiungeremo i seguenti punti di interruzione per le restanti dimensioni dello schermo:

Questi punti di interruzione coprono una gamma di dispositivi per garantire che il tuo sito Web copra la maggior parte delle dimensioni dello schermo e dei casi d'uso:

• Telefono: 767px copre la maggior parte delle dimensioni dello schermo dello smartphone, inclusi modelli più vecchi come iPhone 8 o Samsung G7.
• Telefono: 860px copre la maggior parte delle schermate telefoniche in modalità paesaggio, tra cui iPhone 14 Pro (e oltre) e i moderni dispositivi Android.
• Tablet: 980px è buono per la maggior parte delle schermate di tablet in modalità ritratto, compresi tutti gli iPad.
• Tablet Warge: 1024px è standard per la vista paesaggistica nella maggior parte dei tablet iPad e Samsung.
• Widescreen: 1280px è una buona larghezza per la maggior parte dei laptop più piccoli (Windows o MacOS), tra cui MacBook Air, MacBook Pro 13 ″ e dispositivi Windows comparabili.
• Ultrawide: 2560px copre schermi desktop più grandi, come laptop MacBook Pro 15 ″ e 16 ″, iMacs e monitor standard ad alta definizione.

Personalizzando il tuo design reattivo all'interno dei preset

Uno degli aspetti più potenti di Divi 5 è il modo in cui i suoi punti di interruzione personalizzabili si integrano perfettamente con i preset. Ciò ti consente di creare un design veramente reattivo in tutto il tuo sito Web con uno sforzo minimo. Un esempio perfetto è la modifica della preimpostazione H1 di un sito di avviamento per garantire che tutti gli H1 siano perfetti ad ogni dimensione dello schermo.

Inizia facendo clic su qualsiasi parte all'interno della sezione H1 nella sezione Hero per visualizzare le sue impostazioni.

Quindi, fai clic sul campo di intestazione dell'intestazione nell'intestazione del modulo.

Apparirà un elenco di preimpostazioni. Individua il preset che ha un segno di spunta blu accanto ad esso.

Passa il mouse sul preimpostazione attiva per rivelare le sue impostazioni. Fai clic sull'icona delle impostazioni per modificarlo.

Fai clic sulla scheda Design e regola la dimensione del testo dell'intestazione sulla dimensione desiderata.

Tenere aperte le impostazioni preimpostate e fare clic sulla dimensione della schermata successiva nella barra delle applicazioni Divi 5 per regolare le dimensioni dell'intestazione.

Ripeti i passaggi sopra per regolare le preimpostazioni dell'intestazione per le restanti dimensioni dello schermo. Una volta completato questo, fai clic sul pulsante Salva preimpostazione .

Quando si scambiano i punti di interruzione, le variazioni delle dimensioni si rifletteranno nella preset di intestazione.

Editing reattivo in Divi 4 vs Divi 5

Divi è sempre stato un leader nel design reattivo, ma Divi 5 lo porta a un livello completamente nuovo. Mentre Divi 4 ha fornito solide basi per la creazione di siti Web reattivi, Divi 5 porta funzionalità che rendono l'editing reattivo più intuitivo, flessibile e potente che mai. Ecco uno sguardo più attento a come Divi 5 migliora le capacità di Divi 4.

Transizione senza sforzo tra i punti di interruzione

In Divi 4, passare da un punto di interruzione è piuttosto semplice ma comporta più tempo e non è liscio come la transizione che puoi trovare in Divi 5.

Divi 5 migliora questo flusso di lavoro con un'interfaccia più liscia e intuitiva. Ora puoi passare istantaneamente tra i punti di interruzione, in anteprima il tuo design mentre ti regola, senza ritardo. Questa nuova versione di Divi ti consente di apportare modifiche al design al volo in base al punto di interruzione che stai visualizzando. Non c'è più passaggio tra le modalità o il costante attivazione. Questa esperienza senza soluzione di continuità risparmia tempo e garantisce un design più coeso e lucido in ogni punto di interruzione.

Da 3 a 7 punti di interruzione

Divi 4 supporta 3 diversi punti di interruzione; Questi possono essere trovati anche in Divi 5.

• Desktop: 981px e sopra
• Tablet: <980px
• Mobile: <767px

Mentre questi punti di interruzione coprono le basi, a volte non rientrano quando si adattano alla varietà di dispositivi e dimensioni dello schermo utilizzate dal pubblico moderno. A volte i progettisti possono aver bisogno di query multimediali CSS per indirizzare diverse dimensioni dello schermo, in particolare per i monitor ultra larghi o i dispositivi mobili più piccoli.

Divi 5 ha affrontato questa limitazione espandendo il numero di punti di interruzione a 7 opzioni personalizzabili, rendendo più facile colpire un numero maggiore di dispositivi.

• Telefono: <767px
• Telefono: < 860px
• Tablet: <980px
• Tablet largo: < 1024px
• Desktop: > 981px
• Widescreen: > 1280px
• Ultra largo: > 1440px

Questa maggiore flessibilità ti consente di mettere a punto il tuo design per una gamma più ampia di dispositivi, garantendo che il tuo sito sembra perfetto su tutto, dagli smartphone compatti a monitor di grandi dimensioni e ad alta risoluzione. Ad esempio, ora è possibile creare un interruzione del tablet dedicato in modalità paesaggio o ottimizzare il tuo sito per schermate ultra larghe utilizzate nelle impostazioni professionali.

Ridimensionamento della tela per il controllo completo

Una delle nuove funzionalità più interessanti di Divi 5 è il ridimensionamento della tela, che offre ai designer un controllo senza precedenti su come il loro sito Web appare in diverse risoluzioni.

Questo è l'aspetto del ridimensionamento della tela in Divi 4:

La funzione di risveglitura della tela di Divi 5 rende l'intera esperienza ancora più intuitiva. Con pochi clic, è possibile ridimensionare la tela di design per abbinare risoluzioni specifiche dello schermo, mostrando esattamente come apparirà il tuo sito su diversi dispositivi. Questa funzione è utile per testare schermi mobili più piccoli o monitor desktop ultra larghi, garantendo che il tuo design sia impeccabile, ma la tavola.

Divi 5 è incluso per sempre nella tua iscrizione a vita

I punti di interruzione personalizzabili di Divi 5 consentono ai progettisti di creare siti Web reattivi con maggiore precisione. Sia che tu stia perfezionando un layout esistente o costruisci un sito da zero, questi nuovi strumenti ti danno la flessibilità di creare esperienze perfette per ogni dimensione dello schermo.

Una delle parti migliori di Divi 5 è che sarà incluso per sempre nel tuo abbonamento Divi (senza costi aggiuntivi). Se aggiorni oggi a un abbonamento a vita Divi, otterrai l'accesso (e gli aggiornamenti) a Divi 5 per una tassa una tantum e beneficia di questo prodotto in evoluzione per gli anni a venire.