Mask ist eine Extension oder Erweiterung für TYPO3, mit der sich unkompliziert eigene Inhaltselemente erstellen lassen. In der Website-Base finden Sie unter den Mask Elements nützliche Inhaltselemente, mit denen sich spezieller Inhalt einfach integrieren lässt und besondere Darstellungsformen schnell umgesetzt sind.

Google Maps

Das Inhaltselement Google Maps ermöglicht es, in nur wenigen Schritten eine dynamische Karte einzubinden. Der User kann die Karte bewegen, rein- und rauszoomen, sie im Vollbildmodus anschauen oder sie in der Street View betrachten. Ob dabei ein Marker gesetzt oder eine Beschreibung eingefügt wird, kann individuell eingestellt werden.

Reiter Allgemein

Typ, Spalte & Überschrift

Das Feld Typ zeigt Ihnen, in welchem Inhaltselement Sie sich aktuell befinden. Das Feld Spalte gibt an, wo sich der Inhalt befindet. Die Überschrift tragen Sie in das freie Feld ein und legen im darunter liegenden Feld Typ fest, welches Layout der Titel haben soll.

Breitengrad, Längengrad & Adresse

Die Grade oder die Adresse, die Sie hier eintragen, werden mittig in der Karte angezeigt (einen Marker für die exakte Stelle gibt es jedoch noch nicht).

Zoomstufe, Breite & Höhe

Wie sehr die Karte vergrößert oder verkleinert dargestellt werden soll, legen Sie mit dem Zoom fest. Die Standardeinstellung ist 13. Im Screenshot sehen Sie, wie diese Stufe im Frontend aussieht. Mit der Breite und Höhe lässt sich die Größe des Bereiches um die angegebene Adresse bzw. um die Koordinaten einstellen. Die Angaben können in Pixel oder Prozent gemacht werden. Die Voreinstellung sieht eine 100 % Breite und eine Höhe von 200 px vor. In einem 2-Spalter würde die Karte zu 100 % die Breite einer Spalte einnehmen.

Kontrollelemente anzeigen

Standardmäßig sind die Kontrollelemente für den Nutzer nicht aktiviert. Wenn Sie möchten, dass Ihren Seitenbesuchern die Buttons zum Vergrößern und Verkleinern sowie für die Google Street View angezeigt werden, müssen Sie hier ein Häkchen setzen.

Marker

Mit Markern kennzeichnen Sie  einen Standort. Sie können außerdem mehrere Marker in einer Karte festlegen, um beispielsweise Haupt- und Nebengebäude zu zeigen oder auf markante Häuser in der Umgebung für eine bessere Orientierung hinweisen.

Gehen Sie wie folgt vor, um einen Marker anzulegen oder zu bearbeiten:

  1. Klicken Sie unter Marker auf Neu anlegen.
  2. Tragen Sie die Koordinate bzw. Breiten- und Längengrade oder die Adresse ein.
    • Die Adresse dient gleichzeitig als Name des Markers. Wenn Sie also Breiten- und Längengrad eintragen, können Sie das Adressfeld nutzen, um den Marker zu benennen.
  3. Laden Sie ein eigenes Icon für den Marker hoch und verknüpfen sie ihn, indem Sie eine Neue Relation erstellen.
    • Standardmäßig nutzt Google einen roten Marker, wie im Screenshot zu sehen ist.
  4. Damit ein Marker nicht mehr im Frontend zu sehen ist, aktivieren Sie einfach das Häkchen unter Marker verstecken. Wenn Sie das Häkchen herausnehmen, wird der Marker wieder sichtbar sein.
    • Mit dieser Option müssen nicht genutzte Marker nicht gelöscht werden und können jederzeit wieder zum Einsatz kommen.
  5. Tragen Sie Informationen zum eingestellten Ort in den Text-Editor ein und legen Sie fest, ob der Text bereits beim Laden der Seite oder erst beim Klick auf den Marker erscheint. Mit einem Häkchen bei Aktivieren wird die Infobox ohne Klick, gleich mit angezeigt.

Google Maps im Frontend

Sie sehen hier einen Screenshot von einer Karte mit Kontrollelementen, einem Marker sowie der Breite von 100 % und einer Höhe von 200 px.

Static Map

Mit der Static Map erstellen Sie ein Bild einer Karte. Ein Bild als Karte ist vorteilhaft für die Performance Ihrer Seite, da keine große Datenmenge geladen werden muss. Ein einfacher Screenshot kann jedoch rechtlich Schwierigkeiten bereiten. Deswegen gibt es die Möglichkeit eine statische Karte einzufügen. Diese lässt sich auch an das eigene Design anpassen.

API-Key

Bevor Sie eine statische Karte in eine Seite einbinden können, brauchen Sie einen Google Account. Über diesen lassen Sie sich einen API-Key (Application Programming Interface (API) = Programmschnittstelle) vergeben. Durch diesen kann Google nachvollziehen, wie oft die Karte auf einer Seite geladen wurde. Ab einer bestimmten Anzahl an Kartenaufrufen wird der Dienst kostenpflichtig, weswegen Sie für den Key auch immer Kreditkartendaten bei Google hinterlegen müssen. Da Sie allerdings die tägliche Nutzung beschränken können, können Sie so auch eventuelle Kosten vermeiden.

Um ein API-Key zu erhalten, gehen Sie wie folgt vor:

  • Melden Sie sich mit Ihren Login-Daten bei Google an.
  • Gehen Sie anschließend zu der Google Maps Plattform: https://cloud.google.com/maps-platform/
  • Klicken Sie auf Jetzt starten.
  • Wählen Sie im erschienenen Fenster Maps aus und klicken Sie auf Weiter.

Wählen Sie ein vorhandenes Projekt aus oder erstellen Sie ein neues Projekt. Klicken Sie auf Weiter.

Sofern Sie noch kein Rechnungskonto bei Google hinterlegt haben, müssen Sie an dieser Stelle eines erstellen.


Reiter Allgemein

Typ, Spalte & Überschrift

Im ersten Feld Typ sehen Sie, welchen Inhaltstypen Sie gerade bearbeiten. Das Feld Spalte zeigt an, wo sich der Inhalt befindet. Die Überschrift tragen Sie in das Freifeld ein und legen im darunter liegenden Feld Typ fest, welches Layout der Titel haben soll.

Adresse des Karten-Mittelpunktes

Tragen Sie hier die Adresse ein, die sich in der Mitte der Karte befinden soll. Halten Sie sich dabei an das Beispiel, was im Inhaltselement angegeben ist.

Breite, Höhe & Zoomstufe

Legen Sie fest, wie breit und wie hoch die Karte auf Ihrer Seite sein soll. Beachten Sie, dass die Breite und Höhe der Karte höchstens 640 px groß sein dürfen. Größere Karten können nur Google Premium Kunden nutzen. Wie bei der dynamischen Google-Karte ist der Zoom standardmäßig auf 13 eingestellt. Wie die Zoomstufe im Frontend wirkt, sehen Sie auf unserer Vorschau-Seite.

Kartenart

Bei der Kartenart stehen Ihnen vier Optionen zur Verfügung: Roadmap, Satellite, Terrain & Hybrid. Nur wenn Sie Roadmap wählen, können Sie das Feld Styling nutzen, mit dem Sie das erzeugte Bild der Karte nach Ihren Wünschen gestalten können.

Styling

Im Feld Styling tragen Sie eine JSON-Datei ein, die Sie auf der folgenden Seite generieren können: https://mapstyle.withgoogle.com. Wählen ganz oben wie dicht Straßen und Marker dargestellt werden sollen. Als Nächstes wählen Sie ein Layout. An dieser Stelle könnten Sie bereits die Datei erstellen lassen. Um die Karte weiter anzupassen, klicken Sie auf More Options. Die Karte kann hier farblich passend zum Corporate Design gestalten werden. Wenn Sie auf Finish gehen, erscheint ein neues Dialogfenster, aus dem Sie die JSON-Datei kopieren müssen, um diese in das TYPO3 Inhaltselement einzufügen.

Marker

Um einen Marker zu setzen, klicken Sie in der Spalte Marker auf Neu anlegen und geben die Adresse ein, auf die der Marker zeigen soll. Sie haben außerdem die Möglichkeit ein eigenes Icon statt den Standardmarker einzusetzen. Laden Sie dafür in der Dateiliste ein Icon hoch und erstellen Sie im Marker eine Neue Relation.

Automatisch erzeugtes Bild

Das automatisch erzeugte Bild brauchen Sie nicht selbst hinzuzufügen. Mit dem Eintragen der notwendigen Felder wie Adresse und API-Key erscheint nach dem Speichern automatisch ein Bild, bei dem Sie die Informationen Beschreibung, Alternativer Text, Titel und Link bearbeiten können. Das Kartenbild kann außerdem mit dem Bildeditor angepasst werden.

Statische Karte im Frontend (links)

Highlight Box

Mit einer Highlight Box bringen Sie wichtige Informationen auf Ihrer Website besonders zur Geltung. Im Gegensatz zu Bereichen können Highlight Boxen nur mit Text befüllt werden. Sie lassen sich jedoch in Raster einfügen. Das Symbol, das Sie hier sehen, wird Ihnen beim Erstellen einer Highlight Box sowie im Inhaltsbereich begegnen.

Reiter Allgemein

Beim Bearbeiten von Highlight Boxen müssen Sie vorrangig den Reiter Allgemein bearbeiten. Alle weiteren Tabs werden nur in Ausnahmefällen angepasst.

Typ, Spalte & Überschrift

Im Feld Typ sehen Sie, in welchem Inhaltselement Sie sich aktuell befinden. Die Spalte verrät, wo das Element platziert ist. Unter Überschrift tragen sie einen Titel für das Inhaltselement ein und legen im darunter liegenden Feld Typ das Layout der Überschrift fest.

Text

Im Rich Text Editor tragen Sie, wie gewohnt, Ihren Text ein.

Hintergrund Stil

Für den Hintergrund stehen Ihnen fünf verschiedene Stile zur Verfügung. Die Farben  in Klammern entsprechen dabei dem Standard-Design der Website-Base: Primary (dunkelblau), Success (türkis), Info (grau), Warning (gelb), Danger (rot).

Wie Highlight Boxen im Frontend aussehen können, zeigt die Abbildung unten.

Highlight Boxen im Frontend

Akkordeon (reiner Text)

Das Mask Element Akkordeon stellt einfache Text-Inhalte als Akkordeon dar. Das kann zum Beispiel nützlich sein, wenn man viel Inhalt auf einer Seite unterbringen möchte und dieser Inhalt sich einfach in Abschnitte, Kategorien oder Ähnliches unterteilen lässt. Nahezu alle Inhalte, ob Text oder Bild, lassen sich übrigens im Raster-Element Akkordeon unterbringen.

Das Mask Element Akkordeon ist ein einfach konfigurierbares Inhaltselement, mit dem sich Inhalte unkompliziert und schnell auf eine übersichtliche Weise darstellen lassen. Zum Anlegen des Akkordeons benötigen Sie nur die Felder im Reiter Allgemein zu befüllen.

Reiter Allgemein

Typ & Spalte

Im Feld Typ sehen Sie, um welches Inhaltselement es sich aktuell handelt. Die Spalte verrät, wo sich das Element befindet. 

Artikel

Ein Artikel im Akkordeon entspricht einer Akkordeonzeile. Klicken Sie im Feld Artikel auf Neu anlegen, um eine neue 'Zeile' hinzuzufügen. Im Gegensatz zum Raster-Element Akkordeon befinden sich alle 'Zeilen' in einem Inhaltselement und können auch nur dort bearbeitet werden.

Header

Der Header entspricht dem Titel des Artikels. Er ist zu sehen bevor der Artikel aufgeklappt wird. Klicken Sie in das Feld, in dem der Header-Name erscheint, um den Artikel auf- oder zuzuklappen.

Inhalt

Den Inhalt bzw. Artikel tragen Sie in den Rich Text Editor ein.

Bild

Sie können dem Artikel auch ein Bild zuweisen. Dieses wird immer rechts neben dem Text im Artikel erscheinen. Um ein Bild hinzuzufügen, klicken Sie einfach auf Neue Relation erstellen und wählen in der Dateiliste ein Bild aus. 

Beim Seitenaufruf aufgeklappt anzeigen

Normalerweise sind beim Aufruf einer Seite alle Artikel eingeklappt. Sollten Sie einen Artikel bereits beim Laden der Seite aufgeklappt anzeigen wollen, setzen Sie an dieser Stelle ein Häkchen.

Akkordeon mit vier Artikeln im Frontend

Card

Das Inhaltselement Card ermöglicht es unkompliziert Produkte oder wichtige Informationen von anderen Inhalten abzuheben. Mit vielfältigen Optionen zur Gestaltung der Karten erstellen Sie bequem das passende Design. Das Symbol, das hier zu sehen ist, kennzeichnet das Mask Element Card beim Erstellen und Bearbeiten des Inhaltselementes sowie im Inhaltsbereich.

Reiter Allgemein

Typ, Spalte & Überschrift

Im Feld Typ sehen Sie, in welchem Inhaltselement Sie sich befinden. Die Spalte verrät, wo das Element platziert ist. Tragen Sie unter Überschrift einen Titel ein und legen im darunter liegenden Feld Typ das Layout der Überschrift fest.

Kartentitel

Der Kartentitel erscheint oben in der Karte, so wie Sie es im Screenshot unten sehen. Der Titel ist mit der Karte 'verbunden', während die Überschrift über der Karte erscheint.

Badge

Mit einem Bagde markieren Sie einen Inhalt oder ein Produkt als besonders. Sie sollten dieses Feld deswegen nur dann nutzen, wenn Sie Produkte oder Informationen hervorheben möchten.

Bilder

Das Bild erscheint oberhalb des Kartentitels und des Textes. Sollten Sie ein Badge einfügen, wird dieses über der rechten oberen Ecke des Bildes 'gespannt'.

Text

Den Inhalt bzw. Artikel tragen Sie in den Rich Text Editor ein.

Button-Beschriftung

Der Button erscheint am unteren Ende der Karte. Sie können ihn nutzen, um beispielsweise auf eine Produktseite oder eine externe Seite zu verlinken.

Button-Variante

Für Buttons können sieben verschiedene Farben eingestellt werden. Im Design-Konfigurator können die Farben angepasst werden, standardmäßig sind es jedoch folgende: Default (grau), Primary (dunkelblau), Info (hellgrau), Success (türkis), Warning (gelb), Danger (rot), Simple Link (farbloser Hintergrund/ein einfacher Link).

Link

Klicken Sie unter Link das Link-Symbol an. Wählen Sie im erschienenen Fenster eine interne Seite aus oder tragen einen externen Link ein und verlinken Sie auf diese Weise den Button im unteren Ende der Karte. (Ohne einen Link müssen Sie im Grunde auch keine Button-Beschriftung einfügen.)

Wie unterschiedlich Karten aussehen können, zeigt die Abbildung unten. Für mehr Card-Varianten besuchen Sie einfach unsere Vorschau-Seite.

Cards im Frontend

Downloads

Das Download Element erlaubt es, eine Liste von Dateien für den Download inklusive optionaler Beschreibungen für jede Datei zu erstellen. Die Art der Dateien spielt dabei keine Rolle. Statt einer Datei können Sie auch einen Link in die Download-Liste einfügen. Alle hinzugefügten Dateien werden im Frontend bei einem Klick darauf in einem neuen Browser-Tab geöffnet.

Reiter Allgemein

Typ & Spalte

Im Feld Typ können Sie das Inhaltselement ändern und unter Spalte sehen Sie in welcher Spalte sich der Inhalt im Inhaltsbereich befindet.

Dateien

Pro Eintrag in der Download-Liste müssen Sie eine Datei hinzufügen mit Neu anlegen. Nach dem Hinzufügen eines Bildes/einer Datei stehen Ihnen die Felder für Bild-Metadaten und die Bildbearbeitung zur Verfügung.

Link

Statt einer Datei aus der Dateiliste ist es möglich einen Link einzufügen. Dieser wird nur genutzt, wenn keine Datei hinzugefügt wurde.

Beschreibung

Die Beschreibung wird im Frontend als Listeneintrag genutzt. Ansonsten wird der Dateiname oder die URL genutzt.

 

Downloads im Frontend

FAQ

Das FAQ-Element generiert ein einfaches Akkordeon mit Fragen und Antworten. Ein FAQ-Bereich oder eine ganze FAQ-Seite sind Zusammenstellungen von typischen Fragen, die Nutzer über Ihre Webseite oder zu den Inhalten haben könnten. Das ist nicht nur vorteilhaft für User, auch Suchmaschinen belohnen FAQ-Seiten mit besserem Ranking. Pro Seite können Sie nur ein FAQ-Element einfügen.

Reiter Allgemein

Typ, Spalte & Header

Im Feld Typ sehen Sie den aktuellen Inhaltstypen und können ihn bei Bedarf ändern. Das Feld Spalte zeigt, wo sich das Inhaltselement aktuell im Inhaltsbereich befindet. Im Header legen Sie die Überschrift für das FAQ-Element fest. Das darunter liegende Feld Typ definiert das Layout der Überschrift.

Fragen, Frage & Antwort

Fügen Sie Fragen über den Neu anlegen Button hinzu. Tragen Sie typische Fragen und die dazugehörigen Antworten ein. Fangen Sie am besten mit den häufigsten bzw. wichtigsten Fragen an.

Bild

Zusätzlich zur Antwort können Sie ein Bild mit dem Button Neue Relation erstellen anhängen. Die Relation wird rechts neben der Antwort erscheinen und nur zu sehen sein, wenn die Frage aufgeklappt wird.

Beim Seitenaufruf aufgeklappt anzeigen

Sollten Sie eine Antwort bereits beim Laden der Seite aufgeklappt zeigen wollen, setzen Sie hier ein Häkchen.

FAQ-Element im Frontend

Slider

Slider werden oft als Header einer Webseite eingesetzt. Sie eignen sich auch für Bilder- oder Produktgalerien oder um das Portfolio eines Unternehmens darzustellen. Ein Slider ist, wie auch die anderen Mask Elemente, einfach zu konfigurieren. Für einen gleitenden Slider legen Sie im Reiter Allgemein mindestens zwei Slides an. Wenn Sie nur einen Slide anlegen, ergibt das ein statisches Bild, über das Sie einen Text legen können.

Reiter Allgemein

Typ, Spalte & Überschrift

Das erste Feld Typ zeigt, welchen Elementtypen Sie aktuell bearbeiten. Das Feld Spalte zeigt an, wo sich der Inhalt befindet. Die Überschrift tragen Sie in das freie Feld ein und legen im Feld Typ das Layout fest.

Autoplay Intervall

In diesem Feld legen Sie fest, nach wie vielen Sekunden das Bild wechseln soll. Standardmäßig sind acht Sekunden eingestellt. Im Beispielvideo unten bewegen sich die Bilder im Intervall von drei Sekunden.

Höhe

In unserer Website-Base ist es möglich die Slider niedrig, mittel oder als Vollbild einzustellen. Im Beispielvideo sehen Sie einen Slider mit mittlerer Einstellung auf unserer Vorschau-Seite einen Slider im Vollbild.

Slides

Um einen neuen Slide hinzuzufügen, klicken Sie einfach den Button Neu anlegen und konfigurieren im Anschluss den Slide.

Hintergrundart

Die Standardeinstellung sieht keinen Hintergrund vor. Sie haben allerdings die Möglichkeit einen dunklen Hintergrund zu wählen: Dark transparent.

Inhalt

Ein Inhalt wird einem Slide hinzugefügt, wenn der Slide einen Text/eine Überschrift erhalten soll. Die Maske für den Inhalt entspricht dem TYPO3 Element Nur Überschrift. Im Feld Typ können Sie jedoch auch ein anderes Element wie z. B. Text & Medien einstellen, um den Inhalt freier gestalten zu können. Es ist möglich mehrere Inhalte einzufügen. Diese erscheinen dann im Frontend in der Reihenfolge untereinander, in der die Inhalte im Slide angeordnet sind.

Bild

Das Bild füllt den Slide aus. Sie sollten darauf achten in einem Slider mit mehreren Bildern die gleiche Bildgröße zu verwenden bzw. sie auf die gleiche Größe zuzuschneiden. Wenn Sie mehr als ein Bild in einen Slide laden, werden die Bilder übereinander angezeigt. Pro Slide sollten Sie also nur ein Bild hinzufügen und bei Bedarf mehrere Slides pro Slider anlegen.
Um ein Bild hinzuzufügen, gehen Sie einfach auf den Button Neue Relation erstellen und wählen das gewünschte Bild aus der Dateiliste aus.

Link

Sie können nur den Text auf dem Slide verlinken oder aber verlinken das ganze  Bild. Dafür müssen an dieser Stelle einen Link setzen. Klicken Sie einfach auf das Linksymbol und wählen im erschienenen Fenster eine interne Seite oder verlinken eine externe URL.

Slider im Frontend

Simple Tab-Element

Mit dem Tab-Element stellen Sie Text-Inhalte übersichtlich und in Tabs angeordnet dar. Wie beim Akkordeon eigenen sich hierfür zusammengehörige Informationen, die sich gut in Kategorien/Themen gliedern lassen so wie beispielsweise Produktinformationen. Das Simple Tab-Element lässt sich sehr schnell erstellen, da Sie auch hier nur im Reiter Allgemein wenige Schritte befolgen müssen, um das Inhaltselement zu konfigurieren.

Reiter Allgemein

Inhalt, Spalte & Überschrift

Unter Typ sehen Sie, welchen Elementtypen Sie gerade bearbeiten. Das Feld Spalte zeigt an, wo sich der Inhalt befindet. Die Überschrift tragen Sie in das freie Feld ein und legen im darunter liegenden Feld Typ fest, welches Layout sie haben soll.

Tabs

Um einen neuen Tab hinzuzufügen, klicken Sie einfach auf den Button Neu anlegen und befüllen die Felder für Beschriftung und Inhalt.

Tab-Beschriftung

Die Tab-Beschriftung entspricht dem Tab-Titel innerhalb des Inhaltselementes Simple Tab-Element und wird ebenfalls als Titel im Frontend ausgegeben. Die Tab-Beschriftung ist somit immer zu sehen.

Tab-Inhalt

Den Tab-Inhalt fügen Sie hinzu und bearbeiten ihn im Rich Text Editor. Der Inhalt ist im Frontend nur dann zu sehen, wenn der User den jeweiligen Tab angeklickt hat.

Auf Ihrer Seite wird das Simple Tab-Element so ähnlich aussehen, wie der untere Screenshot es zeigt. In unserem Beispiel gibt es nur zwei Tabs, Sie können natürlich mehr anlegen, so wie es unsere Vorschau-Seite zeigt.

Simple Tab Element im Frontend

Sie wollen mehr erfahren?

Alle Informationen zu den verfügbaren Angeboten finden Sie auf den Seiten unserer Website-Base. Sie haben die Möglichkeit eine Webseite zum Fixpreis erstellen zu lassen oder entscheiden sich für ein Website as a Service Paket, mit dem keine weiteren Kosten für Hosting oder Sicherheits- und Funktionsupdates auf Sie zukommen werden.