SMP Negeri 1 Nanga Mahap

Membuat custom sticky button di header menggunakan Elementor gratis

Tutorial Membuat custom sticky button di header ini prinsip dasarnya masih serupa seperti tutorial membuat sticky footer mengambang menggunakan plugin Elementor gratis di website yang berbasis wordpress.

Membuat custom sticky button di header ini juga step per step implementasinya serupa seperti saat siswa mengimplementasikan Tutorial membuat sticky footer mengambang

Jadi bagi yang sudah berhasil mengimplementasikan Tutorial membuat sticky footer mengambang yang di posting oleh Idemudah sebelumnya, pasti tidak akan kesulitan untuk mengimplementasikan tutorial membuat custom sticky button di header ini.

Oke langsung saja kita mulai step per step tutorial membuat custom sticky button di header ini.

Step Pertama : Persiapan bahan

  1. Install dan aktifkan Plugin Elementor
  2. Install dan aktifkan Plugin Elementor – Header, Footer & Blocks

Setelah bahan – bahan membuat custom sticky button di header telah lengkap di install, saat nya untuk menuju ke Step kedua, yaitu membuat custom sticky button di header.

Step Kedua : membuat custom sticky button di header

  • Pertama pilih menu tampilan dan pilih Header, Footer & Block
  • Kemudian pilih buat baru / add New
  • Tambahkan judul, atribut pos pilih elementor canvas
  • Set type template ke header, display entire website dan ceklis Enable Layout for Elementor Canvas Template
  • kemudian klik edit elementor maka anda akan di bawa ke halaman editor elementor.
  • dihalaman elementor, sebelum anda mendesain header dan membuat custom sticky button di header, silakan buat dulu widget baru.
  • kemudian tambahkan elemen html dan isi dengan kode css sebagai berikut :

<style>

/*Menu*/
.header {
position: fixed;
top: 0;
left: 0;
width: 100%
}

</style>

  • setelah elemen HTML dibuat, silakan anda membuat elemen yang akan anda jadikan sebagai header dan custom sticky button di header tepat dibawah elemen HTML.
  • custom sticky button di header dapat anda buat dengan menambahkan widget button atau lainnya sesuai selera anda.
  • Header dapat anda buat sesuai selera anda, bisa berupa logo, menu, dll
  • Untuk posisi custom sticky button di header anda set di menu advance margin top 10px atau sesuka anda dan margin top widget header di set 60px
  • kemudian custom sticky button di header yang anda buat tersebut dimenu advance set z-index ke 999 dan CSS Classes diisi header
  • Selesai dan publish header dan custom sticky button di header anda.

Tutorial custom sticky button di header ini sudah saya usahakan untuk mudah dipahami dan diimplementasikan, namun apabila masih ada pertanyaan dapat berkomentar di kolom komentar.

Contoh implementasi dari custom sticky button di header ini dapat dilihat pada website subdomain template.idemudah.com.

Semoga saja tutorial membuat custom sticky button di header menggunakan Elementor gratis ini dapat bermanfaat bagi siswa semua dalam mempercantik tampilan website wordpress.

Tampilan Custom Sticky button di header

Sumber : Idemudah.com

Link sumber Asli : Membuat custom sticky button di header menggunakan Elementor gratis

Tinggalkan komentar