Die Website-Base erleichtert das Erstellen und Bearbeiten von Webseiten immens. Sie liefert alle Bausteine, die man braucht, um eine gut aussehende Webseite zu erstellen. Zusätzlich wurden alle diese Elemente so erstellt, dass diese vollständig responsiv sind, das bedeutet, sie reagieren auf unterschiedliche Darstellungsgrößen, zum Beispiel auf Smartphones oder in kleineren Browserfenstern, so, dass Webseiten, die auf Basis der Website-Base gebaut werden, immer optimal angezeigt werden.

Responsive Seitenaufteilung

Für die Erstellung neuer Seiten stehen in der Website-Base verschiedene "Skelett"-Bausteine zur Verfügung, mit deren Hilfe die Struktur für jede Seite individuell definiert wird. Darunter befinden sich beispielsweise mehrspaltige Abschnitte und farbig hinterlegte Bereiche. Dank des Baukastensystems können diese beliebig kombiniert werden, zum Beispiel kann ein farblich hinterlegter, mehrspaltiger Bereich durch wenige Klicks zusammengebaut werden.

Die Frontend-Struktur der Webseite wird auch im Backend durch diese Bausteine repräsentativ dargestellt, was das Bearbeiten einer Seite sehr einfach macht:


Für die Flexibilität der Webseiten wurden diese Bausteine so entworfen, dass beispielsweise ein Bereich mit vier Spalten auf schmaleren Bildschirmen automatisch zu einem 2x2-Bereich wird.

Texte, Bilder und Videos einsetzen

Um nun das Gerüst nicht leer stehen zu lassen, müssen natürlich Texte, Bilder und Videos hinzugefügt werden. Das alles geschieht über ein einzelnes TYPO3-Inhaltselement, das Texte und andere Medien verarbeitet.

Der Rich Text Editor

In diesem Inhaltselement steht ein Rich Text Editor zur Verfügung, der Textformatierungen im Handumdrehen erlaubt. Hier stehen, angefangen bei Standardfunktionen wie fettgedrucktem Text über allerlei farblich gekennzeichnete Labels, Badges, Buttons und Warnhinweise bis hin zu Tabellen und diversen Absatzformaten so viele Optionen zur Verfügung, dass es den Rahmen sprengen würde, alle hier einzeln aufzuzählen oder gar zu zeigen.

Alle Formatierungen werden nicht erst beim Aufruf der Seite im Frontend angezeigt, sondern sind bereits innerhalb des Editors vollständig zu sehen.

Auf dieser Demoseite werden die verschiedenen Buttons, Labels und einige Absatzformate, wie zum Beispiel die Zitat-Box, gezeigt.

Text und Medien

Dasselbe Inhaltselement ermöglicht es, Videos und Bilder verschiedener Dateiformate oder auch Verknüpfungen zu YouTube- oder Vimeo-Inhalten einzubetten. Möchte man Medien und Text miteinander verbinden, so stehen auch dazu Optionen bereit, sodass beispielsweise alle Medien eines Inhaltselements unterhalb des zugehörigen Textes angezeigt werden.

Responsivität von Bildern und Texten

Texte und Medien werden grundsätzlich responsiv eingebunden. Um die Darstellung noch weiter optimieren zu können, stehen für Bilder besonders detaillierte Einstellungsmöglichkeiten zur Verfügung. So lassen sich für kleinere Bildschirme explizite Bildausschnitte auswählen, sodass diese auf Smartphones besser sichtbar sind.


Interaktive Inhaltselemente erstellen

Die Website-Base beinhaltet einige interaktiv gestaltete Inhaltselemente, durch die vielfältige Darstellungsoptionen für Ihre Inhalte zur Verfügung gestellt werden. Diese wurden so gestaltet, dass mit wenigen Klicks Inhalte zur Webseite hinzugefügt werden können. So wird mit kleinem Aufwand Großes geschaffen.

Google-Karten einbinden

Um interaktive Google-Karten auf der Webseite einzubinden, ist nur die Eingabe der gewünschten Adressdaten oder Koordinaten in einem speziell dafür entworfenen Inhaltselement nötig. Zusätzlich lässt sich einstellen, ob, wie auf der Beispielkarte, die klassischen Google Maps Kontrollelemente zur Verfügung stehen sollen, um beispielsweise für eine Anfahrtsbeschreibung eine bessere Orientierung zu ermöglichen.

Möchte man exakte Standorte markieren, so können beliebig viele Marker mit individueller Beschreibung und einem konfigurierbaren Symbol, wie zum Beispiel einem Firmenlogo, hinzugefügt werden, um beispielsweise den Unternehmensstandort klar zu markieren.

Brandenburger Tor

Highlight Boxen

Die Highlight Box ist im Grunde genommen ein normaler Textbereich mit farbigem Hintergrund und automatischer Anpassung der Textfarbe für verbesserte Lesbarkeit. In den Einstellungen des Elements sind verschiedene Farbkombinationen vorkonfiguriert, wie zum Beispiel ein gelber Hintergrund für Warnmeldungen.

Durch solche Highlight Boxen können zum Beispiel Ankündigungen prominent eingebunden werden.

Fortschrittsbalken

Fortschrittsbalken lassen sich beispielsweise verwenden, um den Fortschritt beim Aktivieren eines Accounts oder einem Bestellvorgang zu veranschaulichen. Auch dafür enthält die Website-Base ein vorgefertigtes Element, das animierte Fortschrittsbalken in verschiedenen Farben darstellen kann.

Visitenkarten

Um Produkte oder weiterführende Inhalte besonders ins Rampenlicht zu stellen, eignen sich visitenkartenartige Elemente hervorragend. Auch solche Elemente wurden für die Website-Base fertig konfiguriert, sodass diese durch Eingabe weniger Informationen schnell und ansprechend Teil einer Seite werden können.

Ein weiteres Highlight dieser Karten ist, dass sie dynamisch auf Mauszeiger reagieren, sobald der Nutzer über die Karte fährt, falls diese einen Link zu einer anderen Seite enthält. So wird dem Besucher angezeigt, dass sich hinter der Karte interessante Inhalte verbergen und ein Anreiz geschaffen, sich diese anzusehen.

Selbstverständlich wurden auch die Karten so flexibel erstellt, dass diese jederzeit optimal dargestellt werden, sei es, wenn diese sich über die gesamte Bildschirmbreite erstrecken, neben anderen Inhaltselementen angelegt sind oder die Seite auf einem Mobilgerät aufgerufen wird.

Icon Element

Über das Icon Element lässt sich jedes Fontawesome-Icon mit wenig Aufwand einbinden. Diese können beispielsweise genutzt werden, um Lupen für eine Suchfunktion einzubinden.

Durch unsere Implementierung können in wenigen Schritten ein Untertitel zum Icon hinzugefügt werden und Größe und Hintergrundgestaltung des Icons verändert werden.

Icon-Element mit Kaffeetasse ohne Hintergrund

Icon-Element mit U-Bahn und Hintergrund

Icon-Element mit Truck und rundem Hintergrund

Bildergalerien

Bildergalerien können genutzt werden, um zum Beispiel Bilder der letzten Produktveröffentlichung eines Unternehmens zu publizieren. Dieses Mask-Element ruft ganz einfach alle Bilder innerhalb eines Ordners ab und stellt diese in konfigurierbarer Größe kachelartig dar.

Die Bilder lassen sich durch Anklicken innerhalb einer Lightbox mit Navigationselementen in voller Größe betrachten.

Slider

Slider sind Elemente, welche Bilder und/oder Texte über die gesamte Breite des Bereichs, in welchem sie eingesetzt wurden, erstrecken und automatisch oder über eine Pfeilnavigation durchlaufen lassen. Auch diese können in der Website-Base über ein speziell entworfenes Inhaltselement mit Leichtigkeit erstellt und im Header oder dem Inhaltsbereich einer Seite eingebunden werden.

Call to Action

Calls to Action sind konfigurierbare, auffällige Buttons, die die Aufmerksamkeit des Besuchers auffangen sollen. Sie funktionieren ansonsten wie gewöhnliche Links.

Sollte Sie die Vielzahl an Möglichkeiten der Inhaltserstellung für Ihre Webseite bereits überzeugt haben, können Sie über den Call to Action rechts unser Kontaktformular aufrufen und ein unverbindliches Angebot anfordern.


Inhalte anderer Seiten dynamisch einbinden

Teaser: Unterseiten in Lightboxes präsentieren

Teaser werden verwendet, um Unterseiten zu verknüpfen. Dazu bietet die Website-Base ein vorgefertigtes Plugin, welches für erstklassige Übersicht beim Erstellen und Aufrufen der Teaser sorgt und für Seitenbesucher durch ansprechende Animationen Anreize schafft, die Unterseiten aufzurufen.

Durch dieses Plugin lassen sich die verknüpften Unterseiten im Backend nach Kategorien sortieren und im Frontend können ebendiese Kategorien zur Filterung relevanter Artikel genutzt werden. Beim Aufrufen der Seite werden alle Seiten aller verbundenen Kategorien angezeigt.

Jede verknüpfte Unterseite wird durch ein Bild oder einen kurzen Einleitungstext in einem kachelartigen Element vorgestellt. Durch Anklicken dieses Links öffnet sich die verknüpfte Seite in einer Lightbox. Zusätzlich erlaubt die technische Umsetzung, verknüpfte Seiten problemlos auch in einem neuen Tab oder Fenster zu öffnen.

Die Website-Base bietet zwei Arten des Teaser-Plugins, die grundsätzlich sehr ähnlich funktionieren, aber ein unterschiedliches Verhalten bei der Filterung der verknüpften Seiten vorweisen.

Eindimensionale Teaser

Durch sogenannte eindimensionale Teaser kann eine Kategorie zur Filterung ausgewählt werden, das heißt die Teaser zu allen Seiten, die nicht dieser Kategorie angehören, werden ausgeblendet und nur die Unterseiten der gewählten Kategorien werden angezeigt.

So könnte man beispielsweise die Vorstellungsseite der Mitarbeiter eines Unternehmens so gestalten, dass für jeden Mitarbeiter eine nach Abteilungen kategorisierte Unterseite existiert. Eindimensionale Teaser ermöglichen es dann, alle Mitarbeiter einer bestimmten Abteilung anzeigen zu lassen.

Mehrdimensionale Teaser

Mehrdimensionale Teaser ermöglichen es, mehrere Unterkategorien gleichzeitig zur Filterung zu verwenden, sodass nur diejenigen Teaser angezeigt werden, deren Seiten allen gewählten Kategorien angehören.

Damit lassen sich im Anwendungsbeispiel die Mitarbeiter nicht nur nach ihrer Abteilung, sondern auch ihrer jeweiligen Position filtern. 

Sie möchten das Baukastensystem der Website-Base für Ihre Seite nutzen?

Wir freuen uns auf Ihre Anfrage über unser Formular oder gerne auch über einen der anderen Kontaktwege.