Cara Membuat Popover Dinamis (Menu Mengambang) Di Divi Dengan Popper.js

Pernahkah Anda mendengar tentang perpustakaan bernama popper.js ? Pustaka ini memungkinkan Anda membuat popover di JavaScript. Menggunakan popover cukup umum akhir-akhir ini terutama karena membantu menampilkan informasi lebih lanjut mengenai elemen tertentu (tombol, tautan, dll). Alasan untuk mempertimbangkan popover dinamis terutama untuk memastikannya ditampilkan di tempat yang tepat mengenai posisi subjek di layar. Konkretnya, jika subjeknya adalah bagian bawah layar, popover akan muncul di bagian atas. Jika terletak di bagian atas layar, popover akan ditampilkan di bagian bawah, dll.

Dalam tutorial ini, kita akan memanfaatkan kekuatan Popper.js di Divi untuk membuat popover dinamis (menu mengambang) ketika sebuah tombol diklik. Ini akan memungkinkan siapa saja membuat popover dengan elemen Divi, untuk menampilkan konten apa pun setelah mengklik tombol. Kami juga akan memastikan popover dinamis, karena akan menyesuaikan posisinya untuk mempertahankan visibilitas paling ideal saat pengguna berinteraksi halamanmu.

Berikut adalah ilustrasi penempatan popovers tersebut…

Untuk mencapai ini, kita memerlukan beberapa CSS dan JavaScript khusus. Tapi kita masih bisa mengandalkan kemampuan desain yang kuat dari Divi Builder untuk membuat popover menggunakan elemen Divi apa pun.

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang

Mari kita mulai!

Pratinjau Menu Mengambang

Berikut adalah tampilan cepat menu mengambang yang akan kita desain dalam tutorial ini. Anda dapat melihat bagaimana posisi menu mengambang berubah secara dinamis saat pengguna menggulir atau mengubah ukuran browser. Jangan lewatkan juga panah kecil yang juga diposisikan untuk secara dinamis menunjuk ke referensinya (atau dalam hal ini tombol).

Membuat Popover dengan Popper.js Di Divi

Seperti yang kami katakan sebelumnya, kami akan menggunakan popper.js di Divi untuk membuat popover yang diposisikan secara dinamis, yang muncul saat mengklik subjek (tombol) popover. Dengan Divi, kita dapat dengan mudah membuat menu dan tombol mengambang. Kemudian nanti kita akan menambahkan kode yang diperlukan untuk membuat keduanya bekerja secara harmonis.

Bagian

Jadi kita akan mulai dengan menambahkan ID pelanggan ke bagian reguler yang sudah siap secara default. Buka pengaturan bagian dan tambahkan ID berikut:

• ID CSS: bagian popper

Buat Popper Popover dengan Divi Row

Selanjutnya, kita akan menambahkan baris satu kolom ke bagian tersebut. Baris ini akan menjadi elemen popover Popper kami yang muncul saat mengklik tombol.

Buka pengaturan baris dan perbarui gaya sebagai berikut:

• Warna Latar Belakang: #333333

• Lebar Talang: 2
• Lebar: 100%
• Lebar Maks: 500px
• Padding: 0px atas, 0px bawah, 0px kiri, 0px kanan
• Sudut Bulat: 10px

Karena baris ini akan menjadi elemen popper popover kita, kita perlu menambahkan ID CSS untuk berfungsi sebagai pemilih dalam kode kita. Kita juga perlu memastikan visibilitas tetap pada overflow (tersembunyi oleh sudut membulat).

Buka tab lanjutan dan perbarui yang berikut:

• ID CSS: popper-popup
• Luapan Horisontal: terlihat
• Overflow Vertikal: terlihat

Mari Tambahkan Konten ke Popover Row

Kita dapat menambahkan modul apa pun yang kita inginkan ke baris kita untuk mengisi menu mengambang dengan konten apa pun yang kita inginkan. Untuk contoh ini, kita akan menambahkan beberapa tombol ke baris yang berfungsi sebagai menu kustom yang muncul di dalam popover.

Untuk memulai, tambahkan modul tombol ke kolom baris.

Sekarang mari tambahkan beberapa gaya ke tombol kita. Kami akan memperbarui pengaturan tombol sebagai berikut:

• Penjajaran Tombol: tengah
• Gunakan Gaya Kustom untuk Tombol: YA
• Lebar Perbatasan Tombol: 1px
• Warna Perbatasan Tombol: #555555
• Radius Perbatasan Tombol: 10px
• Ikon Tombol: lihat tangkapan layar
• Margin: 20px atas, 20px bawah, 20px kiri, 20px kanan
• Padding: 0.5em atas, 0.5em bawah, 2em kiri, 2em kanan

Penting: Kami menggunakan margin pada modul untuk membuat spasi daripada menggunakan celah baris karena kami akan menambahkan panah (menggunakan pembagi) yang perlu diposisikan di tepi baris (dengan posisi absolut). Setiap baris atau kolom padding akan mendorong panah menjauh dari tepi.

Sekarang, kita perlu menambahkan potongan CSS khusus berikut ke Elemen Utama untuk membuat tombol menjangkau lebar penuh kolom/baris:

display: block !important

Anda sekarang dapat menduplikasi tombol dua (atau lebih) kali untuk menambahkan beberapa tombol lagi ke menu popover kami.

Membuat Panah Popover

Popper.js mendukung posisi panah bersama dengan popover. Untuk membuat panah, tambahkan pembagi baru di bawah tombol terakhir di baris kita.

Dalam pengaturan pembagi, pilih untuk tidak menampilkan pembagi. Kemudian, di bawah tab lanjutan, tambahkan ID CSS berikut:

• ID CSS: popper-panah

Kami akan menggunakan CSS eksternal khusus untuk menata dan memposisikan panah nanti.

Membuat Tombol Popover (atau Referensi)

Dua elemen kunci dari popper popover termasuk elemen popover (atau popper) dan subjek yang dilampirkan popover itu sendiri. Anda dapat menggunakan elemen Divi apa pun sebagai referensi yang menghasilkan popover, tetapi untuk contoh ini, kita akan menggunakan tombol.

Membuat Subjek Untuk Popper : Tombol

Sebelum kita membuat tombol kita, kita perlu menambahkan baris satu kolom baru di bawah baris popover kita.

Kemudian tambahkan modul tombol baru ke baris.

Perbarui pengaturan tombol dengan beberapa gaya dasar sebagai berikut:

• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #a043e8
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 10px

Selanjutnya, tambahkan ID CSS yang diperlukan yang akan memungkinkan kita untuk menargetkan dan menggunakan tombol sebagai referensi popover kita nanti:

• ID CSS: tombol popper

Ayo Tambahkan Kodenya

Sekarang setelah popover dan tombol kita selesai, kita siap untuk menambahkan kode untuk membuat keajaiban terjadi.

Untuk melakukan ini, tambahkan modul kode di bawah modul tombol referensi di baris kedua.

Penting bahwa kode ada di bagian bawah halaman agar bisa berfungsi.

Pertama, kita akan menambahkan CSS.

Di kotak konten kode, tambahkan tag gaya yang diperlukan untuk membungkus CSS dalam HTML. Kemudian salin dan tempel CSS berikut di antara tag gaya:

/*hide and show popup styling*/ #popper-popup {display: none;}#popper-popup[data-popper-reference-hidden] {visibility: hidden;pointer-events: none;}#popper-popup[show-popper] {display: block;z-index: 9999;} /*keep popper visible in the Divi Builder for editing*/ #et-fb-app #popper-popup {display: block;}   /*build the arrow targeting the divider with class 'popper-arrow'*/ #popper-arrow,#popper-arrow::before {position: absolute;width: 8px;height: 8px;background: #333333;}#popper-arrow {visibility: hidden;}#popper-arrow::before {visibility: visible;content: "";transform: rotate(45deg);} /*position arrow using popper.js data-popper-placement attribute*/ #popper-popup[data-popper-placement^="top"] #popper-arrow {bottom: -4px;} #popper-popup[data-popper-placement^="bottom"] #popper-arrow {top: -4px;} #popper-popup[data-popper-placement^="left"] #popper-arrow {right: -4px;} #popper-popup[data-popper-placement^="right"] #popper-arrow {left: -4px;} /*hide arrow when reference outside of viewport*/#popper-popup[data-popper-reference-hidden] #popper-arrow::before {visibility: hidden;}

Selanjutnya, kita perlu mengakses perpustakaan popper.js dengan menambahkan skrip yang mengimpor Popper.js dari CDN mereka (https://unpkg.com/@popperjs/core@2). Di bawah tag gaya akhir, rekatkan skrip berikut ke dalam kotak kode.

Gunakan src berikut dalam tag skrip untuk mengimpor perpustakaan:

src="https://unpkg.com/@popperjs/core@2"

Seharusnya terlihat seperti ini:

Sekarang kita akan mengimpor Popper.js sebelum menambahkan kode yang akan menggunakannya. Jadi, setelah script menunjuk ke Popper.js, tambahkan tag script yang diperlukan untuk membungkus Javascript yang perlu kita tambahkan. Kemudian rekatkan Javascript berikut di antara tag skrip.

const popperButton = document.querySelector("#popper-button");const popperPopup = document.querySelector("#popper-popup");const popperSection = document.querySelector("#popper-section");const popperArrow = document.querySelector("#popper-arrow"); let popperInstance = null; //create popper instancefunction createInstance() {popperInstance = Popper.createPopper(popperButton, popperPopup, {placement: "auto",//preferred placement of poppermodifiers: [{name: "offset",//offsets popper from the reference/buttonoptions: {offset: [0, 8],},},{name: "flip",//flips popper with allowed placementsoptions: {allowedAutoPlacements: ["right", "left", "top", "bottom"],rootBoundary: "viewport",},},],});} //destroy popper instancefunction destroyInstance() { if (popperInstance) {popperInstance.destroy();popperInstance = null;}} //show and create popperfunction showPopper() {popperPopup.setAttribute("show-popper", "");popperArrow.setAttribute("data-popper-arrow", "");createInstance();} //hide and destroy popper instancefunction hidePopper() {popperPopup.removeAttribute("show-popper");popperArrow.removeAttribute("data-popper-arrow");destroyInstance();} //toggle show-popper attribute on popper to hide or show it with CSS function togglePopper() {if (popperPopup.hasAttribute("show-popper")) {hidePopper();} else {showPopper();}}//execute togglePopper function when clicking the popper reference/buttonpopperButton.addEventListener("click", function (e) {e.preventDefault();togglePopper();});

Itu saja! Kita semua sudah selesai. Sekarang mari kita periksa hasil akhirnya.

Mempratinjau Hasil Akhir

Untuk melihat hasil dari tutorial ini, kita perlu membuat beberapa ruang gulir untuk menguji keajaiban pemosisian popper popover.

Untuk melakukannya, buka pengaturan bagian dan tambahkan beberapa margin sebagai berikut:

• Margin: 80vh atas, 80vh bawah

Berikut adalah tampilan fungsinya:

Perhatikan bagaimana posisi popover (dan panah) berubah secara dinamis saat pengguna menggulir atau mengubah ukuran browser.

Meringkas

Jika Anda ingin membuat popover menggunakan popper.js di Divi, Anda harus mengandalkan sedikit Javascript, tetapi hasilnya sepadan. Pemosisian dinamis popover adalah komponen UI hebat yang akan menguntungkan situs web mana pun. Apa pendapatmu tentang itu? Apakah Anda sudah mencoba? Beritahu kami.