KreatifTutorial

Cara membuat scrolling menu menggunakan HTML di elementor gratis

Untuk mempercantik tampilan website namun tanpa mengabaikan kebergunaan dapat dilakukan dengan berbagai cara, termasuk dengan membuat scrolling menu menggunakan HTML.

Membuat scrolling menu menggunakan HTML di elementor tidak sulit, cukup dengan beberapa langkah mudah ada dapat segera membuat scrolling menu di website anda. 

Pada postingan kali ini, Idemudah akan membuat tutorial step per step membuat scrolling menu menggunakan HTML di elementor, dan akan menggunakan elementor gratis.

Langkah – langkah membuat scrolling menu menggunakan HTML di elementor akan lebih ringkas dibanding tutorial Membuat custom sticky button di header menggunakan Elementor gratis dan Cara membuat Sticky Footer mengambang menggunakan Elementor.

Oke langsung saja kita mulai langkah – langkah membuat scrolling menu menggunakan HTML di elementor :

  • Pertama login ke wordpress sebagai admin
  • Kemudian laman yang akan di tambahkan scrolling menu ( sobat Idemudah bisa menempatkan scrolling menu di header, footer ataupun home page
  • Edit laman menggunakan elementor
  • setelah di elementor editor, tambahkan sebuah section untuk menambahkan widget yang akan kita jadikan scrolling menu
  • setelah berhasil membuat section, tambahkan widget HTML di section tersebut.
  • Copy kode HTML Berikut ke widget HTML
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.scrollmenu {
  background-color: #3264FF;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: whitesmoke;
  text-align: center;
  padding: 5px;
  margin-top: 5px
  margin-bottom: 5px;
  text-decoration: none;
  }
div.scrollmenu a:hover {
  background-color: #777;
}
</style>
</head>
<body>

<div class="scrollmenu">
  <a href="https://namadomain.com/menu/">nama menu</a>
  <a href="https://namadomain.com/menu/">nama menu</a>
  <a href="https://namadomain.com/menu/">nama menu</a>
  <a href="https://namadomain.com/menu/">nama menu</a>
  <a href="https://namadomain.com/menu/">nama menu</a>
  <a href="https://namadomain.com/menu/">nama menu</a>
  <a href="https://namadomain.com/menu/">nama menu</a>

  

</div>
  • Edit kode HTML scrolling menu pada bagian link href dengan link yang hendak arahkan dan ganti nama menu dengan nama yang sobat inginkan sebagai nama link.
  • Setelah selesai mengedit kode HTML scrolling menu, save kode HTML
  • Selesai, scrolling menu sobat Idemudah sudah dapat ditampilkan.

Tutorial membuat scrolling menu menggunakan HTML di elementor  ini sudah saya buat untuk mudah dipahami dan diimplementasikan bahkan untuk pemula.

Contoh implementasi dari scrolling menu menggunakan HTML ini dapat dilihat pada website Idemudah.com, serbahits.com, dan bursajasa.my.id

Semoga saja tutorial membuat scrolling menu menggunakan HTML di elementor gratis ini dapat bermanfaat bagi sobat Idemudah semua dalam mempercantik tampilan sekaligus menambah fungsi website wordpress nya.

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

Previous article

Landing Page / Template Elementor Gratis Khusus untuk Organisasi Masyarakat (Ormas)

Next article

You may also like

2 Comments

Leave a reply

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