5 suggerimenti per navigare nell'interfaccia di Divi 5 come un professionista

Con il rilascio della Public Alpha di Divi 5, gli utenti possono ora esplorare i potenti miglioramenti che si stanno preparando dietro le quinte di Elegant Themes. Divi 5 è un aggiornamento importante, che offre una base rinnovata per velocità, stabilità e scalabilità migliorate. Che tu sia un professionista esperto o che tu abbia appena iniziato con Divi, questo nuovo Visual Builder ti consentirà di creare siti Web in modo più efficiente, con meno passaggi e tempi di caricamento più rapidi. Partecipa a questo nuovo aggiornamento di Elegant Themes e naviga come un professionista.

Scopri di più su Divi 5 Public Alpha e come scaricarlo.

Scarica Divi 5 Public Alpha

5 suggerimenti per padroneggiare l'interfaccia Divi 5

La navigazione nell'interfaccia di Divi 5 può essere entusiasmante sia per gli utenti nuovi che per quelli esperti. L'interfaccia aggiornata fornisce un nuovo approccio alla creazione di siti Web con il suo design moderno e funzionalità migliorate. Ecco alcuni suggerimenti che abbiamo condiviso per aiutarti a familiarizzare con l'interfaccia:

1. Accedi rapidamente agli elementi tramite la visualizzazione dei livelli

Il pannello dei livelli non è una novità per Divi 5. Abbiamo la visualizzazione dei livelli in Divi 4. Tuttavia, è stata dotata di un'interfaccia utente migliorata con un accesso più semplice dalla barra laterale sinistra. È anche uno dei principali pannelli agganciabili che vorrai tenere in vista durante le tue build. È un punto di svolta per la gestione di layout complessi, soprattutto quando gli elementi si sovrappongono o diventano difficili da selezionare. È anche utile cercare/filtrare in base ai diversi elementi che stai cercando per trovare rapidamente più elementi su pagine di grandi dimensioni.

Apri il pannello Livelli sulla sinistra dello schermo per visualizzare tutti gli elementi nel tuo layout, indipendentemente dalla loro posizione o visibilità sulla tela. Puoi selezionare qualsiasi livello direttamente da lì, anche se nascosto dietro un altro modulo o sezione.

Suggerimento professionale

Mantieni sempre visibile la visualizzazione dei livelli come uno dei pannelli ancorati. È semplicemente troppo utile e conveniente per essere ignorato.

Esempio pratico

Supponiamo che tu voglia aggiornare tutti i pulsanti CTA sulla tua pagina con nuovi contenuti. In Divi 5, puoi utilizzare il pannello dei livelli per cercare l'elemento (pulsante) desiderato per visualizzarli tutti. Quindi, con un solo clic su ciascun pulsante, puoi aggiornare le impostazioni nel pannello delle impostazioni, che verrà immediatamente visualizzato. Questo flusso di lavoro fluido rappresenta un punto di svolta nella gestione di progetti complessi e ricchi di contenuti.

2. Velocizza le modifiche con i pannelli agganciabili e con un clic

I pannelli agganciabili di Divi 5 e le funzionalità di modifica con un clic ti consentono di mantenere aperti più pannelli delle impostazioni apportando modifiche rapide con un solo clic. Ciò consente regolazioni rapide e una navigazione più fluida nel modulo senza dover aprire e chiudere ripetutamente i pannelli.

Suggerimento professionale

Mantieni i pannelli pertinenti agganciati al lato dello schermo per un accesso rapido, soprattutto quando lavori su più sezioni o moduli contemporaneamente. Ciò riduce il numero di clic necessari e accelera il flusso di lavoro.

Esempio pratico

Continuando con l'esempio del nostro primo suggerimento, è necessario modificare il testo dei pulsanti di tutti i moduli. Ancorando sia i livelli che i pannelli dei pulsanti sullo stesso lato, puoi passare facilmente dall'uno all'altro per modifiche rapide con un solo clic, risparmiandoti il ​​fastidio di riaprire i pannelli ogni volta che devi apportare modifiche o dover spostare il cursore da uno all'altro. fine dello schermo all'altra. Questa configurazione è ideale quando si lavora su più sezioni che necessitano di aggiornamenti.

3. Semplifica la navigazione con i breadcrumb del pannello Impostazioni

I breadcrumb nel pannello delle impostazioni sono una caratteristica unica di Divi 5. I breadcrumb consentono agli utenti di navigare verso uno qualsiasi degli elementi principali di un elemento figlio in Divi direttamente dal pannello delle impostazioni. Un elemento genitore è fondamentalmente il contenitore dell'elemento figlio. Ecco una semplice illustrazione della struttura genitore e figlio degli elementi Divi.

Anche i moduli hanno elementi secondari (come una fisarmonica o un modulo di contatto) e le sezioni hanno "Pagina" come genitore, il che rende i breadcrumb ancora più utili. In precedenza, in Divi 4, dovevi fare affidamento sulla visualizzazione dei livelli o provare a trovare l'elemento principale facendo clic all'interno del builder.

Quando apri le impostazioni per qualsiasi modulo in Divi 5, nella parte superiore del pannello delle impostazioni viene visualizzata una traccia di breadcrumb. Questo percorso mostra la tua posizione attuale e ti consente di tornare all'elemento principale con un solo clic. Di seguito è riportato un esempio di cosa sono i breadcrumb quando viene selezionato un elemento a fisarmonica. Vedrai "Fisarmonica" come uno dei collegamenti nel menu breadcrumb perché è il genitore immediato dell'elemento fisarmonica selezionato.

I breadcrumb sono particolarmente utili quando si progettano moduli di contatto o CTA che utilizzano più elementi principali per creare un unico design. Una volta progettato il modulo, puoi facilmente passare all'elemento colonna o riga per adattare il design di conseguenza.

Esempio pratico

Supponiamo che tu stia progettando un modulo di contatto e desideri incorporare la riga e la sezione nel tuo progetto. Puoi apportare le tue modifiche e utilizzare i breadcrumb per accedere agli elementi principali di cui hai bisogno, il tutto senza mai chiudere il pannello.

4. Design reattivo senza sforzo con ridimensionamento della tela

In Divi 5 puoi ridimensionare la tela in tempo reale per simulare come apparirà il tuo progetto su dispositivi mobili, tablet e desktop. Questo strumento ti consente di ridimensionare visivamente l'area di disegno senza uscire dal builder, il che significa che non è più necessario passare alla modalità di anteprima o ridimensionare manualmente la finestra del browser. Il builder di Divi 5 si adatta automaticamente man mano che ridimensioni l'area di disegno per visualizzare le modifiche per quella specifica dimensione del dispositivo, semplificando la messa a punto dei design reattivi.

Suggerimento professionale

Utilizza il ridimensionamento tela per garantire che i tuoi progetti mobili siano perfetti. Regola la spaziatura interna, i caratteri e l'allineamento nella visualizzazione mobile in modo che il tuo layout funzioni perfettamente su schermi più piccoli.

Esempio pratico

Dopo aver apportato le modifiche al testo, ora devi assicurarti che il design abbia un bell'aspetto sui dispositivi mobili. Utilizzando Canvas Scaling, puoi regolare facilmente il layout per le visualizzazioni su dispositivi mobili e tablet senza passare da un dispositivo o uno schermo diverso.

Per ulteriori informazioni, scopri come padroneggiare l'editing reattivo in Divi 5.

5. Semplificazione di diversi livelli di interazione su diverse modalità di visualizzazione

Divi 5 semplifica la gestione degli effetti al passaggio del mouse, degli elementi adesivi e del design reattivo. In Divi 4, dovevi abilitare manualmente queste impostazioni per ciascun elemento e spesso passare da un pannello all'altro, rendendo dispendioso in termini di tempo l'applicazione e l'anteprima degli effetti. Divi 5 semplifica questo processo rendendo disponibili i livelli di interazione direttamente all'interno dello stesso pannello delle impostazioni, riducendo il numero di passaggi e clic necessari per mettere a punto il tuo design.

Come funziona

In Divi 5, le opzioni di progettazione per gli stati hover, persistente e reattivo sono integrate direttamente nel pannello delle impostazioni di ciascun modulo. Puoi passare rapidamente dallo stato predefinito, al passaggio del mouse e permanente facendo clic sulle schede nelle impostazioni del modulo. Questa interfaccia intuitiva ti consente di applicare effetti di progettazione, come animazioni al passaggio del mouse o comportamenti permanenti, senza navigare attraverso menu diversi o codificarli manualmente.

Suggerimento professionale

Passa dalla modalità al passaggio del mouse a quella fissa per visualizzare in anteprima come si comporteranno gli elementi di progettazione su tutti i dispositivi e durante le interazioni. Divi 5 rende facile vedere gli effetti in tempo reale e regolarli rapidamente. In precedenza, in Divi 4, dovevi applicare le modifiche a ogni rispettiva funzionalità, il che richiedeva molto tempo.

Esempio pratico

Abbiamo aggiunto un pulsante per la consultazione sulla nostra homepage. Con i livelli di interazione ottimizzati di Divi 5, puoi alternare tra le impostazioni reattive, il passaggio del mouse e gli stati permanenti direttamente nello stesso pannello delle impostazioni, assicurando che ogni elemento si comporti perfettamente su tutti i dispositivi. Inizieremo cambiando il colore di sfondo del pulsante della nostra home page e verificandone il comportamento nelle impostazioni reattive.

Proseguiremo andando in modalità passaggio del mouse, modificando il colore di sfondo del pulsante e tornando alla modalità desktop dopo aver apportato le modifiche. Ciò mostrerà che il pulsante nella versione desktop avrà il suo colore originale (nero) prima che il cursore venga spostato verso di esso.

Infine, attiveremo la modalità fissa prima di verificare il comportamento del pulsante in modalità fissa. Ciò ti consente di applicare e visualizzare in anteprima rapidamente gli effetti mentre scorri su visualizzazioni diverse senza uscire dal builder o abilitare impostazioni separate.

Scopri di più su come Divi 5 semplifica i processi di progettazione qui.

Navigare in Divi 5 come un professionista

Padroneggiando queste funzionalità essenziali dell'interfaccia Divi 5, puoi navigare tra i tuoi progetti in modo più efficiente ed evitare frustrazioni comuni che possono rallentare il tuo flusso di lavoro. Che si tratti di utilizzare il pannello Livelli per gestire elementi sovrapposti o di sfruttare la modifica con un clic e il ridimensionamento della tela per un design reattivo, questi suggerimenti ti aiuteranno a ottenere il massimo da Divi 5.

Inizia a sperimentare questi strumenti nella Divi 5 Public Alpha e porta i tuoi progetti al livello successivo. Per ulteriori suggerimenti e risorse su come iniziare con Divi 5, consulta la nostra panoramica completa dell'interfaccia e altri post del blog.

Scarica Divi 5 Public Alpha