Anwendung -
Konfiguration Komponenten
Konfiguration Komponenten
Auf dieser Seite werden sämtliche Konfigurationen der Komponenten einer Anwendungsseite, am Beispiel der Anwendung AC/DC Ladestationen, 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 Slanted Image
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.
4. Die Section kann dann jederzeit über "Configure Header with slanted image" bearbeitet werden.
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. Weise der Section die Komponente Header with slanted image über "Add block" hinzu und füge eine (kurze knappe) Headline und einen Text ein. Als "Background color of slant" wird "Box Grey" ausgewählt.
6. Wähle ein Bild aus der Mediendatenbank aus oder füge ein neues über "Datei auswählen" hinzu (2560 x 1707 px).
7. Damit das Headerbild auf anderen Geräten (Smartphone, Tablet) responsiv ausgespielt werden kann, müssen die entsprechenden Bildausschnitte über "Edit" definiert werden.
8. Über "Crop image" wählst Du die Ausschnitte für die einzelnen Seitenverhältnisse aus. Klicke hierzu durch die horizontalen Tabs (Bsp.: Crop 16:9, Crop 2:3, etc.)
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.
Cards: Three Columns Routing (Special)
1. Füge die Section Cards: Three Columns Routing (Special) hinzu.
2. Wähle die Einstellungen für die Section und stelle "No margin" beim Punkt "Margin bottom" ein, um den Abstand der Cards zu den Inhalten darunter zu verringern (optional). Definiere das "Administrative label" mit Cards: Three Columns Routing (Special) für eine bessere Übersicht im Backend.
3. Füge jeder Spalte (Column) die Komponente Card über "Add block" hinzu. Diese besteht aus einem SVG-Icon, einer Headline, einem Text sowie einem Button (Link). Das Design der Cards ist fest definiert, wähle immer ein dunkles SVG-Icon.
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.
Product Slider 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 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 viele 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 etc. automatisch generiert werden können. Ordne jedes Produkt einer Kategorie zu (s.o. Filter). 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 soll 2 Zeilen nicht überschreiten.
6. Weitere Produkte können über den Button "Add DEHN21 single product slide" hinzugefügt werden.
Hinweis: Die Reihenfolge der Produkte kann über das Pulldown rechts neben den Produktinfos angepasst werden.
Image with Optional Overlay Text
1. Füge die Section Image with optional overlay text hinzu.
2. Gehe in die Einstellungen für die Section und aktiviere die Hintergrundfarbe "Transparent" unter "Background color". Wähle unter "Is image bright or dark?", ob das eingefügte Bild eher hell oder dunkel ist. Eine optionale Headline wird entsprechend farblich ausgegeben und kann besser gelesen werden. Definiere das "Administrative label" mit Image with optional overlay text für eine bessere Übersicht im Backend.
3. Füge der Section über "Add block" eine Komponente hinzu.
4. Wähle ein Bild aus der Mediendatenbank oder füge ein neues über "Datei auswählen" hinzu (2560 x 1440 px). Wenn Text über dem Bild liegen soll, so füge diesen unter Headline Text ein.
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 den Dateiart (z.B. .pdf oder .jpg) sowie die Dateigröße ein (z.B. 3.0 MB).
6. Wähle eine Datei aus der Mediendatenbank aus oder füge eine neue über "Datei auswählen" hinzu. Weitere Dokumente können über den Button "Add DEHN21 single download" hinzugefügt werden.
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.
Combo: Image + Text
1. Füge die Section Combo: image + text hinzu.
2. Wähle die Einstellungen für die Section und dort "Transparent" als "Background color around combo" aus. Wähle "DEHN red" als Hintergrundfarbe. Stelle die Breite (Width) auf "small" ein und setze ein Häkchen bei "Justify / Center content". Definiere das "Administrative label" mit Combo: Image + Text für eine bessere Übersicht im Backend.
3. Wähle die Seite der Komponente aus, auf der das Bild erscheinen soll und füge über "Add block" ein "Image in Combo" hinzu. 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.
4. Füge auf der Seite, auf welcher der Text erscheinen soll (links oder rechts), über "Add block" eine Headline hinzu. Diese hat die Größe "H3".
5. Füge einen Text über "Add block" hinzu.
6. Füge unterhalb des Textes einen "Link button / download button" hinzu. Und lade entweder ein Dokument hoch oder wähle eines aus der Mediendatenbank aus. Benenne den Button (Button text) und setze ein Häkchen bei "Solid button".
Hinweis: Achte darauf, dass der Text nicht zu lang ist und bestenfalls die gleiche Höhe wie das Bild auf der anderen Seite hat – andernfalls wird das Bild automatisch beschnitten.
Diese Komponente kann auf unterschiedliche Art und Weise variiert werden: Kombiniert ein Bild auf der linken Seite, mit einer Headline und einem beschreibenden Text auf der rechten Seite und umgekehrt. Ein Link kann ebenfalls eingestellt werden.
FAQs with Filter
1. Füge die Section "Special Modules" hinzu.
2. Benenne das "Administrative label" FAQs with Filter für eine bessere Übersicht im Backend.
3. Füge der Section über "Add block" die Komponente FAQs with Filter hinzu.
4. In den Einstellungen der Komponente FAQs with Filter, kann der "Floating button", mit Sprungmarke zu den FAQ, per Checkbox aktiviert werden. Dieser erscheint dann am rechten Bildschirmrand.
5. Um die FAQ thematisch zu strukturieren, kann ein Filter über das Feld "Filter categories" eingesetzt werden. Die Kategorienamen werden mit einem Komma getrennt hier eingetragen. Jede FAQ kann anschließend einer dieser Kategorien zugeordnet werden.
6. Jede FAQ benötigt eine Frage und eine Antwort – auch hier wird ein kurzer knapper Text empfohlen, ggf. kann ein Link zu mehr Informationen eingestellt werden.
7. "Add DEHN21 FAQ item" fügt neue Felder für eine FAQ hinzu.
Cards: Three Columns Online Courses / Seminars
1. Füge die Section Cards: Three Columns Online Courses / Seminars hinzu.
2. Definiere das "Administrative label" für eine bessere Übersicht im Backend.
3. Füge jeder Spalte (Column) die Komponente Card for trainings über "Add block" hinzu.
4. Wähle ein Bild aus der Mediendatenbank oder lade ein Bild mit den Maßen 720 x 480px hoch.
5. Füge den Trainings-Typ (Onlinekurs, Seminar, Workshop), eine kurze (!) Headline und einen kurzen und prägnanten Teasertext hinzu.
6. Trage den entsprechenden "Link" zur Veranstaltung ein. Speichere die Card ab und fülle nach dem gleichen Verfahren die nächste Card aus.
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 das Webform "Callback webform (DE)" 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.