Flyt element lader dig klikke på et element på en webside og fysisk trække det til en ny position. Test layoutalternativer, prototyp designændringer eller omarranger indhold visuelt — alt uden at skrive en eneste kodelinje. Ændringer er ikke-destruktive og nulstilles ved sideopdatering.
Designdiskussioner involverer ofte spørgsmål som "Hvad nu, hvis vi flyttede denne knap over folden?" eller "Ville layoutet se bedre ud med sidepanelet til højre?" Normalt kræver besvarelsen af disse spørgsmål redigering af kode, geninstallation og forhåndsvisning. Flyt element kortslutter hele denne proces. Bare klik på elementet, træk det, og se. Værktøjet anvender CSS-positionsændringer på elementet i realtid og bevarer dets visuelle udseende, mens det tillader fri repositionering. Justeringsguider snapper til andre elementer og sidekanter og hjælper dig med at placere ting præcist. En ghost-kontur markerer den originale position, så du altid kan se, hvor elementet kom fra. Og hvis du ikke kan lide resultatet, gendanner fortryd det øjeblikkeligt. Alle ændringer er rent visuelle — de lever i browserens hukommelse og forsvinder fuldstændigt ved sideopdatering. De faktiske HTML- og CSS-filer ændres aldrig.
Klik på et element på siden — knapper, billeder, tekstblokke, kort, headers — og træk det frit til en ny position. Elementet følger din markør glat uden forsinkelse. Fungerer med elementer i enhver størrelse, fra små ikoner til fuld-bredde-sektioner.
Mens du trækker, vises stiplede justeringslinjer, når elementet justeres med andre elementers kanter eller sidens center. Vandrette og lodrette guider hjælper dig med at placere elementer på et konsistent gitter uden at gætte positioner.
Elementets originale position er markeret med en stiplet kontur "ghost", så du altid kan se, hvor det var, før du flyttede det. Sammenlign den nye position med originalen ved et øjekast.
Foretaget et træk, du ikke kan lide? Klik på Fortryd for øjeblikkeligt at sende elementet tilbage til dets tidligere position. Understøtter flere fortryd-trin, så du kan eksperimentere frit og gå tilbage gennem ændringer.
Omarranger flere elementer i rækkefølge. Hvert træk er uafhængigt og kan fortrydes. Opbyg en komplet layoutomarrangering ét element ad gangen og se den kumulative effekt.
Alle ændringer findes kun i browserens gengivelse. Sidens faktiske HTML-, CSS- og JavaScript-filer røres aldrig. Opdater siden, og alt vender tilbage til sin originale tilstand. Sikkert at bruge på ethvert websted.
Undrer du dig over, om CTA-knappen ville klare sig bedre over folden? Eller om testimonial-sektionen burde komme før prissætningstabellen? Flyt elementer rundt for at forhåndsvise forskellige layouts og træffe informerede beslutninger, inden du forpligter dig til kodeændringer.
Under et live kundeopkald kan du trække elementer rundt for at udforske layoutmuligheder i realtid. "Vil du foretrække hero-billedet til venstre eller højre?" bliver en live demonstration i stedet for en verbal diskussion.
Omarranger en eksisterende sides elementer for at prototype en ny designretning. Kombiner med Live teksteditor til at ændre indhold og Flyt element til at ændre positioner — og skab en visuel prototype uden at røre nogen kode.
Hvis elementer overlapper uventet, kan du trække et af dem væk for at se, hvad der er bag det. Dette er ofte hurtigere end at ændre z-indeksværdier i DevTools, når du bare hurtigt skal se, hvad der er underneath.
Flyt visuelle elementer for at matche den forventede tabulatorrækkefølge. Hvis det visuelle layout ikke matcher den logiske læserækkefølge, afslører det et potentielt tilgængelighedsproblem, hvor skærmlæser- og tastaturnavigation ikke matcher den visuelle præsentation.
Åbn den flydende dock i DevSuite Pro og klik på ikonet Flyt element. Markøren skifter til et flyt-ikon, der angiver, at værktøjet er aktivt og klar til at vælge elementer.
Klik på det element, du vil flytte. Det får en lilla fremhævet kant, der viser, at det er valgt. En ghost-kontur markerer dets nuværende position.
Klik og hold det valgte element, og træk det derefter til den ønskede placering. Justeringsguider vises, når du nærmer dig andre elementers kanter eller sidens center.
Slip musen for at slippe elementet i sin nye position. Sammenlign med ghost-konturen. Brug Fortryd om nødvendigt, eller vælg et andet element for at fortsætte omarrangeringen.
Når du er færdig med at eksperimentere, skal du opdatere siden for at gendanne alle elementer til deres originale positioner. Alle træk slettes fuldstændigt.
Installer DevSuite Pro gratis og lås op for 39+ udviklerværktøjer til din browser.
