Инструментът за преместване на елементи ви позволява да кликнете върху който и да е елемент на уебстраницата и физически да го плъзнете на нова позиция. Тествайте алтернативни оформления, прототипирайте дизайнерски промени или пренареждайте съдържанието визуално — всичко това без да пишете нито един ред код. Промените са недеструктивни и се нулират при опресняване на страницата.
Дизайнерските дискусии често включват въпроси като „Ами ако преместим този бутон над линията на превъртане (above the fold)?“ или „Дали оформлението би изглеждало по-добре със странична лента отдясно?“. Обикновено отговорът на тези въпроси изисква редактиране на код, повторно внедряване (redeploy) и предварителен преглед. Move Element съкращава целия този процес. Просто щракнете върху елемента, плъзнете го и вижте. Инструментът прилага промени в CSS позицията на елемента в реално време, поддържайки визуалния му вид, като същевременно позволява свободно позициониране. Водачите за подравняване (alignment guides) се прилепват (snap) към други елементи и ръбовете на страницата, помагайки ви да поставите нещата точно. Призрачен контур (ghost outline) маркира първоначалната позиция, така че винаги да виждате откъде е дошъл елементът. И ако не харесвате резултата, функцията за отмяна (undo) го възстановява незабавно. Всички промени са чисто визуални — те живеят в паметта на браузъра и изчезват напълно при опресняване на страницата. Действителните HTML и CSS файлове никога не се променят.
Щракнете върху произволен елемент на страницата — бутони, изображения, текстови блокове, карти, хедъри — и го плъзнете свободно на нова позиция. Елементът следва курсора ви плавно без забавяне. Работи с елементи от всякакъв размер, от малки икони до секции с пълна ширина.
Докато плъзгате, се появяват прекъснати линии за подравняване, когато елементът се изравни с ръбовете на други елементи или центъра на страницата. Хоризонталните и вертикалните водачи ви помагат да поставяте елементите върху последователна мрежа (grid) без позициониране на око.
Оригиналната позиция на елемента е маркирана с прекъснат „призрачен“ контур (ghost outline), така че винаги можете да видите къде е бил, преди да го преместите. Сравнете новата позиция с оригиналната с един поглед.
Направили сте преместване, което не ви харесва? Щракнете върху Undo, за да върнете незабавно елемента на предишната му позиция. Поддържа множество стъпки за отмяна, така че можете да експериментирате свободно и да се връщате назад през промените си.
Пренаредете няколко елемента последователно. Всяко преместване е независимо и може да се отмени. Изградете пълно пренареждане на оформлението елемент по елемент, като визуализирате предварително кумулативния (общия) ефект.
Всички промени съществуват само във визуализацията на браузъра. Действителните HTML, CSS и JavaScript файлове на страницата не се засягат. Опреснете страницата и всичко ще се върне в първоначалното си състояние. Безопасно за използване на всеки уебсайт.
Чудите се дали CTA (Призив към действие) бутонът би се представил по-добре, ако е над линията на превъртане? Или дали секцията с отзиви (testimonials) трябва да е преди таблицата с цените? Преместете елементите, за да прегледате различни оформления и да вземете информирани решения, преди да се ангажирате с промени в кода.
По време на разговор с клиент на живо, плъзгайте елементи, за да изследвате опциите за оформление в реално време. „Бихте ли предпочели основното (hero) изображение отляво или отдясно?“ се превръща в демонстрация на живо вместо в устна дискусия.
Пренаредете елементите на съществуваща страница, за да създадете прототип на нова посока в дизайна. Комбинирайте с Live Text Editor, за да променяте съдържанието, и с Move Element, за да местите позиции — създавайки визуален прототип, без да докосвате никакъв код.
Ако елементите неочаквано се припокриват, плъзнете единия от пътя, за да видите какво има зад него. Това често е по-бързо от промяната на стойностите на z-index в DevTools, когато имате нужда от бърз поглед върху това какво има отдолу.
Преместете визуалните елементи, за да съответстват на очаквания ред при натискане на Tab. Ако визуалното оформление не съвпада с логическия ред на четене, това разкрива потенциален проблем с достъпността (accessibility), при който четците на екрани и навигацията от клавиатурата няма да съответстват на визуалното представяне.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Move Element. Курсорът се променя на икона за преместване, което показва, че инструментът е активен и готов за избиране на елементи.
Щракнете върху елемента, който искате да преместите. Той ще получи лилава маркираща рамка, показваща, че е избран. Призрачен контур (ghost outline) маркира текущата му позиция.
Щракнете и задръжте избрания елемент, след което го плъзнете до желаното място. Водачите за подравняване се появяват, когато доближите ръбовете на други елементи или центъра на страницата.
Освободете мишката, за да пуснете елемента на новата му позиция. Сравнете спрямо призрачния контур. Използвайте бутона за отмяна (Undo), ако е необходимо, или изберете друг елемент, за да продължите с пренареждането.
Когато приключите с експериментите, презаредете страницата, за да възстановите всички елементи на първоначалните им позиции. Всички ходове се изтриват напълно.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
