Rahasia Pekku: Menambahkan Efek Hover pada Website

Dalam pembuatan website, desain dan animasi menjadi salah satu faktor yang mempengaruhi sebuah website terlihat menarik. Dengan menambahkan animasi website Anda akan tampak lebih interaktif. Salah satu efek animasi yang harus kamu aplikasikan adalah efek hover.

Efek hover telah menjadi elemen yang selalu ada pada website manapun, dikarenakan sifatnya yang interaktif sehingga mengundang pengunjung website Anda untuk melakukan sebuah aksi. Ketika pengunjung Anda tertarik dan menghabiskan waktu cukup lama di website Anda, kemungkinan untuk melihat ke halaman lain akan lebih besar, yang berarti kemungkinan untuk membeli (apabila Anda menawarkan produk) akan lebih besar pula.

Tampilan tanpa efek hover

Tampilan dengan efek hover


Sebagai contoh, gambar di atas menggunakan efek hover sehingga tampak lebih menarik saat pengunjung menjelajahi website Anda. Jangan khawatir, Anda dapat dengan mudah menambahkan efek hover melalui editor Pekku. Berikut langkah-langkah menambahkan efek hover pada editor Pekku:

Melalui editor masuk ke menu Desain > Gambar untuk menambahkan gambar yang Anda inginkan.

blog-12-e

 

Untuk memberikan efek hover, gunakan Properties > Background Hover > dan pilih gambar hover yang Anda inginkan. Akan muncul animasi hover ketika Anda mengarahkan mouse Anda ke gambar yang telah Anda ubah.

Mengubah properties background hover


Lihat? Anda sudah berhasil memberikan efek hover ke website Anda. Jangan lupa untuk memvariasikan efek hover Anda dengan bermain gambar, bentuk, warna, posisi dan elemen lainnya untuk menghasilkan sebuah animasi yang halus dan menarik.

Apabila gambar pada website Anda dimaksudkan sebagai tombol, Anda dapat memberi link pada gambar Anda melalui Properties > Link dan pilih atau masukkan link yang Anda tuju.
Menambahkan link

Mudah bukan? Yuk percantik websitemu sekarang!

Mengenai penulis

Tim Pekku

Kami adalah sekumpulan orang muda kreatif yang suka berbagi tips-tips seputar bisnis & web design.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Copyright © 2014. PEKKU Instant Website.