• Um die farblichen Hintergründe und die korrekte Darstellung hinzubekommen, müssen im Backend auf den Seiten FlexContainer angelegt werden, in die die gewünschten Elemente eingefügt werden.
• Beispiel in diesem Fall: Der obere Container ist das Element ohne Hintergrund, der untere mit blauem Hintergrund:

Angaben im FlexContainer (unter Allgemein):

• Hier ein Beispiel der Angaben im FlexContainer.
• Wichtig: „Abstand nach unten entfernen?“ anklicken, wenn das farbige Element direkt über dem Footer sitzt, ansonsten entsteht eine weiße Fläche. Wenn das blaue Element irgendwo auf der Seite ist, dann bitte nicht anklicken, da sonst der nötige Abstand darunter fehlt.
• Hier müssen unbedingt die Angaben korrekt eingegeben werden, sonst ist die Darstellung auf der Seite in den verschiedenen Stufen falsch.

Am Beispiel des ersten (weißen) Elements:

Am Beispiel des blauen Elements:

• Darüber hinaus sind noch andere Blautöne bzw. Grüntöne (bei IT) wählbar -> Pixelhintergründe, hell/dunkel. Hierbei muss man aber eine einheitliche Darstellung einhalten.

Wichtig bei Vater IT:

• Aufgrund weiterer Ebenen arbeitet Vater IT auf den Unterseiten mit einer Seitennavigation. Hierdurch ändert sich das Layout. Dies wirkt sich auf die Angaben im FlexContainer aus. Natürlich können hier auch farbliche Hintergründe gewählt werden.

Darstellung Frontend (Ausschnitt):

Angaben im FlexContainer:

Anpassen Bild und Link im Teaser in der Navigation

• Seiteneigenschaften Startseite -> Ressourcen -> Bild einfügen, Link im Bild setzen

Startseiten: Kacheln/Teaser

• Integration der Kachelinfos am Beispiel von Vater IT

• Backend-Element (h2pagepreview):

• Gewünschte Seiten im Element auswählen:

• Unten Spalten einstellen (diese Zahlen können individuell angepasst werden):

• Die Subline in der Kachel und das Bild müssen auf der jeweiligen Seite gepflegt werden -> nicht im Container (Seiteneigenschaften -> unter Allgemein und Ressourcen): Hier am Beispiel von Cloud.

Integration von Logos

• Diese werden je nach Darstellungswunsch mit dem Element h2brands (Screenshot 1: Darstellung z. B. auf der Startseite IT) oder h2gallery (Screenshot 2: Darstellung auf der Seite Sponsoring) gepflegt. Erstere wird in der Regel verwendet, zweite ist ein Spezialfall.

Integration von Blog, News, Terminen und Cases

• Gewünschten Ordner in dem Seitenbaum unten auswählen: Blog, News, Termine, Cases
• Über + unter Artikel kann ein neuer Beitrag angelegt werden.
• Zunächst Überschrift/Unterüberschrift, ggf. anderes Datum unter Allgemein
• Inhalt anlegen bei Cases (unter Inhaltselemente, da Elementvariation möglich, z. B. mit und ohne Bild), bei Blog, Termine, News wird nur bzw. zusätzlich auch das reine Textfeld unter Allgemein genutzt.

• Kategorien nicht vergessen (immer auch den Unternehmensbereich angeben, da der Beitrag sonst nicht richtig zugeordnet werden kann), z. B. anhand eines Blogbeitrags für Vater Elektro:

• Einbinden des Headers:

• Besonderheiten bei Blog-Artikeln:
  • Angaben von weiteren Tags, z. B. Digitalisierung oder Technik
  • Im Ordner Blog-Artikel -> gewünschten Artikel öffnen -> unter Relationen gewünschte Tags auswählen

• Beispiel:

• Besonderheit bei Termine:
  • Angabe „Is Event“ und ggf. „Full Day”
  • Event End kann zudem angegeben werden

• Besonderheit bei Cases:
  • Diese folgen immer demselben Prinzip (Aufgabenstellung (Bild darunter), Vorgehensweise, Ergebnis, Timer, Zitat)
• Besonderheiten bei Veranstaltungen/Messen und News (Termine, News)
  • Hier soll kein Overlay über dem Bild liegen
  • Dies kann in dem jeweiligen Element in den Ordnern News und Termine direkt eingestellt werden (im Tab Kategorien): "Farbiges Overlay verhindern“ anklicken

Beispiel:

Integration von Stellenanzeigen

• Ordner: Stellenmarkt
• Neuen Eintrag erstellen, Felder ausfüllen, Datum, Arbeitszeit und Iframe-Link nicht vergessen (für Bewerbungsformular)
• Besonderheit: die Stellenanzeige kann auch im Vorschaumodus angesehen werden
• Im folgenden Beispiel ist die Stellanzeige sichtbar. Andernfalls PreviewModus aktivieren.

Kontakt: Einfügen von Standorten in die OpenStreetMap

• Ordner: Karten-Standorte
• Hier müssen der Name des Unternehmens (Title), Adresse, Latitude und Longitude angegeben werden
• Tipp: Um die Längen- und Breitengrade rauszufinden, muss man einfach auf Google Maps gehen, die Adresse dort eingeben, mit rechter Maustaste auf das rote Hinweis-Icon in der Map, dann „Was ist hier?“ anklicken, schon erscheinen die gewünschten Informationen

Schreibweise KNS energy

• Das e wird immer größer dargestellt als der Rest des Wortes.
• Folgendes muss direkt im Quellcode angegeben werden:
  • KNS <span class="firstLargeLetter">e</span>nergy
  • Dann sieht es so aus: