Ikhtisar dan Tinjau Paket Tata Letak Header oleh Divi Life

Paket Tata Letak Header dari Divi Life adalah kumpulan header untuk Divi Theme Builder yang dapat ditata agar sesuai dengan situs web Divi mana pun. Header menonjol dari keramaian dengan gaya baru yang ditambahkan dengan kode. Paket tata letak mencakup enam desain header dengan tiga gaya untuk masing-masing. Pada artikel ini, kita akan melihat paket tata letak header untuk membantu Anda memutuskan apakah sesuai dengan kebutuhan Anda.

Mengimpor Paket Tata Letak Header Divi Life

Sebelum menggunakan tata letak dengan Divi Theme Builder, Anda harus mengimpornya ke Perpustakaan Divi Anda. Untungnya, ini adalah proses yang sederhana dan mudah:

1. Unduh dan unzip tata letak ke folder di komputer Anda.
2. Buka Divi > Divi Library di menu dashboard WordPress.
3. Pilih Impor & Ekspor di bagian atas layar.
4. Pilih Impor di sembulan, pilih Pilih File , dan navigasikan ke tata letak yang ingin Anda unggah (pilih ALL-Divi-Life-Header-Templates jika Anda ingin mengunggah semuanya sekaligus.
5. Klik Impor Tata Letak Pembuat Divi dan tunggu hingga pengunggahan selesai.

Tata letak sekarang akan tersedia di perpustakaan Anda. Pada contoh di atas, saya memilih untuk mengunggah semua template. Pembuat Tema sekarang memiliki akses ke semua tata letak. Anda hanya perlu melakukan penyesuaian kode dan menu pada Header 1. Selebihnya berfungsi sebagaimana adanya.

Membuat Header Global di Divi Theme Builder

Buka Divi Theme Builder dan klik untuk menambahkan header global. Pilih Tambahkan Dari Perpustakaan .

Pilih tab yang disebut Tata Letak Tersimpan Anda dan pilih tata letak yang Anda inginkan. Tunggu sampai diimpor.

Klik ikon edit untuk menyesuaikan tata letak.

Saya telah memilih Header-1-a. Ini menunjukkan tata letak dalam tampilan gambar rangka. Ini termasuk modul kode dengan CSS dan JS khusus. Banyak modul menyertakan ID Kelas untuk CSS khusus. Beberapa kode mungkin tidak berjalan di pratinjau pembuat tema. Saya sarankan melihat header di front-end.

Jika Anda ingin membuat perubahan dan tidak ingin tajuk ditampilkan hingga perubahan dibuat, Anda dapat mempertimbangkan untuk membuat halaman uji dan menetapkan tajuk ke halaman tersebut sebelum menjadikannya tajuk global.

Mengubah Konten dan Gaya

Selanjutnya, Anda hanya perlu memilih menu, menambahkan logo, dan menyesuaikan warna agar sesuai dengan situs web Anda. Header menggunakan modul standar, jadi ini berfungsi seperti header apa pun. Saya telah memilih menu saya dalam contoh di atas.

Tombol sudah menggunakan gaya kustom. Cukup tambahkan warna dan font yang Anda rancang. Klik untuk menyimpan perubahan.

Juga, pastikan untuk menyimpan perubahan di layar utama. Saya telah menambahkan versi tajuk ke posting tertentu sehingga saya dapat menguji tajuk sebelum memasukkannya ke dalam templat situs web default dan menjadikannya global.

Contoh Header

Berikut ini tampilan template dengan situs pengujian saya. 6 tata letak memiliki versi berwarna terang, gelap, dan cerah yang telah ditata sebelumnya. Ini membuatnya lebih mudah untuk memilih tajuk yang sesuai dengan desain Anda dan kemudian menyesuaikannya dengan kebutuhan Anda. Mereka juga memiliki tombol yang berubah warna saat melayang.

Kita akan melihat campurannya dengan warna latar belakang dan ukuran layar yang berbeda. Saya menggunakan tata letak halaman beranda dan halaman arahan dari paket tata letak Pizzeria.

Tata Letak Tajuk 1

Header 1 mencakup modul kode, menu, pencarian, dan tombol untuk membuat CTA.

Proses impor tidak menyimpan nilai dengan benar, jadi tiga baris di CSS perlu diubah.

Juga, menu perlu diganti namanya dan kelas CSS perlu ditambahkan ke menu. Untungnya, semua penyesuaian ini mudah dilakukan. Petunjuknya ada di dokumentasi. Ini adalah satu-satunya waktu saya membutuhkan dokumentasi selama tinjauan ini.

Hasilnya adalah menu yang elegan dengan garis pemisah untuk tiga item menu utama yang ditempatkan di sebelah kiri, menu lainnya di sebelah kanan, kotak pencarian dengan ikon di dalam kolom pencarian, dan tombol CTA besar. Begini tampilannya dengan latar belakang terang. Sebuah bayangan memisahkan header dari halaman.

Berikut latar belakang gelap. Saya mengarahkan kursor ke CTA untuk menunjukkan bahwa itu berubah warna.

Tinggi header berkurang saat Anda menggulir. Elemen-elemennya tetap berukuran sama.

Berikut tampilan tabletnya. Item menu ditempatkan dalam menu dropdown. Tiga item dengan kelas CSS menyertakan gaya yang membuatnya menonjol dari yang lain.

Tampilan telepon menumpuk CTA di bawah logo dan juga mempertahankan gaya untuk item dengan kelas CSS.

Tata Letak Tajuk 2

Header 2 menggunakan modul kode dengan CSS dan JS, uraian singkat, gambar, teks, media sosial, menu, dan modul tombol.

Ini adalah Judul 2A. Begini tampilannya di halaman gelap. Header tidak menutupi lebar penuh situs. Menu atas transparan dan termasuk tombol sosial. Bagian bawah memiliki CTA dan informasi kontak. Nomor telepon dapat diklik.

Berikut desain pada halaman ringan. Saya suka bagaimana CTA ini menonjol.

Setelah menggulir, menu atas menggulir dengan halaman, dan menu bawah menempel ke atas.

Berikut tampilan tabletnya. Menu atas bergulir dengan halaman sementara menu bawah menempel.

Berikut tampilan ponsel. CTA ditumpuk di bawah menu. Header menggulir dengan halaman.

Tata Letak Tajuk 3

Modul untuk header 3 meliputi kode, follow media sosial, menu, dan tombol.

Berikut Header 3B dengan latar belakang terang. Bagian atas menyertakan tombol sosial dan pencarian, sedangkan bagian bawah menambahkan CTA.

Berikut tampilannya dengan latar belakang gelap.

Menu atas menggulir dengan halaman sementara menu bawah menempel di bagian atas layar.

Berikut tampilan tabletnya.

Inilah cara tampilan telepon menumpuk elemen.

Tata Letak Tajuk 4

Header 3 termasuk kode, beberapa uraian, tombol, menu, dan modul mengikuti media sosial.

Berikut Header 3C dengan latar belakang terang. Bagian atas mencakup informasi kontak dan CTA, sedangkan bagian bawah menunjukkan tombol sosial.

Berikut tampilannya dengan latar belakang gelap. Warna asli tampak hebat dengan latar belakang ini. Saya mengarahkan kursor ke CTA dalam contoh ini.

Begini tampilannya setelah menggulir. Bagian atas bergulir dengan situs dan bagian bawah menempel.

Ini adalah tampilan tablet.

Tampilan telepon menumpuk elemen.

Tata Letak Tajuk 5

Header 5 menyertakan modul kode, beberapa uraian, follow media sosial, dan modul menu.

Berikut Header 5C dengan latar belakang gelap. Bagian atas mencakup nomor telepon yang dapat diklik, tombol sosial, dan tautan ke formulir kontak. Merah dan abu-abu gelap menonjol dengan baik.

Ini juga terlihat bagus di latar belakang yang terang. Bayangan kotak lebih terlihat.

Bagian atas menu terus bergulir saat bagian bawah menempel ke bagian atas layar.

Berikut tampilan tabletnya.

Ini adalah tampilan telepon. Saya suka cara konten tumpukan bagian atas.

Tata Letak Tajuk 6

Header 6 mencakup modul kode, 4 uraian, modul follow media sosial, dan modul menu.

Ini adalah Header 6B dengan latar belakang gelap. Yang ini memiliki tiga bagian: bagian atas menyertakan tombol sosial, bagian tengah berisi informasi kontak, dan bagian bawah memiliki tautan menu.

Berikut tajuk dengan latar belakang terang.

2 bagian atas tajuk menggulir dan bagian bawah lengket. Itu menambahkan bayangan kotak ke menu bawah saat menempel di bagian atas layar.

Berikut tampilan tabletnya. Ini memindahkan nomor telepon ke atas.

Berikut desain pada tampilan ponsel.

Pembelian

Paket Tata Letak Header tersedia dari Divi Life seharga $49 (dijual seharga $5 hingga akhir tahun). Ini untuk digunakan di situs tak terbatas untuk Anda dan klien Anda dan termasuk akses ke semua pembaruan di masa mendatang. Ini juga termasuk dukungan dan dokumentasi.

Mengakhiri Pikiran

Paket Tata Letak Header untuk Pembuat Tema Divi adalah kumpulan tata letak yang menarik. CSS dan JavaScript menambahkan gaya yang biasanya tidak tersedia di header. Ini membantu membuat tajuk memiliki tampilan yang jauh berbeda dari tajuk standar. Karena setiap desain memiliki beberapa opsi pra-gaya, mudah untuk menemukan sesuatu yang sesuai dengan situs web Anda tanpa harus membuat banyak modifikasi. Penataannya sudah sesuai dengan tata letak Divi gratis dari ET.

Header memang terlihat dirancang secara profesional dan menurut saya mudah digunakan. Saya hanya melihat beberapa dari mereka. Bekerja dengan Header 1 adalah satu-satunya tata letak yang memerlukan langkah-langkah rumit. Tidak begitu sulit jika Anda membaca petunjuknya (coba tebak dari mana saya tahu). Perlu diingat bahwa itu memang membutuhkan lebih banyak langkah daripada yang lain.

Jika Anda tertarik dengan header yang dirancang secara profesional untuk Divi Theme Builder, Paket Tata Letak Header dari Divi Life layak untuk dilihat.

Kami ingin mendengar dari Anda. Sudahkah Anda mencoba Paket Tata Letak Header dari Divi Life? Beri tahu kami pendapat Anda tentang hal itu di komentar.

Gambar Unggulan melalui PureSolution / shutterstock.com