Modi più veloci per aggiornare la progettazione della tua pagina con Divi 5

Divi 5 introduce una manciata di nuovi strumenti intelligenti per aiutarti a lavorare più velocemente e progettare più liberamente. Ma con così tanta potenza a portata di mano, è facile sentirsi incerti su da dove cominciare, soprattutto quando si aggiorna un layout esistente.

Probabilmente sai già come modificare la spaziatura, regolare i colori e pulire i layout, quindi questo post non riguarda il riapprendimento delle basi. Si tratta di farlo più velocemente con Divi 5. Nei passaggi seguenti, attraversiamo un flusso di lavoro di aggiornamento pratico che puoi seguire su qualsiasi pagina esistente. E se i recenti cambiamenti sono stati schiaccianti, inizia qui. Ti allegerai con chiarezza e fiducia.

8 passaggi per aggiornare la progettazione della pagina con Divi 5

Per questo tutorial, stiamo utilizzando la pagina di destinazione CV aziendale dalla libreria di pacchetti di layout Divi.

Iscriviti al nostro canale YouTube

Cammineremo attraverso come aggiornare la pagina usando i nuovi strumenti di Divi 5, come trovare e sostituire, design variabili ed estendere gli attributi, per accelerare il flusso di lavoro e ridurre le modifiche ripetitive. Iniziamo.

1. Ottimizza la dashboard per l'editing senza distrazioni

Anche interruzioni minori possono rompere la tua attenzione quando si aggiorna un layout. Potresti saltare tra le sezioni, l'apertura ripetuta delle impostazioni e perdere la traccia di dove ti sei interrotto. Questi tipi di ritardi si sommano rapidamente, specialmente su pagine più lunghe o più complesse.

Divi 5 aiuta a ridurre quell'attrito con un ambiente di editing più flessibile. È possibile attraversare i pannelli per mantenere visibili le impostazioni dei tasti, aprire più moduli nelle schede e utilizzare il pannello Layer per navigare nel layout senza scorrimento infinito. Invece di fare clic e uscire dai moduli, puoi mantenere tutto aperto e accessibile mentre ti muovi.

Il pannello dei livelli offre una panoramica strutturale completa del layout, in modo da poter passare immediatamente a qualsiasi sezione, riga o modulo semplicemente facendo clic. È particolarmente utile per saltare su grandi pagine senza scorrere.

In precedenza, il flusso di lavoro spesso significava aprire un modulo, salvarlo, scorrere di nuovo, aprire quello successivo e ripetere quel ciclo. Divi 5 salta tutto questo. Puoi aprire diversi moduli schiena contro schiena; Ognuno rimane visibile come scheda nel pannello di editing. Ciò semplifica il confronto delle impostazioni o il cambio di elementi senza ripetutamente chiusura e riapertura delle impostazioni degli elementi.

Potrebbe essere necessario un po 'di regolazione per abituarsi al nuovo flusso di lavoro. Poiché i pannelli si comportano in modo diverso, quindi il passaggio da un modulo non avvertirà subito la seconda natura. Ma dai un po 'di pratica e questi piccoli cambiamenti iniziano ad aggiungere.

Mentre segui i passaggi seguenti, prova a lavorare con i pannelli in modo diverso, anchina alcuni, impila un paio di linguette o tieni aperto il pannello dei livelli. Inizierai a sentire ciò che funziona meglio per il tuo flusso.

2. Imposta prima le tue variabili di progettazione globale

Quando gestisci un layout completo, l'ultima cosa che desideri è ripetere te stesso. Ma è esattamente quello che succede quando ogni stile è impostato manualmente all'interno di ogni modulo. All'inizio potrebbe funzionare, ma nel tempo la tua pagina si trasforma in un patchwork di scelte disconnesse. Alla fine, qualcosa viene sempre perso.

Le variabili di progettazione ti aiutano a evitarlo. Ti danno un posto centrale per definire il tuo linguaggio di design. Definisci valori riutilizzabili per caratteri, colori, spaziatura, immagini, URL o collegamenti. Una volta applicati, questi valori rimangono collegati a ogni modulo che li utilizza.

Ecco un semplice esempio. Dì che vuoi che tutte le tue intestazioni utilizzino il carattere Lato. Invece di scegliere LATO in ogni modulo, si crea una variabile di carattere . Dagli un nome, seleziona Lato e salvalo. Qualsiasi intestazione che si leghi a quella variabile ora rimarrà in sintonia.

Se si desidera passare a un carattere diverso in seguito, basta aggiornare la variabile. Ogni modulo connesso rifletterà automaticamente la modifica.

E questo è solo un caso d'uso. È inoltre possibile impostare variabili per imbottitura a sezione coerente, stili di pulsanti, colori di sfondo o qualsiasi altra cosa che usi ripetutamente. Non è necessario definire tutto in una volta se sembra troppo schiacciante. Inizia con gli stili che sai riutilizzare ed espandi il tuo sistema di progettazione da lì.

3. Sostituire i valori statici con le variabili di progettazione

A volte i layout hanno stili codificati, quindi aggiornarli manualmente rende il processo incoerente. Ecco perché sostituiamo i valori statici con le variabili globali che abbiamo appena definito.

Non hai bisogno di cacciarli individualmente. Lo strumento di ricerca e sostituzione di Divi semplifica lo scambio di valori statici per le variabili in pochi clic. Diciamo che tutti i tuoi titoli usano tutti i caratteri selezionati manualmente. Apri qualsiasi modulo di intestazione, fai clic sul campo Font e seleziona Trova e sostituisci.

Nel pannello Valore Sostituisci , libra sul campo e apri il gestore variabile . Seleziona la variabile del carattere tutte le intestazioni e conferma la modifica.

Vedrai immediatamente la magia: ogni istanza di quel carattere attraverso il layout viene immediatamente sostituita. Questo stesso metodo funziona per colori, spaziatura, stili di pulsanti e qualsiasi cosa tu abbia impostato una variabile.

E non devi cambiare tutto in una volta. Avvia in piccolo, scegli gli stili che riutilirai di più, come l'imbottitura di sezione o gli sfondi dei pulsanti e cambiarli prima. Mentre vai, il tuo layout si sposta da un patchwork di modifiche manuali a un sistema completamente connesso. E quando quel sistema è in atto, ogni cambiamento futuro diventa più facile, più veloce e coerente per impostazione predefinita.

4. Usa gli attributi estendi per applicare gli aggiornamenti in secondi

Una volta che i valori globali sono in atto, il passo successivo è la raffinatezza. Spesso ti ritroverai a fare piccole modifiche alle singole sezioni e desideri che tu possa portare quei cambiamenti nel resto del layout senza rifare il lavoro. È possibile con gli attributi estensi.

Ti consente di copiare istantaneamente stili, contenuti o preset da un elemento e applicarli agli altri. Funziona anche anche se i moduli non sono lo stesso tipo. Ad esempio, se hai progettato un bordo e un'ombra personalizzati per un'immagine, puoi usarlo come riferimento per ogni immagine nella sezione.

Fare clic con il pulsante destro del mouse sull'immagine in stile e scegliere Attributi estendi.

Quando si apre il pannello Extend, attraversalo di lato, come probabilmente tornerai ad esso. Nei discese, impostare l'ambito sulla sezione genitore e il tipo di elemento su immagine, quindi confermare.

Quell'unica azione applica l'aggiornamento ad ogni immagine in quella sezione, senza doverlo toccarli individualmente.

Ed è qui che gli attributi Extend guadagnano davvero il suo posto. Ci vuole quella che sarebbe stata una serie di modifiche manuali e ripetitive e le trasforma in una mossa coerente. Puoi usarlo per sezioni con più colonne o moduli simili, come una galleria di immagini o sfocatura. È il modo più veloce per portare un senso di smalto al tuo design senza bruciare tempo su ogni modulo.

5. Salva modifiche riutilizzabili come preset del gruppo di opzioni

Mentre perfezi il tuo layout, probabilmente modificherai la spaziatura, i bordi o i colori di sfondo per far bene le cose. Invece di ripetere tali regolazioni ogni volta, salvale come preset del gruppo di opzioni.

Supponi di aver personalizzato la spaziatura, il bordo e lo sfondo di una colonna. Ti piace come appare e vuoi riutilizzarlo altrove. Apri le impostazioni per quella colonna, scorrere sul gruppo di stile che hai modificato (come spaziatura o bordo) e fai clic sull'icona preimpostata per salvarla.

Per applicare il preimpostazione ad altre colonne, fare clic con il pulsante destro del mouse sull'originale e scegli Attributi estendi> Estendi i preimpostazioni delle colonne . Nel pannello, impostare l'ambito sulla riga principale, scegliere la colonna come tipo di elemento e premere gli attributi estendi.

Quella preimpostazione ora si applica a ogni colonna della riga in una mossa. È particolarmente utile per i layout con elementi ripetuti come tabelle dei prezzi, sfocature, testimonianze o ovunque tu voglia coerenza visiva senza lo sforzo manuale. E poiché i preset vengono salvati sul pacchetto di layout, li avrai pronti per l'uso anche su altre pagine.

6. Utilizzare copia/incolla per modifiche una tantum rapide

Una volta che hai esteso gli stili a una sezione o riga completa, potresti comunque voler fare piccole modifiche mirate. Forse solo una colonna o un modulo ha bisogno di un aspetto leggermente diverso. Invece di estendere nuovamente i preset, utilizzare la funzione di gestione degli attributi.

Ad esempio, se hai personalizzato il bordo e l'ombra di una colonna e vuoi solo uno o due altri, fare clic con il pulsante destro del mouse sulla colonna in stile e scegliere Copy Element Styles . Quindi, fai clic con il pulsante destro del mouse sulla colonna che si desidera aggiornare e selezionare gli stili degli elementi incollati .

Questo non sovrascriverà altre impostazioni e funziona all'istante, rendendolo ideale per le situazioni in cui si desidera rimanere flessibili. Puoi copiare e incollare stili da quasi tutti gli elementi e decidere esattamente cosa copiare, che si tratti di spaziatura, colori, bordi o altre modifiche al design.

ESTRO ATTRITTURE GUIDA le modifiche sfuse e copia/incolla gestisce i dettagli. È perfetto per mettere a punto un layout per lo più fatto ma ha ancora bisogno di alcuni tocchi personali.

7. Passa tra i punti di interruzione personalizzati per perfezionare la vista reattiva

Assicurati che il layout del desktop abbia un bell'aspetto su ogni dimensione dello schermo. I punti di interruzione personalizzabili di Divi 5 lo rendono facile consentendo di passare da un tablet, telefono e persino larghezze di schermate personalizzate con un solo clic. Le icone del dispositivo sono proprio all'interno del costruttore, quindi puoi rapidamente visualizzare in anteprima il modo in cui le sezioni si comportano su schermi più piccoli.

Se necessario, puoi anche definire i tuoi punti di interruzione per un maggiore controllo.

Questo è il momento perfetto per controllare la spaziatura, le dimensioni dei caratteri e l'allineamento delle immagini. Ci vogliono solo pochi minuti, ma ti risparmia da problemi di layout più grandi in seguito, in particolare su pagine pesanti di contenuti o focalizzate sulla conversione. E non hai bisogno di cambiare il tuo flusso di lavoro. Gli strumenti Divi funzionano altrettanto bene in vista reattiva, quindi fai le tue modifiche, visualizza in anteprima il layout e vai avanti.

8. Aggiorna le variabili di progettazione per aggiornare l'intero layout all'istante

In precedenza, abbiamo impostato le tue variabili di progettazione globale e sostituito i valori statici usando Trova e sostituire. E ora il layout è completamente connesso a un sistema di progettazione centralizzato.

Le variabili di progettazione rendono gli aggiornamenti a livello del sito Web estremamente facili. Supponiamo che il tuo marchio aggiorni la sua tipografia o il colore principale. Invece di scavare attraverso ciascun modulo per apportare ripetutamente le stesse modifiche, si aggiorna la variabile salvata. Quell'unico cambiamento si applica istantaneamente attraverso l'intero layout.

Per vederlo in azione, dai un'occhiata a questo confronto fianco a fianco. La struttura del layout rimane la stessa, ma il processo dietro di essa diventa drammaticamente più semplice e più veloce.

Ora pensa a come si ridimensiona. Immagina l'intero sito Web, ogni pagina e sezione, basato sullo stesso sistema. Non stai più ripercorrendo i tuoi passaggi per ogni modifica. Una singola modifica a una variabile aggiorna tutto. Stai gestendo l'intero marchio gestendo i valori tramite il gestore variabile.

Questo tipo di flessibilità è esattamente ciò per cui è stato progettato Divi 5. Non si tratta solo di modifiche più veloci, ma di ridurre la ripetizione, aumentare la precisione e darti un maggiore controllo con meno sforzo.

Personalizza il tuo flusso di lavoro Divi 5

Ormai, hai visto come strumenti come le variabili di design, gli attributi estendi e i preset del gruppo di opzioni possono rimodellare il modo in cui si aggiornano i layout. Ma non esiste un solo modo per usarli.

Questa procedura dettagliata è solo una versione del processo. Potresti seguire i passaggi in un ordine diverso, saltare alcuni o mescolarli nella tua routine. E va tutto bene, poiché l'obiettivo non è seguire una formula ma trovare un ritmo che si sente naturale e si adatta al modo in cui ti piace lavorare.

Sperimenta un po '. Più giochi con gli strumenti, più inizierai a riconoscere ciò che funziona meglio per il tuo flusso. Se le cose sembrano più fluide, i tuoi aggiornamenti sono più veloci e il tuo design rimane coerente, questo è il tuo segno che funziona.

E se ti stai chiedendo se questi strumenti possono tenere il passo man mano che il tuo flusso di lavoro si evolve, possono assolutamente perché ...

Divi 5 è progettato per adattarsi al tuo modo di lavorare

Questo è il pensiero dietro ogni funzione che abbiamo coperto. Sia che ti piaccia definire ogni stile in anticipo o apportare modifiche man mano che costruisci, gli strumenti si adattano a come preferisci lavorare.

Puoi muoverti rapidamente o prenderti il tuo tempo. Inizia da una pagina vuota o perfeziona un layout esistente. Il costruttore non ti costringe a un flusso di lavoro rigido. È costruito per ridurre il lavoro impegnato, saltare le modifiche ripetitive e aiutarti a concentrarti su ciò che in realtà conta: progettare con chiarezza, velocità e fiducia.

Alla fine, si tratta di costruire un processo che ti sembra il tuo e ti tiene al passo con te man mano che i tuoi progetti e idee crescono. Sei pronto a costruire un flusso di lavoro di progettazione che migliora con te?