Entdecke den Content Designer, dein neues Tool zum Erstellen von eindrucksvollen Seiten, ganz ohne Stress. Er bietet dir eine leistungsstarke Möglichkeit, Inhalte genau so zu erstellen und zu strukturieren, wie du es möchtest. Schauen wir uns gemeinsam mal die wichtigsten Elemente an.

Jede Seite besteht aus drei einfachen Elementen: Abschnitten, Containern und Blöcken für deine Inhalte. Abschnitte definieren horizontale Bereiche auf deiner Seite. Sie helfen dabei, Themen voneinander abzugrenzen und Inhalte zu strukturieren. Container innerhalb dieser Abschnitte steuern das Layout deiner Inhalte. Jede neue Seite beginnt mit einem Standardabschnitt und einem Container. Das ist also deine Grundlage.

Jedes Element hat eine eigene kontextuelle Toolbar, die nur angezeigt wird, wenn das Element ausgewählt ist, und nur relevante Optionen anbietet. Schauen wir uns zum Beispiel mal die Container-Toolbar an. In den Einstellungen kannst du den Container in mehrere Spalten aufteilen, um Inhalte nebeneinander anzuordnen. Unter Design kannst du eine Hintergrundfarbe aus deinen Markenfarben wählen oder ein Hintergrundbild hinzufügen. Das Bild kannst du auch mit einer Farbe überlagern, um den Kontrast zu verbessern. Bleiben wir erst mal bei der Hintergrundfarbe. Unter Sichtbarkeit legst du fest, wer welche Inhalte sehen kann und auf welchen Geräten. Wir können zum Beispiel die hier entfernen, dann ist dieser Container nur auf großen Bildschirmen sichtbar. Oder wir können bestimmte Gruppen festlegen, die ihn sehen dürfen. Somit kannst du auf einer Seite verschiedene Zielgruppen ansprechen. Du kannst neue Container hinzufügen oder bestehende duplizieren. Lass uns den aber erst mal wieder löschen. Um Inhalte neu anzuordnen, kannst du entweder die Pfeiltasten in der kontextuellen Toolbar benutzen oder Drag and Drop.

Um Inhalte hinzuzufügen, verwendest du Blöcke. Die findest du, indem du entweder den Button hier in der Toolbar klickst oder hier an der Seite. Hier findest du alle Bausteine für deine Seite. Um einen Block hinzuzufügen, kannst du entweder klicken oder ihn per Drag and Drop an der richtigen Stelle platzieren. Bei Titel- und Textblöcken kannst du die Größe und die Ausrichtung anpassen und Profiltags zur Personalisierung verwenden. Der Nutzer sieht hier später seine eigenen Daten. Du kannst auch die Farbe anpassen und Emojis verwenden.

Schauen wir uns mal einen Textblock an. Der Block startet immer als Absatz, kann aber auch in eine Überschrift umgewandelt werden. Wir empfehlen allgemein, den Titelblock für die erste Überschrift im Dokument zu verwenden und dann den Textblock für alle folgenden Überschriften. Das macht optisch keinen Unterschied, macht es aber einfacher für Bildschirmleseprogramme, deine Seite zu interpretieren. Du kannst Erwähnungen verwenden und Hashtags und natürlich auch die klassischen Formatierungsoptionen wie Kursiv, oder du kannst einen Link hinzufügen. Du kannst diesen Text außerdem in eine Liste umwandeln oder in ein Zitat.

Einige Blöcke wie der News-Block bieten verschiedene Layoutvarianten in ihren Einstellungen. Wenn wir also zunächst einen Kanal auswählen und dann unter Design schauen, dann können wir hier zum Beispiel die Darstellung ändern oder einen Post hervorheben, vielleicht ein paar mehr anzeigen. Und beim Feed können wir außerdem die Leserichtung ändern. Medien wie Bilder kannst du aus Meine Dateien per Drag and Drop einfügen. Alternativ kannst du auch aus der Blockbibliothek einen Platzhalter nehmen und dann hier über die Einstellungen ein Bild hinzufügen. Aber wir bleiben erst mal bei dem hier drüben. Du kannst das Bild skalieren und zuschneiden, ohne dabei die Originaldatei zu verändern. In den Einstellungen kannst du außerdem eine Bildbeschreibung hinzufügen, und wir empfehlen auch einen aussagekräftigen Alternativtext, um die Barrierefreiheit zu verbessern.

Wenn du Inhalte innerhalb einer Spalte nebeneinander anordnen möchtest, dann kannst du einen weiteren Containerblock hinzufügen und dessen Spaltenlayout ändern. Du kannst bis zu drei Container ineinander verschachteln. Hier könnte ich jetzt also noch einen hinzufügen. Und dann hätten wir Container eins, zwei und drei. Und wenn ich jetzt versuche, hier noch einen vierten einzufügen, dann klappt das nicht mehr. Ich nehme den mal wieder raus und füge ein paar Buttons ein, einfach damit wir was zu sehen haben. Um in verschachtelten Layouts die richtige Ebene zu finden, ist dieser Button im Blocklabel sehr hilfreich. Er wählt immer das nächste übergeordnete Element aus. Du kannst dich außerdem mit der Tabulatortaste durch dein Dokument bewegen. Wenn du Tab drückst, dann wird zunächst die Toolbar des aktuell ausgewählten Blocks fokussiert und dann das nächste Element.

Um nicht ganz von null anfangen zu müssen, kannst du auch Vorlagen nutzen. Diese nehmen dir bei beliebten Layouts ein bisschen Arbeit ab. Natürlich kannst du sie nach dem Einfügen auch noch individuell anpassen. Die Navigationsansicht hier drüben zeigt die gesamte Struktur deiner Seite und lässt dich gezielt an bestimmte Stellen im Editor springen. In der Seitenleiste findest du außerdem Buttons zum Rückgängigmachen und Wiederholen und eine kleine Hilfestellung zu Tastenkombinationen. Auf eine Tastenkombination möchte ich aufmerksam machen, nämlich je nach Gerät entweder Steuerung + Umschalttaste + K oder Befehlstaste + Umschalttaste + K. Wenn ich also Befehlstaste + Umschalttaste + K drücke, dann öffne ich schnelle Aktionen, womit ich ganz schnell an weitere Optionen komme. Zum Beispiel kann ich hier einen weiteren Block einfügen.

Während der Bearbeitung kannst du deine Änderungen hier oben als Entwurf speichern. Damit ist für deine Nutzer noch nichts sichtbar. Im Vorschau-Tab kannst du überprüfen, wie die Seite auf verschiedenen Geräten aussieht. Mit Veröffentlichen wird die Seite dann sichtbar. Wenn du dann an deiner bereits veröffentlichten Seite wieder Änderungen vornimmst, dann kannst du die zunächst auch wieder als Entwurf speichern und dann später gezielt aktualisieren. Im Menü hier oben kannst du die veröffentlichte Seite öffnen, die Veröffentlichung rückgängig machen, den Versionsverlauf einsehen, einen Link kopieren, die Seite umsiedeln oder löschen. Im Versionsverlauf kannst du früher veröffentlichte Versionen dieser Seite wiederherstellen.

Schauen wir also mal auf unsere Seite. Der Content Designer unterstützt dich mit seinem flexiblen Gerüst aus Abschnitten, Containern und Blöcken sowie direktem visuellen Feedback und ermöglicht es dir so, ansprechende, moderne Seiten zu erstellen, ganz ohne Technik.

In diesem Video wollen wir mit dem Content Designer eine einfache Abteilungsseite erstellen. Das kannst du dann auch in deiner eigenen Umgebung nachbauen und erweitern oder anpassen.

Jede Seite beginnt mit einem Abschnitt und mit einem Container. Abschnitte definieren horizontale Bereiche und Container umschließen und organisieren deinen Inhalt. Wähle einfach ein Element aus, um seine kontextuelle Toolbar zu öffnen.

Dieser erste Abschnitt wird unser Header-Abschnitt. Dazu fügen wir zunächst ein Hintergrundbild hinzu und einen Titelblock. Wir empfehlen es, den Titelblock ganz oben auf deiner Seite zu verwenden und dann den Textblock für folgende Überschriften. Dadurch wird die Seite für Bildschirmlesegeräte einfacher zu interpretieren. Unter unserem Titel fügen wir noch einen Block mit einer kurzen Beschreibung hinzu. Dann würde ich hier gerne eine andere Farbe auswählen, und zwar hätte ich gerne Weiß. Leider ist jetzt der Kontrast nicht sehr gut, aber da können wir was dagegen tun. Wenn wir nämlich zurück zu den Hintergrundbildeinstellungen gehen, dann können wir hier unten eine Farbe drüberlegen und die Deckkraft einstellen, um den Kontrast zu regulieren. Gute Kontraste tragen viel zur Barrierefreiheit deiner Seite bei.

Unter unserem Header erstellen wir einen Schnellzugriffbereich für wichtige Ressourcen, die das Team häufig nutzt. Dazu fügen wir zunächst einen neuen Abschnitt hinzu und wählen für diesen Container ein dreispaltiges Layout. In die Spalten setzen wir diese Quicklink-Blöcke. Du kannst entweder Drag and Drop nutzen, wie ich gerade, oder eine Spalte oder einen Container auswählen und einen Block einfach anklicken, um ihn dort einzufügen. Dieser erste hier soll zu unseren Markenrichtlinien führen. Und dazu hätte ich gern ein anderes Icon, das hier, und dieses Listenlayout. Für den nächsten dupliziere ich einfach den ersten und ändere ihn ein bisschen ab. Und zum Kampagnenkalender passt natürlich das Kalender-Icon. Ich habe noch ein paar mehr Links, aber die habe ich tatsächlich auf einer anderen Seite einfach schon mal vorbereitet, damit ich sie schnell hier rüberkopieren kann. Zum Schluss möchte ich zu diesem Container noch eine dezente Hintergrundfarbe hinzufügen, damit sich die Links ein bisschen besser abheben.

Erstellen wir als Nächstes den Hauptbereich. Hier hätte ich gern zwei Spalten, eine etwas breitere und eine etwas schmalere. Auf die linke Seite kommen Abteilungsneuigkeiten. Dazu nehme ich den News-Block. Zuerst wähle ich einen Kanal aus und dann hätte ich gern dieses Layout mit vier Beiträgen. Auf der rechten Seite möchte ich zuerst unsere Abteilungsleitung vorstellen. Dazu nehme ich den Nutzerprofilblock. Das sieht jetzt vielleicht noch ein bisschen langweilig aus. Deshalb nehme ich mir hier drüben noch einen Containerblock und ziehe die beiden da rein, was auch erst mal gleich aussieht. Aber jetzt kann ich diesen Containerblock eben auswählen und eine Hintergrundfarbe hinzufügen, um diesen kleinen hervorgehobenen Bereich zu erstellen.

Davon mache ich gleich noch zwei mehr. Einer soll die Gruppen in unserem Team zeigen, damit Besucher der Seite schnell beitreten und Updates erhalten können. Dazu nehme ich also diesen Gruppe-beitreten-Block. Die erste Gruppe heißt Marketing-Team-Gruppe und unsere zweite Gruppe heißt Markenbotschafter-Gruppe. Und das kann weg. Hier unten schiebe ich wichtige Dokumente rein, damit sie schnell zu finden sind. Das kann ich entweder über Meine Dateien machen oder ich nehme mir hier drüben so einen Platzhalter und fülle hier die Datei ein. Jetzt brauchen die drei nur noch ein bisschen Platz. Deshalb nehme ich mir hier drüben die Trennlinie und füge hier eine ein und hier.

Hier unten drunter füge ich einen neuen Container hinzu, der unsere aktuellen Kampagnen darstellen soll. Ich möchte einige Kampagnen vorstellen, aber nicht allzu viel Platz einnehmen, deshalb entscheide ich mich hier für einen Akkordeon-Block. Dieses Fenster hier wird später auf der Seite eingeklappt dargestellt, sodass der Inhalt übersichtlich und organisiert bleibt. Unsere erste Kampagne ist eine Frühlingskampagne, und dazu habe ich auch eine Beschreibung. Der einfachste Weg, jetzt die einzelnen Bestandteile deines Akkordeon-Blocks auszuwählen, ist dieser Button hier im Label. Der wählt immer das nächste übergeordnete Element aus. Jetzt haben wir also das gesamte erste Panel des Akkordeons ausgewählt und können hier entweder ein neues hinzufügen oder das duplizieren. Das mache ich auch gleich, und dann brauche ich nur noch den Inhalt anzupassen. Und wir haben auch noch ein drittes. Jetzt möchte ich diesen Kampagnen ein bisschen mehr Fokus verleihen, deshalb nehme ich mir den gesamten Container und füge ein Hintergrundbild hinzu. Damit das Akkordeon besser lesbar bleibt, nehme ich mir auch noch das gesamte Akkordeon und füge hier eine einfache weiße Hintergrundfarbe hinzu.

Jetzt brauchen wir nur noch einen letzten Abschnitt, der unsere Teammitglieder vorstellt. Ich füge zunächst wieder eine Überschrift ein und dann noch einen Container-Block, den ich in vier Spalten aufteile für unsere vier Teammitglieder. Und die stelle ich wieder über den Nutzerprofil-Block dar. Austin war ja unser Teamleiter, und die anderen habe ich auf einer anderen Seite wieder vorbereitet, damit ich sie schnell hier rüberkopieren kann. Zum Schluss gebe ich dem ganzen Container wieder ein bisschen von dieser hellgrauen Hintergrundfarbe.

Jetzt haben wir also eine übersichtliche Abteilungsseite erstellt, die uns schnell an wichtige Informationen und Materialien bringt. Hier oben in der Vorschau können wir unsere Seite noch mal überprüfen, aber in diesem Fall gehe ich einfach sofort in die Veröffentlichung und dann können wir uns unsere Seite noch mal anschauen.

Vergleichen wir den klassischen Editor mit dem Content Designer. Wir beginnen mit dem Seitenlayout.

Hier im klassischen Editor basiert alles auf einem ungegliederten linearen Dokument. Um Inhalte nebeneinander anzuordnen, kannst du über diesen Abschnitte-Button hier oben verschiedene vordefinierte Layoutbereiche einfügen. Im Content Designer funktioniert das Layout ein bisschen anders. Anstatt einzelne Elemente von außen einzufügen, kontrollierst du das Layout über sogenannte Container. Deine Seite besteht also immer aus Abschnitten, und in diesen Abschnitten befinden sich Container, die wiederum alle Inhalte enthalten. Die lassen sich über ihre Einstellungen in verschiedene Spalten aufteilen. Ich füge mal noch einen hinzu. Du kannst die Container über Drag and Drop verschieben, um Inhalte flexibel neu anzuordnen.

Schauen wir uns also an, wie man Inhalte hinzufügt. Im klassischen Editor kannst du Absätze direkt hier im Dokument einfügen und andere Komponenten über die Toolbar hier oben. Du hast zum Beispiel Trennlinien, hier gibt es Tabellen. Du kannst Medien einfügen oder diese Widgets, wie zum Beispiel eine Infobox. Die wird an der aktuellen Cursorposition eingefügt. Einstellungen wie Sichtbarkeit oder zum Aussehen und auch den Inhalt musst du vorher definieren. Wenn du dann auf OK klickst, wird das eingefügt. Du kannst das im Nachhinein ändern. Zum Beispiel könnten wir die Farbe ändern oder das hier länger machen. Aber sichtbar werden diese Änderungen erst, wenn du speicherst.

Im Content Designer werden Widgets durch sogenannte Blöcke ersetzt, und die findest du hier drüben an der Seite in dieser ausklappbaren Bibliothek. Text ist auch ein Block und muss als solcher zum Dokument hinzugefügt werden. Wir bleiben aber erst mal bei der Infobox. Du kannst also entweder klicken oder über Drag and Drop den Block in der richtigen Spalte oder dem richtigen Container platzieren. Wenn ein Block ausgewählt ist, erscheint seine kontextuelle Toolbar. Hier kannst du jetzt die Einstellungen ändern und diese Änderungen sofort sehen, genauso wie deine Nutzer sie später auch sehen werden. Einige unübliche oder benutzerdefinierte Widgets wurden nicht in ihre eigenen Blöcke umgewandelt, sondern sind über diesen benutzerdefinierten Block verfügbar. Den kannst du einfach einfügen und dann über die Einstellungen das gewünschte Widget auswählen.

Schauen wir kurz noch auf die Textformatierung. Im klassischen Editor hast du deine Textformatierungsoptionen immer sichtbar oben in der Toolbar und kannst zum Beispiel hier eine Überschrift auswählen oder die Ausrichtung ändern, alles ganz klassisch. Im Content Designer ist auch das kontextabhängig. Das heißt, die Formatierungsoptionen erscheinen nur, wenn ein Textblock ausgewählt ist. Ansonsten funktioniert das aber genauso. Du kannst auch hier eine Überschrift auswählen, zentrieren und so weiter.

Als Nächstes vergleichen wir noch, wie man bestimmte Inhaltsabschnitte definieren und hervorheben kann. Im klassischen Editor sind deine Designoptionen dazu ein bisschen eingeschränkt, aber du kannst dieses Bannerbild-Widget benutzen und ihm ein schönes Hintergrundbild geben, um diesen auffällig optisch getrennten Bereich zu erzeugen, der dann aber diese vorgegebenen Textzeilen hat. Im Content Designer kannst du die Abschnitte und Container, die deine Inhalte umschließen, direkt bearbeiten und ihnen ein Hintergrundbild oder eine Farbe geben. Zum Beispiel könnten wir also diesem Abschnitt eine gelbe Hintergrundfarbe geben und dann für diesen Container ein Bild auswählen. So kannst du deine Seite schön visuell untergliedern und dabei aber immer die Kontrolle über das Layout behalten, sodass du flexibler im Design bist.

Zuletzt möchte ich kurz noch einen Unterschied bei der Veröffentlichung hervorheben. Im klassischen Editor werden Änderungen an einer bereits veröffentlichten Seite beim Speichern sofort sichtbar. Im Content Designer kannst du Änderungen zunächst als Entwurf speichern, und wenn du dann fertig bist, auf Aktualisieren klicken. Erst dann gehen sie live.

Der klassische Editor ist also kompakt und ähnelt einem traditionellen Texteditor mit seiner festen Werkzeugleiste, über die alles ausgewählt, definiert und dann direkt in den Fließtext eingefügt wird. Der Content Designer dagegen ist modular aufgebaut und ordnet Inhalte in diesem flexiblen, unterstützenden Gerüst an. Er passt sich dynamisch an Änderungen an, damit du immer sofort das passende visuelle Feedback bekommst.

Hier sehen wir eine Seite im Classic Editor. Oben gibt es eine Schaltfläche „In Content Designer starten“, die den Prozess beginnt. Ein Pop-up erscheint und bestätigt, dass dies eine Vorschau ist und dass Sie die Seite nach Abschluss des Vorgangs nicht mehr im Classic Editor bearbeiten können.

Die Vorschau zeigt, wie die Seite im Content Designer aussehen wird. Alle Inhalte aus der Classic Editor-Seite werden übernommen. Sie können Änderungen vornehmen, als Entwurf speichern und dann auf „Migration abschließen“ klicken – die Seite wird dann in den Content Designer übertragen.

In der Seiten-Übersicht gibt es außerdem einen Tab „Bereit für Content Designer“, der alle Seiten auflistet, die migriert werden können. So sehen Sie auf einen Blick, welche Seiten geeignet sind.