In che modo il design basato su preset cambia il paradigma del design Divi

Le capacità di progettazione di Divi si sono evolute con l'introduzione dei preimpostazioni del gruppo di opzioni in Divi 5. Mentre i preset di elementi hanno reso a lungo facile salvare e riutilizzare elementi completamente in stile, i nuovi preset del gruppo di opzioni aggiungono uno strato di flessibilità consentendo di riutilizzare proprietà di progettazione come tipografia, spaziatura ed effetti attraverso vari elementi.

Insieme, queste funzionalità Divi integrate aiutano a rimodellare il modo in cui i progettisti si avvicinano alla coerenza e all'efficienza, consentendo iterazioni di progettazione più veloci e aggiornamenti globali più facili. In questo post, ci immergeremo nel modo in cui questi preset lavorano insieme per trasformare il flusso di lavoro di progettazione Divi 5!

I due pilastri del design basato su preset

Prima di immergerci nei dettagli, è importante comprendere i due componenti principali che rendono così potente il design basato su preimpostazione in Divi. Combinando preset di elementi e preset di gruppi di opzioni, è possibile creare un processo di progettazione più efficiente, coerente e scalabile. Diamo un'occhiata a questi due pilastri e al modo in cui lavorano insieme per elevare il flusso di lavoro di progettazione.

Preset di elementi: pacchetti di design riutilizzabili

I preset di elementi salvano interi configurazioni di progettazione per specifici elementi Divi. Divi ha attualmente 4 tipi di elementi distinti: moduli, colonne, righe e sezioni. E quando si tratta di moduli, i preset degli elementi sono anche unici per il tipo di modulo (pulsante, testo, CTA, ecc.). Quando si applica un preimpostazione dell'elemento, tutte le impostazioni associate come tipografia, colori, spaziatura ed effetti vengono ereditate istantaneamente quando applicate. Il focus dei preset di elementi è il seguente:

• Garantire la coerenza visiva tra le pagine
• Ridurre le attività di stile ripetitivo
• Consenti aggiornamenti globali per modifiche più veloci

Preset del gruppo di opzioni: controllo del design modulare

I preset del gruppo di opzioni si concentrano su proprietà di styling come tipografia, ombre per box, bordi ed effetti di scorrimento. Funzionano in più elementi, consentendo ai progettisti di mescolare e abbinare gli stili senza essere legati a un singolo tipo di elemento. Ciò significa che puoi, ad esempio, utilizzare la stessa scatola Shadow Preset sia su una riga che su un modulo. I principali vantaggi dell'utilizzo dei preset del gruppo di opzioni sono:

• Applica stili condivisi a diversi elementi
• Impibile per la personalizzazione avanzata
• Consenti modifiche globali in tempo reale senza influire sui singoli moduli

Creazione di un flusso di lavoro strutturato con preset

Ora che ti abbiamo mostrato i due pilastri dei preset in Divi e spiegando brevemente la differenza, passiamo attraverso alcuni suggerimenti per la creazione di un flusso di lavoro strutturato.

Passaggio 1: definire gli stili di base con preset del gruppo di opzioni

Inizia stabilendo i principi di progettazione principale del tuo sito Web. Ciò include tipografia, colori, stili di pulsanti, spaziatura e altro ancora. Questi elementi di base sono essenziali per mantenere la coerenza in tutto il sito Web.

Per le impostazioni costantemente ricorrenti, è possibile scegliere di impostare il gruppo di opzioni predefinito come impostazione predefinita. Un buon esempio di questo è lo styling del testo del paragrafo e l'utilizzo come predefinito.

I preset del gruppo di opzioni sono versatili e riutilizzabili, consentendo di applicare queste impostazioni su più elementi. Ad esempio, una volta definita una preimpostazione di text-shadow, puoi applicare tale preimpostazione alle intestazioni su tutti i tipi di elementi sul tuo sito Web. In questa fase, stai gettando le basi per il resto del tuo design e questi preset dovrebbero fungere da elementi costitutivi del tuo sito web.

Passaggio 2: creare preset di elementi per moduli specifici

Dopo aver definito gli stili di base, il passo successivo è creare preset di elementi per elementi di progettazione più specifici. Sebbene seguire questo ordine sia più logico in teoria, spesso ti ritroverai a creare entrambi contemporaneamente. I preset di elementi sono pacchetti di progettazione completi per singoli elementi (sezioni, righe, colonne, moduli) e consentono di applicare rapidamente stili coerenti in tutto il sito.

Progetta un pulsante CTA pre-stile utilizzando i preimpostazioni del gruppo di opzioni predefinite, concentrandosi sulla tipografia del pulsante, sul colore di sfondo e sugli effetti del mouse.

Salva questo come preimpostazione dell'elemento per un uso futuro. Costruisci altri elementi ricorrenti, come moduli di testimonianze, sezioni di caratteristiche o tabelle dei prezzi e modellali di conseguenza. Ognuno di questi moduli pre-stile può essere salvato come preimpostazione dell'elemento che è possibile applicare ogni volta che è necessario.

Mentre progetti, pensa a salvare layout che contengono questi preset nella tua libreria Divi. Ciò ti consente di mantenere una panoramica di tutti i tuoi design, aiutandoti a tenere traccia di ogni stile preimpostata che hai creato. Non devi preoccuparti di ottenere tutto perfetto dall'inizio. Mentre costruisci il tuo sito, probabilmente modificherai questi elementi mentre procedi.

Passaggio 3: implementare e regolare secondo necessità

Dopo aver creato il gruppo di opzioni e il preimpostazione dell'elemento, puoi applicarli sul tuo sito Web. Se stai costruendo un sito Web da zero senza utilizzare il software di progettazione in anticipo, è probabile che tu abbia già applicato i tuoi preset durante la build della prima pagina.

Potrebbe essere necessario apportare modifiche a livello dell'elemento mentre lavori. Ad esempio, se si applica un preimpostazione a un modulo di testimonianze ma è necessario modificare la spaziatura in una pagina specifica, puoi farlo senza influire sul resto del sito. Questa flessibilità ti consente di adattarti mentre vai, garantendo che il tuo design rimane scalabile e adattabile.

La chiave qui è pensare ai preset come uno strumento per creare un sistema di progettazione flessibile e coeso piuttosto che un framework rigido che devi seguire esattamente. Probabilmente dovrai modificare i tuoi stili mentre continui a costruire, quindi sentiti sempre libero di modificare i preset quando necessario e sovrascriverli a livello di elementi. Continua a perfezionare il tuo design e sfruttare appieno il montaggio in tempo reale di Divi per apportare tali regolazioni al volo.

Passaggio 4: mantieni i tuoi stili organizzati all'interno della Biblioteca Divi

Per tenere traccia di tutti i tuoi preset di elementi e layout, salvali in un layout che puoi conservare nella tua libreria Divi.

Man mano che il tuo sito cresce, sarai in grado di regolare i tuoi preset salvati per migliorare il tuo design. Sei sempre in grado di modificare i tuoi preset all'interno dell'elemento su cui stai lavorando. Una volta aggiornato un preset, si aggiornerà in tutto il tuo sito Web.

Passaggio 5: iterare e migliorare

Una delle grandi cose del sistema preimpostata di Divi è la capacità di migliorare e perfezionare continuamente il tuo design. Man mano che costruisci più pagine e layout, rivisita il tuo gruppo di opzioni e i preset di elementi per apportare modifiche globali.

Se decidi di modificare il colore del pulsante principale o di aggiornare la dimensione del carattere di tutte le intestazioni, puoi farlo una volta e farlo riflettere in tutto il sito in tutti i casi in cui viene applicato tale preimpostazione.

Mentre continui a lavorare, acquisirai una comprensione più profonda di quali elementi funzionano bene insieme e quali necessitano di ulteriori aggiustamenti. Non aver paura di modificare i preset mentre vai e approfitta della flessibilità di Divi per apportare piccoli cambiamenti che si adattano alla visione del design in evoluzione.

Iterato e migliorando continuamente i tuoi preset, creerai un sito che non è solo coeso ma anche adattabile a cambiamenti futuri o tendenze di progettazione. Ricorda, il sistema preimpostato è uno strumento per aiutare a semplificare il processo, non una serie di regole che devi seguire rigorosamente dal primo giorno.

I vantaggi di un flusso di lavoro basato su preset

Ora che abbiamo attraversato le basi della creazione di un flusso di lavoro strutturato con i preset Divi, esaminiamo alcuni dei benefici che derivano da questo approccio.

Velocità: ridurre i tempi di progettazione con preset pronti

Con il sistema di preimpostazione di Divi, è possibile ridurre drasticamente il tempo necessario per progettare un sito Web. Invece di iniziare da zero ogni volta che è necessario progettare un elemento, basta creare e riutilizzare i preset di gruppi di elementi e opzioni. Che si tratti di un pulsante CTA, uno stile di intestazione o un modulo di testimonianze, questi preset consentono di applicare un pacchetto di design completo con un solo clic.

Ad esempio, dopo aver progettato uno stile di confine con i tuoi preimpostazioni del gruppo di opzioni, puoi applicarlo in modo coerente su tutte le pagine senza dover rifare il lavoro.

I preset di elementi ti risparmiano ancora più tempo permettendoti di riutilizzare interi moduli pre-stile. È possibile distribuire un modulo completamente progettato con un solo clic, assicurando che il layout corrisponda all'istante della tua visione.

Questo approccio pronto all'uso alla progettazione ti consente di costruire più velocemente e concentrarti sugli aspetti creativi del tuo progetto invece dei compiti ripetitivi dello styling di singoli elementi.

Coerenza: mantenere lo stile uniforme tra le pagine

Un grande vantaggio di un flusso di lavoro basato su preset è la coerenza. Utilizzando i preset di gruppi di elementi e opzioni, si assicura che ogni pagina del tuo sito Web aderisca alle stesse regole di progettazione, dalla tipografia alla distanza ai colori.

L'impostazione di un singolo gruppo di opzioni preimpostato come predefinito del pulsante garantisce che le dimensioni e gli stili dei caratteri del tuo sito rimangono uniformi, indipendentemente da dove appaiono. Questa coerenza rafforza l'identità visiva del tuo sito e gli dà un aspetto lucido e coeso.

Invece di gestire stili incoerenti su diverse pagine, è possibile mantenere un sistema di progettazione unificato che migliora l'esperienza dell'utente e rende il tuo sito più professionale.

Scalabilità: espandere e aggiornare facilmente la progettazione del sito

I preset rendono incredibilmente facile ridimensionare il tuo sito Web man mano che cresce. Che tu stia aggiungendo nuove pagine o modificando la progettazione di quelle esistenti, puoi aggiornare il tuo design in modo rapido ed efficiente. Se è necessario aggiungere una nuova pagina, applicare semplicemente l'elemento esistente e i preset del gruppo di opzioni, garantendo che la nuova pagina si adatti perfettamente al resto del design del tuo sito.

Hai bisogno di fare aggiornamenti globali? Con il sistema di preimpostazione di Divi, è possibile modificare una preset una volta e rifletterlo automaticamente in tutti i casi in cui viene applicato tale preimpostazione. Ad esempio, se si desidera modificare il colore di tutti i pulsanti sul tuo sito, aggiorna semplicemente il preimpostazione del pulsante e ogni pulsante collegato a tale preimpostazione si aggiornerà immediatamente.

Questa scalabilità significa che man mano che il tuo sito si evolve, puoi continuare a far crescere il tuo design senza dover rielaborare ogni elemento individualmente. Che tu stia aggiungendo un blog, nuovi prodotti o sezioni completamente nuove, il tuo design rimarrà coeso e coerente.

Flessibilità: sostituire singoli elementi senza rompere il sistema

Mentre i preset ti danno un approccio strutturato al web design, consentono comunque flessibilità. Se è necessario effettuare regolazioni a un elemento specifico, è possibile sovrascrivere il preimpostazione per quell'elemento senza influire sul resto del design.

Ad esempio, se si applica un elemento preimpostata su un modulo Blurb ma è necessario regolare la dimensione dell'icona o la spaziatura per un'istanza specifica, è possibile apportare tali modifiche direttamente al modulo senza influire su altre istanze del preimpostazione altrove sul sito. Con i preimpostazioni del gruppo di opzioni, è possibile modificare le singole impostazioni, come la dimensione del carattere o il colore del pulsante, per elementi specifici mantenendo gli stili di base attraverso il sito.

Questa flessibilità è la chiave per ottenere un look personalizzato per sezioni uniche del tuo sito. Consente la personalizzazione dettagliata senza rompere la coerenza e la struttura che i preimpostazioni forniscono. Man mano che il tuo design si evolve, puoi continuare gli elementi di messa a punto se necessario, offrendo un equilibrio di controllo e facilità che rende il processo più liscio e più adattabile.

Inizia a progettare più intelligente con preset in Divi 5

Abbracciare un flusso di lavoro basato su preset ridefinirà il modo in cui si creano siti Web con Divi. Sfruttando insieme preset di elementi e preset di gruppi di opzioni, è possibile creare siti Web visivamente sbalorditivi, altamente adattabili e di facile gestione. I preimpostazioni del gruppo di opzioni sono disponibili in Divi 5 esclusivamente, quindi ora è il momento migliore per iniziare a familiarizzare con l'interfaccia Divi 5!