Gestaltungsfreiheit in SharePoint & Neuerungen für flexible Abschnitte

Große Bilder, überlappende Textflächen und eine Abteilungsseite mit eigenem Charakter: Mit flexiblen Abschnitten lässt sich in SharePoint viel gestalten. Drei neue Funktionen erleichtern jetzt die Arbeit daran: vorhandene Abschnitte umwandeln, das Raster nach Bedarf einblenden und Layout-Hilfen anzeigen.

In meinem neuen Video stelle ich diese Neuerungen vor und zeige anschließend anhand einer Seite, wie daraus ein moderner Einstieg ins Intranet entsteht. Zum Einsatz kommen Bilder, Texte und eine hervorgehobene Karte mit einer Schaltfläche – direkt im SharePoint-Seiteneditor.

Was machen flexible Abschnitte möglich?

Flexible Abschnitte, auch Flexible Sections genannt, gibt es bereits seit einiger Zeit. Darin lassen sich Seitenbausteine, die sogenannten Webparts, innerhalb eines Rasters frei positionieren und in ihrer Größe anpassen. Auch überlappende Elemente sind möglich: Eine Textfläche kann beispielsweise teilweise über einem Bild liegen.

Das bietet besonders für Intranet-Einstiegsseiten, Abteilungsseiten oder Themenseiten mehr Spielraum. Bilder können stärker wirken, wichtige Inhalte bekommen mehr Aufmerksamkeit und zusammengehörige Informationen lassen sich als erkennbare Bereiche gestalten.

1. Vorhandene Abschnitte in flexible Abschnitte umwandeln

Mit „Convert to flexible section“ lässt sich ein vorhandener Standardabschnitt direkt in einen flexiblen Abschnitt umwandeln. Die Funktion wird in den Bearbeitungsoptionen des jeweiligen Abschnitts angeboten.

Das ist praktisch, wenn eine bestehende Seite gestalterisch weiterentwickelt werden soll. Aus dem bisherigen Abschnitt wird ein Bereich, in dem sich die Inhalte anschließend freier anordnen lassen. So kann beispielsweise aus einem klassischen Einstieg mit Bild und Text ein großzügiger gestalteter Blickfang werden.

Wichtig: Im gezeigten Funktionsstand gibt es keine direkte Rückumwandlung in einen Standardabschnitt. Wer wieder ein klassisches Spaltenlayout verwenden möchte, muss einen entsprechenden Abschnitt neu anlegen und die Webparts dorthin verschieben.

2. Das Raster nach Bedarf anzeigen

Wer Bilder und Texte frei platziert, braucht Orientierung. Dafür sorgt das Raster: Es hilft dabei, Elemente auszurichten und ihre Positionen besser einzuschätzen.

Neu ist die Möglichkeit, über „Show grid“ selbst zu bestimmen, wann dieses Raster sichtbar sein soll:

• Dauerhaft beim Bearbeiten: Das Raster bleibt eingeblendet. Das erleichtert die Arbeit, wenn mehrere Elemente aufeinander abgestimmt werden sollen.
• Nur beim Verschieben: Ohne die dauerhafte Anzeige erscheint das Raster beim Bewegen eines Webparts. Dazwischen bleibt die Arbeitsfläche übersichtlicher.

Damit lässt sich die Ansicht an den eigenen Arbeitsstil anpassen. Das Raster dient als Gestaltungshilfe im Editor.

3. Layout Guides für eine klare Aufteilung einblenden

Zusätzlich zum Raster lassen sich jetzt Layout Guides anzeigen. Diese Hilfslinien machen die gewählte Aufteilung des flexiblen Abschnitts sichtbar, beispielsweise eine Orientierung an zwei oder drei Spalten.

Während das Raster bei der genauen Platzierung einzelner Elemente hilft, zeigen die Layout Guides die größeren Bereiche: Wo endet der linke Teil? Wo beginnt der nächste? An welcher Linie können sich mehrere Inhalte orientieren?

Gerade bei umfangreicheren Entwürfen erleichtert das eine stimmige Anordnung. Die freie Positionierung bleibt erhalten, erhält aber einen gut sichtbaren Rahmen.

Im Praxisbeispiel: Eine moderne Seite für „IT & Digital“

Im Video kombiniere ich mehrere Bilder mit Textbereichen und dem Editorial-Card-Webpart. Eine große Überschrift und eine Schaltfläche für den Support bilden den Einstieg. Weitere Bild- und Textflächen ergänzen die Seite.

Durch unterschiedliche Größen, gezielte Überlappungen und einen abgestimmten blauen Hintergrund entsteht ein zusammenhängendes Design. Über die Anordnung der Elemente lässt sich festlegen, welche Fläche im Vordergrund liegt. Die neuen Raster- und Layout-Hilfen unterstützen dabei, die einzelnen Bausteine passend auszurichten.

Die mobile Ansicht gehört zum Design dazu

Ein Layout sollte auch auf dem Smartphone verständlich bleiben. Im Beispiel dient ein zusätzliches Bild als farbiger Hintergrund hinter einem Text. In der mobilen Ansicht kann diese dekorative Fläche jedoch als eigenständiges Bild erscheinen und den Lesefluss unterbrechen.

Deshalb zeige ich im Video auch die passenden Einstellungen: Rein dekorative Bilder lassen sich für die mobile Ansicht und die E-Mail-Ansicht ausblenden. Außerdem kann die vergrößerte Bildanzeige beim Anklicken deaktiviert und ein Bild für die Barrierefreiheit als dekorativ gekennzeichnet werden.

Mein Tipp: Schon während der Gestaltung regelmäßig in die Vorschau wechseln und die mobile Darstellung prüfen. So lässt sich früh erkennen, welche Elemente auf kleinen Bildschirmen hilfreich sind.

Im Video könnt ihr den Aufbau Schritt für Schritt verfolgen – von der Umwandlung des Abschnitts über die neuen Gestaltungshilfen bis zur fertigen Beispielseite. Probiert die Funktionen doch einmal an einer Abteilungsseite aus und gebt euren Inhalten mehr Raum.