Die Reihenfolge der Inhaltsbereiche hat großen Einfluss darauf, wie Besucher Ihre Webseite wahrnehmen. Wichtige Informationen sollten möglichst schnell auffindbar sein, während weiterführende Inhalte an einer passenden Stelle folgen.
Mit dem Smart-Editor können Sie vorhandene Blöcke neu anordnen, ohne sämtliche darin enthaltenen Texte, Bilder und Gestaltungselemente erneut erstellen zu müssen.
In dieser Anleitung erfahren Sie, wie Sie Blöcke verschieben, ihre Reihenfolge verändern und dabei typische Gestaltungsprobleme vermeiden.
1. Warum ist die Reihenfolge der Blöcke wichtig?
Eine Webseite sollte ihre Informationen möglichst verständlich und in einer sinnvollen Reihenfolge präsentieren.
Besucher möchten normalerweise zunächst erfahren, worum es auf Ihrer Webseite geht. Anschließend interessieren sie sich für weiterführende Informationen, Leistungen, Bilder oder Kontaktmöglichkeiten.
Eine typische Unternehmensseite könnte beispielsweise folgendermaßen aufgebaut sein:
- Begrüßung und kurze Vorstellung,
- Beschreibung der angebotenen Leistungen,
- besondere Vorteile oder Referenzen,
- Bilder und weitere Informationen,
- Kontaktmöglichkeiten.
Diese Reihenfolge ist selbstverständlich nicht verpflichtend. Sie zeigt lediglich, wie sich Informationen sinnvoll gliedern lassen.
Tipp: Überlegen Sie vor dem Verschieben, welche Informationen Ihre Besucher zuerst benötigen. Eine gute Reihenfolge ist häufig wichtiger als besonders aufwendige Gestaltungseffekte.
2. Was passiert beim Verschieben eines Blocks?
Ein Block ist ein zusammenhängender Inhaltsbereich, der mehrere Elemente enthalten kann.
Wenn Sie einen vollständigen Block verschieben, werden dessen enthaltene Texte, Bilder, Container, Raster und weitere Elemente gemeinsam mitgenommen.
Der Block bleibt dabei grundsätzlich als eigene Gestaltungseinheit erhalten.
Das unterscheidet das Verschieben eines Blocks vom Verschieben einzelner Elemente.
Einen vollständigen Block verschieben
Sie verändern die Position eines gesamten Inhaltsbereichs innerhalb der Seite.
Beispielsweise können Sie eine Bildergalerie von der Seitenmitte an das Ende verschieben.
Ein einzelnes Element verschieben
Sie verändern lediglich die Position eines Textes, Bildes oder anderen Elements innerhalb seiner Gestaltung.
Dadurch kann sich die Anordnung innerhalb eines Blocks verändern, ohne dass der gesamte Inhaltsbereich an eine andere Stelle gesetzt wird.
Wichtig: Achten Sie vor dem Verschieben darauf, ob der gesamte Block oder nur ein enthaltenes Element ausgewählt wurde.
3. Einen Block direkt im Bearbeitungsbereich auswählen
Sie können einen Block direkt innerhalb der grafischen Bearbeitungsansicht auswählen.
- Öffnen Sie die gewünschte Seite im Smart-Editor.
- Scrollen Sie zum Inhaltsbereich, den Sie verschieben möchten.
- Bewegen Sie den Mauszeiger über den betreffenden Block.
- Verwenden Sie die angezeigten Blockwerkzeuge beziehungsweise die Markierung des Blocks.
- Kontrollieren Sie, ob der vollständige Inhaltsbereich ausgewählt ist.
Nach der Auswahl stehen Ihnen die verfügbaren Funktionen zur Bearbeitung des Blocks zur Verfügung.
Die Auswahl kontrollieren
Wenn Sie lediglich ein Textelement oder ein Bild ausgewählt haben, erscheinen normalerweise dessen individuelle Eigenschaften.
Um den gesamten Inhaltsbereich zu verschieben, müssen Sie stattdessen den übergeordneten Block auswählen.
Tipp: Bei komplexeren Gestaltungen ist die Auswahl des Blocks über den Seiten-Navigator häufig einfacher.
4. Einen Block mit den Blockwerkzeugen verschieben
Der Smart-Editor bietet für ausgewählte Blöcke Werkzeuge, mit denen deren Position innerhalb der Seite verändert werden kann.
Je nach Version und Bedienoberfläche stehen dafür beispielsweise Schaltflächen zum Verschieben nach oben oder unten zur Verfügung.
Einen Block nach oben verschieben
- Wählen Sie den gewünschten Block aus.
- Suchen Sie die entsprechende Verschiebefunktion in den Blockwerkzeugen.
- Verwenden Sie die Funktion zum Verschieben nach oben.
- Kontrollieren Sie die neue Position.
- Wiederholen Sie den Vorgang bei Bedarf.
Einen Block nach unten verschieben
Gehen Sie entsprechend vor und verwenden Sie die Funktion zum Verschieben nach unten.
Dadurch können Sie den Block schrittweise an die gewünschte Stelle der Seite setzen.
Hinweis: Die Darstellung und genaue Anordnung der Blockwerkzeuge kann sich zwischen verschiedenen Smart-Editor-Versionen unterscheiden.
5. Blöcke über den Seiten-Navigator anordnen
Der Seiten-Navigator zeigt die vorhandenen Blöcke Ihrer Webseite in einer übersichtlichen Darstellung.
Er ist besonders hilfreich, wenn eine Seite viele unterschiedliche Inhaltsbereiche enthält.
Den gewünschten Block finden
- Öffnen Sie den Seiten-Navigator.
- Durchsuchen Sie die vorhandenen Blockvorschauen.
- Wählen Sie den gewünschten Inhaltsbereich aus.
- Kontrollieren Sie, ob der richtige Block markiert wurde.
Die Reihenfolge verändern
Verwenden Sie die im Seiten-Navigator angebotenen Möglichkeiten, um die Position des ausgewählten Blocks zu verändern.
Abhängig von der Version können dafür Verschiebefunktionen oder eine entsprechende Drag-and-drop-Bedienung zur Verfügung stehen.
Kontrollieren Sie anschließend die neue Reihenfolge in der vollständigen Seitenansicht.
Tipp: Bei längeren Seiten bietet der Seiten-Navigator häufig einen besseren Überblick als das wiederholte Scrollen zwischen weit voneinander entfernten Inhaltsbereichen.
6. Blöcke mit Drag & Drop verschieben
Drag & Drop bedeutet, dass Sie ein Objekt mit gedrückter Maustaste aufnehmen und an einer anderen Stelle wieder ablegen.
Der Smart-Editor verwendet diese Bedienungsart für verschiedene Gestaltungsvorgänge.
Wenn für einen Block ein entsprechender Verschiebegriff oder eine Drag-and-drop-Funktion angeboten wird, können Sie diesen damit neu positionieren.
- Wählen Sie den gewünschten Block beziehungsweise dessen Verschiebegriff aus.
- Halten Sie die Maustaste gedrückt.
- Bewegen Sie den Block zur gewünschten Position.
- Achten Sie auf die angezeigten Einfüge- oder Positionsmarkierungen.
- Lassen Sie die Maustaste an der gewünschten Stelle los.
- Überprüfen Sie die neue Reihenfolge.
Wichtig: Ziehen Sie nicht versehentlich an einem enthaltenen Bild oder Textelement. Verwenden Sie die dafür vorgesehene Blockfunktion, damit der gesamte Inhaltsbereich verschoben wird.
7. Einen Block an den Anfang oder das Ende der Seite setzen
Manchmal möchten Sie einen Inhaltsbereich nicht nur um eine Position verschieben, sondern an eine vollständig andere Stelle Ihrer Webseite setzen.
Beispielsweise könnte ein bislang weiter unten platzierter Hinweis künftig direkt am Seitenanfang erscheinen.
Einen Block an den Anfang verschieben
Wählen Sie den gewünschten Block aus und verändern Sie dessen Position mithilfe der verfügbaren Verschiebewerkzeuge.
Bei längeren Seiten empfiehlt es sich, dafür den Seiten-Navigator zu verwenden.
Einen Block an das Ende verschieben
Gehen Sie entsprechend vor, wenn ein Inhaltsbereich künftig am Ende der Seite erscheinen soll.
Das kann beispielsweise bei Kontaktinformationen oder weiterführenden Hinweisen sinnvoll sein.
Tipp: Kontrollieren Sie nach solchen größeren Umstellungen die gesamte Seite von oben nach unten. Die neue Reihenfolge sollte für Besucher weiterhin logisch und nachvollziehbar sein.
8. Blöcke mit unterschiedlichen Hintergründen anordnen
Viele Webseiten verwenden abwechselnde Hintergrundfarben oder unterschiedliche Hintergrundbilder, um einzelne Inhaltsbereiche voneinander abzugrenzen.
Wenn Sie Blöcke verschieben, kann sich dadurch auch die optische Abfolge dieser Bereiche verändern.
Wechselnde Hintergrundfarben
Eine Seite könnte beispielsweise einen weißen Begrüßungsbereich, einen hellgrauen Leistungsblock und anschließend einen weiteren weißen Inhaltsbereich enthalten.
Wenn Sie den grauen Block verschieben, kann eine andere Farbfolge entstehen.
Hintergrundbilder und Übergänge
Auch großflächige Hintergrundbilder oder besonders gestaltete Übergänge sollten nach einer Änderung der Blockreihenfolge überprüft werden.
Ein Abschnitt, der vorher optisch gut zum nachfolgenden Bereich passte, kann an einer anderen Position möglicherweise weniger harmonisch wirken.
Tipp: Betrachten Sie nach dem Verschieben nicht nur den einzelnen Block, sondern auch den Übergang zu den angrenzenden Inhaltsbereichen.
9. Die Abstände zwischen verschobenen Blöcken prüfen
Nach einer Änderung der Blockreihenfolge können ungewöhnliche Abstände entstehen.
Das liegt nicht zwangsläufig am Verschieben selbst.
Häufig besitzen einzelne Blöcke oder die darin enthaltenen Elemente bereits eigene Abstands- und Größeneinstellungen.
Zu großer Abstand zwischen zwei Blöcken
Überprüfen Sie die Innenabstände, die Höhe des betreffenden Blocks und die Außenabstände seiner enthaltenen Elemente.
Auch eine ungewöhnlich große Mindesthöhe kann dazu führen, dass ein Block mehr Platz benötigt als erwartet.
Zu geringer Abstand
Wenn zwei Inhaltsbereiche optisch zu dicht aufeinanderfolgen, können Sie die betreffenden Innenabstände anpassen.
Dadurch lassen sich die Abschnitte deutlicher voneinander trennen.
Überlagerte Inhalte
Wenn Texte oder Bilder über die Grenzen eines Blocks hinausragen, überprüfen Sie deren Positionierung und die Größe der übergeordneten Container.
Wichtig: Bei ungewöhnlichen Abständen sollten Sie auch die Einstellungen der enthaltenen Elemente kontrollieren. Die Ursache befindet sich nicht immer in den Eigenschaften des Blocks selbst.
10. Blöcke mit besonderen Layouts verschieben
Manche Blöcke besitzen eine komplexere Gestaltung als gewöhnliche Text- und Bildbereiche.
Dazu gehören beispielsweise Inhaltsbereiche mit überlagernden Elementen, besonderen Formen oder aufwendigen Rasterstrukturen.
Solche Blöcke können grundsätzlich ebenfalls neu angeordnet werden.
Allerdings sollten Sie anschließend besonders sorgfältig kontrollieren, ob die Gestaltung weiterhin zum übrigen Seitenaufbau passt.
Überlagernde Elemente
Wenn Bilder oder andere Elemente bewusst über die Grenzen eines Containers oder Blocks hinausragen, können sie optisch mit angrenzenden Inhaltsbereichen zusammenwirken.
Nach einer Änderung der Blockreihenfolge kann dieser Effekt anders aussehen als zuvor.
Besondere Hintergrundgestaltungen
Große Bilder, Farbverläufe oder andere dekorative Elemente können auf die Position eines Blocks innerhalb der Seite abgestimmt sein.
Auch solche Gestaltungen sollten nach dem Verschieben überprüft werden.
Tipp: Verschieben Sie komplexe Blöcke möglichst zunächst nur an ihre neue Position und kontrollieren Sie anschließend das Ergebnis, bevor Sie weitere Änderungen vornehmen.
11. Die Darstellung auf Smartphones überprüfen
Die Reihenfolge der vollständigen Blöcke einer Seite bleibt grundsätzlich auch auf kleineren Bildschirmen von Bedeutung.
Innerhalb eines Blocks kann sich die Anordnung der enthaltenen Elemente jedoch je nach Bildschirmgröße verändern.
Beispielsweise können auf großen Bildschirmen nebeneinander angeordnete Texte und Bilder auf Smartphones untereinander erscheinen.
Die verschiedenen Bildschirmansichten kontrollieren
- Verschieben Sie den gewünschten Block an seine neue Position.
- Kontrollieren Sie zunächst die Darstellung in der Desktop-Ansicht.
- Wechseln Sie zu den Tablet-Ansichten.
- Überprüfen Sie die Abstände und die Anordnung der Inhalte.
- Wechseln Sie anschließend zu den Smartphone-Ansichten.
- Prüfen Sie, ob alle Inhalte vollständig sichtbar sind.
Worauf sollten Sie achten?
Besonders wichtig sind:
- ungewöhnlich große Leerflächen,
- überlagerte Texte oder Bilder,
- abgeschnittene Inhalte,
- Elemente außerhalb des sichtbaren Bereichs,
- unpassende Übergänge zwischen den Blöcken.
Wichtig: Prüfen Sie bei Problemen nicht ausschließlich die gerade ausgewählte Bildschirmansicht. Anpassungen an Positionen und Abständen können Auswirkungen auf weitere Ansichten haben.
12. Den Unterschied zwischen Blockreihenfolge und Elementreihenfolge verstehen
Die Reihenfolge der Blöcke bestimmt den grundsätzlichen Aufbau einer Seite.
Innerhalb eines Blocks besitzen auch die enthaltenen Elemente eine eigene Anordnung.
Diese beiden Ebenen sollten Sie unterscheiden.
Blockreihenfolge
Sie legt fest, welcher vollständige Inhaltsbereich vor oder nach einem anderen erscheint.
Elementreihenfolge
Sie bestimmt die Anordnung einzelner Texte, Bilder und anderer Elemente innerhalb des jeweiligen Blocks.
Ebenenreihenfolge
Zusätzlich kann die Ebenenreihenfolge beeinflussen, welches Element bei einer Überlagerung im Vordergrund oder Hintergrund erscheint.
Die Ebenenreihenfolge ist deshalb nicht mit der vertikalen Reihenfolge der Inhaltsblöcke gleichzusetzen.
Beispiel: Wenn ein Bild hinter einer Überschrift liegen soll, müssen Sie möglicherweise die Ebenenreihenfolge innerhalb des Blocks verändern. Das Verschieben des gesamten Blocks nach oben oder unten löst dieses Problem nicht.
13. Änderungen rückgängig machen
Wenn Sie einen Block versehentlich an eine falsche Position verschoben haben, können Sie häufig die Rückgängig-Funktion des Smart-Editors verwenden.
Diese Funktion ermöglicht es, vorherige Bearbeitungsschritte innerhalb der aktuellen Sitzung zurückzunehmen.
Alternativ können Sie den betreffenden Block erneut auswählen und wieder an seine ursprüngliche Position verschieben.
Wichtig: Die Rückgängig-Funktion steht nicht unbegrenzt zur Verfügung. Nach dem Schließen oder erneuten Öffnen des Editors können vorherige Bearbeitungsschritte möglicherweise nicht mehr rückgängig gemacht werden.
Speichern Sie Ihre Arbeit deshalb regelmäßig und sichern Sie umfangreichere Umgestaltungen bei Bedarf zusätzlich ab.
14. Häufige Fehler beim Verschieben von Blöcken vermeiden
Mit einigen einfachen Vorgehensweisen können Sie typische Probleme vermeiden.
- Den vollständigen Block auswählen: Vergewissern Sie sich, dass Sie nicht versehentlich nur ein enthaltenes Element verschieben.
- Den Seiten-Navigator verwenden: Bei längeren Seiten erleichtert er die Orientierung.
- Reihenfolge bewusst planen: Wichtige Inhalte sollten möglichst früh erscheinen.
- Abstände kontrollieren: Überprüfen Sie nach dem Verschieben die Übergänge zwischen den Inhaltsbereichen.
- Hintergründe beachten: Unterschiedliche Farben oder Bilder können nach einer Umstellung anders zusammenwirken.
- Komplexe Layouts prüfen: Besonders überlagerte oder frei positionierte Elemente benötigen Aufmerksamkeit.
- Responsive Ansichten überprüfen: Kontrollieren Sie die Darstellung auch auf Smartphones und Tablets.
- Änderungen speichern: Sichern Sie Ihre Arbeit nach abgeschlossenen Bearbeitungsschritten.
- Frontend kontrollieren: Überprüfen Sie die neue Reihenfolge auf der tatsächlichen Webseite.
15. Wie geht es weiter?
Sie wissen jetzt, wie Sie die Reihenfolge Ihrer Inhaltsblöcke verändern und bestehende Seiten neu strukturieren können.
Sie haben außerdem gelernt, warum die Auswahl des richtigen Blocks wichtig ist und welche Auswirkungen das Verschieben auf Abstände, Hintergründe und die responsive Gestaltung haben kann.
In den nächsten Anleitungen beschäftigen wir uns mit weiteren Möglichkeiten zur Bearbeitung bestehender Blöcke.
Als Nächstes empfehlen wir Ihnen die Anleitung „Blöcke kopieren und duplizieren“. Dort erfahren Sie, wie Sie bereits gestaltete Inhaltsbereiche mehrfach verwenden und dadurch Zeit bei der Erstellung Ihrer Webseite sparen können.