Cara Membuat Bab Bagian Menggunakan Opsi Desain Baru Divi

Dalam tutorial Divi hari ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat membuat bab bagian yang menakjubkan untuk situs web Anda. Bab-bab ini berfungsi sebagai pedoman bagi pengunjung Anda. Ini akan menunjukkan kepada mereka ketika mereka memasuki bagian lain dari sebuah halaman. Biasanya, bab digunakan dalam kombinasi dengan satu warna latar belakang tertentu di seluruh bagian.

Jika Anda mempertimbangkan untuk menggunakan bab bagian di situs web Anda, posting ini mungkin merupakan tempat yang bagus untuk mendapatkan inspirasi. Kami akan menunjukkan kepada Anda 4 gaya bab bagian yang dapat Anda buat ulang dengan mudah dengan mengikuti posting ini.

Hasil

Sebelum kita masuk ke sisi praktis dari gaya bab empat bagian, mari kita lihat apa yang dapat Anda harapkan dari hasil akhirnya.

Bagian Bab Gaya #1

Bagian Bab Gaya #2

Bagian Bab Gaya #3

Bagian Bab Gaya #4

Cara Membuat Bab Bagian Menggunakan Opsi Desain Baru Divi

Berlangganan Saluran Youtube Kami

Bagian Bab Gaya #1

Opsi Baris

Mulailah dengan menambahkan baris dua kolom ke halaman yang sedang Anda kerjakan dan pilih Perataan Baris kiri dalam tab Desain.

Gulir ke bawah tab yang sama dan pastikan Anda memilih '0px' untuk padding atas, kanan, bawah dan kiri. Alasan mengapa kami melakukan ini adalah untuk membuat baris sekecil mungkin sehingga tidak memakan banyak tempat di bagian tersebut.

Modul Pembagi

Dalam semua contoh kita, kita hanya akan menggunakan salah satu dari dua kolom (bergantung pada perataan baris). Jika Anda menempatkan bab Anda di sisi kiri halaman Anda, pilih kolom kiri. Kemudian, tambahkan Modul Pembagi dan aktifkan opsi 'Tampilkan Pembagi' di dalam tab Konten.

Pindah ke tab Desain dan gunakan '#000000' sebagai warna pembagi Anda.

Kemudian, buka subkategori Styles dan pilih 'Dotted' sebagai Gaya Pembagi dan 'Atas' sebagai Posisi Pembagi.

Selanjutnya, pastikan pengaturan berikut berlaku untuk subkategori Ukuran:

• Berat Pembagi: 3px
• Tinggi: 23px
• Lebar: 62%
• Penyelarasan Modul: Kiri

Modul Teks Pertama

Setelah Anda menambahkan Modul Pembagi, saatnya untuk menambahkan Modul Teks pertama tepat di bawahnya. Setelah memilih nomor bab, gunakan latar belakang gradien berikut:

• Warna Pertama: rgba (96.150.193.0.16)
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 51%
• Posisi Akhir: 51%

Kemudian, lanjutkan ke tab Desain dan buat perubahan berikut pada subkategori Teks:

• Font Teks: Monyet Bahagia
• Ukuran Font Teks: 53 (Desktop & Tablet), 25 (Telepon)
• Warna Teks: #000000
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Buka subkategori Sizing, pilih lebar '40%' dan pilih bagian tengah Module Alignment.

Hal terakhir yang dibutuhkan Modul Teks ini adalah margin dan padding khusus berikut:

• Margin Atas: -40px
• Padding Atas: 40px
• Padding Kanan: 50px
• Padding Bawah: 40px
• Padding Kiri: 50px

Modul Teks Kedua

Tambahkan Modul Teks lain dengan pengaturan subkategori Teks berikut:

• Font Teks: Arimo
• Ukuran Font Teks: 19px
• Warna Teks: #000000
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Gulir ke bawah tab yang sama, gunakan lebar '97%' dan aktifkan opsi Penyelarasan Modul tengah.

Terakhir, tambahkan margin atas '-15px' juga.

Modul Teks Ketiga

Modul Teks terakhir dari bab bagian memiliki pengaturan subkategori Teks berikut:

• Font Teks: Arimo
• Gaya Font Teks: Tebal
• Ukuran Font Teks: 19px
• Warna Teks: #000000
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Di dalam subkategori Ukuran, gunakan lebar '99%' dan pilih Penyelarasan Modul tengah.

Hal terakhir yang perlu Anda lakukan untuk bab bagian ini adalah menambahkan margin atas '-20px'.

Bagian Bab Gaya #2

Opsi Baris

Contoh kedua terletak di sisi kanan layar. Sekali lagi, tambahkan baris dua kolom tetapi pilih Perataan Baris yang tepat.

Buka subkategori Spasi dan tetapkan '0px' ke padding atas, kanan, bawah dan kiri.

Modul Pembagi

Tambahkan Modul Pembagi ke kolom di sebelah kanan dan aktifkan opsi 'Tampilkan Pembagi'.

Kami akan menggunakan latar belakang gradien berikut untuk pembagi:

• Warna Pertama: rgba (132.132.132,0.61)
• Warna Kedua: rgba(224,43,32,0.86)
• Tipe Gradien: Linier
• Arah Gradien: 180 derajat
• Posisi Awal: 43%
• Posisi Akhir: 100%

Pindah ke tab Design dan pilih 'rgba(0,0,0,0.26)' sebagai warna pembagi.

Selanjutnya, gunakan 'Solid' sebagai Gaya Pembagi dan 'Top' sebagai Posisi Pembagi.

Kemudian, buka subkategori Ukuran dan buat pengaturan berikut berlaku:

• Berat Pembagi: 3px
• Tinggi: 11px
• Lebar: 68%
• Penyelarasan Modul: Kanan

Modul Teks Pertama

Modul Teks pertama memiliki pengaturan subkategori Teks berikut:

• Font Teks: Cantata One
• Ukuran Font Teks: 100px
• Warna Teks: #000000
• Tinggi Baris Teks: 1.7em
• Orientasi Teks: Kanan

Buka subkategori Spasi dan gunakan margin dan padding khusus berikut:

• Margin Atas: -95px
• Padding Atas: 40px
• Padding Kanan: 50px
• Padding Bawah: 40px
• Padding Kiri: 50px

Modul Teks Kedua

Tambahkan Modul Teks lain dan gunakan pengaturan subkategori Teks berikut sebagai gantinya:

• Font Teks: Arimo
• Ukuran Font Teks: 20px
• Warna Teks: #000000
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Selanjutnya, tambahkan margin atas '-50px'.

Modul Teks Ketiga

Modul Teks ketiga dan terakhir dari contoh ini memiliki pengaturan subkategori Teks berikut:

• Font Teks: Lobster Dua
• Ukuran Font Teks: 43px
• Warna Teks: #000000
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Terakhir, tambahkan margin atas '-30px'.

Bagian Bab Gaya #3

Opsi Baris

Untuk contoh ketiga, kita akan menggunakan baris dua kolom dengan latar belakang gradien Kolom 1 berikut:

• Warna Pertama: #edf000
• Warna Kedua: rgba (255,255,255,0)
• Kolom 1 Jenis Gradien: Linear
• Kolom 1 Arah Gradien: 139deg
• Kolom 1 Posisi Awal: 11%
• Posisi Akhir Kolom 1: 36%

Buka tab Desain dan pilih Perataan Baris kiri.

Sekali lagi, kita akan menggunakan '0px' untuk margin atas, kanan, bawah dan kiri.

Modul Pembagi

Sekarang, tambahkan Modul Pembagi ke kolom kiri dan aktifkan opsi 'Tampilkan Pembagi'.

Buka subkategori Latar Belakang dan gunakan latar belakang gradien berikut:

• Warna Pertama: #4b61af
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Linier
• Arah Gradien: 161deg
• Posisi Awal: 18%
• Posisi Akhir: 38%

Buka tab Design dan pilih '#000000' sebagai warna pembagi.

Di dalam subkategori Gaya, gunakan 'Padat' sebagai Gaya Pembagi dan 'Atas' sebagai Posisi Pembagi.

Kemudian, pastikan pengaturan berikut berlaku untuk subkategori Ukuran:

• Berat Pembagi: 6px
• Tinggi: 100 piksel
• Lebar: 70%
• Penyelarasan Modul: Kiri

Modul Teks Pertama

Lanjutkan dengan menambahkan Modul Teks pertama tepat di bawah Modul Pembagi dan memilih latar belakang gradien berikut:

• Warna Pertama: rgba(131,0,233,0.58)
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Linier
• Arah Gradien: 151 derajat
• Posisi Awal: 20%
• Posisi Akhir: 40%

Buka tab Desain dan gunakan pengaturan subkategori Teks berikut:

• Font Teks: Poiret One
• Gaya Font Teks: Tebal
• Ukuran Font Teks: 69px
• Warna Teks: #000000
• Tinggi Baris Teks: 1.7em
• Orientasi Teks: Tengah

Buka subkategori Sizing, gunakan lebar '70%' dan pilih Module Alignment kiri.

Terakhir, gunakan margin dan padding khusus berikut:

• Margin Atas: 124px
• Padding Atas: 60px
• Padding Bawah: 150px
• Padding Kiri: 50px

Modul Teks Kedua

Lanjutkan dan tambahkan Modul Teks lain dengan pengaturan subkategori Teks berikut:

• Font Teks: Arimo
• Ukuran Font Teks: 20px
• Warna Teks: #000000
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Buka subkategori Sizing, pilih lebar '80%' dan pilih Module Alignment kiri.

Terakhir, tambahkan margin atas '-150px'.

Modul Teks Ketiga

Tambahkan Modul Teks terakhir ke kolom pertama dan pastikan pengaturan subkategori Teks berikut berlaku:

• Font Teks: Arimo
• Gaya Font Teks: Tebal
• Ukuran Font Teks: 20px
• Warna Teks: #000000
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Buka subkategori Sizing, gunakan lebar '80%' dan pilih Module Alignment kiri.

Terakhir, pilih margin atas '-20px' dan padding bawah '50px'.

Bagian Bab Gaya #4

Opsi Baris

Untuk contoh terakhir, kita akan menggunakan Perataan Baris kanan lagi.

Kemudian, buka subkategori Spasi dan tetapkan '0px' ke padding atas, kanan, bawah dan kiri.

Modul Teks Pertama

Contoh terakhir ini tidak mengandung Modul Pembagi jadi lanjutkan dan tambahkan Modul Teks ke kolom kiri. Setelah Anda selesai melakukannya, pilih latar belakang gradien berikut:

• Warna Pertama: rgba (255,255,255,0)
• Warna Kedua: #92d84b
• Tipe Gradien: Linier
• Arah Gradien: 55deg
• Posisi Awal: 25%
• Posisi Akhir: 100%

Lalu, buka tab Desain dan pastikan pengaturan subkategori Teks berikut berlaku:

• Font Teks: Cantata One
• Ukuran Font Teks: 220 (Desktop & Tablet), 100px (Telepon)
• Warna Teks: #f2f2f2 (Cocokkan dengan warna latar bagian)
• Tinggi Baris Teks: 1.7em
• Orientasi Teks: Kanan

Buka subkategori Sizing, gunakan lebar '82%' dan pilih Module Alignment yang tepat.

Terakhir, gunakan padding khusus berikut:

• Atas: 60px
• Kanan: 50px
• Bawah: 60px
• Kiri: 50px

Modul Teks Kedua

Tambahkan Modul Teks lain dan gunakan pengaturan berikut dalam subkategori Teks:

• Font Teks: Arimo
• Ukuran Font Teks: 20px
• Warna Teks: #000000
• Tinggi Baris Teks: 1em
• Orientasi Teks: Kanan

Buka subkategori Sizing, pilih lebar '39%' dan pilih bagian tengah Module Alignment.

Terakhir, tambahkan '-130px' ke margin atas.

Modul Teks Ketiga

Modul Teks terakhir dari contoh bab ini memiliki pengaturan subkategori Teks berikut:

• Font Teks: Skrip Menari
• Ukuran Font Teks: 45px
• Warna Teks: #000000
• Tinggi Baris Teks: 1em
• Orientasi Teks: Kanan

Buka subkategori Sizing, pilih lebar '50%' dan pilih bagian tengah Module Alignment.

Last but not least, pilih padding atas '-30px' dan selesai!

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana Anda dapat secara kreatif membuat dan menata bab bagian di situs web Anda. Bagian bab ini memungkinkan Anda membuat pembagian antar bagian sambil menggunakan warna latar belakang yang sama untuk setiap bagian. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh Kwok Design / shutterstock.com