Move Element laat je elk element op een webpagina klikken en fysiek naar een nieuwe positie slepen. Test lay-outalternatieven, prototype ontwerpwijzigingen of rangschik inhoud visueel — allemaal zonder één regel code te schrijven. Wijzigingen zijn niet-destructief en worden opnieuw ingesteld bij paginavernieuwing.
Ontwerpbesprekingen betreffen vaak "Wat als we deze knop boven de vouw verplaatsen?" of "Zou de lay-out beter uitzien met de zijbalk aan de rechterkant?" Normaal gesproken vereist het beantwoorden van deze vragen het bewerken van code, opnieuw implementeren en voorvertonen. Move Element omzeilt dit hele proces. Klik gewoon op het element, sleep het en kijk. Het gereedschap past CSS-positiewijzigingen in real-time toe op het element, behoud van zijn visuele uiterlijk terwijl vrije herpositionering mogelijk is. Uitlijningshandleidingen klikken op andere elementranden en paginakanten, helpen je dingen nauwkeurig te plaatsen. Een spookschets markeert de oorspronkelijke positie zodat je altijd kunt zien waar het element vandaan kwam. En als je het resultaat niet leuk vindt, ongedaan maken herstelt het onmiddellijk. Alle wijzigingen zijn zuiver visueel — ze leven in het browsergeheugen en verdwijnen volledig bij paginavernieuwing. De werkelijke HTML- en CSS-bestanden worden nooit gewijzigd.
Klik op elk element op de pagina — knoppen, afbeeldingen, tekstblokken, kaarten, kopteksten — en sleep dit vrij naar een nieuwe positie. Het element volgt je cursor soepel zonder vertraging. Werkt met elementen van elke grootte, van kleine pictogrammen tot secties in volledige breedte.
Terwijl je sleept, verschijnen gestreepte uitlijningslijnen wanneer het element aansluit op randen van andere elementen of het paginacentrum. Horizontale en verticale gidsen helpen je elementen op een consistent raster te plaatsen zonder posities te schatten.
De oorspronkelijke positie van het element is gemarkeerd met een gestreepte schets "spook" zodat je altijd kunt zien waar het was voordat je het verplaatste. Vergelijk in één oogopslag de nieuwe positie met het origineel.
Maak je geen zet die je niet leuk vindt? Klik op Ongedaan maken om het element onmiddellijk terug te snappen naar de vorige positie. Ondersteunt meerdere ongedaan maken-stappen zodat je vrij kunt experimenteren en achterwaarts door wijzigingen kunt stappen.
Plaats verschillende elementen achtereenvolgens. Elke zet is onafhankelijk en ongedaan te maken. Bouw een volledige lay-outherschikking één element tegelijk op en bekijk het cumulatieve effect.
Alle wijzigingen bestaan alleen in de browserrendering. De werkelijke HTML-, CSS- en JavaScript-bestanden van de pagina worden nooit aangeraakt. Vernieuw de pagina en alles keert terug naar de oorspronkelijke staat. Veilig te gebruiken op elke website.
Vraag je af of de CTA-knop beter zou presteren boven de vouw? Of zou het sectie met getuigenverklaringen voor de prijstabel moeten komen? Plaats elementen rond om verschillende lay-outs voor te vertonen en maak weloverwogen beslissingen voordat je je op codewijzigingen vastlegt.
Tijdens een live clientoproep sleep je elementen rond om lay-outopties in real-time te verkennen. "Zou u de heroafbeelding liever links of rechts hebben?" wordt een live demonstratie in plaats van een verbale discussie.
Plaats de elementen van een bestaande pagina opnieuw in om een nieuwe ontwerprichting als prototype in te stellen. Combineer Live Text Editor om inhoud te wijzigen en Move Element om posities te wijzigen — waardoor je een visueel prototype maakt zonder code aan te raken.
Als elementen onverwacht overlappen, sleep een uit de weg om te zien wat eronder zit. Dit is vaak sneller dan z-indexwaarden in DevTools te wijzigen wanneer je alleen maar een snelle blik op wat eronder zit nodig hebt.
Verplaats visuele elementen zodat deze overeenkomen met de verwachte tabbladenvolgorde. Als de visuele lay-out niet overeenkomt met de logische leesorde, wordt een mogelijk toegankelijkheidsprobleem geopenbaard waar schermlezer- en toetsenbordnavigatie niet overeenkomt met de visuele presentatie.
Open het DevSuite Pro zwevende dock en klik op het pictogram Element verplaatsen. De cursor verandert in een verplaatsingspictogram, wat aangeeft dat het gereedschap actief is en klaar is om elementen te selecteren.
Klik op het element dat je wilt verplaatsen. Het krijgt een paarse gemarkeerde rand die aangeeft dat het is geselecteerd. Een spookschets markeert de huidige positie.
Klik en houd het geselecteerde element vast en sleep het naar de gewenste locatie. Uitlijningshandleiding verschijnt terwijl je de randen van andere elementen of het paginacentrum benadert.
Laat de muis los om het element op de nieuwe positie neer te zetten. Vergelijk met de spookschets. Gebruik Ongedaan maken indien nodig, of selecteer een ander element om het herschikken voort te zetten.
Als je klaar bent met experimenteren, vernieuw je de pagina om alle elementen naar hun oorspronkelijke posities terug te stellen. Alle zetten worden volledig gewist.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
