Cara Membuat Overlay Pada Gambar Dengan Divi Builder

Blair Jersyer Tutorial WordPress Oct 28, 2021

Hamparan gambar adalah salah satu cara terbaik untuk melibatkan pengunjung dengan menunjukkan informasi tambahan kepada pengunjung Anda. Biasanya, ini terjadi ketika mouse mengarahkan elemen atau gambar. Karena itu cukup populer, Anda mungkin telah memperhatikan banyak plugin WordPress yang membantu Anda mencapainya. Jika Anda menyukai Divi seperti saya , Anda mungkin bertanya-tanya bagaimana melakukannya dengan Divi? Itulah yang akan kita bahas hari ini.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara mendesain overlay gambar khusus di Divi Builder . Hamparan ini akan beralih dan mengungkapkan elemen saat mouse bergerak di atasnya. Apa yang mungkin Anda lihat menarik adalah Anda dapat memiliki kontrol yang lebih baik atas desain hanya menggunakan opsi bawaan Divi. Kita mungkin akhirnya menggunakan beberapa kode CSS, yang akan membuat segalanya terlihat lebih baik.

Hasil yang diharapkan

Berikut ini sekilas tentang apa yang mungkin Anda dapatkan di akhir tutorial ini.

Komponen yang Diperlukan Sebelum Memulai

Sebelum masuk ke tutorial, Anda harus memenuhi beberapa persyaratan karena diperlukan untuk dapat mereproduksi tutorial ini. Oleh karena itu, Anda akan membutuhkan:

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang
  • Instal dan aktifkan Divi
  • Buat halaman baru di WordPress dan gunakan Divi Builder di frontend
  • Pilih opsi "Bangun Dari Awal".

Jika Anda memiliki halaman kosong setelah itu, maka Anda siap untuk pergi.

Membuat Hamparan Gambar Khusus di Divi

Membangun Bagian, Baris, dan Kolom

Kita akan mulai dengan memilih baris tiga kolom di dalam bagian default.

Buka pengaturan bagian dan gunakan warna latar belakang berikut:

  • Warna Latar Belakang: #3a0ca3

Selanjutnya, pindah ke pengaturan untuk kolom 1 dan ubah opsi berikut:

  • Kelas CSS: et-overflow-container
  • Luapan Horisontal: Tersembunyi
  • Overflow Vertikal: Tersembunyi

Kelas CSS diperlukan untuk memicu efek hover dari item overlay yang akan kita buat. Overflow tersembunyi diperlukan karena kita akan memiliki efek hover yang menskalakan gambar di luar wadah kolom.

Menambahkan Gambar

Sekarang bagian, baris, dan kolom sudah siap, lanjutkan dan tambahkan modul gambar baru ke kolom 1. Ini akan menjadi gambar utama di balik desain overlay kita.

Unggah gambar yang ada dalam potret. Saya menggunakan yang kira-kira berukuran 1280px kali 1920px. Pastikan itu cukup lebar untuk menjangkau lebar penuh kolom pada semua ukuran browser.

Dari tab desain, ubah yang berikut:

  • Margin: 0px bawah

Di dalam tab lanjutan, tambahkan Kelas CSS berikut:

  • Kelas CSS: et-overlay-image

Memilih Warna Hamparan Gambar Menggunakan Modul Pembagi

Untuk membuat warna overlay gambar, kita akan menggunakan modul pembagi. Idenya adalah untuk membuat sampul di atas gambar dengan menentukan pembagi dengan tinggi dan lebar penuh yang menutupi kolom, agar pas di atas gambar. Setelah diatur, Anda dapat menyesuaikan warna latar belakang modul pembagi untuk mendapatkan warna overlay yang Anda inginkan.

Jadi mari kita tambahkan modul pembagi di bawah gambar.

Kemudian posisikan pembagi sebagai absolut sehingga akan muncul di atas gambar:

  • Posisi: Absolut

Di dalam tab konten, perbarui yang berikut ini:

  • Tampilkan Pembagi: TIDAK
  • Warna Latar Belakang: rgba(247,37,133,0.8)

Kemudian ubah tinggi dan lebar pembagi:

  • Lebar: 100%
  • Tinggi: 100%

Setelah desain ditentukan, tambahkan Kelas CSS berikut ke pembagi:

  • et-overlay-item

Peringatan : Kelas ini harus ditambahkan ke semua komponen desain overlay yang ingin Anda tampilkan hanya saat mengarahkan kursor. Jika Anda tidak ingin elemen disembunyikan pada awalnya, jangan gunakan itu.

Opsional Anda mungkin label pembagi berubah menjadi overlay dengan nama yang dapat diidentifikasi dengan jelas. Itu bisa dibuat dari layer dan Anda bisa menggunakan "Overlay".

Menambahkan Teks Judul Overlay

Di bawah modul pembagi, tambahkan modul teks baru. Ini akan digunakan sebagai teks judul overlay kami dan akan muncul di bagian atas gambar saat mengarahkan kursor.

Ubah konten dengan heading H2:

>h2/h2



Anda juga dapat mengubah label modul teks untuk referensi nanti.

Di bawah pengaturan desain teks, ubah ini:

  • Perataan Teks: Tengah
  • Warna Teks: Cahaya
  • Judul 2 Font: Cormorant Garamond
  • Judul 2 Berat Font: Tebal
  • Judul 2 Ukuran Teks: 40px
  • Lebar: 100%
  • Lebar Maks: 85%

Di dalam tab lanjutan, ubah posisinya sebagai berikut:

  • Posisi: Absolut
  • Lokasi: tengah atas
  • Offset Vertikal: 10%

Peringatan: Offset vertikal mungkin perlu disesuaikan menurut ukuran rasio aspek gambar.

Kemudian, tambahkan Kelas CSS berikut ke modul teks:

  • Kelas CSS: pemindahan item et-overlay

Selain kelas “et-overlay-item†, kami menambahkan kelas “move-down†tambahan untuk menggunakan CSS khusus untuk memindahkan heading sedikit ke bawah saat mengarahkan kursor.

Membuat Teks Tubuh Overlay

Untuk membuat teks overlay, kita dapat menduplikasi modul teks yang digunakan untuk heading overlay. Sebelum mengubah pengaturan, beri label yang berbeda pada modul itu. Kali ini, kita akan menggunakan "Overlay Body".

Buka pengaturan teks untuk modul teks baru dan perbarui konten isi dengan beberapa kalimat teks paragraf.

Di bawah tab lanjutan, ubah lokasi absolut modul ke tengah.

Karena kita tidak ingin yang ini bergerak saat mengarahkan kursor (hanya muncul), perbarui Kelas CSS agar hanya menyertakan yang berikut ini:

  • Kelas CSS: et-overlay-item

Membuat Tombol Overlay

Elemen overlay terakhir pada gambar ini akan menjadi tombol. Untuk membuat tombol, tambahkan modul tombol baru di bawah modul teks “teks isi†.

Sebelum memperbarui desain, mari kita ubah posisi tombol sebagai berikut:

  • Posisi: mutlak
  • Offset Vertikal: 10%

Sekarang tombol harus berada di tengah di bagian bawah gambar.

Saat berada di tab lanjutan, perbarui Kelas CSS dan tambahkan potongan CSS khusus ke Elemen Utama sebagai berikut:

  • Kelas CSS: pemindahan item et-overlay
  • Elemen Utama CSS: min-width: 15em

Perhatikan bahwa di sini ada kelas tambahan yang ditambahkan ke tombol untuk memindahkannya sedikit ke atas saat melayang. Itu akan melengkapi gerakan ke bawah teks heading saat melayang.

Kemudian perbarui pengaturan desain berikut:

  • Penjajaran Tombol: Tengah
  • Ukuran Teks Tombol: 14px
  • tombol Warna Latar: #4361ee
  • tombol Lebar Perbatasan: 0px
  • Jarak Huruf Tombol: 0.1em
  • Berat Huruf Tombol: Tebal
  • Gaya Font Tombol: TT
  • Padding: 0.8em atas, 0.8em bawah, 0px kiri, 0px kanan

Melengkapi Dengan Modul Kode Kustom

Sebelum pindah ke versi lain, mari tambahkan beberapa CSS untuk menambahkan efek hover. Untuk melakukan ini, tambahkan modul kode di bawah tombol.

Kemudian rekatkan CSS berikut di dalam konten kode. Jangan lupa untuk membungkus kode dalam tag skrip yang diperlukan.

>style and (min-width: 981px) { .et-fb-root-ancestor .et-overlay-item {opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/}.et-overlay-item {opacity: 0; /*hides overlay items by default*/margin-bottom: 0px;}.et-overlay-item, .et-overlay-image {transition: all 400ms !important; /*sets transition speed of all overlay items*/}.et-overlay-container:hover .et-overlay-item {opacity: 1; /*reveals hidden overlay items on hover*/}.et-overlay-container:hover .et-overlay-image {/*add new styles here to change image on hover*/}.et-overlay-container:hover .et-overlay-image.et-scale {transform: scale(1.2); /*adjust scale of image here*/}.et-overlay-container:hover .et-overlay-image.et-rotate {transform: scale(1.4)rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/}  .et-overlay-container:hover .et-overlay-item.move-up {margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/}.et-overlay-container:hover .et-overlay-item.move-down {margin-top: 10%; /*adjust how far you want the overlay item to move down*/} }>/style

Kode memiliki beberapa komentar sehingga Anda dapat memahami di mana Anda dapat menyesuaikan CSS sesuai kebutuhan.

Menduplikasi Kolom Untuk Bagian Lain

Meskipun kita sudah memiliki dua kolom kosong tambahan untuk dikerjakan, lebih mudah untuk mentransfer semua modul dan desain dalam kolom pertama ke kolom baru dengan menduplikasi seluruh kolom. Untuk melakukan ini, buka modal lapisan, hapus dua kolom kosong, lalu gandakan kolom yang berisi desain hamparan gambar dua kali. Anda harus memiliki total tiga kolom dengan desain yang identik.

Saya akan membiarkan Anda memutuskan rangkaian warna apa yang akan Anda terapkan pada kolom 2 dan 3. Mari kita tidak melihat apa hasil akhirnya.

Hasil Akhir

Sekarang ketiga desain kami sudah selesai (harap Anda telah mengubah desain untuk 2 kolom yang tersisa), mari kita lihat hasil akhir dari desain kami.

Ringkasan

Membuat overlay gambar sebenarnya dimungkinkan dengan Divi . Ada banyak sekali desain yang dapat Anda buat secara visual dengan Divi builder dan hanya perlu sedikit CSS khusus untuk menerapkan beberapa efek hover.

Divi WordPress Theme