DEHN Homepage –
Konfiguration Komponenten
Konfiguration Komponenten
Diese Seite bietet eine Übersicht aller Drupal 9-Komponenten der DEHN-Homepage. Anhand der entsprechenden Erläuterungen erfahrt Ihr, wie sie Schritt für Schritt erstellt, editiert bzw. angepasst werden können. Ü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 Slider
1. Füge die Section Header hinzu.
2. Wähle die Einstellungen für die Section aus. Definiere immer das "Administrative label" für eine bessere Übersicht im Backend.
3. Die Section kann jederzeit über "Configure Header with slider" bearbeitet werden.
Hinweis: Das "Administrative label" gibt der Section im Backend eine genaue Bezeichnung. Das vereinfacht die Prozesse, wenn diese Section später bearbeitet wird. Wird das Label nicht definiert, so steht dort "Section (Zahl)". Die Zahl zeigt an, an welcher Stelle die Section auf der Homepage steht.
4. Füge der Section die Komponente Header with slider über "add block" hinzu und wähle die Einstellungen für die Komponente "Configure block" aus.
5. Die Komponente kann jederzeit über "Configure" bearbeitet werden.
6. Setze einen Haken bei "Published", wenn das Media slide angezeigt werden soll. Ist der Haken nicht gesetzt, wird es ausgeblendet. Füge eine kurze und prägnante Headline/Subline hinzu.
7. Stelle eine URL und die Bezeichnung für den Button ein. Siehe Hinweis zu internen Verlinkungen. Darüberhinaus wähle über das Dropdown "is image/video bright or dark", ob das eingestellte Video/Bild hell oder dunkel ist. Entsprechend wird die Überschrift an den Hintergrund angepasst:
bright -> Headline rot / Subline schwarz
dark -> Headline weiß / Subline weiß
Hinweis:
Ausschließlich das erste "Media slide" darf ein Video beinhalten.
8. Wähle ein Bild aus der Mediendatenbank oder lade ein neues mit den Maßen 2560 x 1440 px hoch.
9. Damit der Header Slider auch auf den responsiven Devices ausgespielt werden kann, müssen die entsprechenden Bildausschnitte über "Edit" eingestellt werden.
10. Über "Crop image" wählst Du nun die entsprechenden Ausschnitte für die einzelnen Seitenverhältnisse aus.
Company Purpose
1. Füge die Section Homepage modules hinzu.
2. Benenne für eine bessere Übersicht im Backend unter "Configure Section" das "Administrative label" (in diesem Fall "Company purpose").
4. Füge der Section die Komponente Company purpose über "Add block" hinzu.
5. Wähle die Einstellungen für die Komponente aus. Das "Larger Portrait Image" (dushang-lightning-2x3-1600.jpeg) und das "Smaller Landscape Image" (dushang-dehnshield-3x2-1000.jpeg) sind festgelegt.
6. Der beschreibende Text und die Anzahl der Zeilen, über die der Text verteilt werden soll (6, 7 oder 8), können bearbeitet werden.
Text Animation "DEHN protects."
Füge die Section Homepage modules hinzu (siehe dazu oben unter Company purpose).
1. Wähle die Komponente "DEHN protects." aus.
Der Claim "DEHN protects." ist fest vorgegeben und kann textlich nicht angepasst werden.
Filterable Postcards with Linklist
1. Füge die Komponente Filterable postcards with linklist über "add block" hinzu und wähle die Einstellungen für die Komponente aus.
2. Füge eine Headline hinzu.
3. Füge einen Introtext hinzu.
4. Füge die Hauptkategorien hinzu, die ausgespielt werden sollen ("Postcard categories").
5. Bestücke die Kategorien mit dem Kategorienamen und einem entsprechenden Kategoriebild mit den Maßen 2000 x 1125 px. Vergiss nicht, dass die responsiven Größenverhältnisse unter "Edit" / "Crop image" eingestellt werden müssen.
Hinweis:
In den einzelnen "Postkarten" der Filterable postcards with linklist werden einige Kategorien der Hauptnavigation zusätzlich dargestellt. Viele dieser Kategorien entsprechen der im Lösungsbereich aufgelisteten Unterpunkte und erhalten eine zusätzliche Präsentationsfläche.
6. Füge eine "URL" zur entsprechenden Unterkategorie und den "Link text" hinzu.
7. Füge eine neue Hauptkategorie über den Button "Add DEHN21 postcard with linklist" hinzu.
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.
Plain: One Column (Headline)
1. Füge die Section Plain: One column hinzu.
2. Wähle die Einstellungen für die Section aus. Wähle keine Hintergrundfarbe und definiere das "Administrative label" 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 "H3".
Product slider with filter
1. Füge die Section Special modules hinzu.
2. Wähle die Einstellungen für die Section aus. Definiere das "Administrative label" für eine bessere Übersicht im Backend.
3. Füge der Section die Komponente Product slider with filter über "Add block" hinzu.
4. Hinterlege nun unter "Source ID" die entsprechende Produkt-ID, damit die Produktstammdaten wie z.B. Bild, Produktname, Text etc. automatisch generiert werden können.
5. 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. Über "Add DEHN21 single product slide" fügst Du einen neuen Produktteaser hinzu.
Hinweis: Die Reihenfolge der Produkte kann über das Pulldown rechts neben den Produktinfos angepasst werden.
Welche Produkte in dem Slider gezeigt werden, wird mit dem DEHN Marketing Team definiert.
Cards: three columns
1. Füge die Section Cards: three columns hinzu.
2. Wähle die Einstellungen für die Section und dort "Transparent" als Hintergrundfarbe aus. Definiere das "Administrative label" für eine bessere Übersicht im Backend.
3. Füge jeder Spalte (Column) die Komponente Card über "Add block" hinzu.
4. Wähle als Hintergrundfarbe "Off White" und setze einen Haken bei "with centered content", sodass der Text zentriert dargestellt wird.
5. Lade ein Bild mit den Maßen 720px x 480px hoch.
6. Füge eine kurze (!) Headline hinzu und setze einen Haken bei "Alternative headline color: black"
7. Wähle die "Headline Hierarchy" "H4" aus (sollte sie nicht bereits voreingestellt sein) und füge einen kurzen und prägnanten Text hinzu.
8. Wähle eine "URL" und den entsprechenden "Link text" aus – dieser sollte nicht mehr als zwei Wörter enthalten.
9. Speichere diese Karte mit "Update" ab und fülle nach dem gleichen Verfahren die nächste Karte aus.
Hinweis:
Welche drei Wissensthemen angezeigt werden, wird mit dem DEHN Marketing Team definiert. Siehe darüberhinaus auch den Hinweis zu internen Verlinkungen.