Przesuń element pozwala kliknąć dowolny element na stronie i fizycznie przeciągnąć go w nową pozycję. Testuj alternatywy układu, prototypuj zmiany projektowe lub przestawiaj zawartość wizualnie — wszystko bez pisania ani jednej linii kodu. Zmiany są nieniszczące i resetują się po odświeżeniu strony.
Dyskusje projektowe często dotyczą pytań typu "A gdyby przenieść ten przycisk nad linię zgięcia?" lub "Czy układ wyglądałby lepiej z paskiem bocznym po prawej?". Zwykle odpowiedź na te pytania wymaga edycji kodu, ponownego wdrożenia i podglądu. Przesuń element omija ten cały proces. Po prostu kliknij element, przeciągnij go i zobacz. Narzędzie stosuje zmiany pozycji CSS do elementu w czasie rzeczywistym, zachowując jego wygląd wizualny, jednocześnie pozwalając na swobodną zmianę pozycji. Linie wyrównujące przyciągają do innych elementów i krawędzi strony, pomagając precyzyjnie umieszczać rzeczy. Zarys widma oznacza oryginalną pozycję, więc zawsze widzisz, skąd pochodzi element. A jeśli nie podoba ci się wynik, cofnij przywraca go natychmiast. Wszystkie zmiany są czysto wizualne — żyją w pamięci przeglądarki i całkowicie znikają po odświeżeniu strony. Rzeczywiste pliki HTML i CSS nigdy nie są modyfikowane.
Kliknij dowolny element na stronie — przyciski, obrazy, bloki tekstu, karty, nagłówki — i przeciągnij go swobodnie w nową pozycję. Element podąża za kursorem płynnie, bez opóźnień. Działa z elementami dowolnego rozmiaru, od małych ikon po sekcje o pełnej szerokości.
Podczas przeciągania pojawiają się kropkowane linie wyrównania, gdy element wyrównuje się z krawędziami innych elementów lub środkiem strony. Linie poziome i pionowe pomagają umieszczać elementy na spójnej siatce bez szacowania pozycji.
Oryginalna pozycja elementu jest oznaczona kropkowanym zarysem "widmem", więc zawsze widzisz, gdzie był przed przeniesieniem. Porównaj nową pozycję z oryginalną jednym spojrzeniem.
Zrobiłeś przesunięcie, które ci się nie podoba? Kliknij Cofnij, aby natychmiast wrócić element do poprzedniej pozycji. Obsługuje wiele kroków cofnij, dzięki czemu możesz swobodnie eksperymentować i cofać się przez zmiany.
Przestawiaj kilka elementów w kolejności. Każde przesunięcie jest niezależne i możliwe do cofnięcia. Buduj kompletne przearanżowanie układu jeden element na raz, podglądając skumulowany efekt.
Wszystkie zmiany istnieją tylko w renderowaniu przeglądarki. Rzeczywiste pliki HTML, CSS i JavaScript strony nigdy nie są dotykane. Odśwież stronę, a wszystko wraca do pierwotnego stanu. Bezpieczne w użyciu na dowolnej stronie.
Zastanawiasz się, czy przycisk CTA działałby lepiej nad linią zgięcia? Lub czy sekcja z opiniami powinna pojawić się przed tabelą cen? Przesuwaj elementy, aby podejrzeć różne układy i podejmować świadome decyzje przed wprowadzeniem zmian w kodzie.
Podczas rozmowy na żywo z klientem przeciągaj elementy, aby eksplorować opcje układu w czasie rzeczywistym. "Czy wolisz obraz hero po lewej czy po prawej?" staje się demonstracją na żywo zamiast dyskusją werbalną.
Przestawiaj elementy istniejącej strony, aby prototypować nowy kierunek projektowy. Połącz z Edytorem tekstu na żywo, aby zmienić zawartość, i Przesuń element, aby zmienić pozycje — tworząc wizualny prototyp bez dotykania kodu.
Jeśli elementy nieoczekiwanie się nakładają, przeciągnij jeden z drogi, aby zobaczyć, co jest za nim. Jest to często szybsze niż zmienianie wartości z-index w DevTools, gdy potrzebujesz tylko szybkiego spojrzenia na to, co jest pod spodem.
Przesuń elementy wizualne, aby dopasować je do oczekiwanej kolejności tabulacji. Jeśli układ wizualny nie odpowiada logicznej kolejności czytania, ujawnia potencjalny problem z dostępnością, gdzie czytnik ekranu i nawigacja klawiaturą nie będą pasować do prezentacji wizualnej.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Przesuń element. Kursor zmienia się w ikonę przesuwania, wskazując, że narzędzie jest aktywne i gotowe do wybierania elementów.
Kliknij element, który chcesz przesunąć. Otrzymuje fioletową podświetloną ramkę, pokazującą, że jest wybrany. Zarys widma oznacza jego obecną pozycję.
Kliknij i przytrzymaj wybrany element, a następnie przeciągnij go w pożądane miejsce. Linie wyrównujące pojawiają się, gdy zbliżasz się do krawędzi innych elementów lub środka strony.
Zwolnij mysz, aby upuścić element w nowej pozycji. Porównaj z zarysem widma. Użyj Cofnij, jeśli to konieczne, lub wybierz inny element, aby kontynuować przestawianie.
Po zakończeniu eksperymentów odśwież stronę, aby przywrócić wszystkie elementy do ich oryginalnych pozycji. Wszystkie przesunięcia są całkowicie wymazane.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
