Bagaimana membuat sebuah tombol popup untuk preview responsive-nya sebuah website/template? Hal ini banyak ditanyakan dan dicari oleh sebagian besar freelancer atau agency yang bergerak dibidang web development baik itu fullstack maupun no code. Sebelum lebih jauh membahasnya, karena saya disini menggunakannya pada no-code yaitu WordPress dan Elementor, jadi saya hanya fokus berbicara pada hal tersebut.

Untuk yang masih belum mengetahui secara jelas apa yang dimaksud, bisa lihat video dibawah ini :

Teknik ini sebenarnya hanya sebuah iframe terhadap link tertentu yang diolah sedemikian rupa agar hasilnya lebih baik dan menarik. Cocok sekali sebagai showcase terhadap karya atau portfolio. Dan meningkatkan pengalaman user dalam menjelajah karya anda. Mereka tidak perlu berpindah ke halaman lain untuk melihatnya tetapi cukup pada current halaman.

Disini saya menerapkan trigger pada link untuk preview responviseness sehingga masih bisa menggunakan widget button pada Elementor. Secara sederhana saya menambahkan kode HTML pada halaman (single page) lalu pada button preview untuk link-nya saya tambahkan trigger #showcase.

Lebih jelasnya bisa melihat pada video berikut ini :

Untuk yang ingin mendapatkan kode HTMLnya bisa copy dari github melalui link berikut ini dan untuk pengembangannya silahkan berkarya dan siap untuk berdiskusi.