Инструмент «Переместить элемент» позволяет нажать на любой элемент веб-страницы и физически перетащить его на новое место. Проверяйте варианты компоновки, прототипируйте изменения дизайна или визуально переставляйте контент — без единой строки кода. Изменения являются неразрушающими и сбрасываются при обновлении страницы.
Обсуждения дизайна часто сводятся к вопросам вроде «А что, если перенести эту кнопку выше сгиба?» или «Будет ли компоновка лучше, если сайдбар окажется справа?». Обычно ответ на эти вопросы требует редактирования кода, повторного развёртывания и предпросмотра. «Переместить элемент» избавляет от всего этого процесса. Просто нажмите на элемент, перетащите его и смотрите результат. Инструмент применяет изменения CSS-позиции к элементу в реальном времени, сохраняя его визуальный вид и позволяя свободно изменять положение. Направляющие выравнивания прилипают к другим элементам и краям страницы, помогая точно размещать объекты. Пунктирный контур отмечает исходное положение, чтобы вы всегда видели, откуда был перемещён элемент. Если результат вам не нравится, «Отмена» мгновенно восстанавливает его. Все изменения носят исключительно визуальный характер — они существуют только в памяти браузера и полностью исчезают при обновлении страницы. Фактические файлы HTML и CSS никогда не изменяются.
Нажмите на любой элемент страницы — кнопки, изображения, текстовые блоки, карточки, заголовки — и свободно перетащите его на новое место. Элемент плавно следует за курсором без задержек. Работает с элементами любого размера: от маленьких иконок до полноширинных секций.
По мере перетаскивания появляются пунктирные линии выравнивания, когда элемент совпадает с краями других элементов или центром страницы. Горизонтальные и вертикальные направляющие помогают размещать элементы в согласованной сетке без необходимости угадывать позиции на глаз.
Исходное положение элемента помечается пунктирным контуром («призраком»), чтобы вы всегда видели, где он находился до перемещения. Сравнивайте новое и исходное положения с первого взгляда.
Сделали перемещение, которое вас не устраивает? Нажмите «Отмена», чтобы мгновенно вернуть элемент на предыдущее место. Поддерживается несколько шагов отмены, что позволяет экспериментировать свободно и поэтапно откатывать изменения.
Переставляйте несколько элементов последовательно. Каждое перемещение независимо и может быть отменено. Создавайте полную перекомпоновку макета по одному элементу, оценивая накопленный эффект.
Все изменения существуют только в рендеринге браузера. Фактические файлы HTML, CSS и JavaScript страницы никогда не затрагиваются. Обновите страницу — и всё вернётся в исходное состояние. Безопасно использовать на любом сайте.
Интересно, будет ли кнопка призыва к действию эффективнее выше сгиба? Или раздел с отзывами лучше разместить перед таблицей цен? Перемещайте элементы, чтобы предварительно просматривать разные компоновки и принимать обоснованные решения ещё до внесения изменений в код.
Во время живой встречи с клиентом перетаскивайте элементы, чтобы в реальном времени исследовать варианты компоновки. Вопрос «Вы предпочтёте изображение-герой слева или справа?» превращается в наглядную демонстрацию, а не словесное обсуждение.
Переставляйте элементы существующей страницы, чтобы прототипировать новое направление дизайна. Комбинируйте «Редактор живого текста» для изменения содержимого и «Переместить элемент» для изменения позиций — создавайте визуальный прототип, не трогая код.
Если элементы неожиданно перекрываются, перетащите один из них в сторону, чтобы увидеть, что находится за ним. Зачастую это быстрее, чем изменять значения z-index в DevTools, когда нужно лишь быстро посмотреть, что скрывается под элементом.
Перемещайте визуальные элементы в соответствии с ожидаемым порядком обхода по клавише Tab. Если визуальная компоновка не совпадает с логическим порядком чтения, это выявляет потенциальную проблему доступности: навигация программы чтения с экрана и клавиатуры не будет соответствовать визуальному представлению.
Откройте плавающую панель DevSuite Pro и нажмите на иконку «Переместить элемент». Курсор изменится на иконку перемещения, что означает: инструмент активен и готов к выбору элементов.
Нажмите на элемент, который хотите переместить. Вокруг него появится фиолетовая подсветка — признак выделения. Пунктирный контур отметит его текущее положение.
Нажмите и удерживайте выбранный элемент, затем перетащите его в нужное место. По мере приближения к краям других элементов или центру страницы появляются направляющие выравнивания.
Отпустите мышь, чтобы поместить элемент на новое место. Сравните с пунктирным контуром. При необходимости воспользуйтесь «Отменой» или выберите другой элемент для продолжения перекомпоновки.
Завершив эксперименты, обновите страницу, чтобы вернуть все элементы в исходные положения. Все перемещения будут полностью сброшены.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
