Cara menambahkan bilah atas di wordpress dengan elementor

Bilah atas menyediakan cara yang efektif untuk menyoroti pesan penting, promosi, dan ajakan untuk bertindak di WordPress. Itu diposisikan di bagian atas halaman web dengan tujuan menarik perhatian pengunjung tanpa menghambat pengalaman menjelajah pengguna.

Top bar yang dirancang dengan baik dapat secara signifikan meningkatkan konversi karena dapat langsung menarik perhatian pengunjung dan membimbing mereka menuju tindakan seperti mendaftar untuk buletin, meraih penawaran waktu terbatas, dan menjelajahi konten baru. Ini berfungsi sebagai pengingat yang terus -menerus tanpa pengguna yang mengganggu.

Menambahkan bilah atas ke WordPress sangat sederhana dengan Elementor. Dalam artikel ini, kami akan membahas panduan langkah demi langkah tentang cara menambahkan bilah atas di WordPress dengan Elementor. Tetap bersama kami sampai akhir.

Apa itu Top Bar?

Bilah atas adalah bagian horizontal sempit yang ditampilkan di bagian atas situs web di atas header utama. Tidak seperti pop-up atau spanduk, ini digunakan untuk menunjukkan detail kontak, deskripsi tautan, pengumuman penting, penawaran promosi, dan pesan. Anda dapat meningkatkan keterlibatan pengguna dengan kustomisasi yang luas, seperti warna, font, dan tombol khusus merek.

Bilah atas tidak selalu ditampilkan di bagian atas situs web 24/7. Sebaliknya, biasanya muncul selama periode kampanye untuk tujuan promosi. Ini didefinisikan oleh nama yang berbeda tergantung pada kasus penggunaannya. Kami akan membahasnya di bagian berikut. Terus membaca.

Apa yang disebut bilah teratas di situs web?

Seperti yang dikatakan satu menit yang lalu, bilah teratas di situs web ditentukan oleh nama yang berbeda berdasarkan tujuan dan fungsinya. Lihatlah beberapa istilah umum yang digunakan untuk bilah atas, yang tercantum di bawah ini.

• Bar Pengumuman - Digunakan untuk berbagi pengumuman, pemberitahuan acara, dan pembaruan penting.

• Bilah Pemberitahuan- Menampilkan penawaran waktu terbatas, berita pemeliharaan sistem, dan pesan mendesak.

• Promo Bar - Sorot promosi khusus, diskon eksklusif, dan kampanye untuk meningkatkan penjualan.

• Info Bar - Pameran nomor kontak, detail belanja, alamat lokal, dan jam kerja.

• Sticky Bar - Tetap diperbaiki di bagian atas situs web bahkan ketika pengguna menggulir posting dan halaman.

• Floating Bar - Bergerak saat Anda menggulir pos dan halaman untuk memastikan kehadiran yang nyata.

Cara menambahkan bilah atas di wordpress dengan elementor

Bagian teoretis sudah berakhir. Sekarang, kami akan membahas bagian tutorial di bagian ini, menjelaskan panduan langkah demi langkah tentang cara menambahkan bilah atas di WordPress menggunakan Elementor.

Prasyarat: Instal Elementor atau HappyAddons

Untuk membuat bilah atas di seluruh situs web, Anda harus memiliki akses ke Elementor Theme Builder, yang merupakan fitur premium. Jika Anda ingin menggunakan versi premium plugin dan mencari opsi gratis, Anda harus mencoba plugin HappyAddons.

HappyAddons sebenarnya merupakan addon ke plugin Elementor dengan banyak fitur gratis yang biasanya premium di Elementor. Misalnya, HappyAddons juga memiliki pembangun tema, yang sangat mirip dengan Elementor, tetapi benar -benar gratis untuk digunakan.

Jadi, di bagian ini, kami akan menggunakan plugin HappyAddons untuk menjelaskan tutorial. Instal dan aktifkan plugin berikut di situs Anda.

• Elementor
• Happyaddons

Setelah diinstal dan diaktifkan di situs Anda, mulailah mengikuti tutorial yang dijelaskan di bawah ini. Kami akan menunjukkan kepada Anda cara membuat bilah atas di WordPress seperti yang dapat Anda lihat di gambar di bawah ini.

Langkah 01: Pergi ke pembangun tema HappyAddons

Arahkan ke HappyAddons> Tema pembangun . Seperti plugin Elementor, Anda dapat membuat header, footer, templat posting blog, dan halaman arsip dengan pembangun tema plugin HappyAddons.

Langkah 02: Pergi ke bagian header

Saat bilah atas ditampilkan di atas header web, Anda harus menyesuaikannya dari bagian header. Jadi, buka header dengan opsi Edit dengan Elementor.

Pelajari cara membuat konten off-canvas di Elementor.

Langkah 03: Tambahkan wadah baru di atas header

Melayang kursor Anda di header akan menampilkan ikon plus (+) . Mengklik ikon ini akan memungkinkan Anda untuk menambahkan wadah baru ke header di atas. Lakukan itu.

Langkah 04: Sesuaikan bilah atas dan tambahkan konten ke dalamnya

Anda harus menambahkan warna yang kontras ke latar belakang bilah atas. Untuk melakukan ini, klik ikon enam-dotten pada wadah> Pergi ke tab Gaya > Temukan Opsi Warna > Pilih Warna.

Tambahkan widget editor teks ke bagian bilah atas. Ini akan memungkinkan Anda untuk menambahkan konten teks ke bagian tersebut.

Di bawah editor teks di bilah sisi kanan, Anda dapat menulis konten teks yang Anda inginkan yang akan ditampilkan di bilah atas secara real time.

Dari opsi di bawah tanda di bawah bagian Editor Teks, Anda dapat mengubah warna dan keberanian teks yang telah Anda tambahkan ke bilah atas.

Anda bahkan dapat menambahkan spasi antara kata -kata dan menggarisbawahi kata -kata tertentu. Kami telah melakukan ini pada teks kami untuk tutorial ini. Anda dapat melihatnya di bawah.

HappyAddons memungkinkan Anda untuk menambahkan efek partikel ke latar belakang bilah atas. Efek partikel yang bahagia adalah teknik animasi visual di mana partikel kecil dan bercahaya bergerak secara dinamis di halaman web, menciptakan pengalaman pengguna yang hidup dan menarik.

Untuk menambahkan ini, navigasikan ke gaya> efek partikel yang bahagia . Setelah itu, beralih untuk mengaktifkan latar belakang partikel .

Selanjutnya, Anda dapat memilih gaya partikel, warna partikel, opacity, jumlah partikel, ukuran partikel, dan kecepatan bergerak . Semoga Anda bisa melakukannya sendiri.

Kami telah menambahkan klip pendek sehingga Anda dapat memeriksa cara kerja fitur partikel yang bahagia. Ini benar -benar membuat bar teratas begitu bagus untuk dilihat.

Perluas bagian perbatasan . Anda dapat mengatur lebar perbatasan dan warna seperti yang Anda inginkan. Namun, kami berpikir bahwa menambahkan perbatasan tidak penting untuk bilah atas. Jadi, Anda bisa menghindarinya.

Sekarang, perluas bagian pembagi bentuk . Opsi Shape Divider memungkinkan Anda untuk menambahkan bentuk yang dapat disesuaikan dan dinamis di bagian atas atau bawah bagian.

Namun, opsi ini juga tidak penting untuk bilah atas. Jadi, lebih baik Anda menghindarinya. Tetapi jika Anda ingin menambahkan fitur ini ke bilah atas, Anda dapat melakukannya.

Berikut panduan tentang cara membuat halaman web infografis dengan Elementor.

Langkah 05: Mengkonfigurasi pengaturan lanjutan untuk bilah atas

Akhirnya, datanglah ke tab Advanced . Anda akan mendapatkan banyak opsi di sini untuk menyesuaikan margin, bantalan, penyelarasan, pesanan, posisi, tinggi, efek gerak, responsif, dan banyak lagi. Lakukan penyesuaian yang diperlukan sendiri.

Langkah 06: Sembunyikan bilah atas pada jenis perangkat

Anda dapat menyembunyikan bilah atas pada perangkat masing -masing yang Anda inginkan. Misalnya, kami ingin menyembunyikan bilah atas pada perangkat tablet. Untuk melakukan ini, memperluas bagian responsif. Kemudian, matikan opsi mode perangkat di mana Anda ingin menyembunyikan bilah atas.

Langkah 07: Jadikan Bar Top Responsif

Klik opsi mode responsif pada footer panel Elementor. Kemudian, pilih mode potret seluler .

Anda dapat melihat bahwa konten bilah atas muncul dalam tiga baris dan tidak selaras sempurna, tidak seperti bagaimana Anda melihatnya dalam mode desktop.

Untuk membuat teks terlihat bagus untuk ukuran layar, lakukan kustomisasi yang Anda butuhkan dengan tetap pada mode potret seluler.

Kami telah menyelaraskan teks -teksnya secara terpusat. Bukankah itu terlihat lebih baik sekarang? Anda dapat menyesuaikannya lebih lanjut dengan cara apa pun yang Anda inginkan.

Langkah 08: Publikasikan/perbarui perubahan

Ketika semua kustomisasi selesai, klik tombol Publish/Update di bagian bawah panel Elementor untuk mempertahankan semua perubahan.

Jelajahi cara membuat LightBox di WordPress dengan Elementor.

Langkah 09: Pratinjau bilah atas di situs web

Sekarang, datanglah ke frontend situs web Anda. Anda akan melihat bilah atas ditampilkan dengan baik di atas situs Anda.

Dengan demikian, Anda dapat dengan mudah membuat bilah atas di WordPress menggunakan plugin Elementor secara gratis.

Pikiran terakhir

Semoga Anda menikmati tutorial ini. Tetapi untuk mendapatkan yang terbaik dari bilah atas, ada beberapa hal penting yang harus Anda ikuti dengan cermat. Fokus pada pemeliharaan desain yang bersih dan menarik secara visual yang selaras dengan branding situs web Anda. Pilih warna yang kontras untuk keterbacaan, gunakan teks yang jelas dan ringkas, dan jaga agar pesan tetap relevan dengan audiens Anda.

Selain itu, optimalkan untuk respon seluler sehingga bilah atas tetap fungsional di semua perangkat tanpa menghalangi pengalaman pengguna. Hindari kelebihan bilah atas dengan terlalu banyak informasi, karena dapat membanjiri pengunjung. Jika menggunakan animasi atau efek, jaga agar tetap halus untuk mempertahankan profesionalisme.

Jika Anda masih memiliki kebingungan atau pertanyaan dalam pikiran, beri tahu kami tentang mereka melalui kotak komentar di bawah ini.