Preset di elementi e preset del gruppo di opzioni: la differenza spiegata

E se potessi modellare l'intero sito Divi con la flessibilità delle lezioni CSS? Il sistema preimpostazione di Divi ti consente di fondere energia e facilità, il che cambierà il modo in cui si creano siti Web. Che si tratti di costruire una singola pagina di destinazione o di un sito di più pagine, i preset consentono di creare stili riutilizzabili che tagli il tempo di progettazione mantenendo tutto coerente.

In Divi 5, i preset di elementi e i preset del gruppo di opzioni si uniscono per fornire un flusso di lavoro potente ed efficiente. I preset di elementi consentono di creare pacchetti di design pre-stile per elementi specifici, mentre i preset di gruppi di opzioni offrono stili mix-and-match che funzionano in tutto il tuo sito. Risparmono tempo, assicurano la coesione e sbloccano nuove possibilità creative.

In questo post, esploreremo come funzionano, come differiscono e come combinarli per un design più intelligente e più veloce. Alla fine, vedrai perché il sistema di preimpostazione di Divi è un must per il tuo prossimo progetto di progettazione.

Cosa sono i preset di elementi?

I preset di elementi ti aiutano a creare coerenza tra vari elementi Divi. In Divi, ci sono quattro tipi di elementi ricorrenti che puoi trovare in tutto il prodotto: sezioni, righe, colonne e moduli. Introdotto in Divi 4 e portato avanti in Divi 5, ti consentono di creare un pacchetto di styling completo per un elemento e riutilizzarlo con un solo clic, indipendentemente da dove stai lavorando sul tuo sito.

I preset di elementi acquisiscono ogni impostazione che hai applicato a un singolo tipo di elemento, come la tipografia, i colori, la spaziatura e altro ancora. Ad esempio, se hai creato un modulo Blurb con dimensioni specifiche di carattere, un look in stile l'icona e i colori, un elemento preimpostata blocca tutti quei dettagli in un preset riutilizzabile.

I prest degli elementi possono essere impostati come predefinito, quindi ogni nuova istanza di quell'elemento eredita automaticamente lo stile del preimpostazione. Sono modificabili a livello globale, il che significa che una modifica al PERST aggiorna immediatamente ogni istanza collegata sul tuo sito. Se è necessario modificare un preimpostazione, puoi sovrascrivere il preimpostazione a livello di elemento, dandoti flessibilità senza rompere il sistema. Puoi anche modificare il preimpostazione a livello globale in modo che abbia effetto in tutti i casi in cui è stato utilizzato.

I preset di elementi sono perfetti per il salvataggio e il riutilizzo di progetti completi e lucidati per elementi ricorrenti. Ad esempio, quando si crea un modulo CTA, è possibile creare un elemento preimpostata per esso e quindi applicarlo a più pagine. Con un preimpostazione di elementi, è in stile una volta, salvato e pronto per l'uso ovunque ne abbia bisogno, garantendo la coerenza del design senza troppi sforzi.

Cosa sono i preset del gruppo di opzioni?

Nuovo in Divi 5, i preset del gruppo di opzioni spostano l'attenzione da interi elementi di design a proprietà di progettazione riutilizzabili: come tipografia, ombre box, bordi, spaziatura o effetti di scorrimento. Sono blocchi di stile modulare che puoi applicare attraverso diversi elementi, dalle ombre dei pulsanti ai caratteri di intestazione. Non sono legati a un tipo di elemento, rendendoli incredibilmente versatili.

Una delle grandi cose dei preset del gruppo di opzioni di Divi, che lo distingue fortemente dai concorrenti, è che non è focalizzato solo sul CSS. Include anche effetti creati usando script. Puoi notarlo nelle funzionalità più interattive di Divi, come opzioni di condizione, video di sfondo HTML, effetti di scorrimento e altro ancora.

I preimpostazioni del gruppo di opzioni possono essere applicati in tutti i tipi di elementi. Una sezione, una riga, una colonna e un modulo possono condividere lo stesso preset di confine. I moduli con le impostazioni dei pulsanti integrati possono condividere lo stesso preimpostazione del pulsante.

Preset di elementi vs Opzione Preset del gruppo: le differenze chiave

I preset di elementi fungono da kit di design all-in-one, costruiti per semplificare il flusso di lavoro di Divi bloccando in ogni dettaglio di un singolo tipo di elemento-come un modulo di intestazione a tutta larghezza completamente in stile o blurb con la sua tipografia, colori, spaziatura e effetti raggruppati in un progetto statico. La loro attenzione è stretta, legata esclusivamente a un elemento, rendendoli eccellenti nel duplicatore di progetti complessi e lucidati sul tuo sito con un solo clic.

Sono perfetti per accelerare il processo quando hai bisogno di una sezione CTA costante su cinque pagine: modellalo una volta, salvarlo e distribuirlo senza sforzo. Mentre offrono aggiornamenti globali e impostazioni predefinite, il loro ambito è limitato, fornendo un pacchetto fisso e pronto per il prime che dà la priorità alla coerenza per elementi interi.

Preset del gruppo di opzioni

I preset del gruppo di opzioni, d'altra parte, ingrandiscono gli stili o i comportamenti riutilizzabili-come l'ombra di un pulsante, gli stili di tipografia di un'intestazione o un effetto di scorrimento-che offre un approccio dinamico e trasversale che si libera dallo stampo a elemento singolo. Questi livelli impilabili di design possono aggiungere uno stile coerente ai pulsanti attraverso qualsiasi modulo che contiene uno, come un blurb, un modulo di contatto o un modulo di opt-in e-mail, applicando lo stile ovunque si adatti, con la flessibilità da mescolare e abbinare.

Brillano tagliando la ridondanza in un ambiente condiviso. Ti permettono di definire uno stile di testa o un'ombra di scatola una volta e applicarlo a livello di sito, il tutto sostenendo le modifiche globali in tempo reale e le sostituzioni a livello di elemento. A differenza della natura statica e del tutto o nulla di Element Preset, i preset del gruppo di opzioni ti danno uno stile preciso e l'adattabilità in tutto il tuo design.

Come utilizzare i preset degli elementi e i preset del gruppo di opzioni insieme in Divi 5

La combinazione di preset di elementi e preset del gruppo di opzioni in Divi 5 è come abbinare un maestro chef con uno chef Sous - uno gestisce il quadro generale e le altre si tuffano nei dettagli. Ecco una guida passo-passo per farli funzionare in armonia:

Passaggio 1: inizia con i preimpostazioni del gruppo di opzioni per gli stili di base

Inizia definendo le regole di progettazione del tuo sito, come tipografia, schemi di colore, ombre o effetti dinamici come le animazioni di scorrimento. Salva questi elementi come preset del gruppo di opzioni e impostali come impostazioni predefinite. Quando si inizia su un design, i preimpostazioni del gruppo di opzioni possono aiutare a costruire le basi del design del tuo sito. Ad esempio, quando si crea un layout di intestazione nel builder del tema, è possibile rendere un gruppo di opzioni preimpostato per modellare un pulsante nel menu per ripetere facilmente lo stile di quel pulsante in tutto il sito quando si crea le tue pagine Web.

Ogni nuovo elemento che aggiungi e assegni il preimpostazione per ereditare automaticamente questi stili, dando al tuo sito un aspetto unificato senza modificarlo costantemente.

Passaggio 2: Build Element Preset

Dopo aver creato i preimpostazioni di gruppo di opzioni per stile di elementi, puoi basarsi sulle tue basi di design creando preset di elementi per i tuoi layout. Ad esempio, se si desidera avere diversi moduli Blurb nella tua home page, devi solo modellarne uno e creare un preimpostazione di elementi. Da lì, puoi aggiungere più sfocature e applicare il preimpostazione dell'elemento a ciascuno di essi, risparmiando un sacco di tempo di progettazione.

Passaggio 3: ottimizzare con modifiche preimpostate

A volte, potresti voler modificare un preimpostazione senza cambiare le altre istanze sul tuo sito. Per fortuna, sia i preset di elementi che i preset del gruppo di opzioni lo consentono. Ad esempio, hai creato preset di gruppi di opzioni per le tue intestazioni - da H1 a H6 - ma vuoi cambiare il colore di intestazione che prevedi di utilizzare su uno sfondo dell'immagine. Le nostre intestazioni sono disegnate come #000000 , che non funzionerà per questa applicazione. Puoi modificare una singola istanza di questo preimpostazione senza alterare il preimpostazione stessa . Dirigiti alla scheda Design del modulo di intestazione e cambia il colore.

È possibile modificare con precisione i preset di elementi, come l'esempio di Blurb di prima. Un'icona non è perfettamente quadrata, che appare più ampia di altre. Applicando CSS nella scheda avanzata, la modifica rimane isolata. Altri moduli Blurb con lo stesso preset rimangono inalterati. Ciò aumenta la flessibilità di progettazione, consentendo modifiche ai singoli elementi senza alterare il sistema più ampio.

Otterrai il meglio da entrambi i mondi incorporando preset di elementi e preset di gruppi di opzioni nel tuo prossimo progetto di web design: coerenza a livello del sito con spazio per la libertà creativa.

Perché lavorano meglio insieme

• Maggiore efficienza di progettazione: i preset del gruppo di opzioni gestiscono i dettagli di nit-grigio (come la tipografia o le ombre della scatola), mentre i preset di elementi consentono di eliminare sezioni, righe, colonne o moduli completamente in stile.
• Un design più coerente: gli stili condivisi rimangono sincronizzati attraverso i preset del gruppo di opzioni e i preset di elementi assicurano che i layout appaiano identici ovunque vengano utilizzati.
• Incoraggia la scalabilità: modificare una preimpostazione del gruppo di opzioni (come la dimensione del carattere) e ogni preset collegato si aggiornerà istantaneamente, perfetto per i siti in crescita in cui sono necessarie ulteriori pagine.
• È una prova futura: la tabella di marcia di Divi 5 suggerisce i preimpostazioni del gruppo di opzioni di nidificazione all'interno degli elementi preimpostati, promettendo un'integrazione ancora più stretta.

Il futuro dei preset del gruppo di elementi e opzioni in Divi 5

Divi 5 offre già un potente sistema di preimpostazione, ma il futuro promette un'integrazione ancora più stretta che potrebbe ridefinire il modo in cui si costruiscono i sistemi di progettazione: i preimpostazioni del gruppo di opzioni di nidificazione all'interno degli elementi. Sebbene ancora in sviluppo, questa funzione ti consentirà di creare preset di elementi quasi interamente dai preimpostazioni di gruppi di opzioni modulari, sbloccando un nuovo livello di controllo del design globale.

Immagina di creare senza sforzo Blurbi, CTA e altro ancora utilizzando i preset del gruppo di opzioni che hai già progettato. Risparmierà il tempo, semplifica la creazione di un aspetto coerente per i tuoi siti e ti permetterà di creare siti Web più velocemente. Con entrambi i gruppi preimpostati che lavorano insieme, è possibile aggiornare elementi di progettazione sul tuo sito una volta e ogni elemento collegato si regolerà istantaneamente. Questo non è solo un aggiornamento incrementale; È un salto verso un vero sistema di progettazione simile a CSS all'interno del Builder visivo di drag-and-drop di Divi.

Anche se non possiamo ancora nidificare i preset, la tabella di marcia di Divi 5 li include. Quando arrivano, saranno il modo ultimo per creare un sistema di progettazione: iniziare con i preimpostazioni del gruppo di opzioni come elementi costitutivi, assemblarli in preset di elementi per l'implementazione rapida e mantenere il controllo globale con uno sforzo minimo.

Progetta intelligenza con preset di gruppi di opzioni

Il sistema di preimpostazione di Divi 5 non è solo una funzione: è una rivoluzione per i web designer. I preset di elementi e i preset del gruppo di opzioni potrebbero sembrare piccoli strumenti, ma fanno un pugno. I preset di elementi ti consentono di salvare e riutilizzare interi progetti con zero confusioni, mentre i preset del gruppo di opzioni portano flessibilità e coerenza agli stili e ai comportamenti che usi ovunque. Utilizzati insieme, creano un flusso di lavoro veloce, coeso e adattabile, sia che tu stia costruendo un sito di e-commerce di una pagina o multi-pagina.

La vera magia accade quando li usi insieme. I preset del gruppo di opzioni ti aiutano a stabilire una base solida, quindi costruire progetti lucidati e riutilizzabili con preset di elementi. Il risultato è un sito Web coerente senza rigidità, scalabile senza schiacciamento ed efficiente senza tagliare gli angoli. Questo sistema di progettazione basato su preset è un punto di svolta per gli utenti Divi, sbloccando la potenza simile a CSS con semplicità puntuale.

Prima di immergerti nel tuo prossimo progetto, scarica gli ultimi Alpha Divi 5, sperimenta i preset e guarda come trasformano come si costruiscono siti Web Divi.