Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis.

Apakah Anda ingin membuat tata letak kisi gambar responsif dengan DIVI?

Pembangun Divi memiliki modul bawaan yang fantastis yang menggunakan tampilan kisi,

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 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 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?

kisi gambar responsif dengan DIVI

Kemudian, beri judul pada halaman Anda lalu klik " Gunakan Divi Builder ".

Kemudian klik " mulai membangun« 

kisi gambar responsif dengan DIVI

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%

Baca juga: Bagaimana cara mengapung posting blog di DIVI?

  • 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:

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda membuat Mudah dan Gratis desain situs web atau blog apa pun dengan tampilan profesional. Berhentilah membayar banyak untuk situs web yang dapat Anda lakukan sendiri.

  • 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.

Apakah Anda ingin menjual produk Anda di internet?

Unduh WooCommerce secara gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress dan dengan mudah membuat toko online Anda. Sempurna untuk pemula.

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, kita hanya akan menggunakan elemen tombol dari modul Panggilan Tindakan, tetapi Anda dapat dengan mudah menambahkan judul atau isi 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 konten modul "Call to Action" tetap berada di tengah vertikal, kita dapat menambahkan potongan kecil CSS kustom menggunakan properti flex.

Di bawah tab lanjutan, tambahkan CSS berikut ke elemen utama:

display:flex;
flex-direction:column;
justify-content:center;
kisi gambar responsif dengan DIVI

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.

kisi gambar responsif dengan DIVI
kisi gambar responsif dengan DIVI

Untuk memastikan bahwa modul "Ajakan Bertindak" mencakup tinggi penuh kolom 1 di bagian khusus, atur tinggi minimum ke 100%.

  • Tinggi minimal: 100%
Divi

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.

kisi gambar responsif dengan DIVI

Dan beginilah reaksi grid saat menyesuaikan ukuran browser.

kisi gambar responsif dengan DIVI

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 harap panduan ini bermanfaat bagi Anda dalam upaya membangun situs web di masa mendatang. 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.

...