Lernen Sie den Content Designer kennen – Ihr neues Tool, um ansprechende Seiten ganz einfach zu erstellen. Damit können Sie Inhalte genau so gestalten und strukturieren, wie Sie es möchten.

Jede Seite besteht aus Abschnitten, Containern und Ihren Inhalten. Abschnitte definieren waagerechte Bereiche auf Ihrer Seite, helfen Themen zu trennen und Inhalte zu organisieren. Container befinden sich in diesen Abschnitten und steuern das Layout Ihrer Inhalte. Jede neue Seite startet mit einem Standard-Abschnitt und einem Container. Das ist Ihre Grundlage, Ihr Startpunkt.

Jedes Element hat eine eigene kontextbezogene Werkzeugleiste. Sie erscheint nur, wenn das Element ausgewählt ist, und zeigt nur relevante Optionen an. In den Container-Optionen können Sie das Layout anpassen, zum Beispiel drei Spalten oder zwei, je nachdem, wie Sie Inhalte nebeneinander anordnen möchten. Unter Design können Sie eine Hintergrundfarbe aus Ihren Markenfarben wählen oder ein Hintergrundbild hinzufügen. Unter Sichtbarkeit steuern Sie, wer was auf welchen Geräten sieht, und Sie können bestimmte Gruppen innerhalb derselben Seite gezielt ansprechen.

Um Inhalte hinzuzufügen, klicken Sie entweder auf die Schaltfläche Blöcke in der kontextbezogenen Werkzeugleiste oder in der Seitenleiste. Dort finden Sie alle Bausteine für Ihre Seite. Sie können einen Block entweder anklicken oder per Ziehen und Ablegen auf die Seite ziehen. Bei Titel- und Textblöcken können Sie Größe, Ausrichtung, Profil-Tags für Personalisierung, Farbe und Emojis anpassen.

Der Titelblock wird für die Hauptüberschrift empfohlen, der Textblock für alle weiteren Überschriften. Das macht Ihre Seite für Screenreader-Nutzer besser zugänglich. Textblöcke unterstützen Erwähnungen, Hashtags, klassische Formatierungen wie Kursiv, Links, Listen und Blockzitate. Einige Blöcke wie der News-Block bieten Layout-Varianten. Über Meine Dateien können Sie Medien wie Bilder hinzufügen, die Sie direkt auf der Seite in der Größe anpassen und zuschneiden können, ohne die Originaldatei zu verändern.

Sie können bis zu drei Container-Blöcke ineinander verschachteln. Das Navigations-Panel zeigt die komplette Struktur Ihres Dokuments und ist besonders bei großen Seiten hilfreich. In der Seitenleiste finden Sie außerdem Rückgängig/Wiederherstellen-Schaltflächen und Tastenkombinationen, zum Beispiel Command/Control+Shift+K für eine schnelle Optionen-Box.

Während Sie an Ihrer Seite arbeiten, können Sie Änderungen als Entwurf speichern – sie sind dann noch nicht für Ihre Nutzer sichtbar. Nutzen Sie das Vorschau-Panel, um zu prüfen, wie Ihre Seite auf verschiedenen Geräten aussieht. Wenn alles bereit ist, klicken Sie auf Veröffentlichen und Ihre Seite ist live. Im Optionen-Menü können Sie die veröffentlichte Seite öffnen, zurückziehen, den Versionsverlauf ansehen, den Link kopieren oder die Seite löschen.

Der Content Designer hilft Ihnen, moderne und ansprechende Seiten im echten WYSIWYG-Stil zu erstellen. Durch die Kombination von Abschnitten, Containern und Blöcken können Sie schnell übersichtliche und attraktive Seiten gestalten – ganz ohne technisches Vorwissen.

In diesem Video erstellen wir mit dem Content Designer eine einfache Abteilungsseite. Sie können diese Seite in Ihrer eigenen Umgebung nachbauen und anpassen.

Jede Seite beginnt mit einem Abschnitt und einem Container. Abschnitte definieren waagerechte Bereiche, Container enthalten und ordnen Ihre Inhalte. Während Sie bauen, können Sie jedes Element auswählen, um über die kontextbezogene Werkzeugleiste auf alle verfügbaren Optionen zuzugreifen.

Für den Abteilungs-Header fügen Sie dem ersten Abschnitt ein Hintergrundbild hinzu und dann einen Titelblock. Verwenden Sie den Titelblock ganz oben auf Ihrer Seite und Textblöcke für alle weiteren Überschriften. So entsteht eine klare Dokumentenstruktur, die für Screenreader leichter zugänglich ist. Fügen Sie unterstützenden Text unter dem Titel hinzu und probieren Sie verschiedene Farben aus. Wenn der Kontrast nicht ausreicht, gehen Sie zurück zum Hintergrundbild und fügen Sie eine Farbüberlagerung hinzu, um den Kontrast zu regulieren.

Unterhalb des Headers erstellen Sie einen Schnellzugriff-Bereich mit einem Drei-Spalten-Layout, um wichtige Ressourcen hervorzuheben. Fügen Sie Quicklinks per Drag & Drop oder durch direktes Klicken in einen Container hinzu. Passen Sie das Icon, das Layout und das Design jedes Links an. Geben Sie dem Container eine dezente Hintergrundfarbe, damit die Links besser hervorstechen.

Für den Hauptinhalt fügen Sie einen Zwei-Spalten-Abschnitt hinzu. Links kommt ein News-Block, wählen Sie einen Kanal aus. Rechts stellen Sie die Abteilungsleitung mit einem Nutzerprofil-Block vor und gruppieren diesen in einem Container mit Hintergrundfarbe. Erstellen Sie weitere Container für Teamgruppen mit der Gruppenabo-Schaltfläche und für wichtige Dokumente mit Meine Dateien oder einem Platzhalter-Block. Fügen Sie Trennlinien zwischen den Abschnitten für mehr Abstand ein.

Fügen Sie einen Akkordeon-Block für Kampagnen-Inhalte hinzu, um die Seite übersichtlich und leicht erfassbar zu halten. Jeder Akkordeon-Abschnitt klappt auf der veröffentlichten Seite ein. Wählen Sie den übergeordneten Container aus und fügen Sie ein Hintergrundbild hinzu, geben Sie dem Akkordeon einen weißen Hintergrund für bessere Lesbarkeit.

Im letzten Abschnitt stellen Sie das Team vor. Fügen Sie eine Überschrift hinzu, dann einen Container mit vier Spalten und in jede Spalte einen Nutzerprofil-Block. Geben Sie dem Container eine graue Hintergrundfarbe für ein einheitliches Erscheinungsbild.

Das Ergebnis ist eine strukturierte Abteilungsseite mit klarer Navigation, relevanten Inhalten und wichtigen Ressourcen. Sehen Sie sich die Vorschau an und veröffentlichen Sie die Seite, wenn sie fertig ist.

Vergleichen wir den Classic Page Editor und den Content Designer, beginnend mit dem Seitenlayout.

Im Classic Editor ist Ihre Grundlage ein einziges lineares Dokument. Um Inhalte nebeneinander anzuzeigen, fügen Sie vordefinierte Layoutbereiche über die Schaltfläche Abschnitte in der Werkzeugleiste hinzu. Im Content Designer wird das Layout in den Containern gesteuert. Ihre Seite besteht standardmäßig aus Abschnitten, in denen sich Container befinden, die alle Inhalte aufnehmen. Diese Container können über ihre Optionen in verschiedene Spaltenlayouts aufgeteilt werden, und Sie können jeden Container flexibel per Drag & Drop verschieben, um große Inhaltsbereiche neu anzuordnen.

Im Classic Editor fügen Sie Inhalte direkt als Absätze auf der Seite hinzu, mit Elementen wie Trennlinien, Tabellen, Medien und Widgets, die über die obere Werkzeugleiste verfügbar sind. Einstellungen wie Sichtbarkeit oder Design werden vor dem Hinzufügen des Elements festgelegt, Änderungen werden erst nach dem Speichern sichtbar. Im Content Designer werden Inhaltselemente durch Blöcke ersetzt, die in einer einklappbaren Seitenleiste verfügbar sind. Auch Text ist ein Block und nicht direkt auf der Seite. Wenn ein Block ausgewählt ist, erscheint eine kontextbezogene Werkzeugleiste, in der Sie Einstellungen ändern und die Änderungen sofort im WYSIWYG-Stil sehen.

Für die Textformatierung zeigt der Classic Editor alle Formatierungsoptionen in der oberen Werkzeugleiste an. Im Content Designer ist die Textformatierung kontextbezogen und erscheint nur, wenn der Textblock ausgewählt ist. Beide unterstützen Fett, Überschriften und Ausrichtungsänderungen.

Für das Design von Inhaltsbereichen bietet der Classic Editor nur eingeschränkte Hintergrundoptionen, unterstützt aber ein Bannerbild Widget. Im Content Designer können Abschnitte und Container Hintergrundfarben und -bilder erhalten, was mehr Gestaltungsmöglichkeiten bietet.

Beim Veröffentlichen werden im Classic Editor Änderungen an einer bereits veröffentlichten Seite sofort live geschaltet, sobald Sie speichern. Im Content Designer speichern Sie Änderungen als Entwurf und erst wenn Sie auf Aktualisieren klicken, werden die Änderungen auf der veröffentlichten Seite sichtbar.

Zusammengefasst: Der Classic Editor ist kompakt und linear, ähnlich wie ein klassischer Texteditor. Der Content Designer ist großzügig und modular, organisiert Inhaltsblöcke in einem flexiblen Rahmen, der sich beim Bearbeiten dynamisch anpasst und sofort visuelles Feedback gibt.

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.