KreatifTutorial

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 adalah bertujuan untuk menambahkan fungsi button yang bisa memudahkan navigasi di website dan mempercantik navigasi pada website.

Tutorial Membuat custom sticky button di header ini step per step implementasinya serupa seperti pada 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.

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

Cara membuat Sticky Footer mengambang menggunakan Elementor.

Previous article

Landing Page SSCMS V.1 Template Elementor Gratis untuk sekolah.

Next article

You may also like

2 Comments

  1. Ok, dicoba dulu. Thanks

  2. Sanggat Membantu, makasih mas. Terus semangat.

Leave a reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *