Come trasferire un nuovo stile di design in un'altra pagina utilizzando le funzioni di efficienza di Divi

Questa settimana, come parte della nostra iniziativa di design Divi in ​​corso, ti mostreremo come trasferire un nuovo stile di design in un'altra pagina utilizzando il pacchetto di layout del negozio di mobili di Divi. Con tutti i nuovi pacchetti di layout in uscita, potresti aver voluto cambiare lo stile di una pagina esistente utilizzando lo stile del nuovo pacchetto di layout. Invece di sostituire l'intera pagina, puoi anche trasferire lo stile del design utilizzando le funzioni di efficienza di Divi. Una delle opzioni più recenti incluse in Visual Builder è la funzionalità di copia e incolla su più pagine. Ciò ti consentirà di apportare molte modifiche in tutto il layout senza toccare le impostazioni di un elemento di design.

Ma ovviamente, ogni layout è unico, il che significa che dovrai applicare anche alcune modifiche manuali. La buona notizia è che puoi estendere queste impostazioni manuali a elementi simili sulla pagina con un clic. Si spera che questo post ti aiuti a seguire una certa struttura quando trasferisci uno stile di design.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato.

Approccio

Le strutture delle pagine differiscono l'una dall'altra, ecco perché è difficile trasferire completamente uno stile di design in un clic. Ma con Divi, puoi utilizzare le funzionalità di efficienza per accelerare il processo. Combineremo la funzione copia-incolla su più pagine, la funzione estendi stili e la funzione trova e sostituisci per risparmiare tempo nel trasferire uno stile di progettazione a una pagina esistente, senza dover modificare la struttura della pagina.

Parte 1: aprire due pagine una accanto all'altra

Inizieremo aprendo due pagine una accanto all'altra. La pagina esistente e la nuova pagina contenente lo stile di design che vogliamo applicare. Prenderemo la pagina di destinazione del Pacchetto di layout del negozio di mobili (lo stile di design che vogliamo applicare alla pagina esistente) e la pagina di destinazione del Pacchetto di layout della società di hosting (la pagina che vogliamo modificare).

Parte 2: ripristino di determinate impostazioni di sezione

La seconda parte riguarderà il ripristino di alcune impostazioni della sezione. Le impostazioni che devi ripristinare variano da layout a layout, ma di solito includono le impostazioni dello sfondo e le impostazioni del divisore.

Parte 3: utilizzo delle funzionalità di copia-incolla e estensione degli stili di Divi per la sezione Hero

Quindi, possiamo iniziare a utilizzare la funzione di copia-incolla tra le pagine di Divi per iniziare a cambiare le cose. La cosa naturale da fare è iniziare con le sezioni degli eroi. Cambieremo ogni elemento di design nella sezione eroe con il nuovo stile di design copiando le impostazioni del nuovo stile di design e incollandole nella pagina esistente. Dopo averlo fatto, estenderemo questi stili a elementi simili sulla pagina.

Parte 4: apportare modifiche manuali (in base al layout) e utilizzare le funzioni di efficienza

Come accennato in precedenza, ogni layout è unico. Ecco perché è necessario apportare modifiche manuali anche alla pagina esistente. Una volta apportate le poche modifiche, puoi estendere lo stile o utilizzare Trova e sostituisci per applicarlo a elementi simili nella pagina.

Parte 5: Aggiungi caratteristiche di progettazione

Ultimo ma non meno importante, puoi aggiungere determinate caratteristiche di design anche alla pagina esistente.

Parte 1: aprire due pagine una accanto all'altra

Crea una nuova pagina usando il layout usando la pagina di destinazione del pacchetto di layout del negozio di mobili

Ora che abbiamo esaminato la parte di approccio di questo post, iniziamo a utilizzare Divi! Aggiungi una nuova pagina utilizzando la pagina di destinazione del pacchetto di layout del negozio di mobili.

Crea una nuova pagina utilizzando la pagina di destinazione del pacchetto di layout della società di hosting

Crea un'altra pagina utilizzando anche la pagina di destinazione del pacchetto di layout della società di hosting. Sostituiremo lo stile di design di questo layout con il design della pagina di destinazione del pacchetto di layout del negozio di mobili.

Parte 2: ripristino di determinate impostazioni di sezione

Ripristina le impostazioni specifiche della sezione della pagina di destinazione della società di hosting

Apri la sezione degli eroi

Una volta che hai entrambi i layout nelle vicinanze, continua aprendo le impostazioni della sezione eroe della pagina di destinazione della società di hosting.

Ripristina sfondo sezione ed estendi a tutte le sezioni

Vai alle impostazioni dello sfondo e ripristina le opzioni facendo clic con il pulsante destro del mouse e facendo clic su Ripristina sfondo. Una volta fatto, puoi estendere questi stili di sfondo a tutte le sezioni della pagina per assicurarti che nessuna sezione della tua pagina contenga elementi di sfondo.

Ripristina divisori ed estendi a tutte le sezioni

Fai le stesse cose per i divisori di sezione per assicurarti che tutti i divisori di sezione sulla pagina siano spariti.

Parte 3: utilizzo delle funzionalità di copia-incolla e estensione degli stili di Divi per la sezione Hero

Elementi della sezione dell'eroe copia-incolla su più pagine

Impostazioni della sezione

È ora di iniziare a utilizzare l'opzione copia-incolla tra le pagine! Modificheremo ogni elemento di design nella sezione degli eroi. Inizia copiando gli stili della sezione degli eroi nella pagina di destinazione del negozio di mobili. Quindi, torna alla pagina di destinazione della società di hosting e incolla gli stili di sezione copiati.

Impostazioni riga

Fai la stessa cosa per la riga.

Modulo Testo Titolo

Copia anche gli stili del modulo del modulo di testo del titolo e applicali al titolo della pagina di destinazione della società di hosting.

Modulo corpo testo

Apri poi la descrizione Modulo di testo e copia gli stili di testo. Una volta fatto, applicali al modulo di testo nella pagina della società di hosting.

Estendi stili

Dopo aver applicato i nuovi stili di testo, vai avanti ed estendi questi stili a tutti i moduli della pagina.

Cambia gli orientamenti del testo indietro al centro dove necessario

Noterai che l'orientamento del testo a sinistra verrà applicato a tutti gli elementi di design in tutta la pagina. Puoi mantenerlo in questo modo o modificare manualmente l'orientamento del testo.

Impostazioni dei pulsanti

L'ultimo modulo nella sezione degli eroi a cui dovrai applicare nuovi stili di modulo è il modulo pulsante.

Estendi gli stili per le impostazioni dei pulsanti

Invece di estendere gli stili dell'intero modulo pulsante, estenderemo le impostazioni specifiche dei pulsanti.

Estendi gli stili per la spaziatura

Insieme alle impostazioni di spaziatura.

Estendi gli stili per Box Shadow

E anche le impostazioni dell'ombra della scatola.

Copia-incolla gli elementi rimanenti una volta + Estendi stile

Divisore

Avremo anche bisogno di copiare e incollare gli stili del modulo divisore e applicarli ai divisori nella pagina di destinazione della società di hosting.

Estendi stili

Ancora una volta, estendi gli stili di questo modulo all'intera pagina.

Parte 4: apportare modifiche manuali (in base al layout) e utilizzare le funzioni di efficienza

Modifiche specifiche del layout

Trova e sostituisci il carattere del titolo

È ora di iniziare a fare alcune modifiche manuali! La prima cosa che faremo è abbinare il carattere. Apri un modulo di testo nella pagina e trova il carattere Rubik utilizzato in tutta la pagina. Quindi, fai clic su Trova e sostituisci e sostituisci il carattere con Montserrat.

Trova e sostituisci il peso del carattere del titolo

Fai la stessa cosa per il peso del carattere. Invece di usare Medio, seleziona Chiaro.

Trova e sostituisci angoli arrotondati

Stiamo anche rimuovendo i bordi degli angoli arrotondati in tutta la pagina utilizzando Trova e sostituisci e applicando "0px" a ciascuno degli angoli della pagina.

Ripristina le impostazioni dello sfondo dell'invito all'azione ed estendi lo stile nella sezione

Continua trovando i moduli di invito all'azione nella pagina e ripristina le impostazioni di sfondo del primo modulo. Quindi, estendi questi stili a tutti gli inviti all'azione nella sezione.

Trova e sostituisci il colore di sfondo dell'invito all'azione nella sezione

Una volta fatto, apparirà il colore di sfondo predefinito. Trova e sostituisci questo colore e cambialo in "#1a2545" in tutta la sezione.

Trova e sostituisci il colore del testo dell'invito all'azione nella sezione

Sostituisci anche il Colore del testo con "Chiaro" in tutta la sezione.

Modifica le impostazioni del pulsante della tabella dei prezzi

Quindi, vai alle tabelle dei prezzi sulla pagina e modifica le impostazioni del pulsante:

• Colore di sfondo del pulsante: #ef6f49
• Larghezza bordo pulsante: 8px
• Colore bordo pulsante: #ef6f49
• Raggio bordo pulsante: 0px
• Spaziatura lettere pulsanti: 2px (predefinito), 1px (passa il mouse)
• Carattere pulsante: Montserrat
• Peso del carattere: semi grassetto
• Stile carattere: maiuscolo
• Allineamento dei pulsanti: a sinistra

Estendi gli stili per le tabelle dei prezzi e i moduli CTA

Estendi la nuova impostazione del pulsante a tutte le tabelle dei prezzi e ai moduli di invito all'azione in tutta la pagina.

Parte 5: Aggiungi caratteristiche di progettazione

Colore di sfondo della sezione n. 1

Nell'ultima parte di questo tutorial, aggiungeremo manualmente alcune caratteristiche del design. Ciò include, ma non è limitato a, le impostazioni in background. Apri la sezione contrassegnata nella schermata di stampa sottostante e cambia il colore di sfondo.

• Colore di sfondo: #f7f3ec

Colore sfondo sezione #2

Fai la stessa cosa per la sezione sottostante.

• Colore di sfondo: #f7f3ec

Sfondo sfumato sezione #1

Quindi, trova la sezione nella schermata di stampa in basso e aggiungi uno sfondo sfumato.

• Colore 1: #ffffff
• Colore 2: #1a2545
• Direzione gradiente: 90 gradi
• Posizione di partenza: 55%
• Posizione finale: 55%

Sfondo sfumato sezione #2

Usa un altro sfondo sfumato per la sezione seguente:

• Colore 1: rgba (210,218,228,0,38)
• Colore 2: #ffffff
• Direzione gradiente: 90 gradi
• Posizione di partenza: 45%
• Posizione finale: 45%

Sfondo sfumato sezione #3

Ultimo ma non meno importante, aggiungi uno sfondo sfumato lineare anche all'ultima sezione della pagina.

• Colore 1: #ffffff
• Colore 2: #f7f3ec
• Posizione di partenza: 40%
• Posizione finale: 40%

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato.

Pensieri finali

In questo post, ti abbiamo mostrato come trasferire lo stile di progettazione di un layout utilizzando le funzionalità di efficienza di Divi. Questa esercitazione sfrutta la nuova funzionalità di copia e incolla su più pagine che fa parte del nuovo Visual Builder. Questo tutorial fa parte della nostra iniziativa di progettazione Divi in ​​corso in cui ogni settimana cerchiamo di aggiungere qualcosa in più alla tua cassetta degli attrezzi di progettazione. Se hai domande o suggerimenti, assicurati di lasciare una sezione commenti qui sotto!