Cara Memadukan Header & Tubuh Anda Menggunakan Modul Konten Posting & Pembagi Bagian Divi

Sekarang, kita semua sudah terbiasa dengan pembagi bagian bawaan Divi. Mereka membantu menambahkan sentuhan ekstra ke situs web yang kami buat. Mereka juga berfungsi sebagai transisi yang mulus antara dua bagian yang berbeda, tetapi dengan Pembuat Tema Divi, pendekatan untuk membuat transisi itu sedikit berbeda. Dalam posting ini, kami akan memandu Anda melalui langkah-langkah yang harus Anda ambil untuk sampai ke sana. Anda juga dapat mengunduh file template JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Halaman Pembagi Bagian GRATIS

Untuk mendapatkan templat halaman pembagi bagian gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Berlangganan Saluran Youtube Kami

1. Buka Divi Theme Builder & Tambahkan Template Baru

Pergi ke Divi Theme Builder

Mulailah dengan membuka Divi Theme Builder.

Tambahkan Template Baru untuk Halaman

Di sana, buat template baru dengan mengklik ikon plus.

Pilih 'Semua Halaman' jika Anda ingin efek pencampuran diterapkan pada semua halaman Anda. Anda juga dapat membuat efek yang sama bekerja pada jenis templat lain, tetapi Anda harus menyertakan pembagi bagian atas secara terpisah di setiap templat Anda. Setelah Anda membuat template baru, mulailah membuat header kustom.

2. Bangun Tajuk Khusus

Pengaturan Bagian

Latar Belakang Gradien

Di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan tambahkan latar belakang gradien ke dalamnya.

• Warna 1: #d13232
• Warna 2: #fc6a3c

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus ke bagian juga.

• Padding Atas: 1vw (Desktop), 2vw (Tablet & Ponsel)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet & Ponsel)

Indeks Z

Dan untuk memastikan tajuk Anda tetap di atas semua konten, kami akan meningkatkan indeks z di pengaturan visibilitas.

• Indeks Z: 99999

Tambahkan Baris Baru

Struktur Kolom

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

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua bantalan atas dan bawah juga.

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

Elemen Utama

Last but not least, pusatkan konten kolom Anda dan biarkan kolom tetap bersebelahan pada ukuran layar yang lebih kecil dengan menambahkan dua baris kode CSS ke elemen utama baris Anda.

display: flex;
align-items: center;

Tambahkan Modul Gambar ke Kolom 1

Unggah Logo

Setelah Anda menyelesaikan semua pengaturan bagian dan baris, saatnya untuk menambahkan modul, dimulai dengan Modul Gambar di kolom 1. Unggah logo dengan latar belakang transparan.

Penyelarasan

Kemudian, buka tab desain modul dan ubah perataan gambar.

• Penjajaran Gambar: Tengah

Perekat

Ubah juga lebar modul di berbagai ukuran layar.

• Lebar: 6vw (Desktop), 13vw (Tablet), 17vw (Telepon)

Tambahkan Modul Menu ke Kolom 2

Pilih Menu

Di kolom kedua, kita membutuhkan Modul Menu. Pilih menu pilihan Anda.

Hapus Warna Latar Belakang

Lanjutkan dengan menghapus warna latar belakang modul.

Tata Letak

Pindah ke tab desain dan ubah tata letak.

• Gaya: Rata Kiri
• Arah Menu Dropdown: Ke Bawah

Teks Menu

Selanjutnya, gaya teks menu yang sesuai:

• Font Menu: Oswald
• Berat Font Menu: Ringan
• Gaya Font Menu: Huruf Besar
• Warna Teks Menu: #ffffff (Desktop), #202332 (Tablet & Ponsel)
• Ukuran Teks Menu: 0.8vw (Desktop), 2vw (Tablet), 2.5vw (Telepon)
• Spasi Huruf Menu: 0.1vw

Menu drop down

Ubah warna garis menu dropdown di pengaturan menu dropdown juga.

• Warna Garis Menu Dropdown: #ffffff

Ikon

Dan selesaikan pengaturan modul dengan menggunakan warna ikon menu hamburger putih.

• Warna Ikon Menu Hamburger: #ffffff

Tambahkan Modul Tombol ke Kolom 3

Tambahkan Salinan

Ke kolom terakhir! Di sana, satu-satunya modul yang kita perlukan adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Penyelarasan

Pindah ke tab desain modul dan ubah perataan tombol.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Lanjutkan dengan menata tombol di pengaturan tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.6vw (Desktop), 1vw (Tablet), 1.5vw (Ponsel)
• Warna Teks Tombol: #000000
• Warna Latar Tombol: #FFFFFF
• Lebar Batas Tombol: 0px

• Radius Batas Tombol: 100px
• Jarak Huruf Tombol: 2px
• Font Tombol: Buka Sans
• Berat Huruf Tombol: Tebal
• Gaya Font Tombol: Huruf Besar

Jarak

Dan selesaikan pengaturan modul dengan menambahkan beberapa bantalan khusus di berbagai ukuran layar.

• Padding Atas: 0.8vw (Desktop), 1.6vw (Tablet), 2.2vw (Telepon)
• Padding Bawah: 0.8vw (Desktop), 1.6vw (Tablet), 2.2vw (Telepon)
• Padding Kiri: 1.5vw (Desktop), 2.5vw (Tablet), 3.5vw (Telepon)
• Padding Kanan: 1.5vw (Desktop), 2.5vw (Tablet), 3.5vw (Telepon)

3. Bangun Badan Kustom & Tambahkan Pembagi Atas

Setelah Anda menyelesaikan tajuk kustom dari template Anda, lanjutkan dan mulai buat badan kustom.

Pengaturan Bagian

Pembagi Atas

Anda akan, sekali lagi, melihat bagian pada halaman. Buka bagian itu dan tambahkan pembagi atas ke dalamnya.

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #fc6a3c
• Tinggi Pembagi: 6vw
• Pembagi Horizontal Ulangi: 15x
• Flip Pembagi: Vertikal
• Pengaturan Pembagi: Di ​​Atas Konten Bagian

Jarak

Pindah ke tab desain bagian dan hapus semua padding atas dan bawah default.

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

Tambahkan Baris Baru

Struktur Kolom

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

Perekat

Buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default juga.

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

Tambahkan Modul Konten Posting ke Kolom

Sekarang, untuk menampilkan semua konten halaman Anda, Anda harus menambahkan Modul Konten Posting ke baris Anda. Modul ini mewakili tata letak yang Anda buat di dalam halaman itu sendiri menggunakan Divi. Jika Anda menambahkan transisi ini ke halaman produk, misalnya, template yang melibatkan konten dinamis, pendekatan yang berbeda akan dilakukan. Satu-satunya hal yang penting untuk diingat adalah Anda harus menambahkan pembagi atas ke bagian pertama dari badan template Anda. Pastikan warna pembagi Anda sama dengan warna yang digunakan untuk latar belakang tajuk global Anda.

3. Simpan Perubahan Builder & Lihat Hasil

Setelah Anda menyelesaikan badan template, Anda dapat menyimpan perubahan dan melihat hasilnya di situs web Anda!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana memadukan header dan body template Anda menggunakan pembagi bagian Divi dan Modul Konten Posting. Transisi pembagi segera berlaku untuk semua halaman Anda. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.