Element verschieben lässt Sie auf jedes Element einer Webseite klicken und es physisch an eine neue Position ziehen. Testen Sie Layout-Alternativen, prototypisieren Sie Design-Änderungen oder ordnen Sie Inhalte visuell um — alles ohne eine einzige Zeile Code zu schreiben. Änderungen sind nicht-destruktiv und werden bei Seitenaktualisierung zurückgesetzt.
Design-Diskussionen beinhalten oft Fragen wie: Was wäre, wenn wir diesen Button über den Fold verschieben? oder Würde das Layout mit der Seitenleiste rechts besser aussehen? Normalerweise erfordert die Beantwortung dieser Fragen Code-Bearbeitung, Neubereitstellung und Vorschau. Element verschieben umgeht diesen gesamten Prozess. Einfach auf das Element klicken, ziehen und sehen. Das Tool wendet CSS-Positionsänderungen auf das Element in Echtzeit an, behält seine visuelle Erscheinung bei und ermöglicht freies Neupositionieren. Ausrichtungslinien rasten an anderen Elementen und Seitenrändern ein und helfen Ihnen, Dinge präzise zu platzieren. Eine Geisterumriss markiert die ursprüngliche Position, damit Sie immer sehen können, wo das Element herkam. Und wenn Ihnen das Ergebnis nicht gefällt, stellt Rückgängig es sofort wieder her. Alle Änderungen sind rein visuell — sie leben im Speicher des Browsers und verschwinden vollständig bei Seitenaktualisierung. Die tatsächlichen HTML- und CSS-Dateien werden nie geändert.
Klicken Sie auf ein beliebiges Element der Seite — Buttons, Bilder, Textblöcke, Karten, Header — und ziehen Sie es frei an eine neue Position. Das Element folgt Ihrem Cursor reibungslos ohne Verzögerung. Funktioniert mit Elementen jeder Größe, von kleinen Icons bis zu vollbreiten Abschnitten.
Beim Ziehen erscheinen gestrichelte Ausrichtungslinien, wenn das Element mit den Kanten anderer Elemente oder der Seitenmitte ausgerichtet wird. Horizontale und vertikale Linien helfen Ihnen, Elemente auf einem konsistenten Raster zu platzieren, ohne Positionen zu schätzen.
Die ursprüngliche Position des Elements wird mit einem gestrichelten Umriss als Geist markiert, damit Sie immer sehen können, wo es war, bevor Sie es verschoben haben. Vergleichen Sie die neue Position auf einen Blick mit der ursprünglichen.
Eine Verschiebung vorgenommen, die Ihnen nicht gefällt? Klicken Sie auf Rückgängig, um das Element sofort an seine vorherige Position zurückzuspringen. Unterstützt mehrere Rückgängig-Schritte, damit Sie frei experimentieren und Änderungen rückwärts durchgehen können.
Ordnen Sie mehrere Elemente nacheinander neu an. Jede Verschiebung ist unabhängig und rückgängig machbar. Bauen Sie eine vollständige Layout-Neuanordnung ein Element nach dem anderen auf und sehen Sie sich den kumulativen Effekt an.
Alle Änderungen existieren nur im Rendering des Browsers. Die tatsächlichen HTML-, CSS- und JavaScript-Dateien der Seite werden nie berührt. Aktualisieren Sie die Seite und alles kehrt in seinen ursprünglichen Zustand zurück. Sicher auf jeder Website zu verwenden.
Fragen Sie sich, ob der CTA-Button über dem Fold besser performen würde? Oder ob der Testimonials-Abschnitt vor der Preistabelle kommen sollte? Verschieben Sie Elemente, um verschiedene Layouts zu sehen und fundierte Entscheidungen zu treffen, bevor Sie Code-Änderungen vornehmen.
Ziehen Sie während eines Live-Kundengesprächs Elemente herum, um Layout-Optionen in Echtzeit zu erkunden. Würden Sie das Hero-Bild lieber links oder rechts haben? wird zu einer Live-Demonstration statt einer verbalen Diskussion.
Ordnen Sie die Elemente einer bestehenden Seite neu an, um eine neue Design-Richtung zu prototypisieren. Kombinieren Sie mit Live-Texteditor zum Ändern von Inhalten und Element verschieben zum Ändern von Positionen — erstellen Sie einen visuellen Prototyp ohne Code zu berühren.
Wenn sich Elemente unerwartet überlappen, ziehen Sie eines aus dem Weg, um zu sehen, was dahinter ist. Das ist oft schneller als Z-Index-Werte in DevTools zu ändern, wenn Sie nur einen schnellen Blick auf das Darunter-liegende werfen möchten.
Verschieben Sie visuelle Elemente, damit sie der erwarteten Tab-Reihenfolge entsprechen. Wenn das visuelle Layout nicht mit der logischen Lesereihenfolge übereinstimmt, zeigt dies ein potenzielles Barrierefreiheitsproblem, bei dem Screenreader und Tastaturnavigation nicht mit der visuellen Präsentation übereinstimmen.
Öffnen Sie die schwebende DevSuite Pro-Dock und klicken Sie auf das Symbol Element verschieben. Der Cursor wechselt zu einem Verschieben-Symbol, das anzeigt, dass das Tool aktiv und bereit ist, Elemente auszuwählen.
Klicken Sie auf das Element, das Sie verschieben möchten. Es bekommt einen lila hervorgehobenen Rahmen, der zeigt, dass es ausgewählt ist. Ein Geisterumriss markiert seine aktuelle Position.
Klicken und halten Sie das ausgewählte Element, dann ziehen Sie es an den gewünschten Ort. Ausrichtungslinien erscheinen, wenn Sie sich den Kanten anderer Elemente oder der Seitenmitte nähern.
Lassen Sie die Maus los, um das Element an seiner neuen Position abzusetzen. Vergleichen Sie mit dem Geisterumriss. Verwenden Sie Rückgängig bei Bedarf oder wählen Sie ein anderes Element aus, um weiter neu anzuordnen.
Wenn Sie mit dem Experimentieren fertig sind, aktualisieren Sie die Seite, um alle Elemente an ihre ursprünglichen Positionen zurückzusetzen. Alle Verschiebungen werden vollständig gelöscht.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.
