Mask Elements

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.

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.

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.

Typ, Spalte & Überschrift

Im Feld Typ sehen Sie, um welches Inhaltselement es sich aktuell handelt. Die Spalte verrät, wo sich das Element befindet. Mit einer Überschrift geben Sie dem gesamten Element einen Titel.

Strukturierte FAQ-Daten aus diesen Elementen erstellen und einbetten

Wenn Sie hier ein Häkchen setzen, wird ein FAQ-Element generiert, ansonsten wird ein Akkordeon gebildet.

Elemente

Ein Element entspricht einer Akkordeonzeile bzw. einer Frage und der dazugehörigen Antwort. Klicken unter Elemente 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.

Frage / Überschrift

Die Zeile für Frage / Überschrift entspricht dem Titel des Artikels bzw. der Frage des FAQ-Elements. Sie ist zu sehen bevor das Element aufgeklappt ist. Im Frontend klicken Sie in das Feld, in dem der Header-Name erscheint, um den Artikel auf- oder zuzuklappen.

Nicht einklappbare Vorschau

Hier können Sie einen kleinen Vorschau-Text eingeben, der zu sehen ist, ohne dass das Element aufgeklappt werden muss. Dieser Text wird nicht in die strukturierten Daten aufgenommen.

Antwort / Inhalt

Tragen Sie in diesem Feld die Antwort oder den Inhalt im Rich Text Editor ein.

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).

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.

Typ, Spalte & Überschrift

Im Feld Typ sehen Sie, welchen Elementtypen Sie aktuell bearbeiten. Die Spalte verrät, wo sich der Inhalt befindet. Im Freifeld für die Überschrift tragen Sie den Titel des Inhaltselements ein. Im darunter liegenden Feld Typ legen Sie das Layout der Überschrift fest.

Bilderordner & Bilder

Um der Galerie Bilder hinzuzufügen, gibt es die Möglichkeit einen ganzen Bilderordner aus der Dateiliste auszuwählen oder einzelne Bilder herauszusuchen. Um einen Ordner mit dem Inhaltselement zu verknüpfen, klicken Sie unter Bilderordner auf das Linksymbol und klicken den gewünschten Ordner in der Dateiliste an.

Wenn Sie einzelne Bilder hinzufügen möchten, klicken Sie unter Bilder auf Neue Relation erstellen und wählen das gewünschte Bild aus. Das wiederholen Sie dann mit allen Bildern, die in der Galerie erscheinen sollen. Sie können außerdem beide Optionen (Bilderordner & Bilder) zeitgleich nutzen.

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.

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 man den jeweiligen Tab anklickt.

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.