Cara Membuat Tata Letak Grid Gambar Responsif dengan CTA dan Overlay Arahkan kursor di Divi

Tata letak kisi responsif sempurna untuk menampilkan koleksi gambar dengan tautan (atau CTA) karena terlihat bagus di setiap perangkat. Pembangun Divi memiliki beberapa modul built-in yang fantastis yang menggunakan tampilan grid, termasuk Portfolio Grid, Blog Grid, dan Gallery Grid. Namun terkadang Anda mungkin ingin membuat tata letak kotak gambar kustom Anda sendiri dengan CTA. Ini memberi Anda kontrol lebih besar atas desain dan konten yang ingin Anda tampilkan untuk setiap item kisi tanpa harus menggunakan plugin.

Hari ini, kami akan menunjukkan cara membuat tata letak kisi gambar responsif dengan CTA menggunakan opsi desain bawaan Divi. Untuk melakukan ini, kita akan berkreasi dengan cara kita mengatur kisi menggunakan bagian khusus dan menambahkan overlay ke setiap gambar menggunakan modul Ajakan Bertindak.

Mari kita mulai!

Sneak Peek

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

Unduh Tata Letaknya 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 Tata Letak Kisi Gambar Responsif dengan CTA dan Hamparan Arahkan Arah di Divi

Bagian 1: Membuat Tata Letak Bagian Khusus

Untuk memulai, tambahkan bagian khusus baru dengan sepertiga dua pertiga tata letak bilah sisi kiri.

Hapus bagian reguler default sehingga hanya bagian khusus baru yang tersisa.

Buka pengaturan bagian dan perbarui warna latar belakang sebagai berikut:

• Warna Latar Belakang: #84dbda

Di bawah tab desain, perbarui opsi ukuran, lebar, dan bantalan sebagai berikut:

• Samakan Tinggi Kolom: YA
• Gunakan Lebar Talang Kustom: YA
• Lebar Talang: 1
• Lebar bagian dalam: 100%
• Lebar Maks Bagian Dalam: 1080px (desktop), 500px (tablet dan ponsel)
• Padding: 12vh atas, 12vh bawah
• Kolom 1 Padding: 0px atas, 0px bawah

Setelah gaya Bagian berada di tempatnya, tambahkan baris satu kolom ke bagian tersebut.

Pengaturan Baris

Perbarui pengaturan baris sebagai berikut:

• Lebar Talang: 1
• Samakan Tinggi Kolom: YA
• Padding: 0px atas, 0px bawah

Untuk membuat baris kedua, duplikat baris pertama.

Kemudian perbarui baris duplikat dengan tata letak dua kolom.

Bagian 2: Menambahkan Gambar sebagai Gambar Latar Belakang Kolom

Sekarang setelah semua baris dan kolom berada di tempatnya, kita siap untuk menambahkan gambar kita ke tata letak grid kita. Untuk memastikan gambar responsif dalam tata letak grid, kita akan menambahkan masing-masing gambar kita sebagai gambar latar belakang ke masing-masing dari empat kolom di seluruh bagian. Karena setiap gambar latar belakang akan memiliki ukuran latar belakang "sampul", gambar akan selalu memenuhi seluruh kolom saat menyesuaikan ukuran browser.

Gambar Latar Belakang Kolom Baris Atas

Untuk memulai, buka pengaturan kolom untuk kolom di baris atas.

Kemudian tambahkan gambar latar belakang ke kolom.

Gambar Latar Belakang Kolom Baris Bawah

Selanjutnya, buka pengaturan untuk kolom 1 di baris kedua (bawah) dan tambahkan gambar latar belakang ke kolom itu juga.

Kemudian, tambahkan gambar latar belakang ke kolom 2 di baris yang sama.

Bagian Khusus Kolom 1 Gambar Latar Belakang

Dan akhirnya, buka pengaturan bagian khusus dan tambahkan gambar latar belakang ke kolom 1.

Bagian 3: Menambahkan Call To Action Gambar Overlay ke setiap Kolom

Sekarang gambar latar belakang kita telah ditambahkan ke setiap kolom tata letak grid, kita akan menambahkan modul ajakan bertindak ke setiap kolom dengan akan berfungsi sebagai overlay untuk gambar dengan tombol CTA. Menggunakan modul ajakan bertindak sebagai hamparan di atas gambar latar belakang kolom akan memungkinkan Anda menambahkan gaya hamparan latar belakang khusus dan efek arahkan kursor ke gambar dengan mudah. Plus itu memberi Anda opsi untuk menambahkan CTA khusus di atas gambar juga. Untuk contoh ini, kita hanya akan menggunakan elemen tombol pada modul Ajakan bertindak, tetapi Anda dapat dengan mudah menambahkan konten judul atau isi di atas tombol juga menggunakan opsi konten.

Membuat Modul Ajakan Bertindak

Untuk menambahkan ajakan bertindak hamparan gambar pertama, tambahkan modul ajakan bertindak ke kolom di baris atas.

Isi

Perbarui konten untuk ajakan bertindak sebagai berikut:

• hapus teks judul
• hapus teks isi
• URL Tautan Tombol: #
• Warna Latar Belakang: transparan (desktop), rgba (255,235,77,0.5) (arahkan kursor)

CATATAN: Menambahkan "#" untuk URL tautan tombol hanyalah pengisi untuk saat ini sehingga tombol itu muncul. Menambahkan warna latar belakang semi-transparan pada hover akan memberi Anda warna overlay kustom yang bagus saat mengarahkan kursor ke modul (dan gambar di belakangnya).

Gaya Tombol

Lanjutkan memperbarui pengaturan desain ajakan bertindak untuk tombol sebagai berikut:

• Gunakan Gaya Kustom untuk Tombol: YA
• Ukuran Teks Tombol: 22px
• Warna Teks Tombol: #ffeb4d
• Warna Latar Tombol: #000 (desktop), #ec5f00 (arahkan kursor)
• Lebar Batas Tombol: 0px
• Radius Batas Tombol: 100px
• Font Tombol: Pasir hisap
• Berat Huruf Tombol: Semi Tebal
• Tombol Padding: 0.5em atas, 0.5em bawah, 2em kiri, 2em kanan

Ukuran, Padding, dan Border

Selanjutnya, kita perlu memastikan bahwa modul kita memiliki ketinggian untuk mengekspos gambar latar belakang kolom di belakangnya. Untuk melakukan ini, kita akan menambahkan beberapa padding ke bagian atas dan bawah modul. Kami juga akan menambahkan batas halus ke modul sehingga memberikan sedikit pemisahan dari gambar lain dalam tata letak kotak.

Perbarui berikut ini:

• Lebar: 100%
• Padding: atas 15vh, bawah 15vh
• Lebar Batas Bawah: 5px
• Lebar Batas Kiri: 5px
• Warna Perbatasan: rgba (255,255,255,0.5)

CATATAN: Menggunakan unit panjang vh untuk padding akan membuat nilai padding relatif terhadap tinggi viewport browser. Jadi, item kisi gambar Anda akan bertambah dan berkurang ketinggiannya saat jendela browser bertambah dan berkurang tingginya.

Memusatkan Konten CTA secara vertikal

Untuk memastikan konten dalam modul ajakan bertindak tetap terpusat secara vertikal, kita dapat menambahkan potongan kecil CSS khusus menggunakan properti flex.

Di bawah tab lanjutan, tambahkan CSS berikut ke Elemen Utama:

display:flex;
flex-direction:column;
justify-content:center;

Menambahkan Hamparan Ajakan Bertindak ke kolom lain

Sekarang setelah modul ajakan bertindak pertama ditata, salin dan tempel modul ke 3 kolom lainnya di seluruh tata letak termasuk 2 kolom di baris bawah dan kolom 1 di bagian khusus.

Untuk memastikan modul ajakan bertindak mencakup tinggi penuh kolom 1 di bagian khusus, perbarui ketinggian minimum menjadi 100%.

• Tinggi Min: 100%

Biasanya, ini tidak akan berfungsi untuk modul di kolom normal. Namun, karena properti flex pada kolom, modul pada dasarnya adalah elemen turunan flex, sehingga nilai ketinggian minimum 100% akan berfungsi.

Itu dia. Mari kita lihat hasil akhirnya.

Hasil Akhir

Berikut adalah hasil akhir dari layout grid gambar responsif pada halaman hidup.

Dan inilah efek hover.

Dan beginilah respon desain saat menyesuaikan ukuran browser.

Pikiran Akhir

Tata letak kisi gambar yang responsif terus menjadi aspek populer di banyak situs web. Aspek visual yang diberikan oleh gambar latar belakang yang dikombinasikan dengan hamparan Ajakan Bertindak benar-benar dapat membuat tautan navigasi penting itu muncul. Plus, sifat responsif dari tata letak kotak gambar akan terlihat bagus di semua perangkat yang selalu menjadi kebutuhan. Semoga cocok untuk proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!