Gestaltungsbeispiele für Webseiten

Sie haben Fragen, wie Sie ein Thema auf Ihrer Seite am besten visuell darstellen können. Sie überlegen, welche Darstellungsoption in Ihrem Fall geeignet ist oder wollen sich erst einmal orientieren, was für Gestaltungsmöglichkeiten überhaupt möglich sind? Auf dieser Seite finden Sie einige Beispiele, die Ihnen dazu einen ersten Überblick verschaffen sollen.

Zu allen Anwendungen finden Sie in der Typo3-Online (Video-)Anleitungen.

Wenn Sie eine Seite erstellen, können Sie diese entweder im 2- oder 3-Spalten-Layout anlegen. Das 3-Spalten-Layout bietet allerdings den Vorteil, dass die rechte Spalte, in der oftmals wichtige Informationen stehen, angezeigt wird. 
Hier finden Sie die Anleitung zum Seitenlayout.​​​​​​​

Ein Banner kann Themen auf einer Webseite einleiten oder von einander abgrenzen. Gerade bei Seiten mit viel Inhalt und Text ist ein Banner von Vorteil, da es visuell hilft, einen Überblick zu erhalten, ohne die Leser*innen zu überfordern.
Außerdem ist es möglich, Überschriften als Banner-Bild darzustellen. Dieses Feature ist ebenso hilfreich, um einen Themenwechsel ansprechend einzuleiten. 
Die Anleitung zum Überschrift-Banner finden Sie hier.

Kurz- Profile sind besonders gut dazu geeignet, Personen oder auch ein Thema kurz und kompakt vorzustellen. So erhalten Leser*innen auf einen Blick alle Informationen und einen ersten Überblick.
Die Anleitung zu Kurz- Profilen finden Sie hier.​​​​​​​

Um mehrere Inhaltselemte nebeneinander darzustellen, nutzen Sie am besten das Rasterelement. Dabei können Sie entweder zwei oder drei Container nebeneinander platzieren. Um zusätzlich das Layout noch ansprechender zu gestalen, können Sie die einzelnen Elemente auch mit einem farbigen Hintergrund versehen (Funktion „Farbcontainer"), um z. B. Inhalte voneinander abzugrenzen. Sie können auch unterschiedliche Längen der einzelnen Container auf eine einheitliche Länge einstellen.
Die Anleitung zum Rasterelement finden Sie hier.

Kacheln sind eine gute Möglichkeit, Informationen kompakt und visuell ansprechend darzustellen. Die Leser*innen finden so alle Informationen auf einen Blick und können bei weiterem Interesse auf die Kachel klicken, um so mehr zu erfahren. Sie können entweder zwei oder drei Kacheln nebeneinander platzieren, in der mobilen Ansicht werden diese untereinander angezeigt.
Die Anleitung zu den Kacheln finden Sie hier.

Um visuell ansprechend auf eine andere Seite, Medien wie Podcasts, Dateien oder ähnliches hinzuweisen sowie auf diese zu verlinken, eignet sich das Plug in „Button". Die Besucher*innen der Seite brauchen das Element nur anklicken und kommen dann direkt zu weiteren Informationent. Falls gewünscht, können Sie den Button auch farblich gestalten.
Die Anleitung für den Button finden Sie hier.​​​​​​​

Um mehrere Bilder anzeigen zu können, nutzen Sie am besten einen Slider. Die Nutzer*innen können selbstständig, mithilfe der unterhalb eingeblendeten Leiste, durch die verschiedenen Blider klicken.
Die Anleitung zum Slider finden Sie hier.​​​​​​​

Um viele Informationen auf einer Webseite anzeigen zulassen, ohne dabei die Leser*innen mit zu viel Text auf einmal zu überfordern. empfehlen wir das Akkordeonelement. (Weiterführende) Informationen, die nicht auf den ersten Blick sichtbar sein müssen, können so einfach "wegklappt" werden. Anhand der Überschriften der Elemente können sich die Leser*innen zunächst einen Überblick verschaffen und dann entscheiden, ob und welche Informationen für sie relevant sind, um diese dann zu aufzuklappen.
Die Anleitung für das Akkordeonelement finden Sie hier.

Um eine pdf-Datei als eine Art Magazin zum Durchblättern anzubieten, eignet sich das „Flipbook"-Plug-In. Die Ansicht auf der Seite ist schöner als ein pdf nur per Link zum Download verfügbar zu machen.
Die Anleitung für das Flipbook finden Sie hier.​​​​​​​

Das Plug-In "Slideshare" eignet sich dazu, eine PDF-Datei übersichtlich und ansprechend darzustellen. Auf der Webseite wird die Datei dann wie eine Präsentation dargestellt, durch die sich die Leser*innen selbstständig durchklicken können. 
Die Anleitung zum Slideshare finden Sie hier.​​​​​​​

Das dekorative Bewegtbild sorgt dafür, dass Ihre Webseite lebendiger und interaktiver wirkt. Sie können so im wahrsten Sinne des Wortes Bewegung auf Ihre Seite bringen.
Die Anleitung für das dekorative Bewegtbild finden Sie hier.

Mit dem Teaser-Element können Sie ein Thema oder eine Information visuell ansprechend darstellen. Neben einem Bild wird ein kurzer Textanriss, auch Teaser, angezeigt, der Interesse auf die vertiefenden Inhalte wecken soll. Der Teaser ist komplett verlinkbar, sodass man auf den dahinterliegenden Inhalt einfach verweisen kann

Die Anleitung zum Teaser-Element finden Sie hier.

Das Logo-Element ermöglicht die einfache Einbindung von Logos auf der Seite, ohne dass die Datei vorher passend zurechtgeschnitten werden muss. Außerdem ist es mit dem Logo-Container möglich, mehrere Logo-Elemente direkt nebeneinander einzubinden.

Die Anleitung zum Logo-Element finden Sie hier.

Um eine oder mehrere Personen mit einer Empfehlung oder einem kurzen Zitat visuell ansprechend darzustellen, können Sie ein Testimonial-Element verwenden. Es wird neben dem Porträt-Foto und dem Namen ein kurzer Einführungstext angezeigt. Über den „Mehr erfahren“-Link können Sie z. B. auf eine Seite mit einem längeren Zitat verweisen.

Die Anleitung zum Testimonial-Element finden Sie hier.

Mit einem Banner können Sie den Einstieg einer Seite ansprechend gestalten. Im Banner werden ein Bild und eine Überschrift angezeigt. Auf langen Seiten können Sie bei Bedarf zusätzlich eine Binnennavigation anlegen. Diese funktioniert wie ein Inhaltsverzeichnis und führt direkt zu den jeweiligen Abschnitten. Sie wird unterhalb des Banners angezeigt und bewegt sich beim nach unten Scrollen mit.

Die Anleitung zum Banner finden Sie hier.

Mit der Zitat-Box können Sie ein Zitat visuell ansprechend darstellen. Das Zitat wird in einer Box angezeigt.

Die Anleitung zur Zitat-Box finden Sie hier.

Mit einerLink-Box können Sie mehrere Links visuell ansprechend und übersichtlich dartellen. Die Link-Box wird mit einem Bild, einer Übeschrift im Bild und den Links als Aufzählung angezeigt

Die Anleitung zur Link-Box finden Sie hier.

Alternativ zur Link-Box können Sie eine Link-Liste nutzen, um mehrere Links anzeigen zu lassen. Layout-Option 1 ist mit einem grauen Hintergrund ausgestattet und für eine kurze Liste geeignet. Layout-Option 2 hat einen weißen Hintergrund und ist auf eine längere Liste ausgerichtet.

Die Anleitung zur Link-Liste finden Sie hier.