Toggle Menu

Cara Membuat Header dan Footer dengan Beaver Themer

Diterbitkan: 2024-10-03

Diskon 25% Semua Produk Beaver Builder... Obral Cepat Segera Berakhir! Pelajari Lebih Lanjut

how to create headers and footers using beaver themer
  • Tema Berang-berang

Cara Membuat Header dan Footer dengan Beaver Themer

Pembuat halaman sangat bagus untuk membuat halaman yang indah, tetapi sering kali tidak memperluas penyesuaian ke header dan footer. Keterbatasan ini dapat menyebabkan inkonsistensi visual yang berdampak negatif pada pengalaman pengguna (UX) dan kohesi merek.

Untungnya, plugin pembuat tema Beaver Themer kami menawarkan cara mudah untuk mendesain header dan footer khusus, menjaga keseluruhan situs Anda tetap konsisten secara visual.

Dalam panduan ini, kita akan menjelajahi empat langkah mudah untuk membuat header dan footer dengan Beaver Themer. Ayo selami!

Daftar isi

  • Pengantar Tema Berang-berang
  • Cara Membuat Header dengan Beaver Themer (Dalam 4 Langkah)
  • Cara Membuat Footer dengan Beaver Themer (Dalam 4 Langkah)
  • Pikiran Terakhir
  • Pertanyaan Terkait

Pengantar Tema Berang-berang

Beaver Themer membawa pembuatan halaman ke tingkat yang baru dengan memungkinkan Anda menyesuaikan area situs yang sering ditentukan oleh tema Anda—seperti header, footer, dan banyak lagi. Ini membuka kemungkinan tampilan yang kohesif dan bermerek di seluruh situs Anda:

Plugin Pembuat Tema Beaver Themer

Dengan Beaver Themer, Anda dapat:

  • Sesuaikan header, footer, bilah pengumuman, dan CTA.
  • Rancang tata letak khusus untuk halaman 404, halaman pencarian, dan arsip blog.
  • Buat templat untuk jenis posting khusus.
  • Kontrol pengaturan tampilan di semua halaman atau hanya halaman yang dipilih.

Dengan editor drag-and-drop Beaver Builder, menambahkan dan menata elemen semudah membuat halaman standar, lengkap dengan opsi warna, tata letak, dan modul seperti tombol dan formulir kontak.

Dapatkan Akses ke Beaver Themer dengan Paket Premium

Kabar baiknya adalah Beaver Themer disertakan dengan paket Beaver Builder premium apa pun:

Harga Beaver Builder Baru 2024

Artinya, saat Anda berinvestasi pada paket premium, Anda mendapatkan akses ke opsi penyesuaian lanjutan.

Sekarang kita telah menjelajahi manfaat Beaver Themer, mari beralih ke proses langkah demi langkah membuat header dengan Beaver Themer.

Cara Membuat Header dengan Beaver Themer (Dalam 4 Langkah)

Header khusus dapat membantu menampilkan merek Anda, membuat situs Anda lebih mudah dinavigasi, dan menyorot CTA utama. Berikut cara membuatnya dengan Beaver Themer:

Untuk memulai, pastikan Anda telah menginstal, mengaktifkan, dan melisensikan pembuat halaman Beaver Builder premium dan plugin Beaver Themer. Juga, buat menu untuk situs Anda dengan membuka Appearance > Menus di dashboard WordPress.

Langkah 1: Buat Tata Letak Tema Baru

Untuk membuat tata letak Themer baru, klik Beaver Builder > Themer Layouts dari area admin WordPress Anda. Kemudian, pilih Tambah Baru :

membuat header dan footer dengan tema berang-berang; langkah 1: buat tata letak tema baru

Di sini, Anda dapat memberi Judul pada tata letak Anda :

membuat header dan footer dengan tema berang-berang; Tambahkan header ke WordPress dengan Beaver Themer

Untuk Type , pilih Themer Layout . Untuk Layout , gunakan menu dropdown untuk memilih Header . Klik Tambahkan Tata Letak Themer untuk melanjutkan.

Langkah 2: Konfigurasikan Pengaturan

Selanjutnya, pada halaman pengaturan, tentukan di mana dan bagaimana header akan ditampilkan:

membuat header dan footer dengan tema berang-berang; Edit tajuk Anda dengan Beaver Themer
  • Sticky Header : Gaya header ini tetap berada di bagian atas jendela browser saat Anda menggulir halaman ke bawah.
  • Overlay Header : Pilih ini untuk membuat latar belakang header menjadi transparan, sehingga konten dapat ditempatkan di bagian atas layar.
  • Lokasi : Pilih apakah header akan ditampilkan di seluruh situs atau pada halaman tertentu saja.
  • Aturan : Kontrol visibilitas berdasarkan status login pengguna atau kriteria lainnya.

Klik Publikasikan untuk menyimpan pengaturan ini.

Langkah 3: Sesuaikan Tata Letak Header Anda

Sekarang setelah pengaturan Anda dikonfigurasi, klik Luncurkan Beaver Builder untuk membuka header baru Anda di editor:

membuat header dan footer dengan tema berang-berang; Akses editor Beaver Builder untuk menyesuaikan header Beaver Themer Anda

Di sini, Beaver Builder secara otomatis memberi Anda templat header default dengan beberapa modul termasuk detail kontak, ikon sosial, judul, dan menu:

membuat header dan footer dengan tema berang-berang; Opsi default disediakan dengan header Beaver Themer

Anda dapat menghapus modul ini untuk membuat header dari awal, atau, jika Anda mau, mulai dengan templat header lain yang telah dirancang sebelumnya dan tersedia di panel Konten:

membuat header dan footer dengan tema berang-berang; Pilih dari templat tata letak header Beaver Themer yang tersedia

Anda juga dapat mempersonalisasi setiap modul dengan detail Anda sendiri. Misalnya, Anda dapat menambahkan tautan ke akun sosial Anda atau mengedit judul situs web. Cukup klik pada modul yang ingin Anda edit, dan kotak popup pengaturan akan muncul untuk memudahkan penyesuaian.

membuat header dan footer dengan tema berang-berang; Edit judul situs web Anda dengan Beaver Builder

Beberapa modul menggunakan koneksi lapangan untuk menghasilkan konten secara dinamis. Misalnya, judul situs web Anda mungkin secara otomatis diambil dari Judul Situs Anda di pengaturan WordPress. Untuk menghapus koneksi bidang ini, cukup klik “X” di sebelahnya.

membuat header dan footer dengan tema berang-berang; Hapus koneksi bidang di header Beaver Themer Anda

Kemudian, cukup ketikkan judul pilihan Anda ke dalam kolom teks Judul :

membuat header dan footer dengan tema berang-berang; Tambahkan judul baru ke header Beaver Themer Anda

Di tab Gaya, Anda dapat menyesuaikan warna, font, dan lainnya agar sesuai dengan tampilan merek Anda. Gunakan pemilih warna untuk memilih warna yang ideal, dan pilih font yang selaras dengan kepribadian merek Anda. Terakhir, sesuaikan ukuran font menggunakan penggeser agar pas.

membuat header dan footer dengan tema berang-berang; Menyesuaikan judul header Beaver Themer Anda

Jika Anda ingin mengatur ulang modul di header Anda, cukup klik ikon Pindahkan dan seret setiap modul ke posisi pilihan Anda dalam tata letak:

membuat header dan footer dengan tema berang-berang; Memindahkan modul Beaver Builder di header Anda

Untuk memperbarui warna latar belakang baris Anda, klik ikon Kunci Inggris . Di popup Pengaturan Baris, buka tab Gaya, lalu gulir ke Warna Latar Belakang dan pilih warna yang Anda inginkan:

membuat header dan footer dengan tema berang-berang; Mengubah warna latar belakang header Anda

Perhatikan bahwa Anda dapat mengedit baris, kolom, atau modul apa pun dengan cara yang sama dengan mengklik ikon Kunci Pas .

Langkah 4: Tambahkan Konten ke Header Anda

Anda mungkin juga mempertimbangkan untuk menambahkan lebih banyak modul ke header Anda. Seperti disebutkan sebelumnya, Beaver Builder memungkinkan konten dinamis melalui koneksi lapangan.

Untuk mengatur koneksi bidang Anda sendiri, cukup klik ikon + di sebelah kotak untuk melihat bidang yang tersedia:

membuat header dan footer dengan tema berang-berang; Membuat koneksi lapangan dengan Beaver Builder

Lalu, klik Hubungkan untuk menghasilkan konten dinamis Anda.

Salah satu bagian terbaik dalam membuat header dengan Beaver Builder adalah Anda dapat memilih modul mana pun untuk ditambahkan ke header Anda. Untuk mengakses modul yang tersedia, cukup klik ikon + :

membuat header dan footer dengan tema berang-berang; Membuka sidebar Beaver Builder

Tindakan ini membuka panel Konten. Jika Anda ingin menambahkan slogan perusahaan Anda ke header, cukup cari modul Editor Teks dan seret ke tata letak Anda:

membuat header dan footer dengan tema berang-berang; Menggunakan modul editor teks Beaver Builder

Saat Anda meletakkannya di halaman, sebuah popup akan muncul di mana Anda dapat menambahkan teks Anda. Lalu, beralihlah ke tab Gaya untuk mengubah font, warna, dan ukuran teks Anda:

membuat header dan footer dengan tema berang-berang; Mengedit editor teks Anda di Beaver Builder

Untuk menyesuaikan padding, menambahkan CSS khusus, atau memasukkan animasi ke dalam modul teks Anda, klik pada tab Advanced.

Anda mungkin juga ingin memasukkan CTA di header Anda. Untuk melakukannya, tambahkan modul Tombol, lalu gunakan tab Umum untuk menyesuaikan teks, masukkan tautan Anda, dan tambahkan ikon:

membuat header dan footer dengan tema berang-berang; Modul tombol Beaver Builder

Di tab Gaya, Anda dapat menyesuaikan lebar, memilih teks dan warna latar belakang—termasuk warna kursor—dan memodifikasi perataan dan bantalan:

membuat header dan footer dengan tema berang-berang; Sesuaikan tombol di header Anda

Prosesnya konsisten di semua modul, baik Anda ingin menambahkan foto, carousel postingan, atau penghitung waktu mundur.

Cara Membuat Footer dengan Beaver Themer (Dalam 4 Langkah)

Mendesain footer khusus untuk situs web Anda juga merupakan langkah cerdas. Ini dapat membantu kepatuhan terhadap peraturan dan meningkatkan pengalaman pengguna. Misalnya, jika Anda mengumpulkan informasi pribadi, menambahkan tautan ke kebijakan privasi Anda akan bermanfaat. Menyertakan peta situs juga dapat memudahkan pengguna menavigasi situs Anda.

Selain itu, Anda dapat menampilkan detail kontak Anda di semua halaman, sehingga mudah diakses. Anda bahkan mungkin mempertimbangkan untuk menambahkan formulir pendaftaran untuk mendorong konversi.

Untuk membuat footer khusus, Anda akan mengikuti proses serupa seperti saat membuat header, menggunakan plugin pembuat halaman Beaver Builder premium bersama dengan Beaver Themer.

Langkah 1: Siapkan Tata Letak Tema Baru

Sama seperti header, Anda akan memulai dengan membuat tata letak untuk footer Anda. Buka Beaver Builder > Themer Layouts dan klik Add New .

membuat header dan footer dengan tema berang-berang; Siapkan tata letak tema baru

Langkah-langkahnya hampir sama seperti sebelumnya—beri nama footer Anda, pilih Themer Layout untuk Type , dan pilih Footer untuk Layout :

membuat header dan footer dengan tema berang-berang; Tambahkan footer baru dengan Beaver Themer

Kemudian, klik Tambahkan Tata Letak Tema .

Langkah 2: Konfigurasikan Pengaturan Footer

Anda akan tiba di halaman baru untuk mengedit tata letak footer Anda. Pengaturan ini lebih sederhana dibandingkan header.

Pilih di mana Anda ingin footer Anda ditampilkan di situs web Anda. Gunakan menu tarik-turun Lokasi untuk mengatur ini:

membuat header dan footer dengan tema berang-berang; Edit tata letak footer Anda dengan Beaver Themer

Klik tombol yang relevan untuk menambahkan aturan lokasi dan pengecualian. Pilih halaman tertentu yang ingin Anda sertakan atau kecualikan.

Ulangi ini di bagian Aturan. Setelah Anda puas dengan pengaturan footer Anda, klik Publikasikan .

Langkah 3: Sesuaikan Tata Letak Footer Anda

Sekarang, pilih Luncurkan Beaver Builder untuk membuka editor:

Luncurkan Beaver Builder untuk mengedit footer Anda

Seperti halnya header, Beaver Builder telah menyediakan templat tata letak default untuk footer Anda:

Modul footer Beaver Builder default

Misalnya, ada bagian untuk menyertakan detail kontak perusahaan Anda, tautan navigasi ke sumber daya yang berguna, dan deskripsi singkat tentang bisnis Anda. Anda dapat menghapus kolom ini dan membuat footer dari awal, atau Anda dapat mengubah konten yang sudah ada.

Misalnya, alih-alih Sumber Daya Tambahan, Anda mungkin ingin menampilkan postingan blog atau halaman produk terpopuler Anda. Anda dapat melakukan ini dengan menavigasi ke ikon Kunci Inggris dan memilih Pengaturan Judul :

Pengaturan tajuk di Beaver Builder

Kemudian, di tab Umum , Anda dapat mengetikkan judul baru Anda. Beralih ke tab Gaya untuk menerapkan warna khusus, memilih font unik, dan menyesuaikan ukuran judul:

Edit judul di footer Beaver Themer Anda

Klik Simpan untuk menerapkan perubahan Anda.

Sekarang, Anda harus menambahkan tautan Anda ke kotak teks di bawah. Sekali lagi, arahkan kursor ke ikon Kunci Inggris dan pilih Pengaturan Editor Teks .

Di sini, Anda dapat menghapus entri saat ini dan menggantinya dengan halaman Anda sendiri. Di editor teks, Anda dapat menambahkan judul halaman dan menambahkan tautan dengan mengeklik ikon Tautan :

Tambahkan tautan ke footer Beaver Themer Anda

Tempelkan URL Anda dan pilih Simpan . Anda juga dapat menambahkan nomor kontak dan alamat email perusahaan Anda dengan cara yang sama.

Beaver Builder menyertakan pemberitahuan hak cipta secara default. Sesuaikan dengan mengklik modul dan menambahkan pernyataan Anda sendiri:

Edit pemberitahuan hak cipta di Beaver Themer

Dengan tata letak footer Anda yang sudah diatur, sekarang saatnya menambahkan konten yang meningkatkan navigasi dan pengalaman pengguna.

Langkah 4: Tambahkan Konten ke Footer Anda

Kami telah membahas hal-hal penting seperti detail kontak, tautan sumber daya, dan pemberitahuan hak cipta. Namun, Anda dapat menambahkan modul Beaver Builder apa pun untuk menyempurnakan tata letak footer Anda.

Misalnya, pertimbangkan untuk menambahkan formulir pendaftaran untuk meningkatkan keterlibatan. Temukan modul Formulir Berlangganan dan seret ke footer Anda:

Tambahkan formulir berlangganan ke footer Anda

Beaver Builder terintegrasi dengan banyak penyedia pemasaran email, memungkinkan Anda memilih layanan pilihan Anda dari menu tarik-turun:

Tambahkan penyedia pemasaran email Anda ke formulir pendaftaran Anda

Di tab ini, Anda dapat menambahkan kotak centang syarat dan ketentuan atau menyesuaikan pesan yang dilihat pengguna setelah berlangganan.

Beralih ke tab Tombol untuk mengedit teks tombol, menyesuaikan warna, menambahkan bantalan, dan banyak lagi:

Edit tombol berlangganan Anda di formulir pendaftaran Anda

Anda mungkin menemukan tab Captcha berguna jika Anda ingin pengguna memverifikasi bahwa mereka bukan bot.

Pertimbangkan juga untuk menambahkan tautan ke akun sosial Anda. Gunakan modul Icon Group dan seret ke footer Anda:

Menambahkan modul grup ikon di Beaver Builder

Kemudian, di tab Ikon pada popup Anda, klik Edit Ikon :

Edit modul grup ikon Beaver Builder

Klik Pilih Ikon untuk memilih yang relevan. Anda akan menemukan ikon untuk platform media sosial utama seperti Facebook, LinkedIn, dan Twitter. Kemudian tambahkan tautan ke profil Anda:

Tambahkan ikon sosial Anda ke footer Anda

Klik Simpan untuk kembali ke tempat Anda dapat menambahkan tautan sosial lainnya:

Menambahkan ikon media sosial ke footer Anda

Terus tambahkan modul ke footer Anda. Jika Anda puas dengan tata letaknya, klik Selesai > Publikasikan .

Pikiran Terakhir

Pembuat halaman menyederhanakan desain postingan dan halaman, tetapi sering kali membatasi penyesuaian untuk header dan footer. Untungnya, Beaver Themer memberi Anda kendali penuh atas desain situs web Anda.

Berikut rekap singkat cara membuat header dan footer dengan Beaver Themer:

  1. Buat tata letak Beaver Themer baru.
  2. Konfigurasikan pengaturan Anda.
  3. Sesuaikan tata letak header dan footer Anda.
  4. Tambahkan konten ke header atau footer Anda.

Dengan langkah-langkah ini, Anda dapat meningkatkan fungsionalitas situs web dan memastikannya mencerminkan identitas merek unik Anda.

Pertanyaan Terkait

Apa keuntungan menggunakan Beaver Themer untuk header dan footer?

Beaver Themer menawarkan opsi penyesuaian yang luas, memungkinkan Anda membuat header dan footer unik yang sesuai dengan merek Anda. Ini memberikan kontrol atas tata letak dan kemampuan untuk mengintegrasikan konten dinamis dengan mudah.

Bagaimana Anda Menggunakan Beaver Themer?

Beaver Themer memberi Anda kendali penuh atas desain situs web Anda. Anda dapat dengan mudah mengedit header, footer, halaman 404, dan bagian penting lainnya. Mulailah dengan membuat tata letak Themer baru dan mengonfigurasi pengaturan untuk mengelola tampilan konten Anda. Setelah itu, sesuaikan warna dan tambahkan berbagai modul untuk mempercantik tampilan situs Anda

Bagaimana cara membuat tajuk saya ramah seluler?

Untuk menjadikan tajuk Anda ramah seluler, periksa pengaturan responsif di Beaver Builder. Anda dapat menyesuaikan tata letak dan ukuran font khusus untuk perangkat seluler untuk meningkatkan kegunaan.

Tentang Will Morris

Will Morris adalah staf penulis di WordCandy. Saat dia tidak sedang menulis tentang WordPress, dia suka menampilkan rutinitas stand-up comedynya di sirkuit lokal.

Buletin kami

Buletin kami ditulis secara pribadi dan dikirim sebulan sekali. Itu tidak sedikit pun mengganggu atau berisi spam.
Kami berjanji.

Bergabunglah dengan Buletin

Coba Beaver Builder Sekarang

Beaver Builder