20 header flexbox untuk Divi 5 (unduhan gratis!)

Flexbox membuatnya lebih mudah dari sebelumnya untuk membuat header yang terlihat bersih, beradaptasi dengan indah dengan ukuran layar yang berbeda, dan mudah disesuaikan dalam Divi 5. Dalam paket gratis ini, Anda akan menemukan 20 desain header flexbox yang unik, masing -masing dibangun dengan sistem tata letak Flex Divi 5 untuk penyelarasan yang tepat dan kontrol responsif. Apakah Anda ingin menggunakan gaya global situs Anda yang ada atau mulai dengan desain yang sudah jadi, Anda akan menemukan kedua opsi di sini.

Pratinjau & demo langsung

Mari kita lihat semua 20 header Flexbox di paket ini. Paket ini gratis untuk Anda unduh lebih jauh ke bawah.

Berlangganan saluran YouTube kami

Lihat demo langsung

Unduh 20 header flexbox untuk Divi 5

Dapatkan semua 20 header Flexbox secara gratis, termasuk versi default dan prestyled. Setiap header siap untuk diimpor ke perpustakaan Divi Anda dan digunakan di pembangun tema. Cukup unduh dan mulailah membangun.

Unduh file

Unduh secara gratis

Bergabunglah dengan The Divi Newsletter dan kami akan mengirimi Anda email salinan paket tata letak halaman pendaratan Ultimate Divi, ditambah banyak sumber daya divi yang luar biasa dan gratis, tips, dan trik. Ikuti bersama 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 mendapatkan akses ke paket tata letak divi mingguan gratis!

Apa yang termasuk (42 ekspor)

Setelah Anda mengunduh dan membuka ritsleting foldernya, Anda akan menemukan semua 42 ekspor tata letak yang diatur dengan rapi menjadi versi default dan prestyled sebagai header individual dan sebagai paket "semua header" penuh.

Default - Header Individual (20) → Menggunakan Gaya Global Anda.
Default - Semua header (1) → paket lengkap menggunakan gaya global Anda.

Prestyled-Header Individual (20) → Termasuk gaya inline untuk tampilan instan dan siap pakai.
Prestyled - Semua header (1) → Paket lengkap dengan gaya inline diterapkan.

Cara menginstal tata letak

Simpan folder unduhan Anda dekat untuk mulai mengimpornya ke situs web Divi Anda.

1. Impor tata letak ke perpustakaan Divi

Pergi ke Divi → Perpustakaan Divi.

Sesampai di sana, klik tombol Impor & Ekspor untuk menginstal file.

Cari file tata letak header flexbox (semua) dan klik untuk mengimpornya.

2. Buat templat header baru

Pergi ke Divi → Pembuat Tema.

Buat templat header baru atau buka yang sudah ada.

3. Unggah tata letak header

Setelah Anda berada di dalam area header, Anda dapat menggunakan perpustakaan Divi untuk memilih tata letak header pilihan Anda. Klik tombol Tambahkan Tata Letak di sudut kiri atas pembangun tema.

Pilih tata letak yang disimpan .

Klik tata letak header yang ingin Anda tambahkan ke pembangun tema.

Klik tombol Gunakan tata letak ini untuk memuat header.

Pastikan untuk menyimpan perubahan header dan pembangun tema baru Anda.

Default vs Prestyled: Mana yang harus Anda pilih?

Saat Anda membuka folder unduhan, Anda akan melihat dua versi dari setiap header: ** default ** dan ** prestyled **. Mereka dibangun dengan cara yang persis sama, perbedaannya adalah bagaimana mereka menangani gaya.

Header default mewarisi tampilan mereka dari gaya global Anda. Warna merek, font, dan gaya tombol Anda diterapkan secara otomatis. Jika Anda sudah mengatur gaya global Anda, default adalah cara tercepat untuk menambahkan header ini ke situs Anda dan langsung mencocokkan desain Anda.

Header Prestyled hadir dengan semua gaya yang dipanggang di: warna, font, dan desain tombol sejalan. Mereka terlihat persis seperti pratinjau keluar dari kotak. Ini bagus jika Anda membangun demo cepat, menguji ide, atau Anda ingin mengambil desain persis yang Anda lihat di tangkapan layar tanpa menyentuh variabel Anda.

Singkatnya, pergilah dengan default jika Anda ingin header menyatu dengan gaya situs Anda yang ada. Pilih Prestyled jika Anda ingin tampilan siap pakai yang ditampilkan dalam pratinjau.

Menyesuaikan header

Sistem tata letak Flexbox Divi 5 memberi Anda alat yang kuat untuk mengubah tata letak sambil menjaga semuanya responsif. Inilah cara menyesuaikan header ini agar sesuai dengan gaya situs Anda.

1. Sesuaikan Pengaturan Flex

Pilih baris yang berisi elemen header. Di tab Desain, cari menu dropdown tata letak. Perluas untuk mengungkapkan pengaturan Flexbox.

Di sini, Anda dapat mengubah arah tata letak dari baris ke baris terbalik, kolom, atau kolom terbalik. Fitur ini memungkinkan Anda untuk mengubah arah tata letak Anda.

Pengaturan konten Justify memungkinkan Anda untuk mengontrol bagaimana item fleksibel didistribusikan di sepanjang sumbu utama - arah utama wadah fleksibel yang ditentukan oleh arah tata letak. Ini menentukan jarak dan penyelarasan item secara horizontal atau vertikal, tergantung pada arah tata letak.

Sejajarkan item memungkinkan Anda untuk mengontrol bagaimana item fleksibel disejajarkan dalam kolom, baris, atau bagian. Ini menentukan bagaimana item flex diposisikan relatif satu sama lain di sepanjang sumbu silang di dalam wadah. Anda dapat memilih Start, Center, End, dan Stretch.

Akhirnya, pembungkus tata letak mengontrol apakah item dalam wadah fleksibel dipaksa ke satu baris atau dibiarkan membungkus beberapa garis ketika melebihi lebar wadah (atau tinggi jika arah tata letak diatur ke kolom).

2. Tampilkan/Sembunyikan Elemen di berbagai breakpoints

Divi 5 memungkinkan Anda untuk beralih visibilitas bagian, baris, kolom, atau modul individual pada breakpoint tertentu .. Ini berguna untuk menyederhanakan tata letak pada layar yang lebih kecil, seperti menyembunyikan tombol CTA sekunder atau mengganti menu lengkap dengan yang seluler.

Misalnya, Anda mungkin ingin menyembunyikan ikon media sosial di header untuk menghemat ruang di layar seluler. Saat berada di breakpoint desktop, navigasikan ke tab canggih. Perluas menu dropdown visibilitas. Selanjutnya, klik breakpoint telepon dan tablet untuk menyembunyikan elemen.

Gunakan pratinjau responsif Divi 5 untuk melihat header. Saat melihat tata letak di breakpoint telepon, elemen tersembunyi akan terlihat, tetapi abu -abu, menunjukkan itu akan disembunyikan di ujung depan.

3. Tambahkan tautan jika perlu

Meskipun setiap tata letak header siap untuk keluar dari kotak, Anda masih harus menambahkan tautan. Dalam contoh ini, Anda akan menambahkan tautan ke modul mengikuti media sosial. Klik untuk memperluas pengaturan modul. Di tab Konten, klik ikon media sosial pertama untuk mengungkapkan pengaturannya.

Perluas dropdown tautan dan tambahkan tautan ke akun media sosial Anda di bidang URL tautan akun .

Pastikan untuk menyimpan header Anda sebelum keluar dari pembangun tema.

Jika Anda belum melakukannya, Anda harus membuat menu untuk situs web Anda. Keluar dari pembangun visual dan navigasikan ke penampilan → menu. Tambahkan nama ke bidang Nama Menu .

Klik kotak centang menu utama dan kemudian klik Buat Menu .

Untuk menambahkan halaman ke menu, klik Tab Lihat Semua dan pilih halaman yang ingin Anda muncul di menu. Klik Tambahkan ke menu untuk menetapkannya.

Kembali ke pembangun tema, buat perubahan tambahan seperlunya. Misalnya, jika header menggunakan Loop Builder, Anda mungkin perlu menyesuaikan urutan tautan.

Gunakan Divi 5 untuk membangun header Anda hari ini

20 header Flexbox ini adalah cara cepat untuk mempercepat pembuatan Divi 5 Anda, apakah Anda bekerja dari gaya global Anda yang sudah mapan atau dimulai dengan tampilan yang telah dirancang sebelumnya. Unduh, masukkan ke dalam pembangun tema, dan buat sendiri. Flexbox menangani perataan sehingga Anda dapat fokus pada desain.