SMP Negeri 1 Nanga Mahap

Cara membuat Sticky Footer mengambang menggunakan Elementor

Pada postingan ini 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, bertujuan untuk sekedar berbagi kepada pengguna wordpress dalam mempercantik tampilan websitenya.

Tutorial membuat sticky footer mengambang ini, dibuat langkah – langkahnya 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.idsmpn1nangamahap.sch.id, dan kapuashost.com.

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

Sumber : Idemudah.com

Link Artikel Asli : Cara membuat Sticky Footer mengambang menggunakan Elementor.

Tinggalkan komentar