Pengepala kedai selalunya memaparkan satu baris teks promosi (had penghantaran percuma, jualan, notis penghantaran) dan ia hampir sentiasa statik, bermaksud setiap mesej baharu memerlukan seseorang menyunting kod atau menggantikan keseluruhan widget teks, bukan sekadar menambah satu baris.
Mengapa widget teks tidak mencukupi
Widget teks standard Elementor boleh memaparkan satu mesej, sekali, di ruang tetap. Memaparkan beberapa mesej bergilir bermaksud sama ada membina slider JavaScript dari awal dalam halaman, atau lebih baik, membungkus semuanya sebagai widget Elementor sebenar yang boleh diguna semula, yang boleh digunakan pemilik laman di mana-mana dan dikonfigurasi sepenuhnya melalui antara muka Elementor.
Widget itu
Kami membina Firefly Marquee Bar sebagai widget Elementor asli dengan kawalan tab Kandungan dan Gaya sendiri, didaftarkan dengan cara yang sama seperti widget terbina dalam Elementor:
- Senarai mesej berulang, setiap satu boleh dipautkan ke URL secara pilihan.
- Arah dan kelajuan tatal yang boleh dikonfigurasi, serta togol jeda apabila tetikus berada di atasnya.
- Kawalan penuh warna, saiz fon, jarak huruf dan ketebalan fon dalam tab Gaya: tiada pengetahuan CSS diperlukan untuk menukar gayanya.
Teknik gelung tanpa sambungan
Pergerakan itu sendiri ialah animasi CSS tulen, bukan JavaScript: senarai mesej penuh dipaparkan dua kali berturut-turut dalam bekas flex, dan keseluruhan trek dianimasikan melalui translateX dari 0% hingga tepat -50%. Oleh sebab salinan kedua sama dengan yang pertama, saat animasi kembali ke 0% tidak dapat dibezakan secara visual daripada pertengahan gelung, menghasilkan tatalan tanpa henti dan tanpa sambungan tanpa mengira jumlah teks, tanpa logik masa JavaScript yang boleh tersilap.
Pengajaran utama
- Apabila pelanggan perlu mengulangi corak penyesuaian, membinanya sebagai widget sebenar yang boleh diguna semula lebih baik daripada godaman sekali guna di peringkat halaman, walaupun kegunaan segeranya hanya satu pengepala.
- Teknik kandungan berganda dengan anjakan 50% menghasilkan gelung marquee CSS yang lancar tanpa JavaScript, dan tanpa pepijat masa di sempadan gelung.
- Mendedahkan kawalan gaya (warna, kelajuan, jarak) melalui tab Gaya pembina itu sendiri ialah apa yang benar-benar menjadikan widget “boleh disunting oleh pelanggan”, bukan sekadar “dibina untuk pelanggan”.
Bacaan berkaitan: kerja reka bentuk UI dan UX kami, perkhidmatan pembangunan WordPress kami.
Menghadapi had yang serupa dalam panel WooCommerce atau WordPress anda sendiri? Mari berbincang: ArtinTech Solution membina alat kedai tersuai seperti ini.