Come applicare un colore del testo sfumato alla tua copia utilizzando solo le opzioni integrate di Divi

Indipendentemente dal tipo di sito Web che stai creando, l'evidenziazione di testi e contenuti rimane una delle priorità principali. Con le opzioni integrate di Divi, ci sono un sacco di modi per arrivarci. Una delle possibilità che hai è applicare un colore del testo sfumato alla tua copia. Questo è un ottimo approccio per aggiungere colore al tuo sito web, soprattutto se stai mantenendo il resto del tuo sito web pulito e minimalista. Aiuta a bilanciare gli spazi bianchi e dà al tuo sito web una boccata d'aria fresca.

In questo tutorial, ti mostreremo come dare al tuo testo un colore sfumato usando solo le opzioni integrate di Divi.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di diverse dimensioni. Ti mostreremo come farlo funzionare usando sia una tavolozza di colori chiari che scuri. Una volta ottenuto l'approccio, puoi creare tutti i tipi di design con testo sfumato.

Approccio

1. Comprensione delle modalità di fusione Divi

Le modalità di fusione funzionano esattamente come sei abituato a utilizzare nei software di modifica delle immagini. Sono basati su strutture a strati. Concretamente, ciò significa che una modalità di fusione in Divi seguirà una certa gerarchia:

• Una modalità di fusione applicata a un modulo fonderà il modulo + la colonna sottostante
• Una modalità di fusione applicata a una colonna fonderà la colonna + la riga sottostante
• Una modalità di fusione applicata a una riga fonderà la riga + la sezione sottostante

Per questo tutorial, è necessario capire che una modalità di fusione applicata a un modulo si fonderà con la colonna sottostante. Assegnando alla colonna uno sfondo sfumato e al modulo in questione una modalità di fusione, possiamo riuscire a ottenere un testo con colori sfumati.

2. Scegliere tra una tavolozza di colori completamente scura o chiara

Per farlo funzionare, dovrai utilizzare una tavolozza di colori completamente scuri o chiari. Le modalità di fusione che stiamo utilizzando, schiarire e scurire, forniranno il risultato desiderato solo quando utilizzi un colore completamente nero o bianco. Quando si usano altri colori, l'effetto che abbiamo applicato sarà visibile.

3. Rimozione di tutta la larghezza della grondaia tra colonne e moduli

Come accennato nella prima parte dell'approccio, utilizzeremo sfondi con gradiente di colonne. Per assicurarci che questo sfondo sfumato non venga visualizzato ovunque non vogliamo, rimuoveremo tutta la larghezza della grondaia. In questo modo, ci assicureremo che non venga applicato alcun margine personalizzato predefinito tra i moduli. Per recuperare lo spazio che perdiamo, aggiungeremo manualmente un'imbottitura personalizzata.

4. Utilizzo dell'imbottitura invece di modificare la larghezza di un elemento

E per regolare la larghezza di un elemento di design, utilizzeremo un'imbottitura personalizzata sinistra e destra. La modifica della larghezza nelle impostazioni di dimensionamento modificherebbe la larghezza dell'intero modulo e consentirebbe la visualizzazione dello sfondo sfumato della colonna sul lato sinistro e destro, il che è qualcosa che non vogliamo.

Iniziamo a creare!

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Colore di sfondo

Iniziamo! Aggiungi una sezione normale a una pagina nuova o esistente e dagli il giusto colore di sfondo (a seconda che tu voglia ricreare il layout chiaro o scuro).

• Colore di sfondo: #ffffff (layout chiaro), #000000 (layout scuro)

Spaziatura

Continua aggiungendo un'imbottitura personalizzata alla sezione.

• Imbottitura superiore: 215px
• Imbottitura inferiore: 215px

Aggiungi riga n. 1

Struttura della colonna

Quindi, aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Sfondo sfumato colonna 2

Aggiungi uno sfondo sfumato alla seconda colonna della riga. È qui che posizioneremo il titolo Modulo di testo nella parte successiva del tutorial.

• Colore 1: #c700ff
• Colore 2: #32f1ff
• Direzione gradiente colonna 2: 150 gradi
• Colonna 2 Posizione iniziale: 20%
• Posizione finale della colonna 2: 60%

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

E modificare le impostazioni di spaziatura.

• Margine superiore: 50 px
• Margine inferiore: 50 px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Ora vai avanti e aggiungi un modulo di testo alla seconda colonna della riga che hai aggiunto.

Colore di sfondo

Dai al tuo modulo lo sfondo corretto, a seconda del tipo di layout che vuoi ricreare.

• Colore di sfondo: #ffffff (layout chiaro), #000000 (layout scuro)

Impostazioni del testo dell'intestazione

Modificare le impostazioni del testo dell'intestazione successivamente.

• Intestazione 2 Allineamento del testo: Centro
• Colore testo titolo 2: #000000 (layout chiaro), #ffffff (layout scuro)
• Titolo 2: Dimensione testo: 67 px (desktop), 50 px (tablet), 40 px (telefono)
• Intestazione 2 Spaziatura lettere: -2px

Spaziatura

E aggiungi un po' di imbottitura sul fondo. Ricorda, stiamo usando il riempimento inferiore invece del margine per assicurarci che lo sfondo del gradiente della colonna non venga visualizzato.

• Imbottitura inferiore: 50 px

Modalità di fusione

Per applicare lo sfondo sfumato della colonna al modulo che hai aggiunto, applica una modalità di fusione nelle impostazioni dei filtri.

• Modalità di fusione: Schiarisci (Layout Chiaro), Scurisci (Layout Scuro)

Aggiungi modulo divisore alla riga

Visibilità

Il secondo e ultimo modulo di cui abbiamo bisogno in questa riga è un modulo divisore.

• Mostra divisore: Sì

Colore di sfondo

Cambia il colore di sfondo in base al tipo di layout che stai ricreando.

• Colore di sfondo: #ffffff (layout chiaro), #000000 (layout scuro)

Spaziatura

Per ridurre la larghezza del divisore, aggiungeremo un'imbottitura personalizzata sul lato sinistro e destro.

• Imbottitura sinistra: 250 px
• Imbottitura destra: 250 px

Modalità di fusione

Ancora una volta, aggiungi una modalità di fusione per mostrare lo sfondo del gradiente della colonna.

• Modalità di fusione: Schiarisci (Layout Chiaro), Scurisci (Layout Scuro)

Aggiungi riga #2

Struttura della colonna

Alla prossima riga! Utilizzare la seguente struttura a colonne:

Sfondo sfumato colonna 1

Continua aggiungendo uno sfondo sfumato alla prima colonna.

• Colore 1: #c700ff
• Colore 2: #32f1ff
• Tipo di gradiente colonna 1: lineare
• Colonna 1 Direzione gradiente: 105 gradi
• Colonna 1 Posizione iniziale: 20%
• Posizione finale della colonna 1: 50%

Sfondo sfumato colonna 2

Stiamo usando uno sfondo sfumato anche per la seconda colonna.

• Colore 1: #32f1ff
• Colore 2: #c700ff
• Tipo di gradiente colonna 2: lineare
• Colonna 2 Direzione gradiente: 90 gradi
• Colonna 2 Posizione iniziale: 40%
• Posizione finale della colonna 2: 60%

Sfondo sfumato colonna 3

Stesso discorso per la terza colonna.

• Colore 1: #c700ff
• Colore 2: #32f1ff
• Tipo di gradiente colonna 3: lineare
• Colonna 3 Direzione gradiente: 85 gradi
• Colonna 3 Posizione iniziale: 20%
• Posizione finale della colonna 3: 50%

Dimensionamento

Modificare le impostazioni di dimensionamento successivo.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

E aggiungi un'imbottitura personalizzata sinistra e destra.

• Imbottitura sinistra: 100 px (desktop e tablet), 50 px (telefono)
• Imbottitura destra: 100 px (desktop e tablet), 50 px (telefono)

Aggiungi modulo Blurb alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Aggiungi un modulo Blurb alla colonna 1 con un titolo a tua scelta. Più avanti nel post, utilizzeremo un modulo separato per aggiungere il contenuto del corpo.

Scegli icona

Seleziona un'icona a tua scelta.

Colore di sfondo

E modifica il colore di sfondo del modulo Blurb.

• Colore di sfondo: #ffffff (layout chiaro), #000000 (layout scuro)

Impostazioni icona

Continua andando alle impostazioni dell'icona e apportando alcune modifiche lì.

• Colore icona: #000000 (layout chiaro), #ffffff (layout scuro)
• Posizionamento immagine/icona: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 51px

Impostazioni del testo del titolo

Modifica anche le impostazioni del testo del titolo.

• Peso del carattere del titolo: grassetto
• Allineamento del testo del titolo: al centro
• Colore del testo del titolo: #000000 (layout chiaro), #ffffff (layout scuro)
• Spaziatura delle lettere del titolo: -1px
• Altezza della riga del titolo: 1.2em

Spaziatura

Quindi, vai alle impostazioni di spaziatura e aggiungi alcuni margini personalizzati e valori di riempimento.

• Margine inferiore: 5px
• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Modalità di fusione

Ultimo ma non meno importante, applica la modalità di fusione corretta.

• Modalità di fusione: Schiarisci (Layout Chiaro), Scurisci (Layout Scuro)

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Separiamo il titolo e il corpo del modulo Blurb in due moduli per applicare la modalità di fusione solo all'icona e al titolo. Vai avanti e aggiungi un modulo di testo proprio sotto il modulo Blurb che contiene il contenuto del corpo.

Colore di sfondo

Quindi, aggiungi un colore di sfondo.

• Colore di sfondo: #ffffff (layout chiaro), #0c0c0c (layout scuro)

Impostazioni testo

E cambia le impostazioni del testo.

• Spaziatura delle lettere del testo: 0,5 px
• Altezza riga di testo: 2,3 em
• Orientamento del testo: giustifica
• Colore del testo: scuro (layout chiaro), chiaro (layout scuro)

Spaziatura

Per dare al modulo un po' di spazio per respirare, aggiungi alcuni valori di riempimento personalizzati nelle impostazioni di spaziatura.

• Imbottitura superiore: 100 px
• Imbottitura inferiore: 100 px
• Imbottitura sinistra: 70px
• Imbottitura destra: 70px

Scatola ombra

E per finire, aggiungi anche una sottile ombra di scatola.

• Intensità sfocatura ombra scatola: 56px
• Forza di diffusione dell'ombra della scatola: -12px
• Colore ombra: rgba(0,0,0,0.3)

Clona modulo Blurb e modulo di testo due volte + posiziona nelle colonne rimanenti

Ultimo ma non meno importante, clona entrambi i moduli che puoi trovare nella colonna 1 e posiziona i duplicati nelle due colonne rimanenti. Modifica anche il contenuto di conseguenza.

Anteprima

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

Pensieri finali

In questo post, ti abbiamo mostrato come creare un testo sfumato sul tuo sito web utilizzando solo le opzioni integrate di Divi. Per far funzionare questo tutorial e per essere in grado di praticare l'approccio anche su altri progetti, è necessario passare attraverso la sezione di approccio di questo post e capirlo mentre si ricrea il design. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!