User Guide Erste Schritte

Erste Schritte –
Tipps & Tricks

Diese Seite erläutert die ersten Schritte zur Erstellung einer neuen Flexpage und bietet eine Übersicht diverser Tipps & Tricks, Empfehlungen, Hilfestellungen zum Erstellen neuer Seiten in Drupal.

Allgemeine Einstellungen

1. Klicke zum Hinzufügen einer neuen Seite auf "+Add content" und wähle "Flexpage" aus.

2. Alternativ kann eine bereits bestehende Seite kopiert (geklont) und angepasst werden. Wähle dazu über den Content-Bereich eine Seite aus und klicke oben im Menü auf "Clone" – Du gelangst direkt in die Editiermaske der neuen Seite (Edit).

Hinweis:
Um eine neue Homepage in eine Länderversion einzubinden, wendet Euch bitte an das Corporate Marketing Team. Jede Homepage muss an anderer Stelle von einer/m Software-Entwickler:in "verdrahtet" werden.

1. Wähle die jeweilige Sprache, in der die Seite veröffentlicht werden soll und stelle das entsprechende Länderkürzel an den Beginn des Seitentitels. Bsp.: DE – Homepage

2. Wähle als "Header background color" und "Footer background color" "DEHN red" aus, wenn es sich um eine Produkt-Landingpage oder die Homepage handelt.

3. Setze ein Häkchen bei der Checkbox " Exclude this page from site search index", wenn die Seite noch nicht live gestellt ist, damit sie nicht über die DEHN-Suche gefunden werden kann. Wenn die Seite veröffentlicht wird, muss das Häkchen wieder entfernt werden.

4. Überprüfe bei den Meta Tags, dass unter dem Punkt "Robots" überall – außer bei bei "index" und „nofollow“ – Häkchen gesetzt sind, solange die Seite noch nicht veröffentlicht ist. Wird die Seite veröffentlicht, so entferne alle Häkchen und setze sie nur bei "index" und "follow".

5. Setze das Häkchen bei "Published" nur, wenn die Seite schon veröffentlicht und für alle User aufrufbar sein soll. Ohne Häkchen ist sie nur über das Backend aufrufbar. 

6. Solange die Seite noch nicht veröffentlicht ist, setze unter "Simple XML Sitemap" bei "Regenerate all sitemaps after hitting SAVE" ein Häkchen. Wird die Seite veröffentlicht, so entferne dieses wieder und setze eins bei "Index this Flexpage entity in...".

7. Entferne das Häkchen bei "Generate automatic URL alias" und stimme Dich hinsichtlich der URL mit dem Corporate Marketing ab, um eine einheitliche URL-Struktur zu gewährleisten.

SEO-Infos unter "Edit"

  • SEO Title (mindestens 15 und höchstens 55 Zeichen)
    Auf der Seite selbst ist der Seitentitel für den Nutzer nicht sichtbar. Allerdings wird er im HTML-Tag <title> innerhalb des Quellcodes hinterlegt und wird bei den meisten Browsern im Tab und bei den Suchmaschinen in den Suchergebnissen angezeigt.
     
  • SEO Description (maximal 120 Zeichen)
    Soll dem User einen Hinweis auf den Inhalt der URL zu geben: direkte Kundenansprache, einen Call-to-Action, oder kurze Stichworte, die den Content der URL anteasern.
  • Site Search Keywords
    Diese Keywords sind erforderlich, um sicherzustellen, dass User Seiten über die interne DEHN-Website-Suche finden können. 
     
  • Internal Page Grouping Keywords
    Zur internen Suche der Seiten in Drupal unter dem Reiter "Content" durch einen Contentmanager von DEHN, werden diese Keywords genutzt.

Seite editieren

Um eine Drupal 9-Flexpage zu bearbeiten, befolge folgende Schritte:

1. Wechsel zu "Layout". Nun kannst Du Texte oder Bilder innerhalb der einzelnen Komponenten (blocks) editieren.

2. Füge eine neue "Section" hinzu, und verwende eine genaue Bezeichnung unter "Configure Section", indem Du das "Administrative label" definierst. 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.

3. Füge dieser "Section" über "Add block" eine Komponente hinzu.

4. Änderungen werden über "Save layout" auf das Frontend übertragen.

5. Das Frontend wird über "View" angezeigt.

 

Eine Seite muss in das Menu integriert sein, auch um eine korrekte Breadcrumb-Navigation angezeigt zu bekommen. Dazu befolge folgende Schritte:
1. In der Drupal-Hauptnavigation unter DEHN / DEHN Menus die Übersicht der Länder-Navigationen aufrufen.
2. Über das Dropdown "List links" den Seitenbaum der entsprechenden Site (z. B. Main DE) auswählen.
3. Über den Button "Add Link" eine neue Seite der Navigation hinzufügen.
4. Unter "Link" die entsprechende Seite auswählen (Seitentitel eintragen).
Das Häkchen bei "Enabled" entfernen, wenn die Seite nicht in der Navigation angezeigt werden soll.
Einen kurzen Navigationsnamen unter "Menu link title" vergeben. URLs sollten mit Verzeichnisebenen die Menüstruktur abbilden (egal ob im Hauptmenü sichtbar oder nur intern verlinkt).
Unter "Parent link" die übergeordnete Seite auswählen und speichern.
5. Oben rechts auf der Menu-Seite auf "Hide row weights" klicken, um die Seiten mit Hilfe des Kreuzes innerhalb der Navigation verschieben zu können.

Vor dem Livegang (unpublished)

Die URL soll nicht in den Suchmaschinen gefunden werden.

1. Sprachversion wählen (Language)
2. Titel/SEO
- Seitentitel eintragen (Länderkürzel vorweg stellen: DE – ...)
- Header & Footer background color wählen
- SEO Title (max. 58 Zeichen), SEO Description (max. 150 Zeichen)
- Site Search Keywords
- Internal Page Grouping Keyword(s) (interne Suche in Drupal)
3. Checkboxen
Haken (bzw. Radiobutton) setzen
- Exclude this page from site search index
- (META TAGS): follow, noindex, noarchive, nosnippet, noodp, noydir, noimageindex, notranslate
- Do not index this Flexpage entity in variant Default (Simple XML SITEMAP)
- Regenerate all sitemaps after hitting Save (Simple XML SITEMAP)
Haken entfernen
- ​​​​Published
- (META TAGS): index, nofollow
- Generate automatic URL alias
4. URL alias in Rücksprache mit Corporate Marketing einstellen

Zum Livegang (published)

Die URL soll in den Suchmaschinen gefunden werden.

  1. Haken setzen
    • index (META TAGS)
    • follow (META TAGS)
    • Index this Flexpage entity in variant Default (Simple XML SITEMAP)
    • Regenerate all sitemaps after hitting Save (Simple XML SITEMAP)
    • ​​​​Published
  2. Haken entfernen
    • Exclude this page from site search index
    • (META TAGS): noindex, nofollow, noarchive, nosnippet, noodp, noydir, noimageindex, notranslate (META TAGS)
    • Generate automatic URL alias

Seite in Menu integrieren, siehe Einbindung in Navigation

Bildformate Übersicht

NAME KOMPONENTEBILDGRÖßE | SEITENVERHÄLTNIS
Header with slider2560 x 1440 px | Seitenverhältnis: 16:9 - 3:2 - 1:1 - 2:3
Header with slanted image2560 x 1707 px | Seitenverhältnis: 3:2 - 1:1 - 2:3
Header on slanted Background image2560 x 1707 px | Seitenverhältnis: 3:2 - 1:1 - 2:3
Header with optional lifted image2000 x 1125 px | Seitenverhältnis: 16:9 - 4:3 - 1:1 - 2:3
Header with image mapDesktop: Breite 1600 px (wenn möglich 2000), Höhe variabel – Querformat | Tablet u. Mobil: Breite 1000 px (wenn möglich 1600), Höhe variabel – Hochformat
Combo: image + text1300 x 1300 px oder 1300 x 731 px | Seitenverhältnis: 1:1 oder 16:9
Image + Link list1300 x 1300 px oder 1300 x 731 px | Seitenverhältnis: 1:1 oder 16:9
Cards: two columns routingSVG-Format
Cards: three columns routingSVG-Format
Cards: three columns online courses/seminars720 x 480 px | Seitenverhältnis: 3:2 - 1:1
Cards: one column2560 x 1440 px | Seitenverhältnis: 16:9 - 4:3 - 1:1 - 2:3
Cards: two columns1300 x 867 px | Seitenverhältnis: 3:2 - 1:1
Cards: three columns720 x 480 px | Seitenverhältnis: 3:2 - 1:1
Cards: four columns540 x 360 px | Seitenverhältnis: 3:2 - 1:1
Image: optional overlay text2560 x 1440 px | Seitenverhältnis: 16:9 - 4:3 - 1:1 - 2:3
Image: with slant2560 x 1920 px | Seitenverhältnis: 4:3 - 1:1 - 2:3
Image: with image mapDesktop: Breite 1600 px (wenn möglich 2000), Höhe variabel – Seitenverhältnis: Querformat | Tablet u. Mobil: Breite 1000 px (wenn möglich 1600), Höhe variabel – Seitenverhältnis: Hochformat
Slider with (linked) images/movie2560 x 1440 px | Seitenverhältnis: 16:9 - 4:3 - 1:1 - 2:3
YouTube VideoDarf 25 MB nicht überschreiten
Company PurposePortrait: 1600 x 2400 px | Seitenverhältnis: 2:3 – Landscape: 1000 x 665 px | Seitenverhältnis: 3:2
Filterable postcards with linklist2000 x 1125 px | Seitenverhältnis: 16:9 - 3:2 - 1:1 - 2:3

Einsatz Bilder

  • SVG Icons
    Der Einsatz der SVG Icons ist nur in den Komponenten "Cards" vorgesehen. In der Mediendatenbank Canto sind vielfältige Anwendungs-Icons hinterlegt. Sollte dennoch ein SVG Icon benötigt werden, so wende Dich bei Bedarf an das Corporate Marketing Team. Eine Neuerstellung ist nicht erwünscht und erfolgt nur über das Corporate Marketing Team nach einheitlichen Vorgaben.
  • Bildformate sind gemäß der oben stehenden Übersicht zu erstellen und einzusetzen.
     
  • Der Einsatz von falschen Bildformaten kann zu einer fehlerhaften Darstellung in sämtlichen Viewports führen und ist daher zu vermeiden.
     
  • GIF (siehe 1. in Abb.)
    Bei Einsatz eines GIFs muss die Checkbox “Use plain image (disables image ratio setting), e.g. for keeping animated images untouched” aktiviert sein, damit die Animation nicht unterdrückt wird.
    Beispielhafte Integration: DEHNventil M2

Typografie

Schriftgrößen, Schriftfarben sowie allgemein Farben, sind gemäß dem Corporate Design definiert und in den Templates per CSS hinterlegt und werden entsprechend des Hintergrunds adaptiert.
Die Schriftgrößen sind dynamisch – das bedeutet: je nach Spaltenbreite und Breakpoint haben alle Texte eine in "vw" (viewport-width) definierte Größe. Die Elemente müssen nicht einzeln konfiguriert werden, sondern werden nach der Festlegung auf Hierarchie, Ort und Container per CSS eingestellt. 

Um ein einheitliches Schriftbild auf der gesamten Site zu gewährleisten, werden die Schriftgrößen im Fließtext nicht angepasst und bleiben auf "normal font size" eingestellt.

Headlines werden gemäß Ihrer Hierarchie eingestellt und können ggf. über "Force headline font size" -> Size like H3  (Optional give headline other size than is default hierarchy) in der Schriftgröße angepasst werden. Dann kann jeglicher Text so groß sein wie eine H1, auch wenn es strukturell nur zur H3 reicht.

Textlängen: Nur wenn Inhalte angeboten werden, die wirklich an den direkten Interessen der Nutzer orientiert sind, dann sind lange Texte sinnvoll. Wenn also z.B. ein Problem gelöst wird, das die Nutzer haben oder wenn Sie ein echtes Informationsbedürfnis stillen. Ist das nicht der Fall, sollten die relevanten Informationen so kurz wie möglich gehalten werden, um den Nutzer:innen einen schnellen Überblick zu verschaffen.

Buttonfarben

Die Farben der Buttons (normal, primary, hover, outline) sind pro Hintergrundfarbe festgelegt und müssen nicht individuell gesetzt werden.
Die Standard-Buttonfarbe ist Hellgrau mit schwarzer Schrift und kann – in einigen Fällen – optional über eine Checkbox in der jeweiligen Komponente angepasst werden.
Darstellung ohne mouseover / mit mousover:

1. Bigger button size (CTA) -> Button wird größer dargestellt (wird nur in Sonderfällen genutzt, ggf. Rücksprache mit Corporate Marketing)

2. Solid button -> Button rot mit weißer Schrift

3. ... or transparent with red border -> Button weiß mit rotem Rand - nur für Referenzen

Abstände / Textumbrüche

Die Abstände innerhalb von Sections sind automatisch einheitlich geregelt (- None -). In manchen Fällen kann der Abstand zur Vorgänger-Section zu klein oder zu groß sein. Dann kann er nach oben über "margin-top" und nach unten über "margin-bottom" eingestellt werden ("No margin", "Medium-size margin", etc.).

1. Umbrüche im Fließtext vermeiden:
Manchmal befindet sich der HTML-Zeilenumbruch an einer Stelle, die nicht sinnvoll erscheint. Der Umbruch geschieht auch häufig vor Bindestrichen. Der Rest des Wortes rutscht somit in die nächste Zeile. Der Absatz sorgt für Verwirrung beim Lesen.
Fixe Trennungen per '<br>' sollen dann nicht eingesetzt werden, da der Inhalt responsive bleiben muss. Also sind die automatische Silbentrennung (bedingte Trennung) bzw. die sogenannten "Soft Hyphen" extrem relevant und eine gute Alternative, Text besser lesbar zu machen. Lange (deutsche) Substantive können mit "&shy;" – oder im Richtext-Editor auch über den Button '(-)' – trennbar gemacht werden und je nach Viewport (mobile, tablet, desktop) wird das Wort, an der Trennstelle, an der das "Soft Hyphen" gesetzt wurde, getrennt.

Anker setzen / Sprungmarke / interne Verlinkungen

Um eine Sprungmarke bzw. einen Anker-Link zu setzen, muss in der Konfiguration der Section, das Feld "Section ID" ausgefüllt sein. Die "Section ID" ist eine optionale Einstellung, die zur Unterstützung eines Anker-Links zu diesem Block verwendet wird. Wenn man beispielsweise "feature" eingibt, so kann direkt auf diesen Abschnitt verlinkt werden, indem man "#feature" an das Ende der URL anhängt.
IDs sollten mit einem Buchstaben beginnen, dürfen nur Buchstaben, Zahlen, Unterstriche, Bindestriche und Punkte enthalten und sollten auf der Seite eindeutig sein.

Merke: Eine Sprungmarke kann nur an eine tatsächliche URL angehängt werden und nicht an einen internen Link.

Verlinkungen innerhalb der Corporate Website
Nutze bei internen Verlinkungen innerhalb der DEHN-Websites (Feld "URL") immer den entsprechenden Seiten-Titel, wenn dieser bekannt ist. Diesen findest Du im "Edit"-Modus der Zielseite unter "Titel". Per Copy & Paste kannst Du ihn bei "URL" einfügen, indem Du auf den dann angezeigten vorgegebenen Link klickst. So ist sichergestellt, dass dieser immer up to date bleibt, sollte sich die URL ändern.

 

Bei Verlinkungen in die Produktdatenbank (PDB) ist eine andere Vorgehensweise vorgegeben. Die Adress­zeile aus der PDB (Seiten-URL) darf nicht einfach kopiert und verwendet werden. Lege stattdessen einen Shortlink nach folgendem Muster an:
BEISPIEL KAPITEL:
Shop-URL: https://www.dehn.de/store/h/de-DE/H488/teilbare-ableiter-fuer-die-hutschiene
Shortlink: https://de.hn/<Länderkürzel z.B. de>/h/<ID> --> https://de.hn/de/h/488
––––––––––
BEISPIEL FAMILIE:
Shop-URL: https://www.dehn.de/store/p/de-DE/F32581/dehnpatch-ableiter-fuer-datennetze-und-ethernet-anwendungen
Shortlink: https://de.hn/<Länderkürzel z.B. de>/f/<ID> --> https://de.hn/de/f/32581
––––––––––
BEISPIEL ARTIKEL:
!! Anders als bei KAPITEL und FAMILIE, wird statt der <ID>, die <Artikelnummer> eingefügt.
siehe 1.
Shop-URL: https://www.dehn.de/store/p/de-DE/F32581/kombi-ableiter-dehnpatch-bis-10-gbit-mit-rj45-buchsen-und-statusanzeige-?product=P6859770#P6859770
siehe 2.
Shortlink: https://de.hn/<Länderkürzel z.B. de>/a/<Artikelnummer> --> https://de.hn/de/a/929161

Um einen Footer anzupassen oder einen neuen zu erstellen, befolge folgende Schritte:

1. Über die Drupal-Hauptnavigation unter DEHN / DEHN Social Icons+Copyright die Liste der aktuellen Footer anzeigen. Den entsprechenden Footer über "Edit" editieren und anpassen.

2. Zur Erstellung eines neuen Footers über den Button "Add Custom Block" "Footer / DEHN21 Footer" auswählen. Hierbei handelt es sich um das aktuelle Footerformat, so wie es in den neuen Flexpages genutzt wird.

3. Die Benennung eines Footers erfolgt nach einer vorgegebenen Nomenklatur: z. B. "DEHN21 Footer DE". Der Name soll immer das Länderkürzel, der entsprechenden Seite enthalten.

4. Nun alle 4 Spalten mit den vorgegebenen Informationen ausfüllen. Rückfragen dazu beantwortet gerne das Corporate Marketing Team.

Startseite User Guide