Salah satu halaman arahan eksklusif yang kami sediakan untuk Anda sebagai Anggota Seumur Hidup dan pelanggan Black Friday baru tahun ini adalah Halaman Arahan Kit UI yang menakjubkan. Tata letak ini berisi beberapa kombinasi desain bawaan terbaik Divi dan maket berkualitas tinggi yang akan membawa situs web Anda ke tingkat berikutnya. Dalam posting ini kami akan menunjukkan kepada Anda bagaimana mendapatkannya dan menggunakannya secara efektif.

Jika Anda adalah pelanggan Seumur Hidup saat ini atau jika Anda telah membeli akun baru atau meningkatkan selama Penjualan Black Friday kami, Anda dapat mengunduh tata letak ini sekarang.

Dapatkan Halaman Landing Kit Black Friday UI Eksklusif

Sebelum masuk ke kasus penggunaan ini, Anda harus mendapatkan Halaman Arahan Kit UI Black Friday eksklusif yang bisa Anda dapatkan dengan menjadi Anggota Elegant Themes baru, meningkatkan akun Anda yang ada, atau dengan menjadi Anggota Seumur Hidup bersama kami. Jika Anda memang sudah menjadi Anggota Seumur Hidup, Anda dapat masuk ke area anggota kami dan mengunduh semua halaman arahan eksklusif kami di sini. Semua orang perlu menggunakan tombol di bawah ini untuk membeli atau meningkatkan versi sebelum mereka dapat mengikuti sisa tutorial kami.

Klaim Kesepakatan Sebelum Menghilang!

Menggunakan Struktur Kolom Divi untuk Membuat Daftar Produk & Fitur dengan Indah

Untuk sisa posting ini, kami akan menganggap Anda telah memanfaatkan kesepakatan Black Friday kami atau bahwa Anda sudah menjadi Anggota Seumur Hidup dan memiliki akses ke Halaman Arahan Black Friday UI Kit.

Setelah Anda mengunduh Halaman Arahan Kit UI baru dari area anggota kami, Anda dapat menonton video di bawah ini untuk melihat betapa mudahnya menyiapkannya. Kami juga mendorong Anda untuk mengikuti tutorial ini agar situs Anda siap untuk penyesuaian lebih lanjut.

Dalam posting kasus penggunaan ini, kami akan menunjukkan kepada Anda cara membuat daftar fitur dan/atau produk Anda dengan memukau menggunakan struktur kolom baru Divi. Desain yang akan kami tangani tampak hebat dengan Halaman Arahan Kit UI dan memungkinkan Anda menggunakan ruang di halaman Anda dengan cara yang efektif dan indah.

Pratinjau

Mari kita lihat hasilnya pada ukuran layar yang berbeda.

Arahkan & Animasi

Kami juga akan menambahkan beberapa pengaturan hover dan animasi yang halus ke berbagai elemen desain. Ini akan memberikan interaksi berikut:

Ayo Mulai!

Tambahkan Halaman Baru Menggunakan Halaman Arahan Kit UI

Hal pertama yang perlu Anda lakukan adalah membuat halaman baru menggunakan Halaman Arahan Kit UI yang telah Anda unduh dan unggah. Jika Anda tidak yakin bagaimana melakukannya, pastikan Anda memeriksa video di bagian sebelumnya dari posting ini yang akan memandu Anda langkah demi langkah.

Temukan Bagian Fitur di Halaman

Setelah Anda mengunggah tata letak, gulir ke bawah hingga Anda menemukan bagian fitur di halaman.

Hapus Baris yang Ada

Hapus dua baris terakhir yang dapat Anda temukan di bagian ini. Kami akan mengganti konten baris ini dengan fitur/daftar produk kami.

Tambahkan Baris Baru Di Bawah Baris yang Mengandung Baris

Struktur Kolom

Tambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran di tab desain.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: Ya
• Samakan Tinggi Kolom: Ya

Jarak

Untuk memastikan desain ini terlihat bagus di semua ukuran layar, kita akan menggunakan margin kustom dan nilai padding yang berbeda:

• Margin Atas: 100px
• Margin Bawah: 100px
• Padding Atas: 87px
• Kolom 1 Padding Atas: 100px (Desktop), 0px (Tablet & Ponsel)
• Kolom 2 Padding Atas: 100px (Desktop), 0px (Tablet & Ponsel)
• Kolom 3 Padding Atas: 100px (Desktop). 0px (Tablet & Ponsel)
• Kolom 3 Padding Bawah: 50px (Tablet & Ponsel)
• Kolom 4 Padding Kiri: 10px (Hanya Ponsel)
• Kolom 4 Padding Kanan: 10px
• Kolom 5 Padding Kiri: 5px (Desktop & Tablet), 10px (Telepon)
• Kolom 5 Padding Kanan: 5px (Desktop & Tablet), 10px (Telepon)
• Kolom 6 Padding Kiri: 10px
• Kolom 6 Padding Kiri: 10px (Hanya Ponsel)

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Tambahkan Modul Teks ke kolom pertama dengan nomor.

Warna Latar Default

Tambahkan warna latar belakang ke modul ini.

• Warna Latar Belakang: #0f0f0f

Arahkan Warna Latar Belakang

Dan ubah warna latar belakang saat melayang.

• Warna Latar Belakang: #ff5400

Gambar latar belakang

Anda juga dapat menambahkan salah satu gambar ikon, yang dapat Anda temukan di Perpustakaan Media, ke latar belakang:

• Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
• Posisi Gambar Latar Belakang: Tengah
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan

Pengaturan Teks Default

Lanjutkan dengan mengubah pengaturan teks.

• Font Teks: Muli
• Berat Font Teks: Ringan
• Warna Teks: #ffffff
• Ukuran Teks: 80px (Desktop & Telepon), 40px (Telepon)
• Tinggi Baris Teks: 1em

• Warna Bayangan Teks: ##ffffff
• Orientasi Teks: Kiri

Spasi Default

Tambahkan beberapa bantalan khusus untuk membuat persegi.

• Padding Atas: 200px
• Padding Kiri: 50px (Hanya Ponsel)
• Padding Kanan: 50px (Hanya Ponsel)

Spasi Arahkan

Ubah pengaturan spasi saat mengarahkan kursor.

• Padding Kiri: 100px

Berbatasan

Untuk mencocokkan Halaman Arahan Kit UI, kami juga menambahkan beberapa sudut membulat yang halus. Tambahkan '20px' ke masing-masing sudut.

Bayangan Kotak

Gunakan bayangan kotak berikut untuk menambahkan beberapa warna modul juga:

• Posisi Horizontal Bayangan Kotak: 20px
• Posisi Vertikal Bayangan Kotak: -50px
• Kekuatan Penyebaran Bayangan Kotak: 17px
• Warna Bayangan: #593aff

Animasi

Last but not least, tambahkan animasi slide yang sangat halus ke Modul Teks.

• Gaya Animasi: Slide
• Arah Animasi: Kanan
• Intensitas Animasi: 3%

Tambahkan Modul Pembagi ke Kolom 2

Visibilitas

Modul berikutnya yang kita perlukan adalah Modul Pembagi. Silakan dan tambahkan satu ke kolom kedua. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Ubah warna pembagi berikutnya.

• Warna: #ffffff

Jarak

Untuk tumpang tindih Modul Teks di kolom pertama, kita akan menggunakan beberapa nilai margin kustom yang akan kita sesuaikan dengan ukuran layar yang berbeda.

• Margin Atas: 30px
• Margin Kiri: -200px (Desktop & Tablet), 0px (Telepon)
• Margin Kanan: 200px (Desktop & Tablet), 0px (Telepon)

Tambahkan Modul Teks #1 ke Kolom 3

Tambah isi

Ke kolom berikutnya! Di sini, modul pertama yang kita perlukan adalah modul teks judul. Silakan dan tambahkan judul fitur atau produk pertama Anda.

Pengaturan Teks Judul

Kemudian, buka pengaturan teks judul dan buat beberapa perubahan agar sesuai dengan Paket Tata Letak Kit UI.

• Judul 3 Font: Muli
• Judul 3 Berat Font: Ringan
• Judul 3 Warna Teks: #ffffff
• Judul 3 Ukuran Teks: 30px (Desktop & Tablet), 18px (Telepon)

Jarak

Untuk mendorong modul ini ke kiri, kita akan menggunakan beberapa nilai spasi kustom.

• Margin Atas: 20px
• Margin Bawah: 20px
• Margin Kiri: -180px (Desktop & Tablet), 0px (Telepon)
• Padding Kiri: 20px (Desktop & Tablet), 50px (Telepon)
• Padding Kanan: 20px (Desktop & Tablet), 50px (Ponsel)

Tambahkan Modul Teks #2 ke Kolom 3

Tambah isi

Modul berikutnya yang kita perlukan adalah Deskripsi Modul Teks. Silakan dan masukkan deskripsi fitur atau produk Anda.

Pengaturan Teks

Ubah pengaturan teks selanjutnya.

• Warna Teks: rgba(255,255,255,0.5)
• Tinggi Baris Teks: 2.2em

Jarak

Dorong modul ini ke kiri juga dengan menggunakan beberapa nilai spasi khusus.

• Margin Kiri: -180px (Desktop & Tablet), 0px (Telepon)
• Padding Kiri: 20px (Desktop & Tablet), 50px (Telepon)
• Padding Kanan: 20px (Desktop & Tablet), 50px (Ponsel)

Modul Tombol Klon & Tempatkan di Kolom 3

Modul terakhir yang kita perlukan di kolom 3 adalah Modul Tombol. Untuk menghemat waktu, kita akan mengkloning tombol yang ada di halaman dan menempatkan duplikatnya tepat di bawah dua modul lain yang telah kita tambahkan.

Ubah Konten

Ubah konten modul tombol.

Ubah Spasi

Kami mendorong modul ini ke kiri juga. Seperti yang Anda lihat, semua modul di kolom 3 menempati ruang dua kolom. Pendekatan semacam ini memungkinkan kita untuk membuat struktur kolom lain yang sesuai dengan hasil yang kita inginkan.

• Margin Atas: 50px
• Margin Kiri: -160px (Desktop & Tablet), 50px (Telepon)
• Margin Kanan: 50px (Hanya Ponsel)

Tambahkan Modul Gambar ke Kolom 4

Unggah Gambar

Ke kolom berikutnya! Tambahkan Modul Gambar ke kolom 4 dan unggah gambar pilihan. Untuk contoh ini, kami telah menggunakan dimensi gambar 500×500 tetapi jangan ragu untuk bermain-main dengan ukuran gambar lain juga.

Bayangan Kotak

Tambahkan bayangan kotak halus ke modul ini.

• Warna Bayangan: #ffffff

Animasi

Dan untuk melengkapinya, tambahkan animasi slide ke gambar juga.

• Gaya Animasi: Slide
• Arah Animasi: Kiri
• Penundaan Animasi: 100ms
• Intensitas Animasi: 3%

Tambahkan Modul Teks #1 ke Kolom 4

Tambah isi

Tepat di bawah Modul Gambar, lanjutkan dan tambahkan judul Modul Teks dengan beberapa konten pilihan.

Warna Latar Default

Ubah warna latar belakang modul ini.

• Warna Latar Belakang: #0f0f0f

Arahkan Warna Latar Belakang

Dan gunakan warna latar belakang lain saat melayang.

• Warna Latar Belakang: #593aff

Pengaturan Teks Judul

Lanjutkan dengan mengubah pengaturan teks judul agar sesuai dengan Halaman Arahan Kit UI.

• Judul 4 Font: Muli
• Judul 4 Berat Font: Ringan
• Judul 4 Warna Teks: #ffffff
• Judul 4 Ukuran Teks: 23px (Desktop & Tablet), 18px (Telepon)

Spasi Default

Tambahkan beberapa nilai spasi kustom berikutnya.

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

Spasi Arahkan

Dan ubah nilai-nilai ini saat mengarahkan kursor untuk membuat transisi yang bagus.

• Margin Bawah: 50px
• Padding Atas: 20px
• Padding Bawah: 20px

Tambahkan Modul Teks #2 ke Kolom 4

Tambah isi

Modul kedua dan terakhir yang kita perlukan di kolom 4 adalah Modul Teks deskripsi. Masukkan beberapa konten pilihan.

Warna latar belakang

Ubah warna latar belakang berikutnya.

• Warna Latar Belakang: #0f0f0f

Pengaturan Teks

Dan ubah pengaturan teks.

• Warna Teks: rgba(255,255,255,0.5)
• Tinggi Baris Teks: 2.2em

Jarak

Untuk menciptakan tampilan dan nuansa yang bersih, tambahkan beberapa bantalan khusus ke modul ini.

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

Berbatasan

Last but not least, tambahkan '20px' ke dua sudut bawah modul.

Kloning Semua Modul di Kolom 4 Dua Kali & Tempatkan di Kolom Tersisa

Ubah Gambar & Konten

Sekarang setelah Anda memiliki semua modul yang Anda butuhkan di kolom 4, Anda dapat melanjutkan dan mengkloning semua modul ini dua kali dan menempatkan duplikatnya di dua kolom yang tersisa. Ubah konten dan gambar untuk membuat variasi.

Baris Klon Sesering yang Diinginkan (Sesuai Jumlah Item Daftar)

Kami menyelesaikan item daftar pertama kami! Sekarang Anda dapat melanjutkan dan mengkloning baris ini sebanyak yang Anda inginkan, tergantung pada jumlah fitur dan/atau produk yang ingin Anda tampilkan.

Ubah Konten Klon

Untuk setiap duplikat, Anda harus mengubah kontennya.

Temukan & Ganti Warna

Anda juga dapat menggunakan fitur Temukan & Ganti Divi untuk mengubah palet warna item daftar dengan cepat.

Ubah Warna Latar Belakang Arahkan kursor

Pastikan bahwa setelah Anda mengubah palet warna, Anda juga mengubah warna latar belakang hover dari Modul Teks nomor.

• Warna Latar Belakang: #593aff

Ubah Gambar Latar Belakang

Last but not least, Anda juga dapat memilih ikon lain dalam daftar tergantung pada fitur dan/atau produk yang Anda izinkan untuk muncul.

Pikiran Akhir

Kasus penggunaan ini adalah bagian dari Penawaran Black Friday kami di mana kami membagikan 6 halaman arahan edisi terbatas GRATIS dengan pelanggan Black Friday dan anggota seumur hidup. Dengan bergabung dengan komunitas berdaya kami selama hari-hari ini dan menjadi anggota, Anda akan mendapatkan:

• DISKON 25% SEMUANYA
• Semua 6 halaman arahan gratis
• Akses ke tema dan plugin kami yang luar biasa
• Hadiah Bonus

Raih kesempatan dan jadilah anggota hari ini!