Cara Menggunakan Struktur Kolom Baru Divi untuk Membuat Transisi Bagian yang Menakjubkan

Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.

Minggu ini, sebagai bagian dari inisiatif desain Divi yang sedang berlangsung, kami akan menunjukkan kepada Anda cara menggunakan struktur kolom baru Divi untuk membuat transisi bagian yang menakjubkan. Kami akan menggabungkan struktur kolom yang berbeda dengan beberapa opsi bawaan Divi untuk membawa desain halaman kami ke tingkat berikutnya.

Mari kita lakukan!

Pratinjau

Mari kita mulai dengan melihat tiga contoh berbeda yang akan kita buat dari awal menggunakan opsi bawaan Divi saja. Contoh-contoh ini terlihat sama bagusnya pada ukuran layar yang lebih kecil.

Gunakan Halaman Arahan Paket Tata Letak Penata Rias Divi

Kami akan menggunakan halaman arahan Paket Tata Letak Penata Rias Divi. Jika Anda ingin melihat paket tata letak, buka posting blog berikut. Meskipun kami mendemonstrasikan tutorial ini menggunakan paket tata letak tertentu, Anda juga dapat dengan mudah menggunakan teknik pada tata letak lain.

Bagian Transisi #1

Tambahkan Bagian Baru

Menemukan

Buka halaman arahan Paket Tata Letak Penata Rias menggunakan Pembuat Visual Divi. Kemudian, tambahkan bagian reguler baru tepat di bawah bagian pahlawan:

Jarak

Hapus semua spasi default bagian Anda selanjutnya:

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

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian dengan struktur kolom berikut:

Perekat

Tingkatkan lebar baris juga:

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 0

Jarak

Hapus padding atas dan bawah default berikutnya:

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

Saring

Untuk membuat baris lebih hidup, tingkatkan saturasi dalam pengaturan Filter:

• Saturasi: 200%

Tambahkan Modul Pembagi #1 ke Kolom 1

Sembunyikan Pembagi

Untuk membuat persegi pertama dalam desain kita, kita akan menambahkan Modul Pembagi ke kolom 1. Nonaktifkan opsi 'Tampilkan Pembagi'.

Latar Belakang Gradien

Selanjutnya, tambahkan latar belakang gradien ke Modul Pembagi:

• Warna 1: rgba (255,255,255,0)
• Warna 2: rgba(176.182.219.0.34)

Jarak

Untuk membuat persegi, ubah nilai Spasi:

• Margin Atas: -120px
• Padding Atas: 120px
• Padding Bawah: 120px

Modul Pembagi Klon & Tempatkan di Kolom 2

Setelah Anda selesai memodifikasi Modul DIvider, klon dan letakkan di kolom kedua.

Ubah Latar Belakang Gradien

Beberapa perubahan perlu dilakukan pada duplikat ini, dimulai dengan latar belakang gradien:

• Warna 1: rgba(228.237.234.0.58)
• Warna 2: rgba (255,255,255,0)

Ubah Spasi

Ubah juga pengaturan Spasi. Ini akan meningkatkan jarak antara Modul Pembagi ini dan yang ada di kolom pertama.

• Margin Atas: 142px
• Padding Atas: 120px
• Padding Bawah: 120px

Modul Pembagi Klon #1 Dua Kali dan Tempatkan di Kolom 3 & 5

Kloning Modul Pembagi ungu dua kali dan tempatkan duplikatnya di kolom 3 dan 5.

Modul Pembagi Klon #2 dan Tempatkan di Kolom 4

Kloning juga Modul Pembagi hijau dan letakkan di kolom 4.

Sembunyikan Modul Pembagi di Kolom 3, 4 & 5 di Tablet & Ponsel

Buka Modul Pembagi di Kolom 3

Tentu saja, kami ingin transisi bagian ini terlihat sama bagusnya pada ukuran layar yang lebih kecil. Itu sebabnya kami akan menyembunyikan beberapa modul yang telah kami gunakan. Mulailah dengan membuka pengaturan Modul Pembagi di kolom 3.

Sembunyikan di Tablet & Ponsel

Buka tab Advanced dan nonaktifkan modul di ponsel dan tablet.

Salin Gaya Visibilitas

Kita harus menyembunyikan pembagi di kolom 4 dan 5 juga. Untuk mempercepat proses, salin pengaturan visibilitas pembagi di kolom 3:

Tempelkan Gaya Visibilitas

Dan paste ke dalam Divider Modules di kolom 4 dan 5.

Bagian Transisi #2

Tambahkan Bagian Baru

Menemukan

Untuk membuat transisi bagian kedua, tambahkan bagian baru di sini:

Pembagi Atas

Buka pengaturan bagian dan tambahkan pembagi atas berikut:

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #ffffff
• Tinggi Pembagi: 236px
• Flip Pembagi: Vertikal
• Pengaturan Pembagi: Di ​​Atas Konten Bagian

Pembagi Bawah

Demikian juga, tambahkan pembagi bawah juga:

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #ffffff
• Tinggi Pembagi: 236px
• Pengaturan Pembagi: Di ​​Atas Konten Bagian

Jarak

Ubah pengaturan Spasi selanjutnya:

• Margin Atas: 100px
• Margin Bawah: 100px
• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Saatnya menambahkan baris ke bagian baru! Pilih struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah lebarnya:

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Hapus semua padding atas dan bawah default juga:

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

Tambahkan Modul Pembagi #1 ke Kolom 1

Warna latar belakang

Selanjutnya, tambahkan Modul Pembagi ke kolom pertama. Buka pengaturannya dan tambahkan warna latar belakang:

• Warna Latar Belakang: rgba(176.182,219,0.34)

Warna Pembagi

Ubah warna pembagi juga:

• Warna Pembagi: #ffffff

Gaya Pembagi

Lalu, masuk ke pengaturan Styles dan gunakan Divider Style berikut:

• Gaya Pembagi: Ganda

Pembagi Berat

Berat pembagi harus sebagai berikut:

• Berat Pembagi: 18px

Jarak

Last but not least, tingkatkan ukuran Modul Pembagi menggunakan bantalan khusus:

• Padding Atas: 50px
• Padding Bawah: 50px

Modul Pembagi Klon & Tempatkan di Kolom 2

Setelah Anda selesai dengan Modul Pembagi di kolom pertama, klon dan tempatkan duplikatnya di kolom kedua.

Ubah Warna Latar Belakang

Ubah warna latar belakang duplikat ini sesuai:

• Warna Latar Belakang: #e4edea

Modul Pembagi Kloning #1 dan Tempatkan di Kolom 3 & 5

Lanjutkan dengan mengkloning Modul Pembagi ungu dua kali dan menempatkan duplikatnya di kolom 3 dan 5.

Modul Pembagi Klon #2 dan Tempatkan di Kolom 4

Kloning juga Modul Pembagi hijau dan tempatkan duplikatnya di kolom 4.

Sembunyikan Modul Pembagi di Kolom 3, 4 & 5 di Tablet & Ponsel

Sembunyikan di Tablet & Ponsel

Kita akan melakukan hal yang sama seperti yang kita lakukan untuk contoh transisi bagian pertama. Buka pengaturan Modul Pembagi di kolom 3 dan sembunyikan di ponsel dan tablet.

Salin Gaya Visibilitas

Salin Gaya Visibilitas ini.

Tempelkan Gaya Visibilitas

Dan paste ke dalam Divider Modules di kolom 4 dan 5.

Bagian Transisi #3

Tambahkan Bagian Baru

Menemukan

Untuk menambahkan transisi bagian terakhir ke halaman Anda, tambahkan bagian baru di sini:

Pembagi Atas

Buka pengaturan bagian dan tambahkan pembagi atas:

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #ffffff
• Tinggi Pembagi: 150px
• Pengaturan Pembagi: Di ​​Atas Konten Bagian

Pembagi Bawah

Tambahkan yang terbawah berikutnya:

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #ffffff
• Tinggi Pembagi: 150px
• Flip Pembagi: Vertikal
• Pengaturan Pembagi: Di ​​Atas Konten Bagian

Jarak

Lalu, buka pengaturan Spasi dan buat beberapa perubahan:

• Margin Atas: 100px
• Margin Bawah: 100px
• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Baris yang kita perlukan di bagian ini memiliki struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambah lebar baris Anda:

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Hapus semua padding atas dan bawah default berikutnya:

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

Tambahkan Modul Pembagi #1 ke Kolom 1

Sembunyikan Pembagi

Lanjutkan dengan menambahkan Modul Pembagi ke kolom pertama. Nonaktifkan opsi 'Tampilkan Pembagi'.

Warna latar belakang

Tambahkan warna latar belakang ke pembagi sebagai gantinya:

• Warna Latar Belakang: rgba(176.182,219,0.34)

Jarak

Tingkatkan ukuran modul dengan menggunakan bantalan atas dan bawah:

• Padding Atas: 100px
• Padding Bawah: 100px

Modul Pembagi Klon & Tempatkan di Kolom 2

Ubah Warna Latar Belakang

Kloning Modul Pembagi di kolom pertama dan tempatkan duplikat di kolom kedua. Buka pengaturannya dan ubah warna latar belakang:

• Warna Latar Belakang: rgba(228.237.234.0.58)

Modul Pembagi Kloning #1 dan Tempatkan di Kolom 3 & 5

Kloning Modul Pembagi ungu dua kali dan letakkan di kolom 3 dan 5.

Modul Pembagi Klon #2 dan Tempatkan di Kolom 4

Kloning juga Modul Pembagi hijau dan tempatkan duplikatnya di kolom 4.

Sembunyikan Modul Pembagi di Kolom 3, 4 & 5 di Tablet & Ponsel

Sembunyikan di Tablet & Ponsel

Sembunyikan Modul Pembagi di kolom 3 pada tablet dan ponsel.

Salin Gaya Visibilitas

Salin Gaya Visibilitas ini.

Tempelkan Gaya Visibilitas

Dan tempelkan pada Modul Pembagi di kolom 4 dan 5 dan selesai!

Pratinjau

Sekarang setelah kita melewati semua langkah, mari kita lihat terakhir pada tiga contoh berbeda yang telah kita buat.

Pikiran Akhir

Dalam posting blog kasus penggunaan ini, kami telah menunjukkan kepada Anda cara menggunakan struktur kolom baru Divi untuk membuat transisi bagian yang menakjubkan. Tutorial ini adalah bagian dari inisiatif desain Divi kami yang sedang berlangsung, di mana kami mencoba memasukkan sesuatu ke dalam kotak peralatan desain Anda setiap minggu. Jika Anda memiliki pertanyaan, pastikan Anda meninggalkan komentar di bagian komentar di bawah!