La flessibilità di estendersi a diversi tipi di elementi in Divi 5

Fare aggiornamenti di design non dovrebbe sembrare che le caselle di controllo. Ma troppo spesso, anche qualcosa di semplice, come cambiare uno stile di bottoni o aggiornare un carattere, significa modificare manualmente ciascun modulo. È lento, ripetitivo e facile da rovinare.

Divi 5 fissa che con gli attributi estensi, una versione aggiornata degli stili di estensione di Divi 4. Ti consente di applicare una modifica una volta e di estenderlo ovunque, anche attraverso diversi elementi e tipi di moduli. In questo post, esamineremo come questa flessibilità può farti risparmiare tempo e ripulire il flusso di lavoro.

Cosa sono gli attributi estensi in Divi 5?

Estendi gli attributi ti consente di estendere stili, contenuti o preset da un elemento ad altri con pochi clic senza la necessità di modificare manualmente ciascun modulo.

Iscriviti al nostro canale YouTube

Ma non è il tuo tipico flusso di lavoro da copia e incolla (anche noi, se sei interessato). Estendi gli attributi funziona attraverso diversi tipi di elementi e moduli, non solo quelli identici. Ad esempio, puoi modellare una volta una volta e applicare lo stesso carattere su un titolo a disattivazione, un nome del modulo di persona o una intestazione blurb. Finché condividono lo stesso gruppo di stile, come il testo, seguiranno.

E non si ferma qui. Puoi estendere qualsiasi cosa, ovunque. Copia un colore di sfondo da una sezione e applicalo su ogni riga, sezione, colonna o modulo sulla tua pagina.

O riutilizzare gli stili del pulsante attraverso diversi moduli; È possibile estendere gli stili da un invito all'azione a un modulo di contatto. Una volta che inizi a usarlo, cambierai il modo in cui pensi agli aggiornamenti. Non rimarrai più bloccato a fare le stesse cose ancora e ancora. Con gli attributi di estensione, rimarrai coerente, risparmierai tempo e muoverà attraverso le modifiche al layout più velocemente e con maggiore controllo.

Usando gli attributi estendi in Divi 5

Estendi gli attributi è semplice da usare e ti dà molta flessibilità. Per iniziare, fai clic con il tasto destro del mouse sull'elemento che hai già disegnato. Questo potrebbe essere un modulo, una colonna, una riga o anche un'intera sezione. Dal menu che appare, seleziona estendi gli attributi.

(Puoi anche fare clic con il pulsante destro del mouse direttamente su un gruppo di impostazione specifico, come il carattere o la spaziatura. Questo apre il pannello Attributi Extend con quel gruppo già selezionato, il che rende il processo più veloce e più preciso quando sai esattamente cosa stai prendendo di mira.)

Una volta che il pannello di Extent Attributi si aprirà, decidi cosa estendere e dove applicarlo.

Vedrai alcune opzioni chiare:

• (1.) Estendi dall'elemento: l'articolo che hai disegnato e desideri copiare.
• (2.) Estendersi alla posizione: scegli fino a che punto dovrebbero andare le modifiche. Solo la sezione corrente, la riga principale o l'intera pagina.
• (3.) Estendi al tipo di elemento: scegli il tipo di elemento che si desidera target, come solo moduli di testo o tutti i moduli.
• (4.) Tipo di attributo da estendere: scegli cosa copiare: design, contenuto, preset o qualsiasi mix di quelli.
• (5.) Gruppo di opzioni da estendere: concentrarsi su un gruppo specifico di impostazioni, come stili di testo, bordo o pulsante.
• (6.) Campi modificati per estendere: è possibile applicare solo i campi che hai cambiato o includere tutto.

Ecco un rapido esempio. Supponiamo che tu abbia disegnato un'intestazione all'interno di un modulo di testo e desideri che lo stesso carattere applicato ad altre intestazioni nella stessa sezione. Imposteresti la posizione sulla sezione genitore , il tipo di elemento su testo, quindi scegli il gruppo di opzioni del corpo (poiché vogliamo solo trasferire gli stili del corpo).

Una volta applicato, ogni modulo di testo corrispondente in quella sezione si aggiorna con lo stesso stile di carattere.

Questo è ciò che rende gli attributi estendi particolarmente utili. Non sei bloccato a copiare interi disegni. Puoi scegliere esattamente ciò che vuoi estendere, solo un gruppo o più proprietà contemporaneamente. Puoi persino trasportare contenuti e design in un modulo completamente diverso.

Ma se all'inizio le impostazioni sembrano molto, capire che è completamente normale. Potrebbe essere necessario testare alcune combinazioni per capire come funzionano gli ambiti, i tipi di elementi e i gruppi di impostazione. Una volta che fa clic, diventa uno degli strumenti più efficienti nel flusso di lavoro Divi.

Nella sezione successiva, passeremo attraverso esempi pratici per mostrare come si riunisce tutto. Una volta compreso come funziona ogni impostazione, estendi gli attributi diventa uno strumento potente per la creazione di progetti coerenti senza ripetere lo stesso lavoro.

Scopri tutto sugli attributi di Extend di Divi 5

Come gli attributi Extend di Divi 5 superano gli stili di estensione di Divi 4

Se hai usato Divi 4, probabilmente hai familiarità con gli stili di estensione. Ti consente di copiare le impostazioni di progettazione da un elemento all'altro, ma solo all'interno dello stesso tipo di elemento. Ciò lo ha reso utile per soluzioni rapide, ma limitando gli aggiornamenti più complessi.

Gli attributi di Extend di Divi 5 portano questa idea molto oltre. Non solo copia il design, funziona anche con contenuti e preset , dandoti il pieno controllo su ciò che viene applicato e dove. Puoi anche scegliere proprietà specifiche per estendersi , come solo il colore di sfondo o il raggio del bordo, senza influire su nient'altro.

Non sei più bloccato in tipi di moduli corrispondenti o ripeti le stesse modifiche in un layout. Estendi gli attributi ti consentono di scegliere esattamente cosa riutilizzare e fino a che punto dovrebbe andare, sia che si tratti di sezioni o di un'intera pagina. È costruito per adattarsi al tuo flusso di lavoro e rendere lo stile più veloce, più intelligente e coerente.

Gli attributi estendi sono disponibili in Divi 5 - Scarica l'ultima versione per provarlo ora.

5 Esempi pratici di ciò che puoi estendere (e come)

Finora abbiamo parlato di ciò che gli attributi estensi possono fare. Ora diamo un'occhiata a come puoi effettivamente usarlo. Questi esempi passano attraverso diverse combinazioni di impostazioni che puoi provare a risparmiare tempo e applicare aggiornamenti in modo più efficiente.

1. Estendi gli stili su diversi tipi di elementi

Estendi gli attributi non ti blocca in una gerarchia fissa. Puoi applicare stili su diversi livelli di layout, sia che tu stia passando da una sezione a un modulo o da una riga a una colonna.

Ciò semplifica la creazione di connessioni visive attraverso il layout. Un modulo di testimonianze può corrispondere alla sezione in cui si trova. Un modulo Call to Action può raccogliere stili dalla riga sopra. Non ti limiti a estendere gli stili tra elementi simili, purché condividano un gruppo di stile. A seconda delle esigenze di progettazione, puoi passare da ampie a specifiche o viceversa.

Si estende da una sezione a una colonna

Supponiamo che tu abbia aggiunto un sottile raggio di bordo alla sezione per ammorbidire i bordi del layout. All'interno di quella sezione, hai una colonna con un'immagine di sfondo e vuoi che rispecchia gli stessi angoli arrotondati per la coerenza visiva.

Invece di riapplicare manualmente il raggio, basta fare clic con il pulsante destro del mouse sulla sezione, scegliere Attributi estendi , impostare il tipo di elemento sulla colonna e selezionare Bordo dai gruppi di opzioni.

La colonna erediterà lo stesso raggio del bordo, quindi l'immagine di sfondo o il layout nidificato non rompe il flusso visivo.

Che si estende da una sezione a una riga

Un altro esempio è quello di estendere l'imbottitura da una sezione a righe o altre sezioni per mantenere uno spazio bianco coerente. Fare clic con il pulsante destro del mouse sulla sezione, selezionare Attributi estendi , Imposta il tipo di elemento su riga e selezionare Spaziazioni dai gruppi di opzioni.

Tutte le righe ereditano ora gli stessi valori di imbottitura, dando la spaziatura coerente della pagina.

Si estende da una sezione a un modulo

Supponiamo che una sezione abbia già lo sfondo, il bordo o la spaziatura che desideri. Invece di ricreare quegli stili altrove, puoi passarli direttamente a un altro elemento, anche se è nidificato all'interno o posizionato al di fuori di quella sezione.

Ad esempio, se una sezione ha lo sfondo desiderato in una testimonianza, usa solo gli attributi estendi. Scegli testimonial come tipo di elemento, impostare l'ambito su tutta la pagina e assicurarsi che gli attributi di sfondo siano selezionati.

Una volta applicata, la testimonianza eredita tale sfondo senza bisogno di modifiche manuali.

Nel web design, dettagli visivi coerenti come colori di sfondo, bordi e spaziatura aiutano a legare tutto insieme. Con gli attributi di estensione, puoi facilmente trasportare tale coerenza attraverso il layout e creare un'esperienza lucida e sul marchio senza iniziare da zero ogni volta.

Che si estende da una colonna a una riga

Puoi anche seguire un approccio inverso, ad esempio, estendersi da una colonna a una riga. Supponiamo che tu abbia aggiunto una linea pulita e solida per inquadrare le colonne. Se vuoi che la riga fa parte di portare lo stesso stile di confine per la coerenza visiva, puoi riutilizzare istantaneamente quegli stili. Basta estendere il gruppo di opzioni di confine alla riga principale.

La riga raccoglie le stesse impostazioni del bordo, creando una chiara connessione visiva tra i due. Funziona particolarmente bene quando si costruiscono sezioni a strati o layout in scatola che si basano su contorni o separatori coerenti.

Queste sono solo alcune combinazioni, che possono anche essere invertite . In pratica, puoi estendere gli stili su quasi tutti i livelli di layout. Estendi gli attributi danno la piena flessibilità, dall'applicazione della spaziatura delle colonne ai moduli al suo interno alle ombre della sezione in righe o pulsanti. Puoi anche:

• Copia un raggio di confine da una riga e applicalo a un modulo
• Riutilizzare un'animazione di trasformazione da un modulo tra le colonne
• Estendi l'allineamento dei caratteri da una sezione a tutti i moduli di testo al suo interno
• Applica i filtri di immagine da una colonna all'altra per uno stile coerente
• Se due elementi condividono un gruppo di stile e un contesto, gli attributi estendi possono probabilmente gestirlo.

L'obiettivo non è memorizzare tutte le combinazioni ma sperimentare e scoprire cosa funziona per il tuo layout. Una volta che inizi a pensare alle mosse di design riutilizzabili anziché alle modifiche uniche, il flusso di lavoro diventa naturalmente più veloce, più pulito e coerente.

2. Estendi gli stili su diversi tipi di moduli

Estendi gli attributi riconosce i gruppi di stile condiviso come il pulsante, quindi è possibile applicare lo stesso stile su diversi moduli in pochi passaggi.

Ad esempio, supponiamo che tu abbia progettato un pulsante che ami e desideri usarlo in un modulo di contatto. Invece di rosyling manualmente, fai clic con il pulsante destro del mouse sul pulsante originale, seleziona estendi gli attributi , seleziona il gruppo di opzioni pulsanti e imposta il tipo di elemento sul modulo di contatto . Quindi impostare l'ambito su tutta la pagina .

Il design porterà immediatamente il pulsante di invio del modulo di contatto senza modifiche manuali.

Puoi ripetere il processo anche per altri moduli. Se si desidera estendere lo stesso stile a un pulsante a un'ottin e -mail, modifica il tipo di elemento in e -mail Optin e il pulsante corrisponderà automaticamente.

Questo tipo di stile incrociato di modulo risparmia ore quando si lavora con layout pesanti. Poiché Divi tratta i pulsanti come parte di un gruppo condiviso, puoi modellare una volta e riutilizzare ovunque senza rompere la coerenza.

3. Salva ed estendi i preset del gruppo di opzioni

Estendi gli attributi funziona anche con i preset, permettendo di riutilizzare gli stili salvati attraverso il layout.

Ad esempio, immagina di aver progettato una colonna con angoli arrotondati, un bordo sottile e un'ombra morbida. Lo salvi come preset di confine per usarlo di nuovo più tardi.

L'opzione Extend Border Preset appare solo se l'elemento ha i preset salvati.

Ora, invece di applicare manualmente quella preimpostazione ad altre colonne, puoi estenderlo in un solo passaggio. Basta fare clic con il pulsante destro del mouse sulla colonna originale, scegliere Attributi estendi e selezionare Estendi Border Preset dal pannello.

Una volta selezionato, impostare il tipo di elemento su colonna e la sezione dell'ambito su un genitore o l'intera pagina , a seconda di dove si desidera applicare. Lo stile preimpostato viene immediatamente portato alle altre colonne senza impostarlo di nuovo.

Ciò semplifica mantenere il layout coerente, soprattutto quando si lavora con stili di bordo personalizzati, ombre o qualsiasi altro design raggruppato sotto un preset.

4. Stile una volta e poi estendere solo ciò che hai cambiato

Quando si costruisce un layout da zero, lo styling ogni elemento individualmente può sentirsi infinito. Estendendo gli stili una proprietà alla volta, come prima ombra, quindi bordo e poi spaziatura, ti rallenta.

È qui che entra in gioco l'opzione di tutti i campi modificati . Invece di selezionare manualmente ciascuna impostazione, è possibile modellare un elemento e quindi applicare solo le modifiche apportate al resto.

Ad esempio, supponiamo che tu abbia aggiunto un bordo morbido e un'ombra di luce a un'immagine in una galleria.

Per applicare lo stesso look a tutte le altre immagini, fare clic con il pulsante destro del mouse sull'immagine in stile, selezionare Attributi estendi e selezionare tutti i campi modificati nei campi modificati per estendere la colonna.

Solo le proprietà che hai cambiato porteranno il numero. Tutto il resto rimane intatto. Ciò mantiene il tuo design coerente senza sovrascrivere altre impostazioni, ed è uno dei modi più semplici per accelerare lo stile di massa senza perdere il controllo.

5. Estendi gli stili all'interno di un singolo modulo

L'estensione degli attributi funziona non solo tra i moduli ma anche al loro interno. Prendi il modulo di fisarmonica, per esempio. Se hai mai disegnato un oggetto e poi hai dovuto ripetere quei cambiamenti cinque volte, sai quanto possa essere noioso.

Ora, devi solo modellare il primo oggetto ed estendere ulteriormente gli stili.

Dopo aver applicato il tuo design, basta aprire il pannello Attributi Extend, scegliere il modulo Focono

Quando confermi, tutti gli altri elementi all'interno dello stesso aggiornamento del modulo automaticamente. È un modo rapido per mantenere coerente il tuo stile e applicare le modifiche in tutti gli articoli con una singola azione.

Estendere gli attributi sblocca la vera flessibilità del design

Gli attributi di Extend di Divi 5 ti danno un modo più veloce e focalizzato per apportare modifiche al design. Dai pulsanti e intestazioni ai bordi, al contenuto e persino agli elementi nidificati, hai il pieno controllo su ciò che viene copiato e dove va.

Funziona su diversi moduli, sezioni di layout e livelli di progettazione, il tutto mantenendo il flusso di lavoro regolare ed efficiente. Ma puoi crederci solo se lo provi da solo. Quindi sperimenta gli attributi estendi in Divi 5 oggi e condividi la tua esperienza con noi qui sotto!