Header dari situs web adalah bagian pertama dari informasi yang dirasakan oleh pengunjung dari situs Anda. Ini memungkinkan Anda untuk menyorot logo merek Anda, mengatur halaman situs Anda, serta menyediakan fitur penting lainnya (pencarian, koneksi, dll.). Selain itu, memiliki tajuk mengambang dan transparan diperlukan karena meningkatkan pengalaman pengguna.

Pada artikel ini kami akan menunjukkan cara membuat header dan membuatnya transparan dengan Elementor. Namun sebelumnya, kita akan melihat apa itu floating dan transparent header.

Apa itu header mengambang dan transparan?

Header mengambang adalah bilah navigasi yang selalu tetap bahkan ketika pengunjung menggulir ke bawah halaman web. Sangat cocok untuk situs yang memiliki halaman dengan artikel panjang, ulasan, dan situs satu halaman. Dan aspek transparannya memungkinkan Anda untuk melihat warna latar belakang halaman serta kontennya.

sematkan dan buat tajuk transparan dengan Elementor

Mengapa menggunakan tajuk mengambang dan transparan

Situs web modern semakin sering menggunakan tajuk mengambang dan transparan karena memiliki dampak visual pada pengunjung dari situs. Alasan untuk mengadopsi mereka ditujukan untuk:

  • Meningkatkan kesadaran merek Anda,
  • Tingkatkan pengalaman pengguna,
  • Tingkatkan navigasi

Temukan juga Cara membuat judul dua warna di Elementor

Sematkan dan buat tajuk transparan dengan Elementor

Untuk membuat header transparan dan mengambang, Anda harus memiliki kedua versiElementor (Pro dan Ringan). Jika tidak, unduh (Elementor, Elementor Pro) sebelum memulai.

Setelah diinstal, ikuti langkah selanjutnya.

Langkah 1: buat menu dengan Elementor

Untuk membuat menu, ikuti langkah-langkah berikut:

  • pilih berturut-turut Penampilan >> Menu
  • Beri nama menunya
  • Tunjukkan lokasi menu
  • Validasi dengan mengklik tombol simpan menu
sematkan dan buat tajuk transparan dengan Elementor
  • Periksa halaman, artikel, atau posting di grup Tambahkan item menu
  • Klik Tambahkan ke Menu untuk menambahkan item yang ditandai ke menu
  • Terakhir klik Simpan menu
buat tajuk mengambang dan transparan dengan Elementor

Lire aussi Elementor: Cara menampilkan teks di atas gambar

Langkah 2: Pilih Template Header dari Elementor Template Library

Pengguna dariElementor Pro memiliki akses ke perpustakaan templat siap pakai yang berguna untuk mendesain berbagai bagian a situs jaringan. Anda juga akan menemukan berbagai template header di sini. Untuk melakukan ini,

  • Pergi berturut-turut ke Model >> Tambahkan
buat tajuk mengambang dan transparan dengan Elementor
  • Anda akan melihat pop-up modal
  • Sélectionnez Header
  • Terakhir klik Buat template
buat tajuk mengambang dan transparan dengan Elementor

Sejak saat itu, perpustakaan ditampilkan. Secara default, ini menampilkan blok header. Jelajahi template yang ditawarkan, lalu masukkan template yang Anda minati.

buat tajuk mengambang dan transparan dengan Elementor
buat tajuk mengambang dan transparan dengan Elementor

Template header akan terbuka di kanvas Elementor.

buat tajuk mengambang dan transparan dengan Elementor

Langkah 3: Sematkan tajuk dengan Elementor

Untuk menyematkan tajuk, ikuti langkah-langkah berikut:

  • Klik tombolnya Edit Bagian Tajuk
  • Kemudian pilih tab maju
  • kemudian Efek gerakan
buat tajuk mengambang dan transparan dengan Elementor
  • Tarik ke bawah menu Pin dan pilih nilainya Di atas, ini akan membekukan tajuk situs Anda saat pengunjung menggulir halaman ke bawah.
  • Secara default, header akan disematkan secara otomatis pada media seperti, desktop, tablet, dan seluler
buat tajuk mengambang dan transparan dengan Elementor

Jelajahi juga Elementor: Cara mengekspor dan mengimpor template

Langkah 4: Jadikan tajuk transparan dengan Elementor

Untuk mencapai ini, ulangi metode di bawah ini:

  • pergi ke gaya >> latar belakang >> pemilih warna
buat tajuk mengambang dan transparan dengan Elementor
  • Kemudian ubah opacity latar belakang
buat tajuk mengambang dan transparan dengan Elementor

Jika Anda ingin membuat tajuk benar-benar transparan, ubah jenis latar belakang dengan memilih jenisnya klasik. Oleh karena itu, menu navigasi tidak akan terlihat karena kontras warna teks (putih).

buat tajuk mengambang dan transparan dengan Elementor

Untuk memperbaiki situasi ini, lakukan hal berikut:

  • Berturut-turut klik Modify Menu of jelajahi >> gaya
  • Kemudian pada pemilih warna
  • Pilih warna yang diinginkan (dalam kasus kami, tidak perlu mengubahnya).
buat tajuk mengambang dan transparan dengan Elementor

Setelah selesai, Anda dapat mempublikasikan halaman web Anda. Namun sebelum itu, mari kita lihat bagaimana cara mengganti menu navigasi di template kita dengan yang sudah kita buat. Ingat bahwa nama yang diberikan untuk kami adalah menu tajuk (lihat langkah 1):

  • Pilih tab isi
  • Kemudian ubah menu dengan memilih nama header Anda
buat tajuk mengambang dan transparan dengan Elementor

Dan di sana Anda pergi :).

Kesimpulan

Header transparan dan mengambang dapat bermanfaat bagi Anda dalam beberapa kasus. Kami harap artikel ini dapat memenuhi kebutuhan Anda tentang cara membuat tajuk transparan dan mengambang dengan Elementor. Jika Anda memiliki masalah lain tentang topik ini, beri tahu kami di komentar.