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 Sie besondere Darstellungsformen schnell umsetzen und speziellen Inhalt einfach integrieren können. 

Google Maps

Das Inhaltselement Google Maps ermöglicht es in nur wenigen Schritten eine dynamische Karte einzubinden. Der User kann die Karte also bewegen, raus- und reinzoomen, 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.

Im Reiter Allgemein befinden sich alle Felder, die Sie zum Konfigurieren des Inhaltselementes brauchen.

Typ, Spalte & Überschrift

Im ersten Feld Typ sehen Sie, um welches Inhaltselement es sich handelt und können an dieser Stelle ein anderes Element einstellen. 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.

Breitengrad, Längengrad & Adresse

Um eine Karte darzustellen, braucht es zunächst einen Ort, der dargestellt wird. 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 den Koordinatenpunkt herum einstellen. Die Angaben können in Pixel oder Prozent gemacht werden. Die Voreinstellung sieht eine 100% Breite und eine Höhe von 200px vor. In einem 2-Spalter würde die Karte zu 100% die Breite der Spalte einnehmen.

Kontrollelemente anzeigen

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

Marker

Mit Markern kennzeichnen Sie eindeutig Ihren 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 für jeden einzelnen Marker wie folgt vor:

  1. Klicken Sie unter Marker auf Neu anlegen.
  2. Tragen Sie die Koordinaten (Breiten- und Längengrade) ein oder geben Sie 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. Optional: Laden Sie ein eigenes Icon für den Marker hoch und verknüpfen es mit ihm.
    Im Normalfall haben Sie einen roten Marker, wie Sie ihn im Screenshot sehen können.
  4. Vor allem wenn Sie mehrere Marker haben, kann es sein, dass Sie manchmal bestimmte Marker verstecken müssen. Dafür brauchen Sie ihn nicht zu löschen, sondern setzen einfach ein Häkchen unter Marker verstecken und Aktivieren.
  5. Optional: 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 gleich mit angezeigt. 

 

In Abbildung unten sehen Sie eine Karte mit Kontrollelementen, einem Marker sowie der Breite von 100 % und einer Höhe von 200px.

Static Map

Mit der Static Map binden Sie keinen Iframe ein, sondern erstellen ein Bild der Karte. Ein Bild als Karte ist für die Performance Ihrer Seite besser als ein Iframe. Da jedoch ein einfacher Screenshot rechtlich Schwierigkeiten bereiten kann, 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 bzw. 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.


Typ, Spalte & Überschrift

Im ersten Feld Typ sehen Sie, welchen Inhaltselementtypen 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 (Überschrift) fest, welches Layout sie haben soll.

Adresse des Karten-Mittelpunktes

Tragen Sie hier die Adresse ein, die sich in der Mitte der Karte befinden soll. Schreiben Sie diese in folgender Art in das Feld: Straße Hausnummer, Postleitzahl Ort

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öchtens 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 im Screenshot unserer Vorschau-Seite.

Kartenart

Bei der Kartenart stehen Ihnen im Dropdown-Menü vier Optionen zur Verfügung: Roadmap, Sattelite, Tarrain & 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 auf Finish klicken oder aber Ihre Karte weiter anpassen, indem Sie More Options wählen. Sie finden nun viele weitere Punkte, die Sie ebenfalls anpassen können. Somit lässt sich eine statische Karte farblich passend zum Corporate Design gestalten. Wenn Sie schlussendlich auf Finish klicken, erscheint ein neues Dialogfenster, aus dem Sie die JSON-Datei kopieren müssen, um diese in das Mask Element 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 das gewünschte Icon hoch und erstellen Sie im Marker eine Neue Relation.

Automatisch erzeugtes Bild

Das automatisch erzeugte Bild brauchen Sie nicht manuell hinzuzufügen. Mit dem Eintragen der notwendigen Felder wie Adresse und API-Key, erscheint an der Stelle automatisch ein Bild. Wie bei jedem anderen Bild stehen auch hier die Optionen Beschreibung, Alternativer Text, Titel und Link zur Verfügung. Ebenso kann das Kartenbild mit dem Foto Editor durch das Zurechtschneiden für verschiedene Ausgabekanäle ideal 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 genauso in Raster eingefügen. Das Symbol, das Sie hier sehen, wird Ihnen beim Erstellen einer Highlight Box sowie im Inhaltsbereich begegnen.

Beim Bearbeiten der Highlight Box brauchen Sie vor allen Dingen den Reiter Allgemein zu bearbeiten. Alle weiteren Tabs besitzen auch andere Inhaltselemente und müssen nur in Ausnahmefällen angepasst werden.

Typ, Spalte & Überschrift

Im Feld Typ sehen Sie um welches Inhaltselement es sich aktuell handelt. Die Spalte verrät, wo sich das Element befindet. Im Freifeld für die Überschrift können Sie einen Titel eintragen, das müssen Sie jedoch nicht. Im darunter liegenden Feld Typ (Überschrift) legen Sie das Layout der Überschrift fest.

Text

Im Rich Text Editor tragen Sie, wie gewohnt, Ihren Text ein. Es stehen alle Optionen zur Textbearbeitung zur Verfügung, wie im häufig genutzten Text & Medien Inhaltselement.

Hintergrund Stil

Für den Hintergrund stehen Ihnen fünf verschiedene Stile zur Verfügung. Die Farben entsprechen dabei dem Website-Base Standard-Design, was Sie allerdings jederzeit anpassen können: Primary (dunkelblau), Success (türkis), Info (grau), Warning (gelb), Danger (rot).

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

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 einteilen lässt. Das Symbol wird Ihnen begegnen, wenn Sie ein Akkordeon erstellen, bearbeiten und im Inhaltsbereich sehen.

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.

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' im Inhaltselement und können auch nur bearbeitet werden, wenn Sie sich in eben diesem befinden.

Header

Der Header entpricht 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. Es stehen alle Optionen zur Textbearbeitung  zur Verfügung, wie im häufig genutzten Text & Medien Inhaltselement.

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 Artikel eingeklappt. Sollten Sie einen Artikel bereits beim Laden der Seite aufgeklappt anzeigen wollen, setzen Sie an dieser Stelle ein Häkchen.

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.

Für jede Karte müssen Sie jeweils ein Inhaltselement erstellen. Die Karten lassen sich in alle Raster einfügen. Für die Konfiguration einer Karte brauchen Sie nur den Reiter Allgemein auszufüllen.

Typ, Spalte & Überschrift

Im Feld Typ sehen Sie um welche Inhaltselement Sie aktuell bearbeiten. Die Spalte verrät, wo sich das Element befindet. Im Freifeld für die Überschrift können Sie einen Titel eintragen, müssen es jedoch nicht. Im darunter liegenden Feld Typ (Überschrift) legen Sie 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. Es stehen alle Optionen zur Textbearbeitung  zur Verfügung, wie in dem häufig genutzten Text & Medien Inhaltselement.

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. Suchen und 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.

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 eine Text legen können.

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 (Überschrift) 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

Als Standard ist kein Hintergrund eingestellt. Sie haben allerdings die Möglichkeit einen dunklen Hintergrund zu wählen. Klicken Sie dafür einfach in das Feld unter Hintergrundart und klicken im Anschluss Dark transparent an.

Inhalt

Ein Inhalt wird einem Slide hinzugefügt, wenn der Slide einen Text/eine Überschrift erhalten soll. Der Inhalt entspricht dem TYPO3 Element Nur Überschrift. Somit können Sie die Ausrichtung der Überschrift bestimmen oder Sie auch verlinken. Es ist möglich mehrere Inhalte einzufügen. Diese erscheinen dann im Frontend in der Reihenfolge untereinander, in der die Elemente 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 tun, werden die Bilder übereinander angezeigt. 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 entweder im erschienenen Fenster eine interne Seite aus dem Seitenbaum oder verlinken eine externe Seite.

Simple Tab-Element

Mit dem Tab-Element stellen Sie Text-Inhalte übersichlich und in Tabs angeordet 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.

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, den Sie vom typischen Inhaltselement Text & Medien kennen. Alle Werkzeuge des RTE stehen auch hier für die Textbearbeitung zur Verfügung. 

 

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. 

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.