Az Elem áthelyezése eszközzel bármely webes elemre kattintva fizikailag új helyre húzhatja azt. Tesztelje az elrendezési alternatívákat, prototípuskészítsen dizájnváltozásokhoz, vagy vizuálisan rendezze át a tartalmat — mindezt egyetlen sornyi kód írása nélkül. A módosítások nem véglegesek, és az oldal frissítésekor visszaállnak.
A tervezési megbeszéléseken gyakran felmerül: "Mi lenne, ha ezt a gombot feljebb tennénk, a görgetés nélkül látható területre?" vagy "Jobban mutatna az elrendezés, ha az oldalsáv jobbra kerülne?" Normál esetben ezekre a kérdésekre csak kód szerkesztésével, újbóli telepítéssel és előnézettel lehet válaszolni. Az Elem áthelyezése kiiktatja ezt a teljes folyamatot. Csak kattintson az elemre, húzza el, és nézze meg az eredményt. Az eszköz valós időben alkalmazza a CSS pozícióváltozásokat az elemre, megőrizve annak vizuális megjelenését, miközben szabad áthelyezést tesz lehetővé. Az igazítási segédvonalak a többi elemhez és az oldal széleihez illeszkednek, így pontosan tudja elhelyezni a dolgokat. Egy szellemkontúr jelöli az eredeti pozíciót, így mindig látja, honnan került az elem. Ha pedig nem tetszik az eredmény, a visszavonás azonnal visszaállítja. Minden változtatás tisztán vizuális — a böngésző memóriájában él, és az oldal frissítésekor teljesen eltűnik. A tényleges HTML- és CSS-fájlok soha nem módosulnak.
Kattintson az oldal bármely elemére — gombokra, képekre, szövegblokkokra, kártyákra, fejlécekre —, és húzza szabadon az új pozícióba. Az elem gördülékenyen, késés nélkül követi a kurzort. Bármilyen méretű elemmel működik, a kis ikonoktól a teljes szélességű szekciókig.
Húzás közben szaggatott igazítási vonalak jelennek meg, amikor az elem egy másik elem szélével vagy az oldal középvonalával kerül egy szintbe. A vízszintes és függőleges segédvonalak segítenek egységes rácsra helyezni az elemeket, szemmérték nélkül.
Az elem eredeti pozícióját egy szaggatott körvonalú "szellem" jelöli, így mindig látja, hol volt, mielőtt elmozdította. Egy pillantással összehasonlíthatja az új és az eredeti pozíciót.
Nem tetszik egy mozdulat? Kattintson a Visszavonásra, hogy az elem azonnal visszaugorjon az előző pozíciójába. Több visszavonási lépést is támogat, így szabadon kísérletezhet, és lépésenként visszaléphet a módosításokon.
Rendezzen át több elemet egymás után. Minden áthelyezés önálló és visszavonható. Építse fel a teljes elrendezés-átrendezést elemenként, közben figyelve a kumulatív hatást.
Minden változtatás csak a böngésző megjelenítésében létezik. Az oldal tényleges HTML-, CSS- és JavaScript-fájljait sosem érinti. Frissítse az oldalt, és minden visszaáll eredeti állapotába. Bármely weboldalon biztonságosan használható.
Kíváncsi, hogy a CTA gomb jobban teljesítene-e a görgetés nélkül látható területen? Vagy hogy az ajánlások szekció a árazási táblázat elé kerüljön-e? Helyezze át az elemeket, hogy előnézetben lássa a különböző elrendezéseket, és megalapozott döntést hozzon, mielőtt kódváltoztatásokba kezdene.
Egy élő ügyféltelefonos megbeszélés során húzza az elemeket valós időben, hogy feltárja az elrendezési lehetőségeket. "A hero képet inkább balra vagy jobbra szeretné?" — ebből élő bemutató lesz szóbeli vita helyett.
Rendezze át egy létező oldal elemeit, hogy prototípust készítsen egy új dizájnirányról. Kombinálja az Élő szövegszerkesztővel a tartalom módosításához és az Elem áthelyezésével a pozíciók módosításához — így vizuális prototípust hozhat létre kód érintése nélkül.
Ha elemek váratlanul átfedik egymást, húzza el az egyiket az útból, hogy lássa, mi van mögötte. Ez gyakran gyorsabb, mint a z-index értékek módosítása a DevTools-ban, ha csak egy gyors pillantást szeretne vetni az alatta lévőre.
Helyezze át a vizuális elemeket, hogy megfeleljenek a várt tab sorrendnek. Ha a vizuális elrendezés nem egyezik a logikai olvasási sorrenddel, az potenciális akadálymentességi problémára utal, ahol a képernyőolvasó és a billentyűzetes navigáció nem egyezik a vizuális megjelenítéssel.
Nyissa meg a DevSuite Pro lebegő dokkját, és kattintson az Elem áthelyezése ikonra. A kurzor áthelyezés ikonná változik, jelezve, hogy az eszköz aktív, és készen áll az elemek kiválasztására.
Kattintson az áthelyezni kívánt elemre. Lila kiemelt keretet kap, jelezve, hogy ki van választva. Egy szellemkontúr jelöli a jelenlegi pozícióját.
Kattintson és tartsa lenyomva a kiválasztott elemet, majd húzza a kívánt helyre. Igazítási segédvonalak jelennek meg, amikor más elemek széleihez vagy az oldal középvonalához közelít.
Engedje el az egeret, hogy az elemet az új pozícióba ejtse. Hasonlítsa össze a szellemkontúrral. Szükség esetén használja a Visszavonást, vagy válasszon ki egy másik elemet a rendezés folytatásához.
Ha végzett a kísérletezéssel, frissítse az oldalt, hogy minden elem visszaálljon eredeti pozíciójába. Minden áthelyezés teljesen törlődik.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 64+ fejlesztői eszközt böngészőjéhez.
