Perlu membuat tajuk global untuk . Anda situs web dengan Divi?
Header global akan muncul di mana saja di . Anda situs jaringan, kecuali Anda telah menetapkan tajuk yang berbeda ke laman atau pos.
Ayo mulai!
penelitian
Berikut adalah preview dari header global yang akan kita desain.
Konfigurasikan menu utama Anda
Mulailah dengan membuat menu Anda di pengaturan tampilan situs WordPress Anda.
Akses opsi Pembuat Tema di bawah Divi
Dalam pilihan Tema Divi, klik Pembuat Tema. Sesampai di sana, Anda akan melihat a templat situs web standar.
Tambahkan dan buat tajuk global
Le templat situs web default adalah tempat Anda dapat mulai membuat header global kustom, badan global, dan footer global. Klik "Add Global Header" dan lanjutkan dengan mengklik "Build Global Header" untuk memulai proses.
Pengaturan bagian
perekat
Buka pengaturan bagian yang akan Anda temukan di halaman, di tab Gaya, ubah dimensi pada ukuran layar yang berbeda.
- Lebar maksimum: 100%
- Lebar maksimum: 1280px (untuk PC dan tablet), 100% (untuk seluler)
jarak
Hapus semua margin internal atas dan bawah
- Verteks Margin Dalam: 0px
- Margin Internal Bawah: 0px
Perbatasan
Sekarang tambahkan radius batas ke sudut kiri dan kanan bawah bagian.
- Kiri bawah: 50px
- Kanan bawah: 50px
Kotak bayangan
Mari kita juga menambahkan bayangan kotak halus.
- Kekuatan Buram Bayangan Kotak: 60px
- Warna font subtitle: rgba (0,0,0,0.13)
jarak penglihatan
- Luapan horizontal: Terlihat
- Luapan vertikal: Terlihat
Dedikasikan baris baru ke header
Sekarang setelah kita menyelesaikan pengaturan bagian umum, kita dapat mulai menambahkan baris. Secara total, kita akan membutuhkan dua baris; satu yang didedikasikan untuk header dan satu yang memungkinkan item menu untuk ditampilkan. Kita akan mulai dengan header dengan menambahkan baris baru menggunakan struktur kolom berikut:
Pengaturan saluran
Pengaturan Latar Belakang
Tanpa menambahkan modul apa pun ke baris, buka pengaturan baris dan ubah warna latar belakang.
- Latar Belakang: #38383F
perekat
Kemudian ubah parameter ukuran garis.
- Gunakan Lebar Talang Kustom: YA
- Jarak kolom: 1
- Lebar maksimum: 100%
- Lebar maksimum: 100%
Melihat
Sekarang mari pastikan kolom muncul bersebelahan di layar yang lebih kecil dengan menambahkan baris kode CSS ini ke elemen baris utama.
01
display: flex;
Tambahkan modul gambar di kolom 1
Unduh logo
Setelah Anda menyelesaikan pengaturan baris, saatnya untuk mulai menambahkan modul. Tambahkan modul gambar ke kolom 1 dan unggah logo Anda.
penjajaran
Buka tab Style dan ratakan gambar ke kiri.
perekat
Juga ubah Lebar modul.
jarak
Tambahkan juga nilai margin khusus.
Tambahkan modul pelacakan media sosial di kolom 2
Tambahkan jejaring sosial
Mari kita pergi ke kolom kedua. Di sana kita akan membutuhkan modul pelacakan media sosial. Tambahkan jejaring sosial pilihan Anda. Anda dapat menambahkan media sosial sebanyak yang Anda inginkan.
Warna latar belakang jejaring sosial
Selanjutnya, buka setiap jejaring sosial satu per satu dan ubah warna latar belakang menjadi warna yang benar-benar transparan.
- Warna latar belakang: rgba (0,0,0,0)
penjajaran
Kembali ke pengaturan modul normal dan kemudian ubah perataan penuh modul.
icon
Ubah juga pengaturan ikon.
- Warna Ikon: #FFFFFF
- Gunakan ukuran ikon khusus: Ya
- Ukuran font ikon: 16px (PC dan tablet), 12px (ponsel)
jarak
Tambahkan margin atas.
Tambahkan modul Tombol di kolom 3
Pindah ke kolom ketiga dan tambahkan modul Button yang berisi teks pilihan Anda.
penjajaran
Ubah perataan tombol di tab Gaya.
Pengaturan Tombol
Sesuaikan pengaturan tombol sebagai berikut:
- Gunakan gaya khusus untuk tombol: Ya
- Ukuran Teks Tombol: 12px (desktop), 10px (tablet), 8px (ponsel)
- Warna teks tombol: #ffffff
- Tombol latar belakang: #ffae25
- Lebar Batas Tombol: 0 piksel
- Tombol Radius Perbatasan: 0 piksel
- Spasi huruf tombol: 5 px (desktop), 3 px (tablet dan ponsel)
- Tombol Font: Buka Tidak Ada
- Tombol Soft Light: Teks tebal
- Salin gaya tombol: TT
jarak
Sesuaikan nilai margin.
Dedikasikan baris baru ke bilah menu
Setelah Anda mengisi baris yang didedikasikan untuk header global, Anda dapat menambahkan baris lain tepat di bawahnya.
Pengaturan saluran
perekat
Tanpa menambahkan modul apa pun, buka pengaturan garis dan ubah pengaturan ukuran di tab Gaya.
jarak
Kemudian hapus semua margin bawah dan atas.
Tambahkan modul Menu ke kolom
Pilih Menu
Selanjutnya, tambahkan modul Menu ke kolom dan pilih menu yang Anda buat di bagian pertama tutorial ini.
ketentuan
Beralih ke tab Gaya dan ubah pengaturan tata letak sebagai berikut:
Koneksi
Ubah juga warna tautan aktif di tab Gaya.
- Warna tautan aktif: #ffae25
Menu tarik-turun
Lakukan hal yang sama untuk warna garis menu dropdown di pengaturan menu dropdown.
- Warna baris tarik-turun: #ffae25
icon
- Warna ikon menu hamburger: #ffae25
teks menu
Dengan pengaturan teks menu.
- Jenis huruf menu: Prata
- Warna teks menu: #000000
Jadikan tajuk dan bilah menu tetap di atas
Buka pengaturan bagian
Setelah Anda menyelesaikan baris kedua, yang harus Anda lakukan adalah memastikan bagian tersebut tetap berada di bagian atas halaman dan postingan kami. Untuk melakukan ini, kami akan membuka pengaturan bagian lagi.
Tambahkan CSS khusus ke elemen utama
Selanjutnya, kita akan pergi ke tab lanjutan dan kita akan menambahkan beberapa baris kode CSS ke elemen utama bagian tersebut.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Simpan opsi pembuat tajuk dan tema global
Setelah Anda menyelesaikan seluruh desain tajuk global, pastikan untuk menyimpan desain sebelum keluar dari tata letak template. Setelah Anda keluar dari tata letak template, simpan seluruh perubahan pembuat tema Anda dan selesai!
penelitian
Sekarang kita telah melalui semua langkah, mari kita lihat hasilnya.
Kesimpulan
Pada artikel ini, kami menunjukkan kepada Anda cara membuat header global khusus dengan pembuat tema baru Divi. Tutorial ini menunjukkan betapa mudahnya membuat header yang indah dan menerapkannya ke keseluruhan situs jaringan atau jenis kiriman khusus tertentu.
Kami harap ini membantu Anda dalam menyesuaikan situs web Anda dengan Pembuat Tema.
Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan kami komentar di bagian komentar di bawah ini.
...
