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

Im Feld Typ sehen Sie, in welchem Inhaltselement Sie sich aktuell befinden. Die Spalte verrät, wo das Element platziert ist. 

Überschrift, Typ, Typ (visuell) & Ausrichtung

Unter Überschrift tragen Sie einen Titel für das Inhaltselement ein und legen im darunter liegenden Feld Typ die Überschriftenebene fest. Zusätzlich dazu können Sie visuell eine andere Überschriftenebene festlegen, ebenso wie die Ausrichtung der Überschrift.

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

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, Typ (visuell), Ausrichtung und Untertitel

Wenn Sie eine Überschrift festlegen, wird diese direkt über der Tabelle erscheinen. Spezifizieren Sie den Titel mit Typ (Überschriftenebene), der von der visuellen Überschriftenebene (die Überschriftenebene tatsächlich im Frontend zu sehen ist), abweichen kann. Legen Sie außerdem die Ausrichtung der Überschrift fest. 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, die über dem Inhalt steht. Im Falle des Banners, der oben direkt unter dem Menü erscheint, ist es der Inhalt links, der sich ebenso wie beim Popup farblich vom anderen Inhalt unterscheidet und somit besonders hervorgehoben wird. 

Der Inhalt befindet sich darunter bzw. beim Banner rechts daneben. 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.

Sowohl beim oberen Inhalt als auch beim Inhalt lassen sich mehrere Elemente anlegen.

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

• Exit-Intent: Popup erscheint beim Versuch oder der Absicht, die Seite zu verlassen.
• Inhaltslinks fungieren als Schließen-Schaltflächen: Bei Klick auf einen Link wird das Popup geschlossen.

Überschrift, Typ, Type (visuell), Ausrichtung

Tragen Sie unter Überschrift einen Titel ein und legen im darunter liegenden Feld Typ das Überschriftenlevel fest. Bei Typ (visuell) können Sie das Überschriftenlayout einstellen, das tatsächlich im Frontend zu sehen sein wird. Zuletzt legen Sie die Ausrichtung 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.

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.

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 auswählen möchten, klicken Sie unter Bilder auf Neue Relation erstellen und wählen die gewünschten Bilder aus. Sie können außerdem beide Optionen (Bilderordner & Bilder) zeitgleich nutzen.

Breite jedes Bilds & Höhe jedes Bilds

Standardmäßig sind Höhe und Breite der Vorschaubilder der Galerie auf 128 px eingestellt. Das können Sie individuell anpassen, indem Sie einfach die entsprechenden Zahlen hier eintragen. Im Ergebnis erhalten Sie im Frontend etwa solche Kacheln, wie sie unten zu sehen sind.

Karussell-Layout

Mit dieser Checkbox wird das Karussell bzw. der Image Slider aktiviert.

Bilder mit Lightbox, Pfeile ausblenden, Indikatoren ausblenden

Legen Sie fest, ob die Bilder in einer Lightbox geöffnet werden können, ob Nutzer und Nutzerinnen mit Pfeilen die Bilder weiterbewegen können sollen und ob Indikatoren (Punkte unter den Bildern, die anzeigen, ob gerade das erste oder xste Bild zu sehen ist) eingeblendet werden.

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.

Allgemeine Einstellungen

Autoplay Intervall

In diesem Feld legen Sie fest, nach wie vielen Sekunden der Slide bzw. die Folie wechseln soll. Standardmäßig sind acht Sekunden eingestellt. Bei null Sekunden werden sich die Folien nicht automatisch bewegen.

Maximale Höhe

In unserer Website-Base ist es möglich, die Slider niedrig, mittel oder als Vollbild einzustellen sowie die Bilder unbeschnitten (automatisch) zu lassen.

Pfeile ausblenden & Indikatoren ausblenden

Wenn Sie mehrere Slides anlegen sind im Normalfall die Navigationspunkte (Indikatoren) und Pfeile aktiviert, damit ein Benutzer oder Benutzerin, die Slides selbst bewegen kann. Bei Bedarf lassen sich Pfeile und Indikatoren an dieser Stelle ausblenden.

Elemente pro Folie

Stellen Sie hier ein, wie viele Medien pro Folie angezeigt werden sollen.

Media

Das Bild, die Grafik oder das Video füllt den Slide aus. Pro Slide ist nur ein Medieninhalt möglich. Um ein Bild hinzuzufügen, gehen Sie einfach auf den Button Neue Relation erstellen und wählen den gewünschten Inhalt aus der Dateiliste aus. Zur mobilen Optimierung ist es außerdem möglich, ein alternatives Bild für die mobile Ansicht zu nutzen.

Text, Vertikale & horizontale Ausrichtung vom 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. Legen Sie unter dem Textfeld 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

Unter Typ sehen Sie, welchen Elementtypen Sie gerade bearbeiten. Das Feld Spalte zeigt an, wo sich der Inhalt befindet. 

Überschrift, Typ, Typ (visuell), Ausrichtung

Die Überschrift tragen Sie in das freie Feld ein und legen im darunter liegenden Feld Typ fest, welches Überschriftenlevel sie haben soll. Bei Typ (visuell) können Sie bei Bedarf unabhängig vom Level das Layout der Überschrift und im Feld darunter die Ausrichtung bestimmen.

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.

Bilder

Hier verknüpfen Sie PNG- oder JPEG-Bilder aus der Dateiliste.

SVG Bild

Hier können SVG-Dateien mit oder ohne Markierungen mit dem Inhaltselement verknüpft werden.

Marker-Einstellungen

Zunächst können hier allgemeine Einstellungen zu den Markern konfiguriert werden. Darunter können die einzelnen Marker eingefügt und gesetzt werden. Der Standard-Marker ist ein einfacher Kreis mit einem Plus darin (oder das, was in Ihrer Instanz als Standard festgelegt wurde), dessen Größe hier festgelegt werden kann.

Breite der Markierung

Bestimmen Sie die Breite der Markierung.

Höhe der Markierung

Bestimmen Sie die Höhe der Markierung.

Benutzerdefinierte Markierung

Wenn Sie die Standard-Markierung durch ein anderes Icon ersetzen möchten, verknüpfen Sie hier die entsprechende Datei hier mit dem Inhaltselement.

Markierungen

Popup-Box

Wenn Sie den markierten Punkt beschriften möchten, können Sie hier einen Titel festlegen. In der Text-Box können Sie weitere Informationen unterbringen. Weiterhin lässt sich ein Button in der Popup-Box unter dem Text platzieren, um z. B. andere Standorte zu verlinken oder einen Link zu weiterführenden Informationen bereitzustellen.

Koordinaten

Hier bestimmen Sie die Position der Markierung auf dem Bild. Es kann etwas knifflig werden, die richtige Position einzustellen, aber mit etwas Übung funktioniert es schnell. Wenn die Positionen nicht allzu genau sein müssen, können Sie die Markierungen z. B. etwas größer machen, dann fallen Ungenauigkeiten weniger auf.

Spaltenanzahl

Wählen Sie, wie viele Symbole nebeneinander in einer Reihe zu sehen sein sollen: möglich sind 1-4 Spalten.

Symbol mit Text allgemeine Einstellungen

Layout

Wählen Sie, ob das Symbol mit dem Text horizontal (Symbol und Text nebeneinander) oder vertikal (Symbol und Text untereinander) ausgerichtet werden sollen.

Hintergrund

Wählen Sie den Hintergrund – in Ihrer Instanz können andere Optionen vorhanden sein – transparent, Hauptfarbe Ihrer Website, hell oder dunkel.

Symbolausrichtung & Textausrichtung

Legen Sie zum Schluss fest, ob Sie das Symbol und den Text links, rechts oder mittig ausrichten möchten. Symbol und Text lassen sich unterschiedlich ausrichten, wenn das gewünscht ist.

Symbol mit Text

Text

Fügen Sie hier den Text zum Symbol ein.

Symbol & Benutzerdefiniertes Symbol

Wählen Sie zwischen einem ‘Standard’-Symbol oder verknüpfen Sie ein benutzerdefiniertes Symbol, das Sie in der Dateilliste hochgeladen haben.

Link

Verlinken Sie schließlich das Symbol mit Text, wenn es erwünscht ist.