Header transparan saat ini sedang tren dan digunakan oleh semakin banyak situs web. Header semacam ini membuat halaman Anda terlihat bagus dan mendorong pengguna untuk berada di halaman tersebut lebih lama.
Paro atas, Header Transparan Beaver Builder mengacu pada area pada halaman web yang dilihat oleh pengguna pada pandangan pertama, yaitu apa yang dilihat pengguna tanpa menggulir halaman.
Penasaran dengan Beaver Builder, jangan khawatir, saya siap membantu Anda kami Ulasan Beaver Builder yang terperinci.
Saya akan menjawab pertanyaan-pertanyaan ini di blog, lihat:
- Apa itu tajuk halaman?
- Apa yang dimaksud dengan Header Transparan?
- Apa gunanya menambahkan Header Transparan ke situs web Anda?
- Apa saja fitur Beaver Builder?
- Bagaimana Cara Mengatur Header Transparan Dengan Beaver Builder?
- Apa saja langkah-langkah untuk membuat Header Halaman Web Anda Transparan?
- Istilah kode penting apa yang harus Anda ketahui?
- Berapa harga Beaver Builder?
Daftar Isi
Apa Itu Header Halaman?
Header halaman disebut sebagai bagian atas halaman web mana pun yang ada di situs web Anda. Header sering disalahartikan hanya dengan strip atas yang memiliki logo perusahaan/situs web Anda dan bilah menu.
Namun tidak demikian, tajuk halaman adalah keseluruhan konten yang dilihat pengguna saat ia membuka halaman Anda yang disebut konten paruh atas seperti yang disebutkan di atas.
Ada berbagai fitur yang dimiliki header Anda, yang dapat Anda tambahkan sesuai kebutuhan Anda.
Ini adalah:
- Logo perusahaan atau situs web Anda
- Segala jenis ajakan bertindak yang akan mengarahkan pengguna ke laman landas Anda
- Judul atau tagline yang mewakili Anda dan merek Anda
- Bilah menu untuk kemudahan penggunaan
- Opsi pencarian untuk menavigasi situs web Anda dengan mudah.
Apa Arti Header Transparan?
Header normal memiliki persegi panjang seperti strip di bagian atas halaman web Anda yang dalam beberapa kasus memisahkan konten header dan konten halaman satu sama lain.
Jika Anda menggunakan header transparan, ada baiknya menggabungkan konten halaman Anda dengan header serta strip persegi atas yang mungkin berisi logo situs web, ajakan bertindak, dan menu.
Fitur Beaver Builder
Beberapa fitur disertakan Pembangun Berang-berang. Mari kita bahas beberapa fitur penting.
1. Templat Halaman
Templat halaman adalah jenis tema yang dapat Anda atur untuk halaman web Anda. Dengan pembuat berang-berang, Anda dapat memiliki templat halaman yang berbeda untuk setiap halaman web yang berbeda atau Anda dapat memiliki templat yang sama.
Ini terserah kamu. Template ini kreatif, unik, mudah digunakan, dan yang terpenting responsif seluler.
2. Penempatan Konten
Anda dapat mengubah ukuran, memindahkan, dan memotong gambar sesuai kebutuhan hanya dengan mengklik. Letakkan ajakan bertindak, simbol menarik, dan header dari dasbor sederhana tema Beaver Builder yang Anda pilih.
Anda juga dapat membagi halaman Anda menjadi beberapa segmen untuk menempatkan lebih banyak konten di halaman Anda dan terlihat agak kecil sehingga memiliki dampak yang mengesankan pada klien.
3. Pembuat Berang-berang Powerpack
Ini adalah tambahan yang dapat Anda integrasikan dengan pembuat berang-berang dan mendapatkan banyak integrasi untuk meningkatkan kinerja situs web Anda dan mempercantik halaman web.
Perlu menulis konten Anda di antarmuka WordPress? Jangan khawatir, dengan Beaver Builder Anda dapat membuat konten pada antarmuka khas WordPress dan mengimpor semuanya ke tema pembuat berang-berang yang Anda putuskan untuk digunakan pada halaman Anda.
Jika Anda memilih untuk tidak menggunakan pembuat berang-berang lagi, Anda dapat mengekspor halaman yang dibuat dari template pembuat berang-berang ke antarmuka halaman WordPress biasa tanpa kehilangan konten Anda juga.
Anda Mungkin Juga Menyukai Ini:
Bagaimana Cara Mengatur Header Transparan Dengan Beaver Builder?
Hanya ada satu alat yang diperlukan untuk menyetel header transparan di halaman web mana pun di situs Anda, The Beaver Themer. Mari kita bahas Beaver Themer secara detail.
Berang-berang Themer
Berang-berang Themer akan membantu Anda membuat menarik dan dioptimalkan Halaman web hanya dengan satu klik melalui dasbornya yang mudah digunakan.
Ini memungkinkan Anda memiliki fitur di mana Anda dapat membuat header dan footer, yaitu halaman kesalahan 404, dan bersamaan dengan itu halaman yang telah Anda arsipkan. Ini juga memungkinkan Anda membuat header dan footer untuk setiap halaman web, yang membantu pengguna menavigasi situs web Anda dengan mudah.
Fitur
- Berbagai tema untuk dipilih
Anda dapat memutuskan tema untuk setiap halaman di situs Anda dan semuanya juga bisa berbeda.
Dengan menggunakan tema ini, Anda dapat membuat blog & halaman arahan serta memodifikasi halaman kesalahan 404 sehingga halaman ini dapat membantu pengguna Anda datang ke situs web pada halaman yang tepat.
- Bagian Tema
Bagian-bagian ini adalah fitur yang sangat unik dan jarang ditemukan di alat tata letak tema lainnya.
Ini membantu Anda membuat tata letak parsial, misalnya, header atau footer dapat dibuat dengan bantuan bagian-bagian ini di halaman mana pun terlepas dari fakta bahwa halaman tersebut dibuat dengan tema Beaver atau tidak. Bukankah itu luar biasa!
- Koneksi Lapangan
Anda dapat mengintegrasikan tema Beaver dengan halaman mana pun yang ada dan mengamankan konten saat melakukan proses ini.
Dengan alat tata letak tema lainnya, ada bahaya kehilangan konten saat menyambungkan alat tersebut ke halaman yang biasa Anda buat atau halaman yang dibuat dengan alat tata letak tema lainnya.
- Kotak Pos
Anda dapat memilih tema yang mengatur blog Anda dalam grid dan Anda dapat mengedit setiap grid sesuai kebutuhan Anda. Ini akan membantu membuat halaman Anda mudah dinavigasi dan memberikan tampilan yang indah.
- Konten Umum
Ingin cuplikan kecil konten dinamis menjadi umum dan ditampilkan di semua halaman? Jika ya, tema berang-berang adalah solusi Anda, dengan tema berang-berang Anda mendapatkan dasbor yang berbeda untuk membuat konten untuk ditampilkan di setiap halaman situs web Anda.
Anda dapat memilih apakah Anda ingin kontennya dinamis, meluncur, atau tetap statis. Ingatlah untuk tidak menempatkan konten panjang sebagai hal biasa karena dapat menyebabkan duplikasi konten di semua halaman Anda.
Anda dapat membuat bentuk konten berikut- teks, gambar, tautan, dan bidang khusus, setelah dibuat, tautkan semuanya ke semua halaman yang Anda inginkan untuk menampilkan konten tersebut.
Langkah-Langkah Membuat Header Halaman Web Anda Transparan
Berikut beberapa langkah penting yang harus diikuti:
Tahap 1: Unduh Beaver dan mulailah membuat halaman untuk situs Anda menggunakan Beaver Builder
Hal pertama dan terpenting yang harus dilakukan adalah produksi halaman secara menyeluruh Beaver Builder.
Di WordPress setelah memperkenalkan modul produsen berang-berang, daripada membuat halaman melalui WordPress, cukup buka halaman tersebut, tambahkan judul ke halaman menggunakan WordPress, lalu klik ubah dengan pengembang berang-berang dan mulai pekerjaan Anda.
Langkah 2: Penambahan konten
Setelah membuat tata letak halaman dasar, tentukan konten yang ingin Anda tambahkan di bagian atas halaman, yaitu konten paruh atas, yang bisa berupa judul yang diikuti oleh beberapa kalimat, judul, subjudul, atau ajakan bertindak apa pun, atau hanya logo dan gambar.
Sekarang, buat baris dengan bantuan pembuat berang-berang dan tambahkan konten yang Anda rencanakan ke baris tersebut. Di bawah baris tambahkan gambar latar belakang yang Anda inginkan agar header transparan muncul di atasnya.
Langkah 3: Penambahan Kelas
Anda harus pergi ke tombol kunci pas di baris atas untuk penambahan kelas. Kemudian tambahkan kelas CSS dengan masuk ke opsi Advanced. Jangan lupa klik tombol Simpan.
Langkah 4: Membuat header menjadi transparan
Jadi sekarang, kami berencana untuk memindahkan kolom Top Banner di bawah header. Yang terpenting, kita harus membuat headernya lugas.
Kita melakukan ini sekarang dengan tujuan agar kita dapat melihat di mana kepala kolom Spanduk Atas ditutup ketika kita menggunakan CSS untuk menempatkannya di bawah tajuk situs.
Tambahkan file CSS Anda di style.css atau langsung tancapkan ke pembuat Beaver.
Beberapa istilah penting dari kode yang harus Anda ketahui:
- Tubuh. fl-halaman-header-utama:
Cuplikan CSS di atas adalah cuplikan yang digunakan oleh pembuat berang-berang untuk menyandikan header di bagian atas halaman situs web Anda.
Kami menambahkan badan halaman di depan untuk meningkatkan kekhususan halaman. Alasan lain untuk menargetkan cuplikan kode di atas adalah untuk membuat duplikat kode utama yang digunakan oleh pembuat berang-berang untuk header dan kemudian melakukan modifikasi.
Ini menyelamatkan header Anda dari kehancuran permanen jika terjadi kesalahan dengan kode.
- Latar Belakang: transparan:
Cuplikan CSS ini digunakan untuk menghapus latar belakang yang diatur secara default ketika Anda mulai menggunakan pembuat Beaver jika halaman Anda tidak dibuat melalui pembuat Beaver, Anda masih dapat membuat header transparan dengan mengekspor file CSS ke opsi lanjutan yang diberikan kepada Anda di baris paling atas.
Namun warna latar belakang harus dihilangkan melalui cuplikan CSS di atas.
- Posisi: relatif dan indeks-z:10:
Untuk memastikan keselarasan header transparan kami yaitu banner atas dengan header tetap dan latar belakang yang sudah ada, gunakan cuplikan CSS yang disebutkan.
Langkah 5: Penyelarasan baris spanduk atas
Kode CSS lain perlu ditambahkan ke tempat yang sama di mana Anda menambahkan cuplikan CSS di atas.
Istilah CSS penting yang akan Anda temukan dalam kode:
@layar media dan (lebar minimum 660 piksel): Penggunaan kode ini hanya sekedar menyelaraskan banner paling atas dengan header yang ada. Nilai px yang disebutkan yaitu 660 dalam hal ini sangatlah penting. Nilainya mungkin disertakan bersama kode secara default atau Anda mungkin harus menambahkannya secara manual.
Nilai px default atau rata-rata yang harus Anda atur mungkin berada di kisaran 990-995px tergantung pada konfigurasi sistem Anda.
.spanduk atas .fl-row-content-wrap: Cuplikan CSS ini membantu Anda menyesuaikan padding sesuai kebutuhan Anda.
margin-atas:-100px: Cuplikan ini membantu Anda menyesuaikan margin header di keempat sisi sesuai kebutuhan Anda.
Langkah 6:
Sesuaikan dan percantik header transparan untuk mengatur logo dan menu Anda agar terlihat bagus dan menyatu dengan transparansi header.
Menjadikan header transparan secara global
Dengan Beaver Builder, Anda memiliki fitur untuk menyimpan spanduk teratas yang dibuat dan menggunakannya di halaman web lain di situs Anda.
Masalah Yang Sering Terjadi Saat Membuat Header Transparan
- Header hanya dapat dilihat di desktop tetapi tidak di ponsel dan tablet.
Masalah ini dapat diselesaikan dengan mudah. Anda hanya perlu mengunjungi Appearance > Customize > General > Background dan Anda harus mengatur warnanya sedemikian rupa sehingga kontras dengan header Anda agar menonjol dan mudah dibaca.
- Bilah atas header tidak terlihat.
Masalah di sini adalah pada cuplikan CSS dari kode yang telah Anda salin dan tempel atau tulis sendiri yang menyertakan isi. fl-halaman-bar.
Harga Beaver Builder
Untuk menambahkan header transparan, Anda memerlukan tema berang-berang yang disertakan dengan versi berbayar dari paket pembuat berang-berang.
Anda harus membayar $149 untuk satu tahun Beaver Builder layanan yang akan menyertakan tema Beaver yang akan membantu Anda menambahkan header transparan dengan mudah ke situs web Anda.
Pro & Kontra Dari Header Transparan Beaver Builder
Pro
- Jika Anda menginginkan halaman yang menarik secara visual, maka tema Beaver adalah tema yang wajib dimiliki
- Anda dapat mengubah tata letak untuk setiap perangkat secara terpisah yaitu ponsel, tablet, dan desktop. Anda juga dapat membuat semuanya bersama-sama dengan laman landas yang berbeda atau laman normal untuk ketiga perangkat.
Kekurangan
- Satu-satunya hal negatif tentang tema Beaver adalah harga paket berbayarnya agak mahal. Tapi melihat fitur-fitur yang disediakannya, itu sangat berharga.
Ulasan Pelanggan Beaver Builder
Link Cepat:
- Kode Promo & Kupon Beaver Builder
- Pembuat Berang-berang vs Divi
- Pembuat Berang-berang vs Elementor
- Beaver Builder vs Komposer Visual
Pertanyaan Umum | Header Transparan Beaver Builder
Di mana saya bisa mendapatkan kode CSSnya?
Anda dapat menghubungi dukungan pelanggan pembuat berang-berang, dan mereka akan menjawab pertanyaan Anda dengan cepat dan memberikan solusi, atau Anda dapat menggunakan platform seperti git hub dan menyalin kode dari platform tersebut secara langsung karena ini gratis untuk digunakan.
Apa header transparan di WP?
Di WordPress, header transparan memiliki opasitas warna latar belakang yang disetel ke 0, sehingga tembus pandang. Efek ini dapat memberikan tampilan kontemporer dan minimalis pada situs web Anda namun tetap memungkinkan konten dilihat melalui header.
Bagaimana cara menyesuaikan desain header transparan saya?
Anda dapat mengubah pilihan gaya di pembuat halaman untuk mempersonalisasi tampilan header transparan Anda. Dalam pengaturan modul header Beaver Builder, misalnya, Anda dapat mengubah font, ukuran font, warna font, dan perataan teks. Anda juga dapat menambahkan komponen atau modul header tambahan, seperti logo atau menu navigasi, dan mengubah parameter gayanya. Anda juga dapat menggunakan CSS khusus untuk lebih mempersonalisasi tampilan header transparan Anda.
Bagaimana Memulai dengan Beaver Builder?
Bagian konten WordPress berbeda dari header, footer, dan sidebar. Plugin Beaver Builder memungkinkan pembuatan tata letak sesuai dengan area konten. Selain itu, Anda dapat menggunakan plugin Beaver Themer untuk membuat tata letak di tempat-tempat di luar area konten.
Bagaimana cara mengaktifkan header transparan?
Arahkan ke Appearance > Customize > Header untuk mengaktifkan opsi Transparent Header. Opsi 'Tampilkan Header Transparan di Beranda Saja' akan tersedia setelah ini selesai. Jika Anda mematikannya, header akan menjadi transparan di setiap halaman.
Bagaimana cara membuat header transparan di Beaver Builder?
Untuk membuat header transparan di Beaver Builder, Anda dapat mengikuti langkah-langkah berikut: Buka Beaver Builder Editor dan klik modul header yang ingin Anda edit. Dalam pengaturan modul, navigasikan ke tab Style. Di bawah bagian Latar Belakang, klik alat pemilih warna di sebelah opsi Warna Latar Belakang. Di pemilih warna, geser bilah opacity ke kiri hingga opacity disetel ke 0. Ini akan membuat header menjadi transparan. Simpan perubahan dan publikasikan halaman untuk melihat header transparan.
Bagaimana cara mengubah tajuk di Beaver Builder?
Untuk mengubah header di Beaver Builder, Anda dapat mengikuti langkah-langkah berikut: Buka Beaver Builder Editor dan navigasikan ke halaman tempat Anda ingin mengubah header. Klik pada modul header yang ingin Anda edit. Dalam pengaturan modul, Anda dapat membuat perubahan pada tata letak, gaya, dan konten header. Untuk menambahkan elemen atau modul baru ke header, Anda dapat menggunakan antarmuka drag-and-drop di Beaver Builder. Setelah Anda membuat perubahan yang diinginkan, simpan dan publikasikan halaman untuk melihat header yang diperbarui.
Kesimpulan: Buat Header Kustom dengan Beaver Builder 2024
Header transparan adalah fitur yang sangat penting untuk dimiliki di situs web jika Anda ingin situs tersebut menarik, penuh gaya, dan modern.
Bahkan membantu ajakan bertindak Anda di spanduk atas atau konten paruh atas agar menonjol. Dengan pembuat berang-berang, mudah untuk membuat tajuk transparan.
Langkah-langkah di atas mungkin membingungkan atau tampak sulit, tetapi satu-satunya hal yang perlu Anda lakukan adalah menyalin-menempelkan kode ke dalam spasi dan melihat perubahannya dan menjadikannya global jika Anda mau.
