KreatifTutorial

Cara membuat Sticky Footer mengambang menggunakan Elementor.

Pada postingan ini Idemudah akan membuat post tentang cara mudah atau tutorial membuat sticky footer mengambang menggunakan plugin Elementor di website yang berbasis wordpress.

Tutorial membuat sticky footer mengambang ini, Idemudah buat bertujuan untuk sekedar berbagi kepada rekan rekan pengguna wordpress dalam mempercantik tampilan websitenya.

InsyaAllah tutorial membuat sticky footer mengambang ini, akan Idemudah buat semudah mungkin untuk dipahami dan diikuti langkah – langkahnya.

Oke langsung saja kita memulai langkah – langkah tutorial membuat sticky footer mengambang di website wordpress menggunakan elementor.

Langkah Pertama : Persiapan bahan

  1. Siapkan Website wordpressnya (Wajib)
  2. Install dan aktifkan Plugin Elementor
  3. Install dan aktifkan Plugin Elementor – Header, Footer & Blocks

Setelah bahan – bahan membuat sticky footer mengambang telah lengkap di install, saat nya untuk menuju ke langkah kedua, yaitu membuat sticky footer mengambang.

Langkah Kedua : Membuat sticky footer mengambang

  • 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 footer, 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 footer anda, silakan buat dulu widget baru dan ke menu advance strukturnya set margin bootom 10px.
  • kemudian tambahkan elemen html dan isi dengan kode css sebagai berikut :

<style>

/*Menu*/
.menu_utama {
position: fixed;
bottom: 0;
left: 0;
width: 100%
}

</style>

  • setelah elemen HTML dibuat, silakan anda membuat elemen yang akan anda jadikan sebagai sticky footer mengambang tepat dibawah elemen HTML.
  • kemudian sticky footer mengambang yang anda buat tersebut dimenu advance set z-index ke 999 dan CSS Classes diisi menu_utama
  • Selesai dan publish sticky footer mengambang anda.

Nah, cukup ringkas dan mudah kan membuat sticky footer mengambang untuk mempercantik website atau blog berbasis wordpress anda menggunakan plugin elementor.

Beberapa contoh implementasi dari sticky footer mengambang ini dapat dilihat pada website mabmsekadau.or.id, pomsekadau.or.id, dan web smpn1nangamahap.sch.id.

Semoga saja tutorial membuat sticky footer mengambang ini dapat bermanfaat bagi sobat Idemudah semua.

credit : sahabat belajar

Situs Bursajasa.my.id tempat memasarkan layanan jasa terbaik dan gratis.

Previous article

Membuat custom sticky button di header menggunakan Elementor gratis

Next article

You may also like

Comments

Leave a reply

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