Pernahkah Anda berharap tahu cara menampilkan teks di atas gambar dengan Elementor ?

Dalam tutorial baru ini, kami akan menunjukkan cara melakukannya.

Jika Anda tidak tahu apa yang ingin kami bicarakan hari ini, kami mengundang Anda untuk menonton video berikut:

Kalau begitu mari kita kembali ke mengapa kita ada di sini.

Untuk menyelesaikan tutorial ini, Anda perlu versi Pro dari Elementor, karena kami akan menggunakan kode CSS khusus yang hanya didukung oleh versi iniElementor.

Temukan juga panduan kami di: Cara membuat galeri gambar dengan Elementor

Mari kita buat bagian baru dengan struktur 3 kolom, lalu di panel, mari kita definisikan Kesombongan di Tinggi Mindan kemudian Tinggi minimal ayo klik VH dan atur penggeser ke 100.

Mari kita pilih kolom tengah, dan di tab Gaya, di bagian latar belakang ayo klik klasik untuk Jenis latar belakang, lalu pilih warna gelap.

Mari kita taruh di kolom ini Widget Bagian Internal. Widget Bagian Internal secara default dikonfigurasi dengan 2 kolom, mari kita hapus salah satunya. Mari konfigurasikan sisanya di panel dengan memodifikasi Kesombongan di Tinggi Min dan Tinggi minimal mari kita atur kursor ke 400.

Baca juga: Elementor: Cara Memperbesar Kartu Profil

Kemudian, pada Penjajaran Vertikal ayo pilih Lingkungan.

Kemudian jatuhkan Widget judul di bagian dalam ayo masuk sebagai Judul Foto, dan di Alignment, ayo Pilih Tengah.

Di tab Gaya mari kita ubah warna Judulnya agar terlihat jika tidak,

Ayo jatuhkan Widget Editor Teks dibawah Widget judul. Kemudian, di tab Gaya, pada Alignment pilih Pusat. Mari kita juga mengubah warna teks sehingga terlihat.

Lihat juga: Elementor: Cara menambahkan pembagi untuk membuat bagian

Ayo pilih kolom tengah dan di tabnya Gaya, atur ulang warna latar belakang dan muat gambar, lalu Posisi ayo pilih Terpusat Terpusat, ulangi di Non-Ulang, Menutupi di Ukuran.

Di bagian Perbatasan ayo modifikasi semua radius batas dari 12. di bayangan kotak, atur penggeser ke 0 untuk Horisontal, untuk 0 untuk Vertikal, ke 40 di Blur, untuk -10 di siaran. Anda akan melihat efek bayangan yang indah di bawah gambar Anda.

di Hamparan latar belakang, Pilih klasik untuk Jenis latar belakang dan couleur Pilih satu warna hitam, di Opacity, mari atur penggeser ke 0.55

Di tab maju, ayo ambil 20 untuk semua Margin.

Mari kita pilih Bagian dalam dan buka tabnya maju di bagian Custom CSS salin dan tempel cuplikan kode berikut:

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}

(Jika Anda tidak memiliki bagian ini maka Anda tidak memiliki versi Pro, jika Anda ingin melanjutkan, Anda perlu meningkatkan versi Anda).

Mari kita sekali lagi memilih kolom tengah bagian kita, Di tabnya Gaya, dan di bagian Hamparan latar belakang, periksa apakah kita ada di tab NORMAL, ayo turun Kegelapan à 0.

Kemudian klik pada tab GAMBARANkemudian pada klasik untuk jenis latar belakang dan couleur, pilih warna gelap, makaKegelapan di 0.55Dan untuk Durasi Transisi mari kita atur penggeser ke 0.5.

Berikut adalah hasil akhir dari manipulasi kami.

Mari kita duplikat kolom kita sebanyak 2 kali dan hapus 2 kolom kosong lainnya, yang tersisa hanyalah mengubah gambar latar belakang dan juga gambarnya. isi editor teks untuk 2 kolom baru.

Pratinjau pekerjaan Anda di Tablet dan Smartphone untuk melihat tampilannya. Kemudian simpan atau perbarui.

Jadi. Anda baru saja menampilkan teks di atas gambar dengan Halaman Builder Elementor.

Dapatkan Elementor Pro Sekarang!

Kesimpulan

Jadi ! Itu saja untuk artikel ini yang menunjukkan cara menampilkan teks di atas gambar. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana, beri tahu kami di dalam 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.

...