La riprogettazione completa di Divi 5 offre velocità, prestazioni e semplicità d'uso senza pari. Con un Visual Builder semplificato e un back end completamente ricostruito, creare siti Web con Divi 5 è più veloce e semplice che mai. Divi 5 ti consentirà, indipendentemente dal livello di esperienza, di sviluppare siti fantastici in tempi record senza sacrificare tempo o creatività.
Vieni a dare un'occhiata alla nuova interfaccia utente di Divi 5 durante questo periodo di Public Alpha. Ricorda che questa iterazione è ancora in fase di sviluppo attivo. Sebbene tu possa trovare alcuni difetti, i consigli di seguito ti consentiranno di massimizzare la tua produttività mentre testi e sviluppi con Divi 5.
10 modi migliori per creare un sito Web più veloce con Divi 5
Dall'uscita di Divi 5 Public Alpha sono state implementate numerose modifiche e miglioramenti.
1. Sfrutta la modifica con un clic
In Divi 4, devi cliccare sull'icona delle impostazioni per modificare sezioni, righe e moduli. Con Divi 5, la modifica con un clic ha eliminato tutto questo. Il modulo può essere modificato cliccando ovunque al suo interno, il che velocizza e riduce la frustrazione del processo di progettazione.
Create Amazing Websites
Con il miglior generatore di pagine gratuito Elementor
Parti oraAd esempio, per modificare un modulo di testo, basta fare clic in un punto qualsiasi del modulo per accedere immediatamente alle sue impostazioni.
2. Per eseguire azioni rapide, fare clic con il pulsante destro del mouse
Il menu contestuale di clic destro in Divi 5 ti offre una nuova preziosa scorciatoia per il tuo processo di progettazione. Qualsiasi modulo, sezione o riga può essere cliccato con il tasto destro per creare un menu di azioni rapide con alcune attività usate di frequente. Questo strumento ti consente di completare rapidamente le operazioni senza aprire diversi pannelli o cercare tra le opzioni, sia che tu voglia copiare stili di modulo, duplicare impostazioni o eliminarle.
Ad esempio, supponiamo di aver creato un pulsante con uno stile unico. Utilizzando l'opzione azioni rapide, puoi fare clic con il pulsante destro del mouse, copiare lo stile del pulsante e applicarlo a tutti i moduli pulsante su cui vuoi che abbia lo stesso stile.
3. Ancorare più pannelli con schede per varie attività
Un'altra fantastica nuova funzionalità di Divi 5 è il docking multi-pannello, che consente di aprire e controllare molti pannelli contemporaneamente. Nelle versioni precedenti era possibile visualizzare molti pannelli (ad esempio, livelli + impostazioni modulo), ma era possibile solo spostarli sulla tela senza ostruire la visuale. Per mantenere la tela libera da ingombri, è possibile usare i pannelli Tab in Divi 5.
Quando puoi documentare più pannelli affiancati, è semplice modificare diversi aspetti del tuo design contemporaneamente. L'interfaccia di Divi 5 ti consente di disporre i pannelli sulla tela come preferisci, creando l'area di lavoro ideale per le tue esigenze. Supponi, ad esempio, che preferiresti avere ogni pannello sul lato sinistro della tela. Per creare un'area di lavoro adatta a te, puoi staccare e spostare i pannelli a sinistra, quindi usare la scheda per altri pannelli.
4. Utilizza il ridimensionamento della tela a tuo vantaggio nel design reattivo
Divi 5 offre un approccio completamente nuovo alla creazione di pagine web responsive. Grazie al ridimensionamento della tela, puoi ridimensionare rapidamente il tuo spazio di lavoro e vedere come apparirà il tuo sito web su schermi diversi senza mai uscire da Visual Builder. Puoi anche ridimensionare rapidamente la tela di progettazione, il che ti consente di modificare il layout, il padding e i margini.
Considera il seguente scenario: stai lavorando su un layout mobile e vuoi modificare la distanza tra le parti. Per regolare la scala della tela, clicca e trascina il bordo della tela fino alla dimensione desiderata. Da lì, puoi rapidamente regolare margini e padding per assicurarti che il tuo design sia nitido su display di piccole dimensioni.
5. Applica immediatamente gli effetti Hover e Sticky
Aggiungere effetti hover e sticky ai tuoi design è ora più facile che mai con Divi 5. Nelle precedenti iterazioni di Divi, gli utenti dovevano andare alla scheda design del modulo e inserire le impostazioni. Tuttavia, Divi 5 ti consente di applicare questi effetti direttamente dal menu delle impostazioni. Grazie a questo metodo innovativo, creare design dinamici e accattivanti senza interferire con il tuo flusso di lavoro è ora più semplice che mai.
Divi 5 semplifica e velocizza l'applicazione di effetti hover ai pulsanti e mantiene l'intestazione in cima allo schermo mentre gli utenti navigano. Ad esempio, supponiamo che tu voglia aggiungere un colore diverso al passaggio del mouse quando crei una call to action. Per applicare le modifiche in pochi secondi, scegli lo stato hover da un menu a discesa nelle impostazioni.
6. Per una navigazione più efficace, usa i breadcrumb
Una nuova funzionalità breadcrumb in Divi 5 rende più facile e veloce per gli utenti accedere a moduli e impostazioni. Grazie ai breadcrumb, puoi navigare tra i layout senza perderti. Servono come guida visiva che indica la tua posizione esatta all'interno delle impostazioni.
Quando lavori all'interno di una sezione, non devi tornare indietro tramite i menu o perdere il segno. Per velocizzare il processo di progettazione, ogni breadcrumb offre un collegamento cliccabile che ti consente di tornare rapidamente a un preset precedente.
7. Copia e incolla gli stili tra i moduli per risparmiare tempo
Divi 5 semplifica il copia e incolla degli stili dei moduli tra varie parti. Ciò consente di risparmiare tempo e garantisce coerenza nel tuo sito, consentendoti di applicare rapidamente le stesse impostazioni di progettazione su vari moduli. Divi 5 semplifica gli stili da qualsiasi modulo, riga o sezione e li utilizza in tutto il tuo design.
Ad esempio, supponiamo che tu voglia che tutti i pulsanti di una pagina web abbiano lo stesso design. Puoi applicare lo stile facendo clic con il pulsante destro del mouse per aprire il menu Azioni rapide, copiando lo stile e quindi facendo clic con il pulsante destro del mouse per incollarlo su ogni pulsante della pagina.
8. Quando si creano layout complessi, utilizzare la vista Wireframe
La vista wireframe in Divi 5 elimina i componenti di progettazione visiva di una pagina, rivelando un layout blueprint chiaro e semplice. In questa vista, puoi concentrarti interamente sulla struttura, libero da distrazioni visive come colori e font. È utile per layout complessi quando devi apportare rapidamente modifiche strutturali.
Con questa versione semplificata, puoi concentrarti sulla disposizione di sezioni, righe e moduli. La vista wireframe ti consente di gestire la struttura di un progetto complesso senza preoccuparti dell'estetica.
9. Utilizzare contenuti di formato lungo nella visualizzazione Livelli
La Layers View delinea le sezioni, le righe e i moduli della tua pagina. Ciò semplifica la visualizzazione rapida dell'intera struttura del tuo layout. Puoi trovare facilmente un pezzo o un modulo specifico nel pannello Layers anziché navigare attraverso Visual Builder.
Ogni elemento nel layout può essere selezionato e modificato immediatamente nella Layers View senza dover fare clic su di esso nel Builder. Ciò è particolarmente utile per i pezzi che sono annidati in profondità all'interno di altri moduli o nascosti, come le righe all'interno di diversi layer di sezioni.
10. Sii aperto all'apprendimento di cose nuove
Divi 5 offre un approccio completamente diverso all'utilizzo di Visual Builder. C'è una curva di apprendimento associata a tutti questi aggiornamenti significativi. All'inizio, è normale sentirsi un po' sopraffatti, in particolare se si è abituati alle precedenti iterazioni di Divi. La buona notizia è che ogni modifica apportata a Builder è semplice da utilizzare, quindi familiarizzare con l'interfaccia utente ti aiuterà a creare siti Web con Divi in modo più rapido ed efficace.
Conclusione
L'interfaccia di Divi 5 è progettata per migliorare la produttività, ma gli utenti dovrebbero sperimentarla agganciando più pannelli, utilizzando le scorciatoie con il tasto destro del mouse e rivisitando i design esistenti.
Divi 5 Migrator può aiutarti a mettere a punto i design. Inizia con semplici funzionalità come il ridimensionamento della tela e gli strumenti di effetti hover e sticky. Man mano che acquisisci familiarità con Divi 5, incorporerai naturalmente più funzionalità nel tuo processo di design. Sperimenta diverse impostazioni, gioca con la nuova interfaccia e affina le tecniche per rendere il tuo flusso di lavoro più fluido ed efficiente.
