Cara Menyorot Kategori Produk di Bagian Pahlawan Situs Web Divi yang Menakjubkan

Jika Anda akrab dengan situs web e-niaga, Anda pasti akrab dengan kategori produk juga. Kategori produk dapat menjadi beberapa halaman paling kuat di situs web Anda. Itulah mengapa penting untuk membuatnya mudah ditemukan dan disorot dengan cara yang lugas dan elegan. Dengan opsi bawaan Divi, Anda dapat membawa desain Anda ke berbagai arah. Dalam tutorial ini, kami akan menunjukkan cara menyorot kategori produk di bagian pahlawan Anda. Kami akan membuat contoh desain dari awal dan mudah-mudahan, ini akan menginspirasi Anda untuk menyoroti kategori produk dengan cara kreatif Anda sendiri juga!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya pada ukuran layar yang berbeda.

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Latar Belakang Gradien

Mulailah dengan menambahkan bagian baru ke halaman Anda. Buka pengaturan bagian ini dan tambahkan latar belakang gradien ke dalamnya.

• Warna 1: #ffffff
• Warna 2: #757f1e
• Tipe Gradien: Linier
• Arah Gradien: 90 derajat
• Posisi Awal: 50%
• Posisi Akhir: 50%

Jarak

Lalu, buka tab desain dan tambahkan beberapa bantalan atas dan bawah khusus ke bagian tersebut.

• Padding Atas: 130px
• Padding Bawah: 130px

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna Latar Kolom 1

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang ke kolom pertama.

• Kolom 1 Warna Latar Belakang: rgba(0,0,0,0.19)

Gambar Latar Kolom 1

Tambahkan gambar latar belakang ke kolom pertama juga bersama dengan mode campuran.

• Kolom 1 Posisi Gambar Latar: Bawah Tengah
• Pengulangan Gambar Latar Kolom 1: Tidak Ada Pengulangan
• Kolom 1 Campuran Gambar Latar: Multiply

Warna Latar Kolom 2

Kolom kedua hanya membutuhkan warna latar belakang putih.

• Kolom 2 Warna Latar Belakang: #ffffff

Perekat

Lanjutkan dengan masuk ke tab desain dari pengaturan baris dan ubah pengaturan ukuran.

• Gunakan Lebar Kustom: Ya
• Satuan: PX
• Lebar Kustom: 2000px
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Hapus semua padding kustom default dari baris juga.

• Padding Atas: 0px
• Padding Bawah: 0px

Bayangan Kotak

Dan tambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 80px

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Saatnya mulai menambahkan modul! Modul pertama yang kita perlukan di kolom kedua adalah modul teks judul. Tambahkan beberapa konten pilihan.

Pengaturan Teks Judul

Selanjutnya, buka pengaturan teks judul dan buat beberapa perubahan.

• Berat Huruf Judul: Ultra Tebal
• Ukuran Teks Judul: 60px (Desktop & Tablet), 50px (Telepon)
• Spasi Surat Judul: -4px
• Judul Garis Tinggi: 0.8em

Jarak

Tambahkan beberapa margin kustom dan nilai padding juga.

• Margin Atas: 17vw
• Padding Kiri: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)

Tambahkan Modul Pembagi ke Kolom 2

Visibilitas

Modul kedua dan terakhir yang dibutuhkan pada kolom kedua adalah Modul Pembagi. Pastikan opsi Perlihatkan Pembagi diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Ubah warna pembagi berikutnya.

• Warna: #757f1e

Gaya

Ubah gaya pembagi dalam pengaturan gaya juga.

• Gaya Pembagi: Ganda

Perekat

Dan tingkatkan Berat Pembagi dalam pengaturan ukuran modul.

• Berat Pembagi: 6px

Jarak

Terakhir, tambahkan beberapa margin atas dan bawah kustom ke Modul Pembagi.

• Margin Atas: 2vw
• Margin Bawah: 15vw

Tambahkan Baris #2

Struktur Kolom

Ke baris kedua! Pilih struktur kolom berikut untuk itu:

Warna Latar Kolom 1

Buka pengaturan baris dan tambahkan warna latar belakang ke kolom pertama.

• Kolom 1 Warna Latar Belakang: #212121

Perekat

Selanjutnya, buka tab desain dan mainkan ukuran baris.

• Gunakan Lebar Kustom: Ya
• Satuan: PX
• Lebar Kustom: 2000px
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Hapus semua padding kustom dari baris juga dengan menambahkan '0px' ke padding atas dan bawah.

• Padding Atas: 0px
• Padding Bawah: 0px

Bayangan Kotak

Last but not least, berikan baris bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 80px

Tambahkan Modul Teks #1 ke Kolom 1

Tambah isi

Modul pertama yang kita perlukan adalah Modul Teks. Tambahkan satu ke kolom pertama dengan beberapa konten pilihan.

Pengaturan Teks

Lanjutkan dengan membuka tab desain dan mengubah pengaturan teks.

• Berat Font Teks: Ringan
• Warna teks: #ffffff
• Ukuran Teks: 18px (Desktop), 15px (Tablet), 12px (Telepon)
• Tinggi Baris Teks: 1em
• Orientasi Teks: Kiri
• Warna Teks: Cahaya

Pengaturan Teks Judul

Ubah juga pengaturan teks heading.

• Judul 3 Warna teks: #ffffff
• Judul 3 Ukuran Teks: 25px (Desktop), 20px (Tablet), 18px (Ponsel)
• Spasi Judul 3 Huruf: -1px

Jarak

Tambahkan beberapa nilai padding khusus dalam pengaturan spasi juga.

• Padding Atas: 30px
• Padding Bawah: 30px
• Padding Kiri: 50px
• Padding Kanan: 50px

Tambahkan Modul Teks #2 ke Kolom 2

Tambah isi

Lanjutkan dengan menambahkan Modul Teks lain ke kolom kedua. Tambahkan beberapa konten pilihan dan tautkan juga halaman kategori produk di pengaturan tautan.

Warna Latar Default

Kemudian, buka pengaturan latar belakang dan tambahkan warna latar belakang.

• Warna Latar Belakang: #eaeaea

Arahkan Warna Latar Belakang

Ubah warna latar belakang ini saat melayang.

• Warna Latar Belakang: #ffbb00

Pengaturan Teks Default

Ubah di sekitar pengaturan teks di tab desain berikutnya.

• Berat Font Teks: Sangat Tebal
• Gaya Font Teks: Huruf Besar
• Warna Teks: #333333
• Ukuran Teks: 16px
• Spasi Huruf Teks: -1px
• Orientasi Teks: Tengah

Arahkan Pengaturan Teks

Dan ubah pengaturan ini saat mengarahkan kursor.

• Warna Teks: #ffffff
• Ukuran Teks: 20px

Spasi Default

Kami juga menerapkan beberapa nilai spasi default.

• Padding Atas: 45px
• Padding Bawah: 45px
• Padding Kiri: 5px
• Padding Kanan: 5px

Spasi Arahkan

Yang akan kita ubah saat melayang.

• Margin Atas: -50px
• Margin Kiri: -20px
• Padding Atas: 70px
• Padding Bawah: 70px
• Padding Kiri: 5px
• Padding Kanan: 5px

Bayangan Kotak Default

Lanjutkan dengan membuka pengaturan bayangan kotak dan tambahkan bayangan kotak yang benar-benar transparan.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba (255,255,255,0)

Arahkan Bayangan Kotak

Ubah warna bayangan kotak yang benar-benar transparan saat mengarahkan kursor agar muncul.

• Warna Bayangan: rgba (0,0,0,0.34)

Modul Teks Klon #2 Dua Kali & Tempatkan di Kolom Tersisa

Setelah Anda selesai memodifikasi Modul Teks di kolom 2, Anda dapat melanjutkan dan mengkloning modul dua kali dan menempatkan duplikatnya di dua kolom baris yang tersisa.

Ubah Duplikat Pertama

Ubah Konten

Buka duplikat pertama di kolom ketiga dan ubah konten dan tautan kategori produk.

Ubah Warna Latar Belakang

Ubah warna latar belakang modul ini juga.

• Warna Latar Belakang: #dddddd

Ubah Duplikat Kedua

Ubah Konten

Ubah konten duplikat kedua di kolom 4 juga.

Ubah Warna Latar Belakang

Seiring dengan warna latar belakang.

• Warna Latar Belakang: #c6c6c6

Tambahkan Modul Gambar untuk Ukuran Layar Lebih Kecil ke Kolom 2 Baris #1

Unggah Gambar

Last but not least, kami juga akan menambahkan Modul Gambar ke kolom kedua dari baris pertama untuk mengoptimalkan semuanya untuk ukuran layar yang lebih kecil.

Visibilitas

Pastikan modul ini hanya muncul pada ukuran layar yang lebih kecil dengan menyembunyikannya di desktop di tab lanjutan modul.

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Pikiran Akhir

Dalam posting ini, kami telah membuat ulang contoh desain yang menakjubkan yang menempatkan kategori produk utama situs web Anda dalam sorotan. Kami harap tutorial ini menginspirasi Anda untuk membuat jenis desain Anda sendiri juga. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!