Come progettare sfondi di testo CSS in Divi utilizzando background-clip

Creare progetti di sfondo del testo con CSS è un ottimo modo per aggiungere un elemento di design straordinario a qualsiasi sito web. La chiave per creare questi sfondi di testo personalizzati è utilizzare la proprietà CSS background-clip con un valore di testo. Poiché questo metodo ha recentemente guadagnato popolarità e supporto per il browser, ti mostreremo come usarlo in Divi. Questo apre un ulteriore livello di design che si rivolge a elementi di testo (come H1, H2, p, ecc...) oltre a tutte le altre meravigliose capacità di design di Divi.

Iniziamo.

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Ecco un esempio di uno sfondo a gradiente lineare aggiunto al testo dell'intestazione utilizzando background-clip

Ecco un esempio di uno sfondo immagine aggiunto al testo dell'intestazione e uno sfondo sfumato lineare aggiunto al testo del paragrafo usando la clip di sfondo

Ed ecco un codepen che dimostra anche questo concetto.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Come usare la clip di sfondo con il testo?

Prima di iniziare a costruire i nostri esempi in Divi, cerchiamo di comprendere meglio il codice CSS necessario per ottenere uno sfondo di testo personalizzato in CSS.

Diciamo che abbiamo un elemento di intestazione H2 che assomiglia a questo.

Innanzitutto, è necessario stabilire lo sfondo che si desidera utilizzare. In questo esempio, aggiungeremo uno sfondo sfumato al nostro elemento h2 usando linear-gradient .

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);


}

Successivamente, aggiungiamo background-clip:text insieme alla necessaria versione del prefisso "-webkit" per mostrare lo sfondo dell'elemento solo dietro il testo.

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip: text;
  -webkit-background-clip: text;

}

Quindi, aggiungiamo -webkit-text-fill-color: transparent per sovrascrivere il colore del testo e renderlo trasparente.

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Quindi aggiungiamo i prefissi del browser necessari per rendere i gradienti lineari più adatti al browser:

h2 {
  background: -webkit-linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background: -moz-linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Come puoi vedere, questo esempio usa tre colori per creare un gradiente, ma puoi facilmente aggiungerne quanti ne vuoi.

Questo è davvero tutto quello che c'è da fare. Ovviamente, è utile avere una migliore comprensione di come utilizzare la funzione di sfumatura lineare per progettare il tipo di sfondo sfumato desiderato.

Per ulteriori informazioni, consulta la documentazione sulla funzione gradiente lineare. Puoi anche esplorare questo generatore di gradienti di testo CSS per esplorare alcune opzioni divertenti.

E, se non vuoi usare un gradiente, puoi usare uno sfondo dell'immagine reale. Il codice sarebbe simile a questo:

h2 {
  background: center / cover url("add image URL");
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Ora che abbiamo una migliore comprensione del CSS, tuffiamoci nel tutorial.

Progettare sfondi di testo con clip di sfondo in Divi

Parte 1: utilizzo della clip di sfondo per aggiungere uno sfondo sfumato a un'intestazione H1

Per il nostro primo esempio, aggiungeremo uno sfondo sfumato a un'intestazione H1.

La sezione, riga e colonna

Innanzitutto, apri le impostazioni per la sezione e aggiungi un colore di sfondo:

• Colore di sfondo: #153243

All'interno della sezione, aggiungi una riga a una colonna.

Il modulo di testo con intestazione H1

Per aggiungere l'intestazione H1, aggiungi un nuovo modulo di testo alla colonna della riga.

Apri le impostazioni del testo e incolla la seguente intestazione H2 HTML nella scheda del testo del contenuto del corpo.

<h1>Creating CSS Text Backgrounds in Divi</h1>

Nella scheda Progettazione, aggiorna le impostazioni di progettazione H1 come segue:

• Carattere dell'intestazione: Montserrat
• Peso del carattere dell'intestazione: grassetto
• Stile carattere intestazione: TT
• Allineamento del testo dell'intestazione: al centro
• Colore del testo dell'intestazione: #ffffff
• Dimensione del testo dell'intestazione: 100 px (desktop), 55 px (tablet), 28 px (telefono)
• Altezza della linea di prua: 1.2em

NOTA: il colore del testo dell'intestazione verrà sovrascritto dal CSS personalizzato, ma è utile averne uno selezionato come fallback per ogni evenienza.

Nella scheda Avanzate, aggiungi la seguente Classe CSS:

• Classe CSS: clip-sfondo-testo

Useremo questa classe come selettore nel nostro codice CSS personalizzato in seguito.

Il codice CSS

Per aggiungere il codice CSS per dare all'H1 uno sfondo sfumato, aggiungi un nuovo modulo di codice sotto il modulo di testo.

Quindi incolla il seguente CSS all'interno della casella Codice assicurandoti di avvolgere il codice nei tag di stile necessari:

.text-background-clip h1 {
  background: -webkit-linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background: -moz-linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background: linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

NOTA: Torneremo su questo stesso modulo di codice per aggiungere ulteriori CSS per i nostri esempi seguenti.

Risultato

Ecco il risultato. Come puoi vedere, lo sfondo sfumato è stato ritagliato in modo che venga visualizzato solo attraverso l'elemento di intestazione H1.

Parte 1: Utilizzo della clip di sfondo per aggiungere uno sfondo di immagine a un'intestazione H2

Non siamo limitati agli sfondi sfumati per modellare i nostri sfondi di testo. Possiamo anche modellare i nostri sfondi di testo con immagini di sfondo.

In questo prossimo esempio, utilizzeremo lo stesso metodo (usando "background-clip") per aggiungere uno sfondo dell'immagine a un'intestazione H2.

La sezione, riga e colonna

Per iniziare, crea una nuova sezione regolare sotto la sezione esistente del nostro primo esempio.

Quindi aggiungi una riga di una colonna alla sezione.

Apri le impostazioni della sezione e aggiungi un'immagine di sfondo scuro alla sezione.

Quindi copia il modulo di testo esistente nel nostro primo esempio sopra e incollalo nella colonna della nostra nuova sezione.

Apri le impostazioni del testo per il modulo di testo duplicato e cambia l'intestazione H1 in un'intestazione H2 aggiornando l'HTML:

<h2>Creating CSS Text Backgrounds in Divi</h2>

Nella scheda Progettazione, fai clic con il pulsante destro del mouse sulla scheda H1 e copia il testo dell'intestazione Stili H1. Quindi fare clic con il pulsante destro del mouse sulla scheda H2 e incollare gli stili di testo dell'intestazione H1 in modo che l'intestazione H2 abbia lo stesso stile.

Il codice CSS

Per aggiungere il codice CSS che deve dare a H2 uno sfondo di immagine, apri il modulo di codice esistente che abbiamo creato in precedenza e incolla il seguente CSS sotto il primo frammento di CSS:

.text-background-clip h2 {
  background: center / cover url("https://jason.sandbox.etdevs.com/design/wp-content/uploads/sites/4/2021/04/gradient-background-img.jpg");
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

Questo aggiungerà un'immagine di sfondo dietro l'elemento H2. La scorciatoia CSS dello sfondo include "centro" per la posizione dello sfondo, "copertina" per la dimensione dello sfondo e l'URL dell'immagine effettiva.

Per trovare l'URL di un'immagine sul tuo sito, puoi facilmente aprire la tua galleria multimediale di WordPress, selezionare l'immagine e copiare l'URL del file.

Risultato

Parte 3: utilizzo della clip di sfondo per aggiungere uno sfondo sfumato al testo del paragrafo

Per il nostro ultimo esempio, useremo background-clip per aggiungere uno sfondo sfumato al testo del paragrafo. Il processo è lo stesso. L'unica differenza sarà il codice CSS che avrà come target il tag p per il nostro testo del paragrafo.

Modulo Aggiungi testo

Aggiungi un nuovo modulo di testo sotto il modulo di testo precedente nella stessa sezione che abbiamo progettato nella parte 2.

Aggiorna il contenuto del corpo con il seguente testo di paragrafo HTML:

<p>Cras luctus ornare est, sed pharetra mauris vestibulum in. In nulla sem. Consectetur et tristique non, pulvinar pretium ante. Cras aliquam risus ullamcorper odio interdum facilisis. Vestibulum vitae augue tempor, commodo sapien ut, condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras luctus ornare est, sed pharetra mauris vestibulum in.</p>

NOTA: assicurati che il testo sia racchiuso con il tag p perché questo sarà il selettore che sceglieremo come target nel nostro codice CSS personalizzato.

Nella scheda Progettazione, aggiorna i seguenti stili di testo:

• Colore del testo del testo: #ffffff
• Dimensione del testo del testo: 16px
• Altezza riga di testo: 2em
• Larghezza massima: 500 px
• Allineamento del modulo: Centro

Nella scheda Avanzate, aggiungi la stessa Classe CSS utilizzata in precedenza:

• Classe CSS: clip-sfondo-testo

Il codice CSS

Infine, incolla il codice CSS che ha come target il tag p e aggiunge uno sfondo sfumato al testo usando background-clip:text .

.text-background-clip p {
  background: -webkit-linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background: -moz-linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background: linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Risultato

Ecco il risultato del design dello sfondo del testo del paragrafo.

Risultati finali

Ora diamo un'occhiata ai risultati finali dei nostri progetti!

Ecco un esempio di uno sfondo a gradiente lineare aggiunto al testo dell'intestazione utilizzando background-clip

Ecco un esempio di uno sfondo immagine aggiunto al testo dell'intestazione e uno sfondo sfumato lineare aggiunto al testo del paragrafo usando la clip di sfondo

Pensieri finali

La possibilità di aggiungere sfondi di testo personalizzati al tuo sito può essere un utile strumento di progettazione. E, se ottieni una migliore comprensione di come utilizzare la proprietà CSS background in combinazione con background-clip:text , le possibilità sono infinite. Se hai bisogno di un piccolo aiuto con la creazione del tuo CSS, puoi anche esplorare questo generatore di gradienti di testo CSS per aiutare a far ripartire il processo.

Inoltre, se desideri un effetto simile senza tutti i CSS personalizzati, controlla come applicare il colore del testo sfumato con le opzioni della modalità di fusione di Divi.

Non vedo l'ora di sentirti nei commenti.

Saluti!