Apakah Anda ingin membuat tata letak kisi gambar responsif dengan Divi ?
Pembangun Divi memiliki modul built-in yang fantastis yang menggunakan tampilan grid,
Namun terkadang Anda mungkin ingin membuat tata letak kotak gambar kustom Anda sendiri dengan tautan CTA. Ini memberi Anda kontrol lebih besar atas desain dan isi 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 tautan CTA menggunakan opsi desain bawaan Divi.
Mari kita mulai!
penelitian
Berikut adalah ikhtisar singkat dari hasil yang akan kita dapatkan di akhir tutorial ini.
Buat halaman dengan Divi Theme Builder
Dari Dasbor WordPress, buat halaman web baru dengan membuka Halaman >> Tambahkan
Lihat juga: Bagaimana cara membuat menu geser dan dorong di DIVI?
Kemudian, beri judul pada halaman Anda lalu klik " Gunakan Divi Builder ".
Kemudian klik " mulai membangun«
Membuat Tata Letak Bagian Khusus
Tambahkan bagian baru "Spesialisasi". tata letak bilah sisi kiri sepertiga dua pertiga.
Pilih tata letak kolom seperti yang ditunjukkan pada tangkapan layar di bawah ini:
Hapus bagian default sehingga hanya bagian khusus baru yang tersisa.
Buka pengaturan bagian dan ubah warna latar belakang sebagai berikut:
- Latar belakang: #84dbda
Di bawah tab Gaya, perbarui opsi berikut:
- Samakan tinggi kolom: YA
- Gunakan lebar selokan khusus: YA
- Lebar selokan: 1
- Lebar dalam: 100%
- Lebar interior maksimum: 1px (desktop), 080px (tablet dan ponsel)
- Margin Internal (Atas dan Bawah): 12vh
- Kolom 1 Padding (Atas dan Bawah): 0px
Dengan gaya bagian di tempat, tambahkan baris satu kolom ke bagian.
Pengaturan saluran
Perbarui parameter baris sebagai berikut:
- Gunakan Lebar Talang Kustom: YA
- Jarak kolom: 1
- Menyelaraskan ketinggian kolom: YA
- Margin Internal (Atas dan Bawah): 0px
Buat baris kedua dengan menduplikasi baris pertama.
Kemudian ubah baris duplikat menjadi tata letak dua kolom.
Menambahkan gambar sebagai gambar latar kolom
Sekarang setelah semua baris dan kolom berada di tempatnya, kita siap untuk menambahkan gambar kita ke tata letak grid kita.
Untuk memastikan bahwa gambar responsif dalam tata letak kisi, kami akan menambahkan setiap gambar kami sebagai gambar latar belakang ke masing-masing dari empat kolom di bagian tersebut.
Karena setiap gambar latar belakang akan memiliki ukuran latar belakang " menutupi ", gambar akan selalu mengisi seluruh kolom saat menyesuaikan ukuran browser.
Gambar latar belakang kolom baris atas
Untuk memulai, buka pengaturan kolom 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 juga gambar latar belakang ke kolom ini.
Selanjutnya, tambahkan gambar latar belakang ke kolom 2 dari baris yang sama.
Bagian kolom 1 gambar latar belakang
Dan akhirnya, buka pengaturan bagian "khusus" dan tambahkan gambar latar belakang ke kolom 1.
Penambahan modul "Ajakan Bertindak" yang ditumpangkan pada gambar ke setiap kolom
Sekarang setelah gambar latar belakang kita telah ditambahkan ke setiap kolom tata letak kisi, kita akan menambahkan modul "Panggilan untuk Bertindak" ke setiap kolom.
Menggunakan hamparan modul "Panggilan untuk Bertindak" pada gambar latar kolom akan memungkinkan Anda untuk dengan mudah menambahkan gaya hamparan latar belakang khusus dan efek arahkan kursor ke gambar latar kolom.
Untuk contoh ini, kami hanya akan menggunakan elemen tombol dari modul Panggilan Tindakan, namun Anda dapat dengan mudah menambahkannya ke elemen tersebut isi judul atau isi di atas tombol.
Kami akan menambahkan modul "Call to Action" pertama di kolom baris atas.
Isi
Perbarui pengaturan modul "Call to Action" sebagai berikut:
- hapus teks judul
- hapus teks isi
- URL Tautan Tombol: #
KOMENTAR : Menambahkan "#" untuk URL tautan tombol hanyalah pengisi untuk saat ini agar tombol dapat ditampilkan. Menambahkan warna latar belakang semi-transparan pada hover akan memberi Anda warna overlay kustom yang bagus saat Anda mengarahkan kursor ke modul (dan gambar di belakangnya).
- Warna latar belakang: transparan (desktop), rgba (255,235,77,0.5) (arahkan kursor)
Gaya Tombol
Pergi ke tab Gaya dan ubah pengaturan tombol modul "Call to action" sebagai berikut:
- Gunakan gaya khusus untuk Tombol: YA
- Ukuran Teks Tombol: 22px
- Warna teks tombol: #ffeb4d
- Tombol latar belakang: #000000 (desktop), #ec5f00 (arahkan kursor)
Lihat juga: Cara membuat menu geser dan tekan di DIVI
- Lebar Batas Tombol: 0 piksel
- Radius Batas Tombol: 100 piksel
- Font Tombol: Pasir hisap
- Tombol Cahaya Redup: Semi Tebal
- Tombol Padding: Atas 0,5em, Bawah 0,5em, Kiri 2em, Kanan 2em
Ukuran, bantalan dan tepi
Selanjutnya, kita perlu memastikan modul kita memiliki ketinggian tertentu untuk mengekspos gambar latar belakang kolom di belakangnya.
Untuk melakukan ini, kami akan menambahkan margin internal (Atas dan Bawah) ke modul.
Kami juga akan menambahkan batas halus ke modul untuk memberikan sedikit pemisahan dari gambar lain dalam tata letak kotak.
Terapkan pengaturan berikut:
- Lebar: 100%
- Margin Internal (Atas dan Bawah): 15vh
- Lebar batas bawah: 5px
- Lebar batas kiri: 5px
- Warna batas: rgba (255,255,255,0.5)
KOMENTAR : Menggunakan satuan panjang vh untuk padding akan membuat nilai padding relatif terhadap ketinggian viewport browser. Jadi elemen grid gambar Anda akan tumbuh dan menyusut tinggi sebanding dengan jendela browser.
Pemusatan vertikal dari konten modul "Ajakan bertindak"
Untuk memastikan bahwa isi Jika modul "Panggilan Tindakan" tetap berada di tengah secara vertikal, kita dapat menambahkan cuplikan 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 modul "Ajakan Bertindak" pertama telah disesuaikan, salin dan tempel modul ke 3 kolom tata letak lainnya, termasuk 2 kolom di baris bawah dan kolom 1 di bagian.
Untuk memastikan bahwa modul "Ajakan Bertindak" mencakup tinggi penuh kolom 1 di bagian khusus, atur tinggi minimum ke 100%.
- Tinggi minimal: 100%
Ini sudah berakhir ! Mari kita lihat hasil akhirnya.
Hasil akhir
Berikut adalah hasil akhir dari layout grid gambar responsif pada halaman web dengan efek hover.
Dan beginilah reaksi grid saat menyesuaikan ukuran browser.
Unduh DIVI Sekarang!!!
Kesimpulan
Tata letak kisi gambar responsif terus menjadi aspek populer di banyak situs web. Daya tarik visual yang diberikan oleh gambar latar belakang yang dikombinasikan dengan hamparan ajakan bertindak benar-benar dapat memunculkan tautan navigasi penting tersebut.
Selain itu, sifat responsif dari tata letak kisi gambar akan terlihat bagus di semua perangkat, yang selalu merupakan keharusan.
Kami berharap panduan ini akan berguna bagi Anda dalam proyek pembuatan masa depan Anda situs jaringan. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Namun, Anda juga bisa berkonsultasi sumber daya kita jika Anda membutuhkan lebih banyak elemen untuk menyelesaikan proyek pembuatan situs web Anda.
Anda juga dapat mengikuti 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.
...
