Cara Otomatis Menempatkan Header Anda Di Bawah Bagian Divi Pertama Setiap Halaman

Sejak Divi Theme Builder keluar, kami telah membagikan tutorial tentang cara membuat dan menyesuaikan header agar sesuai dengan kebutuhan berbeda yang mungkin Anda miliki. Dalam tutorial hari ini, kami akan melanjutkan perjalanan itu dengan menunjukkan kepada Anda cara menempatkan tajuk khusus secara otomatis di bawah bagian Divi pertama setiap halaman. Pendekatan ini memungkinkan pengunjung untuk melihat bagian utama halaman Anda terlebih dahulu dan kemudian mendapatkan akses ke menu dan semua itemnya. Gaya yang kami gunakan untuk tajuk khusus cocok dengan Paket Tata Letak Bistro, Anda juga dapat mengunduh templat halaman khusus secara gratis!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Template Header Kustom GRATIS

Untuk mendapatkan template tajuk kustom 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!

1. Buka Divi Theme Builder & Tambahkan Template Halaman Baru

Buka Divi Theme Builder & Tambahkan Template Baru

Mulailah dengan masuk ke Divi Theme Builder dan tambahkan template baru.

Digunakan pada

Gunakan template baru ini di semua halaman.

• Gunakan Di: Semua Halaman

2. Mulai Membangun Desain Header Kustom

Lanjutkan dengan membuat tajuk khusus di dalam templat halaman.

Pengaturan Bagian

Warna latar belakang

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan ubah warna latar belakang.

• Warna Latar Belakang: #FFFFFF

Jarak

Hapus padding atas dan bawah default bagian berikutnya.

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

Berbatasan

Tambahkan batas atas dan bawah juga.

• Lebar Batas Atas & Bawah: 1px
• Warna Batas Atas & Bawah: #002d4c

ID CSS

Dan sertakan ID CSS. Nanti di tutorial, kita akan menggunakan ID CSS ini untuk menempatkan bagian di bawah bagian pertama setiap halaman.

• ID CSS: tajuk khusus

Indeks Z

Terakhir, kami akan meningkatkan indeks z bagian untuk memastikannya muncul di atas semua konten halaman.

• Indeks Z: 99999

Tambahkan Baris Baru

Struktur Kolom

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

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris mengambil lebar seluruh bagian.

• 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

Elemen Utama

Untuk memastikan semua kolom tetap bersebelahan pada ukuran layar yang lebih kecil, dan untuk memusatkan konten kolom, kami juga akan menambahkan dua baris kode CSS ke elemen utama baris.

display: flex;
align-items: center;

kolom 1

Jarak

Lanjutkan dengan membuka pengaturan kolom 1 dan tambahkan beberapa padding atas dan bawah ke pengaturan spasi.

• Padding Atas: 20px
• Padding Bawah: 20px

Berbatasan

Tambahkan batas kanan ke kolom juga.

• Lebar Batas Kanan: 1px
• Warna Tepi Kanan: #002d4c

Tambahkan Modul Gambar ke Kolom 1

Unggah Logo

Saatnya mulai menambahkan modul! Di kolom 1, kita membutuhkan Modul Gambar. Unggah logo Anda.

Penyelarasan

Pindah ke tab desain modul dan ubah perataan gambar.

• Penjajaran Gambar: Tengah

Perekat

Ubah juga lebar modul di berbagai ukuran layar.

• Lebar: 4vw (Desktop), 7vw (Tablet), 12vw (Telepon)

Tambahkan Modul Menu ke Kolom 2

Pilih Menu

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

Tata Letak

Pindah ke tab desain modul dan ubah pengaturan tata letak sebagai berikut:

• Gaya: Terpusat
• Arah Menu Dropdown: Ke Bawah

Teks Menu

Ubah juga pengaturan teks menu.

• Font Menu: Kabin
• Warna Teks Menu: #77848d
• Ukuran Teks Menu: 16px (Desktop), 15px (Tablet), 14px (Ponsel)
• Tinggi Baris Menu: 1.8em

Teks Dropdown

Kemudian, ubah beberapa warna di pengaturan teks dropdown.

• Warna Latar Menu Dropdown: #ffffff
• Warna Garis Menu Dropdown: #002d4c

Ikon

Dan selesaikan pengaturan modul dengan mengubah warna ikon menu hamburger di pengaturan ikon.

• Warna Ikon Menu Hamburger: #002d4c

Tambahkan Modul Tombol ke Kolom 3

Tambahkan Salinan

Ke kolom berikutnya dan terakhir. Di sana, kita membutuhkan 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: 13px
• Warna Teks Tombol: #002d4c
• Warna Latar Tombol: #ffffff
• Lebar Perbatasan Tombol: 2px
• Warna Batas Tombol: #ffffff (Default), #d1d1d1 (Hover)
• Radius Perbatasan Tombol: 0px

• Jarak Huruf Tombol: 2px
• Font Tombol: Kabin
• Berat Huruf Tombol: Semi Tebal
• Gaya Font Tombol: Huruf Besar

Jarak

Kemudian, tambahkan beberapa bantalan khusus di berbagai ukuran layar.

• Padding Atas: 16px
• Padding Bawah: 16px
• Padding Kiri: 24px (Desktop & Tablet), 13px (Ponsel)
• Padding Kanan: 24px (Desktop & Tablet), 13px (Ponsel)

Bayangan Kotak

Selesaikan pengaturan modul dengan menambahkan bayangan kotak.

• Posisi Horizontal Bayangan Kotak: 0px
• Posisi Vertikal Bayangan Kotak: 0px
• Kekuatan Buram Bayangan Kotak: 0px
• Kekuatan Penyebaran Bayangan Kotak: 2px (Default), 6px (Hover)
• Warna Bayangan: #002d4c
• Posisi Bayangan Kotak: Bayangan Dalam

3. Secara Otomatis Tempatkan Header Setelah Bagian Pertama Setiap Halaman Menggunakan JQuery

Tambahkan Modul Kode ke Kolom 2

Sekarang, untuk menempatkan menu secara otomatis di bawah bagian pertama setiap halaman, kita memerlukan sedikit kode JQuery. Untuk menyertakan kode ini di header kustom kami, tambahkan Modul Kode ke kolom 2.

Masukkan Kode JQuery

Tambahkan baris kode JQuery berikut, di antara tag skrip seperti yang Anda lihat di layar cetak di bawah ini , ke Modul Kode untuk menerapkan efek:

jQuery(fungsi($){
$('#custom-header').insertAfter('.et_pb_section_0');
});

4. Simpan Perubahan Pembuat Tema & Lihat Hasil

Dan selesaikan tajuk khusus dengan menyimpan semua perubahan pembuat tema dan melihat hasilnya di halaman 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 cara menempatkan tajuk khusus yang Anda buat secara otomatis menggunakan Pembuat Tema Divi setelah bagian Divi pertama setiap halaman. Anda hanya perlu membuat tajuk khusus satu kali, tambahkan kode JQuery dan tajuk khusus akan secara otomatis diposisikan ulang. Ini adalah cara yang bagus untuk mengubah posisi halaman atas normal menu dan membiarkan bagian pahlawan Anda bersinar terlebih dahulu. Anda juga dapat mengunduh template 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.