Přesunout prvek vám umožňuje kliknout na libovolný prvek na webové stránce a fyzicky ho přetáhnout na novou pozici. Testujte alternativy rozvržení, prototypujte změny designu nebo vizuálně přeskupujte obsah — vše bez napsání jediného řádku kódu. Změny jsou nedestruktivní a resetují se při obnovení stránky.
Designové diskuse často zahrnují otázky jako "Co kdybychom přesunuli toto tlačítko nad záhyb?" nebo "Bylo by rozvržení lepší s postranním panelem vpravo?" Normálně odpovídání na tyto otázky vyžaduje úpravu kódu, opětovné nasazení a náhled. Přesunout prvek celý tento proces zkratuje. Stačí kliknout na prvek, přetáhnout ho a vidět výsledek. Nástroj aplikuje změny CSS pozic na prvek v reálném čase, zachovává jeho vizuální vzhled a zároveň umožňuje volné přemístění. Zarovnávací vodítka se přichytávají k jiným prvkům a okrajům stránky, což vám pomáhá umísťovat věci přesně. Průhledný obrys označuje původní pozici, takže vždy vidíte, odkud prvek přišel. A pokud se vám výsledek nelíbí, Vrátit zpět ho okamžitě obnoví. Všechny změny jsou čistě vizuální — žijí v paměti prohlížeče a při obnovení stránky zcela zmizí. Skutečné soubory HTML a CSS nejsou nikdy změněny.
Klikněte na libovolný prvek na stránce — tlačítka, obrázky, textové bloky, karty, záhlaví — a volně ho přetáhněte na novou pozici. Prvek sleduje váš kurzor plynule bez prodlevy. Funguje s prvky libovolné velikosti, od malých ikon až po sekce v plné šířce.
Při přetahování se zobrazí přerušované zarovnávací čáry, když se prvek zarovná s okraji jiných prvků nebo středem stránky. Horizontální a vertikální vodítka vám pomáhají umísťovat prvky na konzistentní mřížku bez odhadování pozic.
Původní pozice prvku je označena přerušovaným obrysem "průhledného tvaru", takže vždy vidíte, kde byl před přesunutím. Porovnejte novou pozici s původní na první pohled.
Provedli jste přesun, který se vám nelíbí? Kliknutím na Vrátit zpět okamžitě přeskočíte prvek zpět na jeho předchozí pozici. Podporuje více kroků zpět, takže můžete experimentovat volně a procházet změny dozadu.
Přeskupte několik prvků postupně. Každý přesun je nezávislý a vrátitelný. Postupně sestavte kompletní přeskupení rozvržení prvek po prvku a sledujte kumulativní efekt.
Všechny změny existují pouze ve vykreslování prohlížeče. Skutečné soubory HTML, CSS a JavaScript stránky nikdy nejsou dotčeny. Obnovte stránku a vše se vrátí do původního stavu. Bezpečné k použití na libovolném webu.
Přemýšlíte, zda by tlačítko CTA fungovalo lépe nad záhybem? Nebo zda by sekce s posudky měla přijít před tabulkou cen? Přesouvejte prvky, abyste si prohlédli různá rozvržení a dělali informovaná rozhodnutí před provedením změn v kódu.
Během živého hovoru s klientem přetáhněte prvky a prozkoumejte možnosti rozvržení v reálném čase. "Preferujete obrázek hrdiny vlevo nebo vpravo?" se stane živou ukázkou místo verbální diskuse.
Přeskupte prvky existující stránky a prototypujte nový směr designu. Kombinujte s Live Text Editor pro změnu obsahu a Přesunout prvek pro změnu pozic — vytváření vizuálního prototypu bez dotknutí se jakéhokoli kódu.
Pokud se prvky neočekávaně překrývají, přetáhněte jeden stranou, abyste viděli, co je za ním. To je často rychlejší než změna hodnot z-index v DevTools, když jen potřebujete rychlý pohled na to, co je pod ním.
Přesuňte vizuální prvky tak, aby odpovídaly očekávanému pořadí tabulátoru. Pokud vizuální rozvržení neodpovídá logickému pořadí čtení, odhaluje to potenciální problém s přístupností, kde navigace čtečkou obrazovky a klávesnicí nebude odpovídat vizuální prezentaci.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Přesunout prvek. Kurzor se změní na ikonu přesunu, což signalizuje, že nástroj je aktivní a připravený k výběru prvků.
Klikněte na prvek, který chcete přesunout. Dostane fialové zvýrazněné ohraničení, které ukazuje, že je vybrán. Průhledný obrys označí jeho aktuální pozici.
Klikněte a podržte vybraný prvek, poté ho přetáhněte na požadované místo. Zarovnávací vodítka se zobrazí, když se přiblížíte k okrajům jiných prvků nebo středu stránky.
Uvolněte myš a umístěte prvek na novou pozici. Porovnejte s průhledným obrysem. Pokud potřebujete, použijte Vrátit zpět, nebo vyberte jiný prvek pro pokračování v přeskupování.
Když skončíte s experimentováním, obnovte stránku a obnovíte všechny prvky do jejich původních pozic. Všechny přesuny jsou zcela vymazány.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.
