Cara Mendesain Overlay Gambar Kustom di Divi

Hamparan gambar telah ada sejak lama dalam desain web. Mereka bagus untuk menarik pengunjung dengan mengungkapkan konten tambahan dan elemen desain saat mengarahkan kursor ke gambar. Karena ini adalah fitur desain yang sangat populer, ada banyak plugin di luar sana yang didedikasikan untuk membuat overlay gambar. Namun, tergantung pada plugin, mereka bisa sangat membatasi atau mungkin sedikit berlebihan untuk apa yang mungkin Anda butuhkan. Itulah mengapa membantu untuk memiliki pengetahuan untuk membangun ini sendiri di Divi.

Dalam tutorial ini, kami akan menunjukkan cara mendesain overlay gambar kustom di Divi. Hamparan ini akan berubah dan mengungkapkan elemen saat mengarahkan kursor ke gambar. Bagian terbaiknya adalah Anda memiliki kendali penuh atas desain overlay gambar Anda menggunakan opsi desain bawaan Divi. Dan, dengan beberapa cuplikan CSS khusus, Anda dapat memiliki beberapa hamparan gambar yang indah untuk membawa situs Anda ke tingkat berikutnya. Tidak ada plugin yang diperlukan.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Unduh Tata Letak Hamparan Gambar Divi secara GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Membuat Hamparan Gambar Khusus di Divi

Membangun Bagian, Baris, dan Kolom

Untuk memulai, buat baris tiga kolom di dalam bagian default.

Buka pengaturan bagian dan tambahkan warna latar belakang berikut:

• Warna Latar Belakang: #3a0ca3

Selanjutnya, buka pengaturan untuk kolom 1 dan perbarui yang berikut:

• Kelas CSS: et-overlay-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 lebih merupakan potret daripada lanskap. Saya menggunakan yang kira-kira 800px kali 1050px. Pastikan itu cukup lebar untuk menjangkau lebar penuh kolom pada semua ukuran browser.

(CATATAN: Anda dapat menggunakan gambar lanskap, tetapi Anda mungkin perlu menyesuaikan posisi elemen hamparan agar tidak tumpang tindih.)

Di bawah tab desain, perbarui yang berikut ini:

• Margin: 0px bawah

Di bawah tab lanjutan, tambahkan Kelas CSS berikut:

• Kelas CSS: et-overlay-image

Menambahkan Warna Hamparan Gambar Menggunakan Modul Pembagi

Untuk membuat warna overlay gambar, kita akan menggunakan modul pembagi. Idenya adalah untuk membuat penutup di atas gambar dengan membuat pembagi menjangkau tinggi dan lebar penuh kolom sehingga berada dengan sempurna di atas gambar. Setelah di posisi, Anda dapat menyesuaikan warna latar belakang modul pembagi untuk mendapatkan warna overlay yang kita inginkan.

Pertama, tambahkan modul pembagi di bawah gambar.

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

• Posisi: Absolut

Di bawah tab konten, perbarui yang berikut ini:

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

Kemudian perbarui tinggi dan lebar pembagi:

• Lebar: 100%
• Tinggi: 100%

Setelah desain terpasang, tambahkan Kelas CSS berikut ke pembagi:

• et-overlay-item

(CATATAN: Kelas ini harus ditambahkan ke semua elemen desain overlay yang ingin Anda tampilkan hanya saat mengarahkan kursor. Jika Anda tidak ingin elemen disembunyikan pada awalnya, tinggalkan saja.)

Untuk membantu melacak elemen/modul desain, buka modal lapisan, dan beri label modul pembagi (“warna hamparan”).

Menambahkan Teks Judul Overlay

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

Perbarui konten dengan judul H2:

<h2>Coaching</h2>

Kemudian perbarui label modul teks untuk referensi nanti.

Di bawah pengaturan desain teks, perbarui yang berikut 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 bawah tab lanjutan, perbarui posisi sebagai berikut:

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

(CATATAN: Offset vertikal mungkin perlu disesuaikan tergantung pada ukuran rasio aspek gambar. Misalnya, gambar tipe lanskap mungkin membutuhkan lebih sedikit offset)

Selanjutnya, tambahkan Kelas CSS berikut ke modul teks:

• Kelas CSS: pemindahan item et-overlay

Selain kelas "et-overlay-item", kami menambahkan kelas "pindah ke bawah" tambahan untuk menggunakan CSS khusus untuk memindahkan judul sedikit ke bawah saat mengarahkan kursor.

Membuat Teks Tubuh Overlay

Untuk membuat teks isi overlay, kita dapat menduplikasi modul teks yang digunakan untuk heading overlay. Sebelum kami memperbarui pengaturan untuk duplikat, ubah label menjadi “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 kami 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 mengubah desain, perbarui 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
• CSS Elemen Utama:

  min-width: 15em

Perhatikan ada kelas tambahan yang ditambahkan ke tombol untuk memindahkannya sedikit ke atas saat melayang. Ini untuk melengkapi gerakan teks heading ke bawah 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

Menambahkan CSS Kustom dengan Modul Kode

Sebelum kita membuat beberapa versi lain dari desain overlay ini, mari tambahkan CSS khusus yang diperlukan untuk efek hover overlay. 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>
 @media all 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 dikomentari sehingga Anda dapat memahami di mana Anda dapat menyesuaikan CSS sesuai kebutuhan.

Menduplikasi Kolom untuk Lebih Banyak Desain

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.

Membuat Desain Hamparan Gambar #2

Sekarang setelah kita memiliki semua elemen desain di setiap kolom, kita dapat mengubah desain untuk membuat overlay gambar tambahan. Untuk desain berikutnya, kita akan menempatkan tombol di tengah gambar (selalu terlihat). Kemudian kita akan memindahkan teks heading dan body ke tampilan dari atas dan bawah gambar.

Sesuaikan Lokasi Teks Tubuh dan Kelas CSS

Buka pengaturan untuk modul teks isi overlay di kolom 2 dan perbarui posisinya:

• Lokasi: Bawah Tengah
• Offset Vertikal: 5%

Kemudian perbarui Kelas CSS dengan yang berikut:

• Kelas CSS: pemindahan item et-overlay

Sesuaikan Lokasi Tombol dan Kelas CSS

Selanjutnya, buka pengaturan tombol di kolom 2 dan perbarui lokasi posisi berikut:

• Lokasi: Pusat Pusat

Kemudian keluarkan Kelas CSS karena kami ingin tombol selalu terlihat.

Buka pengaturan untuk modul pembagi (warna overlay) dan ubah latar belakang sebagai berikut:

• Warna Latar Belakang: rgba(67,97,238,0.8)

Kemudian buka pengaturan untuk tombol dan ubah warna latar belakang:

• Warna Latar Tombol: #f72585

Sesuaikan Gambar dan Kelas CSS

Selanjutnya, buka pengaturan untuk gambar dan unggah gambar baru (jika Anda mau).

Kemudian tambahkan Kelas CSS berikut ke Gambar:

• Kelas CSS: et-overlay-image et-scale

Perhatikan bahwa selain kelas “et-overlay-image”, ada kelas tambahan yang disebut “et-scale” yang akan menyebabkan ukuran gambar diperbesar, menciptakan efek zoom-in saat mengarahkan kursor.

Membuat Desain Hamparan Gambar #3

Sekarang saatnya membuat desain overlay gambar ketiga di kolom 3.

Sesuaikan Konten Teks Tubuh Overlay dan Kelas CSS

Mulailah dengan membuka pengaturan untuk modul teks isi overlay di kolom 3 dan tambahkan judul H2 di atas teks paragraf. Sekarang keduanya akan berada di dalam satu modul, bukan dua.

Kemudian keluarkan CSS Class agar teks tetap terlihat di atas gambar.

Sesuaikan Tombol Offset dan Kelas CSS

Buka pengaturan untuk modul tombol dan perbarui posisi offset vertikal:

• Offset Vertikal: 5%

Hapus Judul Hamparan

Selanjutnya, hapus modul teks heading overlay.

Sesuaikan Warna Overlay dan Kelas CSS

Buka pengaturan untuk modul pembagi (warna overlay) dan perbarui latar belakang dengan yang berikut:

• Warna Kiri Gradien Latar Belakang: rgba(67,97,238,0.8)
• Warna Kanan Gradien Latar Belakang: rgba(247,37,133,0.8)
• Posisi Awal: 25%
• Posisi Akhir: 75%

Dan karena kita ingin agar gradien overlay terlihat setiap saat, keluarkan CSS Class.

Sesuaikan Kelas CSS Gambar

Terakhir, kita akan menambahkan Kelas CSS tambahan (“et-rotate”) ke gambar utama yang akan menskalakan dan memutar gambar saat melayang.

• Kelas CSS: et-overlay-image et-rotate

Sentuhan Akhir

Sebelum kita memeriksa hasil akhir kita, kita perlu melakukan beberapa penyesuaian.

Keluarkan margin bawah default untuk semua modul

Secara default, setiap modul dilengkapi dengan margin bawah 30px karena lebar talang default (3) dalam pengaturan baris. Ini dapat membuang posisi modul dalam desain overlay kami. Untuk mengeluarkannya, buka pengaturan modul gambar untuk salah satu gambar dalam desain. Karena kami telah memperbarui margin dengan margin bawah 0px, kami dapat memperluas margin ini ke semua modul.

Klik kanan pada pengaturan margin dan pilih "perpanjang margin".

Kemudian pilih untuk memperluas margin ke Semua Modul di halaman.

Hapus Modul Kode Duplikat

Pastikan untuk menghapus modul kode tambahan yang telah terbawa saat menduplikasi kolom pertama. Anda hanya harus memiliki satu. Anda dapat melakukan ini dengan mudah dari modal lapisan.

Hasil Akhir

Sekarang ketiga desain kita sudah selesai, mari kita lihat hasil akhir desain overlay gambar kita.

Dan inilah desain di ponsel. Efek hover overlay hanya berlaku untuk desktop melalui kueri media CSS khusus dalam modul kode. Oleh karena itu, overlay akan selalu terlihat di ponsel.

Pikiran Akhir

Membangun hamparan gambar khusus sebenarnya sangat menyenangkan. Ada banyak sekali desain yang dapat Anda uji secara visual dengan Divi builder dan hanya perlu sedikit CSS khusus untuk menerapkan efek hover. Bahkan efek hover untuk item overlay memerlukan CSS khusus, Anda masih dapat memanfaatkan opsi hover bawaan untuk menargetkan setiap elemen overlay satu per satu.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!