Schutzlösung–
Konfiguration Komponenten
Konfiguration Komponenten
Auf dieser Seite werden sämtliche Konfigurationen der Komponenten einer Schutzlösungsseite, am Beispiel der Anwendung Überspannungsschutz, Schritt für Schritt erläutert. Über das Inhaltsverzeichnis (Übersicht) gelangt man per Sprungmarke zur gewünschten Komponente.
Übersicht
Allgemeine Einstellungen
Die Informationen zur Erstellung einer Seite findest Du unter Erste Schritte – Tipps & Tricks. Nach Erstellung der Seite und Anpassung der notwendigen Einstellungen, finden sich hier alle weiteren Informationen zur Erstellung der entsprechenden Komponenten.
Header with Image Map
1. Klicke auf "+ Add section".
2. Füge die Section Header hinzu.
3. Wähle die Einstellungen für die Section aus und definiere das "Administrative label" für eine bessere Übersicht im Backend. Die Section kann jederzeit über "Configure Header with Image Map" bearbeitet werden.
4. Weise der Section die Komponente Header with image map über "Add block" hinzu.
Hinweis: Das "Administrative label" gibt der Section im Backend eine genaue Bezeichnung und hilft bei der Übersicht, falls diese Section später bearbeitet werden soll. Ohne Bezeichnung werden Sections durchnummeriert ("Section XX").
5. Füge eine (kurze knappe) Headline und einen Text ein.
6. Füge ein "Image for Desktop" (2000 x 1125 px oder 1600 x 1067 px –> Höhe variabel) und ein "Image for Tablet and Mobile" (1600 x XX px -> Höhe variabel oder 1000 x XX px -> Höhe variabel) ein.
7. Füge dem Bild "Image Map Areas" hinzu. Dabei handelt es sich um Hotspots (über Koordinaten definierte Bereiche), die Sprungmarken zu Product slider-Kategorien sind.
Eine Image Map Area hat immer einen Titel (der im Product Slider unter "Slider Categories" und dort auch unter "Category" am Produkts exakt eingetragen sein muss), sowie die Koordinaten, die zuvor für das "Image for Desktop" als auch für das "Image for Tablet and Mobile" ermittelt wurden. Diese müssen hier entsprechend hinterlegt werden.
Arbeitsschritte zur Erstellung der Koordinaten einer Image Map für Desktop (Tablet):
1. Bild für Desktop unter Media hochladen (2000 x 1125 px oder 1600 x 1067 px inkl. Auto-Skalierung/ -Cropping -> Höhe jeweils variabel)
2. Bild im Frontend / auf einer Seite aufrufen und auf der Festplatte speichern (Seitenverhältnis überprüfen und auf 3:2 achten)
3. Bild von Festplatte bei Free Online Image Map Generator (https://www.image-map.net/) hochladen
4. Koordinaten zum Bild generieren (Shape= Rect, Title=xxx),
5. Koordinaten zum Bild in Komponente "Header with image map" speichern, Komponente/Seite im Frontend aufrufen und das Verhalten testen
Hinweis: Zunächst wird das Bild für die Desktop-Ausspielung im Seitenverhältnis 3:2 (horizontal; idealerweise 1600 x 1067 px) hochgeladen. Sobald die Arbeitsschritte 1 - 6 durchgeführt wurden, werden die Koordinaten für die Ausspielung auf mobilen Geräten (Verhältnis 2:3; vertikal) ermittelt. Dazu die Seite im Browser im Entwickler-Modus für z.B. ein iPhone aufrufen und das Image auf dem Desktop abspeichern. Dann gemäß der Arbeitsschritte 3 - 6 fortfahren.
Plain: One Column
1. Füge die Section Plain: One Column hinzu.
2. Wähle die Einstellungen für die Section aus. Wähle als Hintergrundfarbe "Box Grey" aus, stelle die Breite auf "small" und definiere das "Administrative label" mit Plain: One Column für eine bessere Übersicht im Backend.
3. Füge der Section die Komponente Headline über "add block" hinzu. Die Größe der Headline ist an dieser Stelle "H2".
4. Füge der Section unterhalb der Headline über "add block" einen Text hinzu.
Product Slider with Filter
1. Füge die Section Special modules hinzu.
2. Wähle die Einstellungen für die Section und definiere das "Administrative label" mit Product Slider with Filter für eine bessere Übersicht im Backend.
3. Füge der Section die Komponente Product slider with filter über "add block" hinzu.
4. Um Produkte zu filtern, können über das Feld "Filter categories" entsprechende (Filter-)Kategorien eingegeben werden.
5. Hinterlege nun unter "Source ID" die entsprechende Produkt-ID, damit die Produktstammdaten wie z.B. Bild, Produktname, Text automatisch generiert werden können. Ordne jedes Produkt einer Kategorie zu (s.o. Filter).
6. Da die Produkttexte für den Slider oft zu lang sind, werden sie über "Source Title Overwrite" bzw. "Source Text Overwrite" gekürzt überschrieben. Der Produkttitel sollte 2 Zeilen nicht überschreiten.
7. Weitere Produkte können über den Button "Add DEHN21 single product slide" hinzugefügt werden.
Downloads with Filter
1. Füge die Section Special modules hinzu.
2. Wähle die Einstellungen für die Section aus und definiere das "Administrative label" mit Downloads with Filter für eine bessere Übersicht im Backend.
3. Füge der Section die Komponente Downloads with Filter über "add block" hinzu.
4. Um die Downloads thematisch zu strukturieren, kann optional ein Filter über das Feld "Filter categories" eingesetzt werden. Die Kategorienamen werden mit einem Komma getrennt eingetragen. Jedes Download kann anschließend einer dieser Kategorien zugeordnet werden.
5. Anschließend trage einen Dokumenten-Typ (Broschüre, Flyer, Referenz o.ä.), einen kurzen Titel, eine kurze Beschreibung und die Dateiart (z.B. .pdf oder .jpg) sowie die Dateigröße ein (z.B. 3.0 MB).
6. Wähle eine Datei aus der Mediendatenbank oder füge eine neue über "Datei auswählen" hinzu. Weitere Dokumente können über den Button "Add DEHN21 single download" hinzugefügt werden.
7. Um Texte in den Spalten der Download-Komponente auch mobil optimal ausgeben zu können, ist es erforderlich, dass ein Soft hyphen (“shy") an den passenden Stellen eingesetzt wird, welches dafür sorgt, dass bei Bedarf an diesen Stellen umgebrochen werden kann.
s.a. User Guide - Allgemeine Einstellungen
Image + Link List
1. Füge die Section Image + Link list hinzu.
2. Wähle die Einstellungen für die Section aus und definiere das "Administrative label" mit Image + Link List für eine bessere Übersicht im Backend.
3. Füge der Section die Komponente Image in Combo über "add block" hinzu.
4. Füge ein Bild aus der Mediendatenbank hinzu oder lade ein neues hoch. Die definierte Größe für das Bild ist 1300 x 1300 px.
5. Füge der Section die Komponente Headline über "add block" hinzu. Die Größe der Headline beträgt H3. Wähle "No margin" bei der Option "Margin bottom" aus, sodass die Headline einen kleineren Abstand zum Text bekommt.
6. Füge der Section die Komponente Text über "add block" hinzu.
7. Füge der Section die Komponente Link list über "add block" hinzu. Über "Add DEHN21 Link list item" können weitere Links der Liste hinzugefügt werden.
Hinweis:
Nutze bei internen Verlinkungen innerhalb der DEHN-Websites (URL) den entsprechenden Seiten-Titel, wenn dieser bekannt ist. Siehe hierzu auch den Hinweis zu internen Verlinkungen.
Cards: One Column
1. Füge die Section Cards: One Column hinzu.
2. Wähle die Einstellungen für die Section aus. Wähle als Hintergrundfarbe "DEHN red" aus und definiere die Breite der Card mit "Small" sowie das "Administrative label" mit Cards: One Column für eine bessere Übersicht im Backend.
3. Füge der Section die Komponente Card über "Add block" hinzu.
4. Wähle als Hintergrundfarbe "DEHN red" und setze einen Haken bei "with centered content", sodass der Text zentriert wird.
5. Wähle thematisch passend zum Inhalt, ein SVG-Icon in Weiß aus der Mediendatenbank.
6. Füge eine kurze (!) Headline hinzu und wähle die "Headline Hierarchy" "H2" aus (sollte sie nicht bereits voreingestellt sein) und füge einen kurzen und prägnanten Text hinzu.
7. Wähle eine "URL" und den entsprechenden "Link text" aus – dieser sollte bestenfalls nicht mehr als zwei Wörter enthalten.
8. Wähle "solid button" über die Checkbox aus und speichere die Karte ab.
Hinweis:
Siehe hierzu auch den Hinweis zu internen Verlinkungen.
Callback Webform
1. Füge die Section Forms and contact hinzu.
2. Wähle die Einstellungen für die Section aus. Definiere das "Administrative label" mit Callback Webform für eine bessere Übersicht im Backend.
3. Füge der Section die Komponente Callback webform über "Add block" hinzu.
4. Wähle als Webform "Callback webform (DE)" aus und setze den Status auf "Open".
5. Wähle als Hintergrundfarbe "Off White".
6. Füge den "Opening button text" (Button erscheint bei zugeklapptem Formular und öffnet es "on click"), die Headline sowie einen Text hinzu.