Klik elemen apa pun dan seret ke posisi baru tanpa kode.
Klik elemen apa pun dan seret ke posisi baru tanpa kode. Alat ini memungkinkan Anda melakukan eksperimen tata letak secara visual dan instan langsung di browser.
Klik elemen apa pun di halaman — tombol, gambar, blok teks, kartu, header — dan seret secara bebas ke posisi baru. Elemen mengikuti kursor Anda dengan mulus tanpa jeda. Berfungsi untuk elemen ukuran apa pun, dari ikon kecil hingga bagian selebar halaman.
Saat Anda menyeret, garis pandu putus-putus akan muncul ketika elemen sejajar dengan tepi elemen lain atau pusat halaman. Panduan horizontal dan vertikal membantu Anda menempatkan elemen pada grid yang konsisten tanpa perlu mengira-ngira.
Posisi asli elemen ditandai dengan garis putus-putus "bayangan" sehingga Anda selalu bisa melihat di mana elemen tersebut berada sebelum dipindahkan. Bandingkan posisi baru dengan posisi asli dalam sekejap.
Melakukan pemindahan yang tidak Anda sukai? Klik Urungkan untuk langsung mengembalikan elemen ke posisi sebelumnya. Mendukung beberapa langkah urungkan sehingga Anda dapat bereksperimen dengan bebas.
Atur ulang beberapa elemen secara berurutan. Setiap pemindahan bersifat independen dan dapat dibatalkan. Susun pengaturan ulang tata letak yang lengkap elemen demi elemen untuk melihat efek kumulatifnya.
Semua perubahan hanya ada di rendering browser. File asli HTML, CSS, dan JavaScript halaman tidak pernah disentuh. Refresh halaman dan semuanya kembali ke keadaan semula. Aman digunakan di situs web mana pun.
Ingin tahu apakah tombol CTA akan berkinerja lebih baik di bagian atas halaman? Atau apakah bagian testimoni harus diletakkan sebelum tabel harga? Pindahkan elemen untuk melihat pratinjau tata letak yang berbeda sebelum memutuskan perubahan kode.
Selama panggilan langsung dengan klien, seret elemen untuk menjelajahi opsi tata letak secara real-time. Pertanyaan seperti "Apakah Anda lebih suka gambar hero di kiri atau kanan?" menjadi demonstrasi langsung, bukan sekadar diskusi verbal.
Atur ulang elemen halaman yang sudah ada untuk membuat prototipe desain baru. Gabungkan dengan Editor Teks Langsung untuk mengubah konten dan Pindahkan Elemen untuk mengubah posisi — menciptakan prototipe visual tanpa menyentuh kode sama sekali.
Jika elemen tumpang tindih secara tidak terduga, seret salah satu elemen untuk melihat apa yang ada di belakangnya. Ini seringkali lebih cepat daripada mengubah nilai z-index di DevTools saat Anda hanya butuh melihat sekilas apa yang ada di bawahnya.
Pindahkan elemen visual untuk menyesuaikan dengan urutan tab yang diharapkan. Jika tata letak visual tidak sesuai dengan urutan baca logis, hal itu mengungkapkan potensi masalah aksesibilitas di mana pembaca layar dan navigasi keyboard tidak akan sesuai dengan presentasi visual.
Buka dok mengambang DevSuite Pro dan klik ikon Pindahkan Elemen. Kursor akan berubah menjadi ikon pindah, menandakan alat telah aktif dan siap memilih elemen.
Klik elemen yang ingin Anda pindahkan. Elemen tersebut akan mendapatkan garis tepi ungu yang menunjukkan bahwa ia terpilih. Garis bayangan akan menandai posisi saat ini.
Klik dan tahan elemen yang dipilih, lalu seret ke lokasi yang diinginkan. Panduan perataan akan muncul saat Anda mendekati tepi elemen lain atau pusat halaman.
Lepaskan mouse untuk menempatkan elemen di posisi barunya. Bandingkan dengan garis bayangan posisi asli. Gunakan Urungkan jika perlu, atau pilih elemen lain untuk lanjut mengatur ulang.
Setelah selesai bereksperimen, refresh halaman untuk mengembalikan semua elemen ke posisi aslinya. Semua jejak pemindahan akan dihapus sepenuhnya.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
