Perlu mencari tahu cara menambahkan gambar dalam teks di Elementor ?

Elementor memungkinkan semua orang menjadi desainer web tanpa harus memiliki keterampilan CSS tingkat lanjut. Editor visualnya memungkinkan Anda membuat halaman web yang indah tanpa menulis satu baris kode CSS. Anda bisa menambahkan elemen desain (widget) apa pun yang Anda inginkan dan menyesuaikannya di panel pengaturan.

Meski begitu, memiliki beberapa keterampilan CSS akan menjadi bonus besar dalam menggunakanElementor. Anda akan dapat menerapkan gaya unik ke halaman web Anda menggunakan fungsi CSS khusus untukElementor. Pada artikel ini, kami akan menunjukkan cara menambahkan gambar ke teks di Elementor menggunakan fitur CSS khusus Elementor.

Dalam beberapa alat desain seperti GIMP dan Photoshop, Anda biasanya perlu menambahkan penanda lapisan untuk menambahkan gambar dalam teks. Di Elementor, Anda dapat melakukan hal yang sama dengan menambahkan kode CSS bahwa widget Judul Elemen dan widget Teks tidak memiliki opsi pengaturan untuk menambahkan gambar sebagai latar belakang.

Tambahkan gambar ke teks Elementor

Sebelum memulai, pastikan Anda telah meningkatkan versi Elementor ke versi pro jika belum karena fungsionalitas CSS khusus hanya tersedia di Elementor Pro. Setelah Anda siap, buat halaman atau template baru dan edit dengan Elementor. Tentu saja, Anda juga dapat mengedit halaman atau template yang ada.

Lihat juga: Elementor: Bagaimana cara menambahkan daftar isi

Tambahkan widget Judul ke kotak edit.

Bagaimana cara menambahkan gambar ke teks di Elementor

Buka panel pengaturan untuk mengganti teks default di bawah tab Isi.

Baca juga panduan kami di: Elementor: Cara menggunakan pemilih warna

Buka tab Gaya untuk mempersonalisasi teks. Anda dapat mengatur ukuran teks, gaya font, dll ... dengan mengklik ikon pensil di Opsi tipografi di bawah blok Judul. Karena Anda ingin menggunakan gambar sebagai latar belakang teks Anda, tidak perlu mengatur warna teks.

Lalu pergi ke tab maju dan buka bloknya Kustom CSS dan paste kode CSS berikut. Ganti URL gambar dengan URL gambar Anda sendiri.

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;
}

Berikut adalah contoh.

Bagaimana cara menambahkan gambar ke teks di Elementor

Dapatkan Elementor Pro Sekarang!

Kesimpulan

Disini adalah ! Itu saja untuk artikel ini yang menunjukkan cara menambahkan gambar ke teks di Elementor. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana fberi tahu kami di komentar.

Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.

...