Mou l'element et permet fer clic en qualsevol element d'una pàgina web i arrossegar-lo físicament a una nova posició. Prova alternatives de disseny, prototipa canvis en el disseny o reorganitza el contingut visualment — tot sense escriure ni una sola línia de codi. Els canvis no són destructius i es restableixen en refrescar la pàgina.
Les discussions de disseny sovint inclouen preguntes com "I si movguéssim aquest botó a la part superior?" o "Es veuria millor el disseny amb la barra lateral a la dreta?". Normalment, respondre a aquestes preguntes requereix editar codi, tornar a desplegar i previsualitzar. Mou l'element escurça tot aquest procés. Només has de fer clic a l'element, arrossegar-lo i veure-ho. L'eina aplica canvis de posició CSS a l'element en temps real, mantenint la seva aparença visual mentre permet reposicionar-lo lliurement. Les guies d'alineació s'ajusten a altres elements i a les vores de la pàgina, ajudant-te a col·locar les coses amb precisió. Un contorn fantasma marca la posició original perquè sempre puguis veure d'on venia l'element. I si no t'agrada el resultat, l'opció de desfer el restableix a l'instant. Tots els canvis són purament visuals — viuen a la memòria del navegador i desapareixen completament en refrescar la pàgina. Els fitxers HTML i CSS reals no es modifiquen mai.
Fes clic en qualsevol element de la pàgina — botons, imatges, blocs de text, targetes, capçaleres — i arrossega'l lliurement a una nova posició. L'element segueix el cursor suaument i sense retard. Funciona amb elements de qualsevol mida, des de petites icones fins a seccions d'amplada completa.
Mentre arrossegues, apareixen línies d'alineació discontínues quan l'element s'alinea amb les vores d'altres elements o amb el centre de la pàgina. Les guies horitzontals i verticals t'ajuden a col·locar els elements en una quadrícula coherent sense haver d'ajustar la posició a ull.
La posició original de l'element es marca amb un contorn "fantasma" de punts perquè sempre puguis veure on era abans de moure'l. Compara la nova posició amb l'original d'un cop d'ull.
Has fet un moviment que no t'agrada? Clica a Desfer per tornar l'element a la seva posició anterior a l'instant. Admet múltiples passos de desfer perquè puguis experimentar lliurement i retrocedir en els canvis.
Reorganitza diversos elements en seqüència. Cada moviment és independent i es pot desfer. Crea una reorganització completa del disseny d'element en element, previsualitzant l'efecte acumulat.
Tots els canvis només existeixen en la renderització del navegador. Els fitxers reals de la pàgina HTML, CSS i JavaScript no es toquen mai. Refresca la pàgina i tot tornarà al seu estat original. Segur per utilitzar en qualsevol lloc web.
Et preguntes si el botó de crida a l'acció (CTA) funcionaria millor a la part superior? O si la secció de testimonis hauria d'anar abans que la taula de preus? Mou els elements per previsualitzar diferents dissenys i prendre decisions informades abans de fer canvis al codi.
Durant una trucada en directe amb un client, arrossega els elements per explorar opcions de disseny en temps real. "Preferiríeu la imatge principal a l'esquerra o a la dreta?" es converteix en una demostració en viu en lloc d'una discussió verbal.
Reorganitza els elements d'una pàgina existent per prototipar una nova direcció de disseny. Combina l'Editor de text en viu per canviar el contingut i Mou l'element per canviar les posicions — creant un prototip visual sense tocar el codi.
Si els elements se superposen inesperadament, arrossega'n un per veure què hi ha al darrere. Sovint és més ràpida que canviar els valors d'index-z a les DevTools quan només necessites un cop d'ull ràpid al que hi ha a sota.
Mou els elements visuals per fer-los coincidir amb l'ordre de tabulació esperat. Si el disseny visual no coincideix amb l'ordre de lectura lògic, revela un possible problema d'accessibilitat on el lector de pantalla i la navegació amb el teclat no coincidiran amb la presentació visual.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona de Mou l'element. El cursor canviaria a una icona de moviment, indicant que l'eina està activa i a punt per seleccionar elements.
Fes clic a l'element que vols moure. Apareixerà una vora porpra ressaltada que indica que està seleccionat. Un contorn fantasma marca la seva posició actual.
Mantén premut l'element seleccionat i arrossega'l a la ubicació desitjada. Les guies d'alineació apareixen a mesura que t'apropes a les vores d'altres elements o al centre de la pàgina.
Deixa anar el ratolí per deixar l'element a la seva nova posició. Compara-ho amb el contorn fantasma. Utilitza Desfer si cal, o selecciona un altre element per continuar reorganitzant.
Quan hagis acabat d'experimentar, refresca la pàgina per restaurar tots els elements a les seves posicions originals. Tots els moviments s'esborraran completament.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
