atomic Editor

Anders als in klassischen Editoransichten entsteht eine Seite in atomic nicht als fortlaufender Text, sondern aus einzelnen Blöcken, die eingefügt, konfiguriert und in ihrer Reihenfolge angepasst werden können. Der Editor verbindet damit redaktionelles Arbeiten mit einem modularen Seitenaufbau.

Um die Oberfläche besser zu verstehen, lohnt sich ein systematischer Blick von oben nach unten: zuerst auf die obere Editor-Toolbar, dann auf die Sidebar mit den Seiteneinstellungen und schließlich auf die Arbeitsfläche, auf der die eigentlichen Inhalte als Blöcke bearbeitet werden.

Im oberen Bereich des Editors befindet sich die zentrale Editor-Toolbar. Hier stehen die wichtigsten übergeordneten Aktionen für die Arbeit an einer Seite zur Verfügung.

Ganz links befindet sich die grüne Hinzufügen-Schaltfläche. Sie ist ein systemweiter Standard in atomic und erscheint immer dort, wo neue Inhalte angelegt oder ergänzt werden können. Im Seiten-Editor öffnet sie die sogenannte Block-Galerie.

Direkt daneben befindet sich die Schaltfläche für Struktur beziehungsweise die Block-Übersicht. Darüber lässt sich die Seite in ihrer Abfolge der verwendeten Blöcke anzeigen. Gerade bei längeren Seiten erleichtert diese Strukturansicht die Orientierung und macht sichtbar, aus welchen Bausteinen eine Seite besteht. Wird in der Strukturansicht ein Block angeklickt, springt der Editor zu diesem Element, scrollt es in den sichtbaren Bereich und setzt es aktiv. Der Block erhält dann einen grünen Rahmen, und die zugehörige Block-Toolbar wird eingeblendet.

Im weiteren Verlauf der Toolbar folgen zentrale Aktionen wie Vorschau, Zur Übersicht, Veröffentlichen und Speichern. Sie betreffen nicht den einzelnen Block, sondern die Seite als Ganzes. Ganz rechts befindet sich außerdem die Schaltfläche Einstellungen, über die die rechte Sidebar ein- oder ausgeblendet werden kann.

Auf der rechten Seite befindet sich die Sidebar mit drei Tabs: Seite, Suche & Social und Block. Sie begleitet die Arbeit im Editor fortlaufend und kann über die Schaltfläche Einstellungen ein- oder ausgeblendet werden.

Im Tab Seite werden die grundlegenden Einstellungen der Seite gepflegt. Dazu gehören unter anderem Seitentitel, Slug beziehungsweise Link, Kategorie, Veröffentlichungsdatum sowie weitere Angaben für interne und dynamische Ausgaben.

Auch eine Beschreibung kann hier hinterlegt werden, die für interne Listings und dynamische Ausspielungen genutzt wird. Zusätzlich lassen sich passende Bilder pflegen, in der Regel ein Beitragsbild im Format 16:9 sowie optional ein alternatives quadratisches Bild im Format 1:1. Das 16:9-Bild wird dabei auch als og:image für die Ausspielung auf Social Media verwendet.

Eine wichtige Rolle spielt außerdem das Veröffentlichungsdatum. Es kann in der Zukunft liegen, wenn eine Seite erst zu einem späteren Zeitpunkt veröffentlicht werden soll. Ebenso lässt sich das Datum nachträglich bearbeiten. Es ist damit nicht nur eine Information, sondern zugleich ein Mittel zur zeitlichen Steuerung der Veröffentlichung.

Im Tab Suche & Social lassen sich ergänzende Angaben für Suchmaschinen und soziale Netzwerke hinterlegen. Dazu gehören etwa Titel und Beschreibung für Suchergebnisse sowie eigene Angaben für Social Media. Diese Felder helfen dabei, die Darstellung einer Seite außerhalb des eigentlichen Seiteninhalts kontrolliert und passend zu gestalten.
Lesen Sie hierzu gern unsere Empfehlungen für Seitentitel, Suche & Social.

Sobald ein Block aktiv ist, zeigt der Tab Block die zugehörigen Einstellungsoptionen an. Dazu gehören je nach Blocktyp beispielsweise Position und Ausrichtung, Abstände, Haarlinien, Hintergründe oder weiterführende technische Klassen. So lassen sich einzelne Bausteine nicht nur inhaltlich, sondern auch in ihrem gestalterischen Zusammenspiel mit der Gesamtseite steuern.

Viele Blöcke verfügen hier über gemeinsame Grundeinstellungen. Dazu gehören häufig unterschiedliche Alignments sowie Einstellungen für Innen- und Außenabstände, Haarlinien oder Hintergründe.

Neue Inhalte werden über die grüne Plus-Schaltfläche oben links hinzugefügt. Im Seiten-Editor öffnet sie die Block-Galerie.

In der Block-Galerie werden alle für die jeweilige Site verfügbaren Blöcke angezeigt. Die Darstellung ist kategorisiert, sodass sich Blocktypen gezielt auffinden lassen, etwa für Hero-Bereiche, Textinhalte, Listen, Feature-Boxen, Medien oder Galerien. Mit einem Klick auf „+ einsetzen“ wird der gewählte Block am Ende der Seite eingefügt.

Die Block-Galerie ist damit der Ausgangspunkt für den modularen Seitenaufbau. Sie zeigt, welche Bausteine innerhalb einer Site verfügbar sind und wie sich Seiten aus unterschiedlichen funktionalen Elementen zusammensetzen lassen.

Unterhalb der Editor-Toolbar befindet sich die eigentliche Arbeitsfläche. Hier wird die Seite in ihrer aktuellen Form sichtbar und direkt bearbeitet. Blöcke erscheinen in der Reihenfolge, in der sie auf der Seite ausgegeben werden, und bilden zusammen den inhaltlichen Aufbau.

Sobald ein Block angeklickt wird, wird er aktiv. Ein aktiver Block ist daran zu erkennen, dass er einen grünen Rahmen erhält. Oberhalb des Blocks erscheint außerdem eine Steuerungsleiste, die sogenannte Block-Toolbar. Gleichzeitig zeigt die Sidebar im Tab Block die dazugehörigen Einstellungsoptionen an.

Gerade diese direkte Rückmeldung macht die Arbeit im Editor übersichtlich: Es ist jederzeit sichtbar, welcher Block gerade bearbeitet wird und welche Optionen sich auf genau dieses Element beziehen.

Wird ein Block aktiviert, erscheint oberhalb des ausgewählten Bereichs die Block-Toolbar. Sie bündelt die wichtigsten Bearbeitungs- und Steuerungsfunktionen direkt am Element selbst.

Am Anfang der Leiste finden sich die Steuerungen zum Verschieben des Blocks nach oben oder unten. Auf diese Weise kann die Reihenfolge der Inhalte direkt auf der Seite angepasst werden, ohne den Block neu anlegen zu müssen.

Wichtig ist dabei: Die Block-Toolbar passt sich dem jeweils ausgewählten Block an. Sie zeigt also nicht immer dieselben Funktionen, sondern genau die Werkzeuge, die für den jeweiligen Blocktyp sinnvoll sind. Bei einem Textblock stehen beispielsweise andere Optionen zur Verfügung als bei einer einfachen Überschrift oder einem Bildblock. Dadurch bleibt die Bedienung übersichtlich und zugleich nah an der konkreten Aufgabe.

Im hinteren Bereich der Toolbar befinden sich zusätzliche Steuerungen, darunter Optionen zur Sichtbarkeit. Hier kann festgelegt werden, für wen ein Block sichtbar sein soll, etwa öffentlich oder nur für Mitglieder. Über das Drei-Punkte-Menü stehen weitere Aktionen wie das Löschen des Blocks zur Verfügung. Das X am Ende hebt die aktuelle Auswahl wieder auf.

Blöcke können über das Symbol „Sichtbarkeit“ auch „für niemanden sichtbar“ geschaltet werden. Diese Blöcke sind dann im Editor 50% transparent dargestellt und mit einem Icon gekennzeichnet. Auch wenn die Seite online ist, werden diese speziellen Blöcke nicht auf der Website ausgegeben. Sie sind auch nicht in der Vorschau enthalten.

Wenn mehrere Blöcke gleichzeitig ausgewählt werden sollen, kann dies über die gedrückte Strg- beziehungsweise Cmd-Taste erfolgen. Die gewünschten Blöcke werden dabei nacheinander angeklickt und gemeinsam markiert.

In diesem Fall reagiert die übergeordnete Editor-Toolbar und zeigt an, wie viele Blöcke aktuell ausgewählt sind. Gleichzeitig wird dort eine Sammelaktion zum Löschen der markierten Blöcke angeboten. Das ist besonders dann hilfreich, wenn Seitenbereiche umgebaut oder mehrere Elemente in einem Schritt entfernt werden sollen.

Der Seiten-Editor ist so aufgebaut, dass Inhaltsbearbeitung und Seitenlogik gleichzeitig sichtbar bleiben. Oben stehen die übergeordneten Aktionen, rechts begleiten die passenden Einstellungen den gesamten Prozess, und in der Mitte entsteht die Seite als Arbeitsfläche. Dadurch bleibt jederzeit nachvollziehbar, was die Seite als Ganzes betrifft und was sich nur auf einen einzelnen Block bezieht.

Für die tägliche Arbeit bedeutet das: Seiten werden in atomic nicht linear geschrieben, sondern bewusst komponiert. Blöcke werden hinzugefügt, angeordnet, aktiviert, formatiert, in ihrer Sichtbarkeit gesteuert und über die Sidebar weiter ausgestaltet. Gleichzeitig lassen sich Titel, Beschreibungen, Bilder, Kategorien, Links und Veröffentlichungszeitpunkte fortlaufend pflegen. Genau darin liegt die Stärke des Editors: Er unterstützt nicht nur das Erfassen von Inhalten, sondern den strukturierten Aufbau ganzer Seiten.

Sofern in einer Site Seiten-Kategorien angelegt wurden, können diese im Editor einer Seite zugewiesen werden. Die gewählte Seiten-Kategorie dient nicht nur der inhaltlichen Einordnung, sondern wirkt sich auch direkt auf die URL der Seite aus.

Wird einer Seite eine Seiten-Kategorie oder Unterkategorie zugeordnet, wird der Seitenpfad entsprechend erweitert. Aus einem einfachen Pfad wie/meine-seite wird dann beispielsweise /kategorie/meine-seite oder sogar/kategorie/unterkategorie/meine-seite.

Seiten-Kategorien helfen damit nicht nur bei der redaktionellen Strukturierung innerhalb einer Site, sondern auch beim Aufbau einer nachvollziehbaren URL-Struktur.