Apakah Anda ingin mempelajari cara mendesain hamparan gambar khusus dengan Divi ?

Hamparan gambar telah ada dalam desain web sejak lama. Mereka sempurna untuk terlibat pengunjung dengan mengungkapkan isi Elemen tambahan dan desain saat Anda mengarahkan kursor ke gambar. 

Dalam tutorial ini, kami akan menunjukkan cara mendesain overlay gambar kustom di Divi. Hamparan ini akan berubah dan mengungkapkan elemen saat Anda mengarahkan kursor ke gambar. 

Tidak diperlukan plugin.

Mari kita mulai!

penelitian

Berikut sekilas desain yang akan kita buat dalam tutorial ini.

Buat halaman baru dengan Divi Builder

Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.

Divi Builder

Berikan judul yang masuk akal bagi Anda dan klik penggunaan Divi Pembangun

kemudian klik Mulai Membangun (Bangun Dari Awal)

Divi Builder

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

Membuat overlay gambar khusus di Divi

Rancang bagian, baris, dan kolom

Untuk memulai, buat baris tiga kolom di bagian default.

Buka pengaturan bagian dan tambahkan warna latar belakang berikut:

  • Latar belakang: #3a0ca3

Selanjutnya, buka pengaturan kolom 1 dan perbarui yang berikut:

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

Menambahkan gambar

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

Unggah gambar yang lebih mirip potret daripada lanskap. Pastikan lebarnya cukup untuk menutupi lebar kolom penuh pada semua ukuran browser.

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

Di bawah tab Mendesain, perbarui berikut ini:

  • Margin (Bawah): 0px

Di bawah tab Advanced, tambahkan kelas CSS berikut:

  • Kelas CSS: et-overlay-image

Menambahkan warna overlay gambar menggunakan modul "Pembagi"

Untuk membuat warna overlay gambar, kita akan menggunakan modul Divider.

Pertama, tambahkan modul Divider di bawah gambar.

Kemudian posisikan separator secara absolute sehingga diletakkan diatas gambar :

  • Posisi: Absolut

Di bawah tab Konten, perbarui berikut ini:

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

Kemudian perbarui tinggi dan lebar pemisah:

  • Lebar: 100%
  • Tinggi: 100%

Dengan desain di tempat, tambahkan kelas CSS berikut ke splitter:

  • dan-overlay-item

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

Untuk membantu Anda melacak elemen/modul desain, buka modal lapisan dan beri label Pembagi modul (“Warna Overlay”).

Menambahkan teks header overlay

Di bawah modul Divider, tambahkan modul Teks baru. Ini akan berfungsi sebagai teks header overlay yang akan muncul di atas gambar saat mengarahkan kursor.

Perbarui isi dengan judul H2:

<h2>Coaching</h2>

Selanjutnya, perbarui label modul teks untuk referensi di masa mendatang.

Di bawah tab Mendesain, perbarui berikut ini:

  • Perataan Teks: Terpusat
  • Warna Teks: Cahaya
  • Font: Cormorant Garamond
  • Berat Huruf: Tebal
  • Ukuran Teks: 40px
  • Lebar: 100%
  • Lebar Maks: 85%

Di bawah tab Advanced, 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 jenis lanskap mungkin memerlukan lebih sedikit offset

Selanjutnya, tambahkan kelas CSS berikut ke modul teks:

  • Kelas CSS: pemindahan item et-overlay

Selain kelas “dan-overlay-item”, kami menambahkan kelas tambahan "Turunkan" untuk menggunakan CSS khusus untuk memindahkan tajuk sedikit ke bawah saat mengarahkan kursor.

Membuat teks isi overlay

Untuk membuat overlay teks isi, kita dapat menduplikasi modul Teks yang digunakan untuk overlay header. Sebelum memperbarui parameter duplikat, ubah label menjadi "Overlay Body".

Buka pengaturan teks modul Teks baru dan perbarui isi tubuh dengan beberapa kalimat teks paragraf.

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

Karena kami tidak ingin ini bergerak saat mengarahkan kursor (hanya muncul), perbarui kelas CSS untuk hanya menyertakan yang berikut ini:

  • Kelas CSS: et-overlay-item

Membuat tombol overlay

Hamparan terakhir pada gambar ini akan menjadi tombol. Untuk membuat tombol, tambahkan modul Tombol baru di bawah modul Teks kedua.

Sebelum memodifikasi desain, perbarui posisi tombol sebagai berikut:

  • Posisi: mutlak
  • Offset Vertikal: 10%

Sekarang tombolnya harus berada di tengah bagian bawah gambar.

Di tab Advanced, perbarui kelas CSS dan tambahkan cuplikan CSS khusus ke elemen utama sebagai berikut:

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

Perhatikan bahwa kelas tambahan telah ditambahkan ke tombol untuk memindahkannya sedikit ke atas saat mengarahkan kursor. Ini untuk melengkapi gerakan ke bawah dari teks header di hover.

Selanjutnya, perbarui pengaturan desain berikut:

  • Penjajaran Tombol: terpusat
  • Gunakan Gaya Kustom Untuk Tombol: YA
  • Ukuran Teks Tombol: 14px
  • Warna Latar Belakang: #4361ee
  • Lebar Batas Tombol: 0 piksel
  • Jarak Huruf Tombol: 0,1em
  • Berat Huruf: Tebal
  • Gaya Font Tombol: TT
  • Padding: 0,8em (Atas dan Bawah), 0px (Kiri dan Kanan)

Menambahkan CSS khusus dengan modul Kode

Tambahkan modul Kode di bawah tombol.

Kemudian rekatkan CSS berikut ke 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 dengan kebutuhan Anda.

Gandakan kolom untuk desain lainnya

Buka lapisan modal, pertama hapus dua kolom kosong.

Kemudian duplikat kolom yang berisi desain overlay gambar dua kali. Anda harus memiliki total tiga kolom dengan desain yang identik.

Membuat Desain Hamparan Gambar #2

Untuk desain berikutnya, kita akan menempatkan tombol di tengah gambar (selalu terlihat). Selanjutnya, kita akan memindahkan teks header dan body ke tampilan dari atas dan bawah gambar.

Sesuaikan penempatan teks isi dan kelas CSS

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

  • Lokasi: tengah bawah
  • Offset Vertikal: 5%

Selanjutnya, 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

Selanjutnya, hapus kelas CSS seperti yang kita inginkan agar tombol selalu tetap terlihat.

Buka pengaturan modul Divider (overlay color) dan ubah background sebagai berikut:

  • Latar belakang: rgba(67,97,238,0.8)

Kemudian buka pengaturan tombol dan ubah warna latar belakang:

  • Warna Latar Belakang: #f72585

Sesuaikan gambar dan kelas CSS

Kemudian buka pengaturan gambar dan unggah gambar baru (jika diinginkan).

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 meningkatkan ukuran gambar, menciptakan efek zoom-in pada hover.

Membuat Desain Hamparan Gambar #3

Sekarang saatnya membuat desain overlay gambar ketiga di kolom 3.

Sesuaikan konten teks isi overlay dan kelas CSS

Mulailah dengan membuka pengaturan modul teks isi overlay di kolom 3. Selanjutnya, tambahkan judul H2 di atas teks paragraf. Sekarang keduanya akan berada di dalam modul.

Hamparan Gambar Divi

Kemudian hapus kelas CSS agar teks tetap terlihat di atas gambar.

Sesuaikan tombol offset dan kelas CSS

Buka pengaturan modul Tombol dan perbarui offset posisi vertikal:

  • Offset Vertikal: 5%

Hapus Tajuk Hamparan

Selanjutnya, hapus modul Overlay Header Text.

Sesuaikan warna overlay dan kelas CSS

Buka pengaturan modul Divider (overlay color) dan perbarui latar belakang sebagai berikut:

  • Warna gradien latar belakang kiri: rgba(67,97,238,0.8)
  • Warna gradien latar belakang kanan: rgba(247,37,133,0.8)
  • Posisi awal: 25%
  • Posisi akhir: 75%

Dan karena kita ingin agar gradien overlay terlihat setiap saat, hapus kelas CSS.

Sesuaikan kelas CSS dari gambar

Terakhir, kita akan menambahkan kelas CSS tambahan (“et-rotate”) ke gambar utama yang akan mengubah ukuran dan memutar gambar saat mengarahkan kursor.

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

Sentuhan akhir

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

Hapus margin bawah default untuk semua modul

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 memperpanjang margin ke Semua modul di halaman.

Hapus modul kode duplikat

Pastikan untuk menghapus modul kode tambahan yang dibawa dari duplikasi kolom pertama. Anda hanya harus memiliki satu. Anda dapat melakukan ini dengan mudah dari lapisan modal.

Divi

Hasil akhir

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

hamparan gambar khusus dengan Divi

Unduh DIVI Sekarang!!!

Dan inilah desain di ponsel. Efek hover overlay hanya berlaku di desktop. Oleh karena itu, overlay akan tetap terlihat di seluler.

hamparan gambar khusus dengan Divi

Unduh DIVI Sekarang!!!

Kesimpulan

Membuat hamparan gambar khusus sebenarnya sangat menyenangkan. Ada banyak sekali desain yang dapat Anda uji secara visual dengan Divi Builder. 

Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.

Anda juga dapat 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.

...