Necessità di scoprire come aggiungere un'immagine in un testo in Elementor ?
Elementor ha permesso a tutti di diventare un web designer senza la necessità di avere competenze CSS avanzate. Il suo editor visuale ti permette di creare una bella pagina web senza scrivere una sola riga di codice CSS. Puoi semplicemente aggiungere qualsiasi elemento di design (widget) che desideri e personalizzarli nel pannello delle impostazioni.
Anche così, avere alcune abilità CSS sarebbe un grande vantaggio nell'usoElementor. Sarai in grado di applicare stili unici alla tua pagina web utilizzando la funzione CSS personalizzato d 'Elementor. In questo articolo, ti mostreremo come aggiungere un'immagine al testo in Elementor utilizzando la funzione CSS personalizzata di Elementor.
In certi outils progetti come GIMP e Photoshop, di solito è necessario aggiungere un marcatore di livello per aggiungere un'immagine nel testo. In Elementor, puoi ottenere lo stesso risultato aggiungendo il codice CSS che il widget Titolo di Elementor e il widget Testo non hanno opzioni di impostazione per aggiungere un'immagine come sfondo.
Aggiungi un'immagine a un testo di Elementor
Prima di iniziare, assicurati di aver aggiornato la tua versione di Elementor alla versione pro, poiché la funzionalità CSS personalizzata è disponibile solo su Elementor Pro. Una volta che sei pronto, crea una nuova pagina o modello e modificalo con Elementor. Naturalmente, puoi anche modificare una pagina o un modello esistente.
Vedi anche: Elementor: come aggiungere un sommario
Aggiungi il widget Titolo alla casella di modifica.
Vai al pannello delle impostazioni per sostituire il testo predefinito sotto la scheda Contenuto.
Leggi anche la nostra guida su: Elementor: come usare il selettore colore
Vai alla scheda Style per personalizzare il testo. Puoi impostare la dimensione del testo, lo stile del carattere, ecc... facendo clic sull'icona della matita in Opzione tipografia sotto il blocco Titolo. Poiché desideri utilizzare un'immagine come sfondo per il testo, non è necessario impostare il colore del testo.
Quindi vai alla scheda avanzato e apri il blocco Custom CSS e incolla il seguente codice CSS. Sostituisci l'URL dell'immagine con il tuo URL dell'immagine.
selector .elementor-heading-title
{
background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70% ;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}Ecco l'esempio.
Ottieni Elementor Pro ora!
Conclusione
Ecco ! Questo è tutto per questo articolo che mostra come aggiungere un'immagine al testo in Elementor. Se hai dubbi su come arrivarci ffacci sapere in commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
