Mask Elements

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.

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.

Standardmäßig aufgeklappt

Die Akkordeon-Elemente sind normalerweise im Frontend eingeklappt und lassen sich bei einem Klick aufklappen. Mit dieser Checkbox lässt sich festlegen, dass die aktuellen Elemente immer aufgeklappt ist.

Fragen-Header Typ

Jedes Element im Akkordeon hat eine Frage bzw. Überschrift. Legen Sie hier fest, welches Überschriften-Level jede Frage in diesem Akkordeon-Element haben soll.

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.

Überschrift, Typ, Ausrichtung und Untertitel

Wenn Sie eine Überschrift festlegen, wird diese direkt über der Tabelle erscheinen. Spezifizieren Sie den Titel mit Typ und Ausrichtung. Der Untertitel erscheint unter Überschrift.

Feature

Zum Anlegen von Features nutzen Sie den Button Neu anlegen und füllen den Feature-Namen aus. Optional ist eine Feature-Beschreibung, in der Sie nähere Informationen zum Feature angeben können. Wenn bereits ein Feature angelegt ist, können Sie Features sowohl ober- als auch unterhalb des angelegten Elements anlegen. Es ist außerdem möglich, die Features jederzeit zu einer gewünschten Stelle zu verschieben.

Artikel

Beim Artikel können Sie im Tab Allgemein Namen, Beschreibung, Preise und einen Link festlegen. Der Name findet sich ganz oben in der Tabelle und direkt darunter die weiteren Artikeldetails.

Im Reiter Features befindet sich eine Liste mit allen Features, in der ausgewählt werden kann, welche Features der Artikel beinhaltet. Sollte ein Feature für diesen Artikel mehr Informationen benötigen, können Sie das unter zusätzliche Informationen angeben. Damit die zusätzliche Information auch im Frontend gezeigt wird, muss das Feature in dem entsprechenden Artikel aktiviert sein.

Im Reiter Allgemein bestimmen Sie den Inhalt bzw. das Aussehen und weiteres Verhalten des Popups.

Oberer Inhalt & Inhalt

Der obere Inhalt ist sozusagen die Titelzeile. Der Inhalt befindet sich darunter. Beides kann ein beliebiges Inhaltselementelement sein. Ein Inhaltselement fügen Sie über den Button Neu anlegen hinzu und ändern das Inhaltselement bei Bedarf im Dropdown-Menü unter Typ.

In diesem Reiter wird bestimmt, wann das Popup erscheinen soll:

• Exit-Intent: beim Versuch oder der Absicht, die Seite zu verlassen
• Zeit zum automatischen Öffnen: nach Öffnen der Seite werden x Sekunden vergehen, bis sich das Popup öffnet
• Scrolltiefe: bestimmen Sie, dass das Popup nach z. B. nach 50 % der Seitenlänge erscheint

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

Maximale Bildhöhe

Legen Sie die maximale Bildhöhe in Pixel fest. Geben Sie dafür einen gewünschten Wert ein. Wenn es keine maximale Höhe geben soll, geben Sie nichts oder den Wert '0' ein.

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.

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.

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.

Um ein Produkt zu erstellen, nutzt man einfach den Button Neu erstellen. Danach müssen Sie lediglich die Produktinformationen Produkttitel, Badge, Beschreibung, Features, Konditionen und CTAs ausfüllen. Sie müssen nicht zwingend alle Felder nutzen. Wenn das Badge-Feld beispielsweise nicht gebraucht wird, wird im Frontend auch kein Badge erscheinen, wenn nichts ausgefüllt wird.

Sie können bis zu vier Produkte anlegen, die dann im Frontend nebeneinander erscheinen. Die Position der Produkte lässt sich über die Pfeile verändern.

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.

Slider-Einstellungen: Navigationspunkte

Wenn Sie mehrere Slides anlegen, werden diese im festgelegten Intervall wechseln. Wenn Sie die Navigationspunkte aktivieren, hat der User die Möglichkeit, die Slides selbst zu bewegen.

Text

Den Text können Sie wie gewohnt im RTE eingeben und seine vollen Gestaltungsmöglichkeiten nutzen. Achtung: Wenn Sie hier einen Link einfügen, können Sie die Link-Option unten nicht mehr nutzen.

Vertikale & horizontale Ausrichtung vom Text

Legen Sie fest, wie der Text ausgerichtet werden soll.

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. Wenn Sie hier den Slide verlinken, sollte im Text kein Link gesetzt sein.

Slide Einstellungen

Hier können Sie bei Bedarf einen Hintergrund, einen Textschatten oder -box oder eine Animation für den Text einstellen.

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.