Tutto ciò che devi sapere sulla gestione degli attributi di Divi 5

Divi 5 introduce un approccio semplificato alla costruzione di siti Web. Ogni modifica del design, dai caratteri ai colori alla spaziatura, scorre senza sforzo sul tuo sito, risparmiando ore di lavoro ripetitivo. La funzione di gestione degli attributi di Divi 5 consente di creare siti Web più velocemente e con una maggiore flessibilità, rendendolo una nuova pratica lancio di nuove funzionalità della fase Alpha Divi 5.

In questo post, ci immergeremo in tutto ciò che devi sapere sulla gestione degli attributi di Divi 5: cosa è, ciò che lo rende così utile per i progettisti e come puoi usarlo per costruire siti Web coesivi e professionali più velocemente ed efficiente.

Divi 5 è pronto per essere utilizzato su nuovi siti Web, ma non consigliamo ancora di convertire i siti esistenti in Divi 5.

Immergiamoci.

Cos'è la gestione degli attributi in Divi 5?

La gestione degli attributi in Divi 5 è una funzionalità che può migliorare il modo in cui i web designer gestiscono e applicare stili, preset e contenuti sui loro siti Web. Sia che tu voglia modificare lo stile tipografico di un pulsante, duplicare lo stile di un intero modulo CTA o ripristinare il look di una sezione al valore predefinito, la gestione degli attributi rende il processo più semplice, più veloce e più intuitivo che mai.

Questa funzione è integrata nel Visual Builder ed è accessibile dai menu e dai pannelli di impostazioni del pulsante destro del mouse. Questo approccio è una pietra miliare dell'approccio di progettazione preimpostata di Divi.

Componenti chiave della gestione degli attributi

La gestione degli attributi è costruita su due pilastri chiave: controllo granulare e integrazione preimpostata.

Controllo granulare sugli attributi

I progettisti possono gestire gli attributi a più livelli: elementi, come un intero modulo CTA, preset del gruppo di opzioni (tipografia o stili di bordo), scheda (design, contenuto o avanzato) o singoli campi (come il colore di sfondo di un pulsante). Questa flessibilità consente adeguamenti ampi e precisi. Ad esempio, è possibile copiare tutti gli attributi di un modulo o incollare selettivamente solo i suoi stili di confine su un altro elemento, assicurandoti di applicare esattamente ciò di cui hai bisogno senza modifiche indesiderate.

Integrazione con il gruppo di opzioni e i preset di elementi

La gestione degli attributi funziona a mano con il sistema preimpostazione di Divi 5. I preimpostazioni del gruppo di opzioni sono set di stile riutilizzabile-come uno sfondo, bordo o stile di imbottitura-che possono essere applicati su più moduli per la coerenza a livello del sito.

D'altra parte, i preset di elementi sono pacchetti di design pre-stile che funzionano con moduli di design, come un blurb, CTA, fisarmonica o cursore. La gestione degli attributi consente di copiare e incollare questi preset o i loro attributi, rendendo facile replicare progetti complessi o aggiornare stili specifici sul tuo sito Web.

Perché la gestione degli attributi è importante

La gestione degli attributi consente ai progettisti e agli sviluppatori di creare siti Web più velocemente ed efficiente con Divi. L'applicazione di preimpostazioni o gli attributi di copia con un singolo clic consente una prototipazione rapida e modifiche allo stile su larga scala mantenendo la precisione. Come spina dorsale del framework guidato da Divi 5, ti libera di concentrarti sulla creazione di siti Web belli e coesi con facilità.

Comprensione dei preset in Divi 5

I preset sono la pietra angolare del flusso di lavoro di progettazione efficiente di Divi 5, consentendo facilmente siti Web coerenti e scalabili. Esploriamo come migliorano la gestione degli attributi.

Aumento delle capacità con la gestione degli attributi

Integrando i preset nel flusso di lavoro di copia e incolla, Divi 5 consente ai progettisti di:

Replicare i progetti in modo efficiente

I preset di elementi consentono agli utenti di copiare un design completo del modulo, ad esempio un modulo CTA completamente in stile - e incollarlo altrove, garantendo uno stile identico e contenuto con un'unica azione. Incollare un preimpostazione di elementi può applicare istantaneamente uno sfondo CTA, la tipografia e gli stili di pulsanti a un altro modulo.

Applicare stili mirati

Puoi copiare e incollare più stili mirati, come i preset del gruppo di opzioni. La possibilità di copiare e incollare elementi di design singolare consente il controllo granulare, permettendo ai designer di copiare e incollare attributi di stile specifici in più elementi, come bordi, ombre o impostazioni di design di un'intestazione. Ciò garantisce la coerenza a livello del sito senza sovrascrivere attributi non correlati, come contenuto o layout.

I preset semplificano la gestione degli attributi riducendo lo stile manuale, facilitando il mantenimento di una progettazione coesa sui tuoi siti Web. Colleggono singoli elementi e sistemi di progettazione globali, consentendo aggiornamenti rapidi e stile coerente.

Esempio pratico

Prendi in considerazione uno scenario in cui stai progettando un sito Web multi-pagina con uno stile coerente di pulsanti in un modulo CTA. Ecco come funzionano i preset e la gestione degli attributi insieme:

Innanzitutto, definisci un pulsante di branding di un gruppo di opzioni denominato. Usando la gestione degli attributi, è possibile copiare questo preimpostazione da un pulsante in un CTA e incollarlo sui pulsanti in una sezione su di noi, eroe o qualsiasi altro pulsante nella pagina. Ciò garantisce che ogni pulsante condivida lo stesso aspetto e la stessa cosa in tutto il tuo sito Web, con le impostazioni preimpostate intatte.

Come funziona la gestione degli attributi

Il sistema di gestione degli attributi di Divi 5 semplifica lo stile e la gestione di elementi di progettazione con strumenti per copiare, incollare e ripristinare gli attributi su moduli, colonne, righe e sezioni.

Copia degli attributi

Il processo è semplice. Fare clic con il tasto destro su qualsiasi elemento-modulo, colonna, riga o sezione-e selezionare gli attributi di copia. Ciò catturerà tutti gli attributi, inclusi contenuto, stili e tutti i preset associati al modulo. In alternativa, è possibile utilizzare una scorciatoia da tastiera: comando Maiusc + C su un Mac o Shift + Alt + C su un computer Windows - per copiare gli stili senza accedere alle impostazioni del modulo.

Per un maggiore controllo granulare, è possibile copiare gli attributi nel campo, nel gruppo di opzioni o nel livello di preimpostazione degli elementi per un controllo più preciso. Ad esempio, è possibile passare alla scheda Contenuto di un modulo di intestazione e copiare gli attributi del titolo, del collegamento, dello sfondo o dell'amministratore facendo clic con il pulsante destro del mouse su un gruppo di campo specifico.

Gli attributi possono anche essere copiati dalla scheda Design, rendendo facile copiare i preimpostazioni o le impostazioni del gruppo di opzioni per carattere, dimensione del testo, spaziatura delle lettere e altro ancora. Puoi copiare solo gli stili che desideri senza preoccuparti delle impostazioni di sovrascrittura in cui si copiano gli attributi.

È inoltre possibile copiare gli attributi nella scheda avanzata, rendendo facile replicare snippet CSS, condizioni di visualizzazione, transizioni, effetti di scorrimento e posizionamento con un clic.

Attributi incollati

Il concetto è lo stesso quando incollano gli attributi, ma ci sono più opzioni. In Divi 5, puoi incollare tutti gli attributi, che incolleranno tutti i contenuti, gli stili e i preset associati dalle impostazioni del modulo di origine a quella nuova. Simile alla copia degli attributi, è possibile utilizzare una scorciatoia da tastiera per incollarli - comando Maiusc + V su un Mac o Shift + Alt + V su Windows - Applicazione delle impostazioni con un singolo clic.

Puoi anche incollare solo determinati attributi, come le impostazioni di progettazione di un modulo di intestazione, che copia tutte le impostazioni del tag di design: ombre di testo, carattere, dimensioni dell'intestazione, spaziatura, bordi e altro ancora.

Allo stesso modo, è possibile incollare solo le impostazioni di stile del modulo, che includono spaziatura (imbottitura o margine) e dimensionamento.

Se si desidera semplicemente incollare lo stesso contenuto da un modulo a un altro, selezionare Attributi del contenuto incolla e Divi sostituirà il contenuto esistente nel modulo con il contenuto copiato da quello precedente.

Infine, se il modulo di origine ha qualsiasi preset associato, la selezione dei preimpostazioni dell'intestazione in pasta applicherà il preselemento associato al modulo e lo assegnerà nel menu a discesa preimpostazione.

Oltre agli stili incollati, alle impostazioni di progettazione e ai preset, è possibile selezionare attributi specifici da incollare. Ad esempio, puoi scegliere di incollare selezionare gli attributi di progettazione, stile o contenuto e Divi 5 popolerà le opzioni in un menu aggiuntivo, consentendo di selezionare le impostazioni specifiche che desideri incollare.

Ripristino degli attributi

Il sistema di gestione degli attributi di Divi 5 consente di ripristinare gli attributi per qualsiasi modulo, sia elementi completamente o solo specifici.

Ad esempio, è possibile reimpostare tutti gli attributi - Speach + Command + R su un Mac o Shift + Alt + R su Windows - Rimozione di tutti i contenuti, stili e tutti i preset associati con un clic.

Tuttavia, è possibile ripristinare determinati attributi, come lo styling o le impostazioni di progettazione. Per essere ancora più specifici, è possibile ripristinare solo le impostazioni del contenuto di selezione di stile, design o applicato, come spaziatura, animazioni di scorrimento o frammenti CSS.

Applicazioni e vantaggi pratici

Abbiamo dimostrato perché la gestione degli attributi è un'aggiunta necessaria a Divi 5. Di seguito, esploriamo i casi d'uso chiave, evidenziano i benefici della funzionalità e forniamo un esempio pratico per illustrarne l'impatto sulla promozione di un flusso di lavoro aerodinamico.

Casi d'uso

La gestione degli attributi garantisce la coerenza del marchio consentendo ai progettisti di copiare e incollare stili su più pagine. Ad esempio, se il tuo marchio richiede che tutti i moduli di fisarmonica abbiano un carattere specifico e un colore icona, è possibile copiare gli attributi da un modulo di fisarmonica e applicarli a tutti i casi.

La gestione degli attributi consente di duplicare e modificare rapidamente i preset per testare le variazioni di progettazione. Ad esempio, è possibile copiare un preimpostazione di elementi per un modulo CTA, modificare i suoi colori o layout e applicarlo su moduli diversi per confrontare i disegni senza iniziare da zero. Ciò accelera la sperimentazione e l'iterazione durante il processo di progettazione.

È inoltre possibile eseguire aggiornamenti selettivi ripristinando gli attributi specifici da allineare con le linee guida di progettazione aggiornate. Ad esempio, se un client richiede un nuovo colore di sfondo per i pulsanti, è possibile ripristinare gli attributi del pulsante di un pulsante in un CTA, creare un nuovo stile e incollarlo su altri pulsanti sulla pagina, lasciando intatta altri stili come tipografia o bordi.

Benefici

Ci sono alcuni vantaggi nell'uso della gestione degli attributi per creare il tuo sito Web in Divi 5, tra cui:

• Risparmiano il tempo: la gestione degli attributi elimina lo stile manuale ripetitivo, un grande suvento di tempo per i siti Web di grandi dimensioni. Copiare e incollare attributi o preset tra elementi richiede pochi secondi, liberare i progettisti per concentrarsi sulla creatività piuttosto che su compiti noiosi.
• Rendono scalabili i tuoi progetti: i preset e la gestione degli attributi rendono gli aggiornamenti a livello di sito senza sforzo. Una singola modifica a un gruppo di opzioni preimpostata può propagare in tutti gli elementi collegati, garantendo coerenza anche su siti enormi con dozzine di pagine.
• Gli attributi forniscono precisione: il controllo granulare della gestione degli attributi garantisce che solo gli attributi desiderati vengano copiati, incollati o ripristinati. Questa precisione impedisce cambiamenti indesiderati, come il sovrascrittura dei contenuti quando si applica un preimpostazione di stile, dando fiducia ai progettisti nelle loro modifiche.

Suggerimenti e migliori pratiche

L'adozione di strategie e migliori pratiche intelligenti è importante per massimizzare il potenziale della gestione degli attributi. Questi suggerimenti ti aiuteranno a sfruttare efficacemente la gestione degli attributi, garantendo flussi di lavoro efficienti, progetti coerenti e un processo di progettazione regolare.

Impara l'interfaccia di gestione degli attributi

Uno degli aspetti migliori della gestione degli attributi è quanto sia profondamente integrato all'interno del Builder Visual. Assicurati di sperimentare ciò che fa ogni collegamento e prenditi del tempo per imparare a usarli. Ogni opzione ha uno scopo specifico. Ad esempio, è possibile copiare gli attributi quando si librano su un modulo di intestazione e il pulsante destro del mouse.

Quando si desidera incollare quegli attributi, ci sono diverse opzioni tra cui scegliere. Ad esempio, è possibile incollare tutti gli attributi dell'intestazione (inclusi design, stile e contenuto) o incollare attributi o preset specifici in modo selettivo attraverso qualsiasi modulo che abbia una intestazione.

Inizia con variabili e preset

Stabilire una solida base di progettazione creando variabili di progettazione globali, preset predefiniti, preset di elementi e preset di gruppi di opzioni all'inizio del progetto. Ad esempio, creare un gruppo di opzioni preimpostato per i bordi delle immagini e un elemento predefinito per i moduli di immagine per garantire uno stile coerente dall'inizio. Questo approccio proattivo riduce al minimo la rielaborazione e allinea tutti gli elementi con l'identità del tuo marchio.

Organizza i preset

Denominare i preset in modo chiaro e descrittivo per evitare confusione durante le attività di gestione degli attributi. Ad esempio, etichetta un gruppo di opzioni preimpostato come bordo arrotondato 15px anziché un nome generico, come lo stile 1 . La denominazione chiara semplifica l'identificazione e l'applicazione del preimpostazione corretta durante la copia o incolla gli attributi di un preimpostazione tra i moduli.

Controllare i punti di interruzione

Assicurati che gli attributi copiati, come stili reattivi, si allineino con i punti di interruzione personalizzabili personalizzabili di Divi 5 per desktop, tablet e dispositivi mobili. Ad esempio, quando si copia uno stile di testo, verifica che si renderà correttamente su tutti i dispositivi nella visione reattiva del Visual Builder prima di incollarlo altrove. Ciò garantisce che i tuoi progetti rimangono lucidati e funzionali su ogni dimensione dello schermo.

Seguendo queste migliori pratiche, è possibile sfruttare la gestione degli attributi per creare progetti coerenti, efficienti e professionali in Divi 5.

Scatena il potere della gestione delle applicazioni di Divi 5

La funzione di gestione degli attributi di Divi 5 ridefinisce l'efficienza nel web design consentendo ai progettisti di copiare, incollare e ripristinare gli attributi su moduli, colonne, righe o sezioni per il marchio coerente. Il suo controllo granulare e l'interfaccia intuitiva lo rendono una pietra miliare del moderno web design, semplificando compiti complessi in azioni precise.

Sei pronto a sperimentare la gestione degli attributi per te stesso? Scarica l'ultima alfa pubblica Divi 5 e tuffati in questa nuova funzionalità per vedere come può cambiare il modo in cui si crea siti Web con Divi. Solo una breve nota: Divi 5 è pronto a brillare su nuovi siti Web, ma non consigliamo ancora di migrare i siti esistenti.

Poiché Divi 5 continua a evolversi con interessanti funzionalità come i controlli di query Loop Loop e Flexbox, ora è il momento di sfruttare la gestione degli attributi e portare i tuoi web design al livello successivo.

Ci piacerebbe sentire i tuoi pensieri. Condividi la tua esperienza con noi nella sezione commenti qui sotto o unisciti alla conversazione sui social media taggarci sulla tua piattaforma preferita.