Rebranding di un sito Web in 5 minuti con attributi estendi

Il rebranding del tuo sito Web non richiede una ricostruzione completa, anche se spesso si sente così. I caratteri sono bloccati in parti separate, i colori sono sparsi tra le sezioni e la spaziatura è nascosta nelle singole impostazioni. E dopo aver aggiornato la homepage, trovi altre pagine che necessitano delle stesse modifiche. È la solita routine, ma c'è un modo più veloce.

Con gli attributi estendi in Divi 5, è possibile modellare un singolo elemento e applicare istantaneamente che look a ogni modulo simile attraverso righe, sezioni e persino l'intera pagina. Cammiamo attraverso come usarlo per rifornire un sito Web completo in pochi minuti, non ore.

Cosa sono gli attributi estendi in Divi 5

Estendi gli attributi è una funzione Divi 5 che consente di prendere la progettazione di un modulo e applicarlo ad altri elementi o moduli che lo circondano. Ciò significa che se hai disegnato un pulsante, un'intestazione o un blocco di testo, non devi ricreare quegli stili da zero, perché puoi semplicemente estenderli ad altri elementi.

Ecco come funziona in pratica. Inizi modificando qualsiasi modulo nel Visual Builder. Quindi, invece di ripetere quelle modifiche Modulo per modulo, basta fare clic con il pulsante destro del mouse sul modulo e scegliere Attributi estendi.

Divi chiederà dove vuoi che quegli stili vadano. Una volta confermato, tutti i moduli corrispondenti adottano gli stessi stili. Estendi gli attributi non cercano ciò che corrisponde, ma copia l'aspetto attuale e lo applica al bersaglio preferito.

Questo lo rende uno dei modi più veloci per implementare i cambiamenti di progettazione senza micromanaging ogni blocco. Ti aiuta a trasformare lo stile ripetitivo in una singola azione, non importa se stai costruendo da zero o rinominando un intero layout.

In che modo gli attributi estendi aiutano a rinominare un sito Web più veloce

Cammineremo come puoi utilizzare gli attributi estensi da soli e anche con i preimpostazioni del gruppo di opzioni per accelerare il processo di rebranding del tuo sito Web.

Usando gli attributi estendi in Divi 5

Il processo è semplice: stile uno modulo, fai clic con il pulsante destro del mouse per scegliere gli attributi estendi ed estendere tali scelte di progettazione a ogni modulo simile, senza aprire due volte un singolo pannello di impostazione. Passiamo attraverso di esso usando un vero esempio.

Dì che vuoi rinominare tutti i tuoi pulsanti di chiamata all'azione. Inizia acconciando il modulo a un pulsante all'interno del Builder Visual.

Una volta terminato, fare clic con il pulsante destro del mouse e selezionare ESTLITTI ATTRITTI. (Abbiamo selezionato gli attributi di progettazione dei pulsanti poiché vogliamo solo estendere gli stili, non il contenuto. Noterai anche molte opzioni, che ti aiutano a micro-selezionare proprietà specifiche.)

Si aprirà il pannello Attributi Extent e puoi scegliere tra diverse opzioni per decidere come e dove dovrebbero essere applicate le modifiche al design.

• (1) Estendi dall'elemento: il modulo da cui ti stai estendendo, come il pulsante come nel nostro caso. Questo viene automaticamente riempito in base a ciò che hai fatto clic con il pulsante destro del mouse.
• (2) Estendersi alla posizione: scegli fino a che punto dovrebbe andare il design. Abbiamo selezionato l'intera pagina poiché vogliamo che tutti i pulsanti dalla pagina cambino.
• (3) Estendi al tipo di elemento: scegli quali tipi di moduli dovrebbero ricevere i nuovi stili. Ad esempio, solo moduli pulsanti o tutti i moduli simili.
• (4) Tipo di attributo per estendere: specificare ciò che si desidera copiare. Abbiamo scelto gli attributi di design e lasciato gli altri fuori.
• (5) Gruppo di opzioni da estendere: decidere quali gruppi di opzioni applicare: testo, pulsante, bordo, spaziatura, ecc.
• (6) Campi modificati per estendere: è anche possibile limitare la selezione a una sola proprietà in stile o scegliere tutti i campi modificati per estendere tutte le modifiche apportate.

Dopo aver selezionato le tue preferenze, fai clic su Employ Attributi e i nuovi stili verranno applicati a tutti gli altri pulsanti della pagina.

Hai notato come non era necessario cercare valori di corrispondenza? Questo perché gli attributi estensi non importa quali fossero gli stili originali. Copia l'aspetto corrente dal modulo selezionato e lo incolla direttamente su ogni modulo simile nella posizione scelta.

Questo è ciò che lo rende così utile per i pacchetti di layout e i siti Web esistenti. Estendi gli attributi danno il controllo totale con un modulo in stile e un clic, sia che tu stia regolando le dimensioni dei caratteri, aggiornando i colori o di modifica della spaziatura.

Impara tutto sugli attributi estendi

Utilizzo dei preimpostazioni del gruppo di opzioni con attributi estendi

Quando lavori su un sito Web con più pagine, non è sufficiente copiare visivamente gli stili. Vuoi un sistema che si attacca, ed è qui che entrano in gioco i preset.

I preset ti consentono di salvare un gruppo di stili all'interno di qualsiasi modulo e di riutilizzarli sul tuo sito. Combinalo con gli attributi estendi e hai un modo rapido e flessibile per rinominare non solo una pagina, ma l'intero sito Web. Questa combinazione ti aiuta anche il tuo sito Web a prova di futuro, in modo tale che se è necessario rinominare di nuovo, puoi facilmente modificare i preset e tutti i moduli in cui vengono utilizzati si aggiorneranno anche.

Torniamo all'esempio del pulsante per capire come funziona.

Avevamo in stile un pulsante con un look nuovo di zecca. Ora, invece di estendere le impostazioni come valori statici, le salveremo come preset.

Ecco dove entra in gioco gli attributi. Quando fai clic su Attributi Extend, vedrai apparire i preset che hai salvato. Selezionare individualmente se si desidera estendere solo i preset selezionati o scegliere i preset di pulsanti estendi per trasportare tutti.

Quando estendi, Divi non copia solo l'aspetto; Applica il tuo preset salvato dietro le quinte. Quindi qualsiasi altro pulsante che tocca ora utilizza lo stesso preset.

Perché aggiungere un altro passaggio? È qui che beneficiano dei vantaggi del tuo sito Web a prova di futuro. Supponiamo che nei prossimi mesi decidi di modificare lo stile del tuo pulsante in seguito. Vorresti estendere di nuovo gli stili? No, giusto?

Bene, non devi nemmeno perché devi aggiornare il preimpostazione solo una volta. Poiché tutti i moduli dei pulsanti sono stati costruiti con lo stesso preset, ogni istanza che lo utilizza automaticamente.

Inoltre, una volta salvati, i preimpostazioni del gruppo di opzioni sono disponibili anche su altre pagine. Quindi, quando hai finito di rinominare la tua home page e passare agli altri, applicherai semplicemente i tuoi preset salvati e li prolungherai in pochi minuti.

Ecco perché utilizzare i preimpostazioni del gruppo di opzioni con attributi estensivi è un modo più innovativo di rinominare. Ottieni una coerenza visiva e un sistema facile da aggiornare senza rifare il tuo lavoro.

Impara tutto sui preset del gruppo di opzioni

Vuoi provarlo da solo? Avrai bisogno di Divi 5, che porta attributi di estensione, preset del gruppo di opzioni e molte altre funzionalità nel nuovo costruttore. È stato riprogettato da zero a velocità, controllo e flusso di lavoro di progettazione più fluido.

Come rinominare un sito Web con attributi estensi

Ora che hai visto come funzionano gli attributi di estensione e come si abbina ai preimpostazioni del gruppo di opzioni, è tempo di applicarlo a un sito web reale.

Per questa procedura dettagliata, useremo il pacchetto di layout software AI. È un sito Web completo con pagine come Home, circa, contatto e prezzi. Non stiamo mirando a una revisione completa qui. È solo un marchio leggero, il tipo che normalmente faremmo nei nostri aggiornamenti mensili.

Per iniziare, guarda gli elementi che definiscono l'identità visiva del tuo sito, come pulsanti, intestazioni, sfocature e testo del corpo. Questi moduli si presentano su più pagine e portano la maggior parte della personalità del marchio. Una volta che hai rinnovato solo alcuni di essi, estendi gli attributi ti consentono di spingere quei cambiamenti ovunque appaiono.

Cammiamo esattamente cosa aggiornare.

Ribadire visivamente i moduli chiave attraverso il layout

Inizieremo con la homepage, poiché dà il tono per il resto del sito. La maggior parte dei siti Web ripete gli stessi modelli di progettazione su più pagine, quindi una volta aggiornate la homepage, avrai le basi per tutto il resto.

Dopo aver scansionato il layout, abbiamo identificato gli elementi più visibili che modellano l'aspetto del marchio. Questi sono pulsanti, intestazioni, sfocature, testo del corpo e immagini. Dato che abbiamo già rinominato i nostri pulsanti, inizieremo con le intestazioni.

Moduli di rebranding

Innanzitutto, personalizza qualsiasi modulo di intestazione per riflettere il tuo nuovo marchio. Inizierò con H4S.

Una volta che sei soddisfatto dello stile, fai clic con il pulsante destro del mouse sul modulo e scegli gli attributi estendi . Seleziona l'ambito per l' intera pagina e il tipo di modulo su testo . Applicare la modifica a tutti i moduli H4 sulla pagina.

Allo stesso modo, rinominerete H1, H2 e H4S per unificare la tipografia e dare al tuo sito una voce coerente in pochi clic senza rinfrescare ogni modulo di intestazione manualmente.

Rebranding Body Testo per una migliore leggibilità

Ora aggiorniamo il testo del corpo. Inizia raccogliendo qualsiasi modulo di testo con un blocco di paragrafo. Personalizza per abbinare il tono del tuo marchio. Quando sei soddisfatto delle modifiche, fare clic con il pulsante destro del mouse sul modulo e selezionare ESPLIT Attributi . Scegli di applicare l'aggiornamento su tutti i moduli di testo nella pagina.

Questo dà ai tuoi paragrafi uno stile coerente attraverso la pagina in pochi secondi ed elimina la necessità di modificare ciascuno di essi individualmente.

Rebranding Blurb Borders

Successivamente, voglio aggiungere un bordo per semplificare tutti i miei moduli Blurb. Quindi, modellerò una colonna, quindi fai clic con il pulsante destro del mouse sulla colonna nella scheda Design della riga e seleziona Copia gli stili . Quindi, incolla gli stili alla colonna successiva e così via.

Noterai che ho cambiato il layout della riga in Flex e Divi ha equalizzato automaticamente le altezze della colonna, mantenendo le sfocature allineate, indipendentemente dal contenuto che contengono. Funziona perché Divi ora supporta le funzionalità Flexbox, che ti aiutano a creare layout reattive e intelligenti più velocemente.

Rifornire altre pagine che utilizzano preset salvate

Ora che la homepage viene aggiornata, non è necessario ripetere il processo da zero. Puoi duplicare sezioni o righe in altre pagine o, poiché hai salvato i tuoi nuovi stili come preimpostazioni del gruppo di opzioni, sei già impostato.

I tuoi preset salvati appariranno su tutte le pagine.

Tutto quello che devi fare è applicarli dove necessario e utilizzare gli attributi estendi per spingere gli stili all'istante. Non ci sono modifiche manuali e nessun lavoro di progettazione ripetuta.

Puoi seguire lo stesso processo per rinominare altre pagine sul tuo sito Web.

Estendi gli attributi ti dà la flessibilità di goderti di nuovo il rebranding. Sono fantastici quando vuoi restyling visivamente moduli attraverso una pagina.

Ma se hai bisogno di scambiare un valore specifico, come un codice esadecimale, una dimensione del carattere o un'unità di spaziatura, attraverso diversi moduli, ti consigliamo di provare a trovare e sostituire. Funziona particolarmente bene per i pacchetti di layout che utilizzano valori codificati. È possibile utilizzare Trova e sostituire per scambiare quelli con variabili di design salvate per ottenere una maggiore flessibilità per gli aggiornamenti futuri.

SUGGERIMENTO PRO: Usa gli attributi estendi con le variabili di progettazione

Estendere gli attributi non solo copiare gli stili statici; Può anche trasportare le variabili di design salvate. Ad esempio, se hai assegnato una variabile di carattere di testa a un modulo di testo, è possibile estendere le impostazioni di quel modulo a tutti gli altri moduli di testo nella pagina. Invece di ogni intestazione che trasporta valori duri, tutti ereditano la stessa variabile.

Ciò significa che gli aggiornamenti futuri sono ancora più semplici: regola la variabile una volta in variabile manager e ogni modulo esteso si aggiorna automaticamente. È un modo potente per combinare gli attributi estendi con il sistema variabile di Divi 5 per il controllo scalabile e a livello di marca.

Estendere gli attributi ti consente di rinominare senza ricostruire

Il rebranding non deve significare la ricostruzione. Con gli attributi di estensione, si modella un modulo e applichi quell'aspetto al resto, tagliando le ore di modifica fino ai secondi.

Sia che tu stia lavorando con un pacchetto di layout o aggiornando un sito live, Divi 5 ti dà il modo più veloce per aggiornare il tuo design senza toccare ogni singolo elemento.