Dark Horse Innovation

Test

Eine Landingpage ist in Sections aufgeteilt, die Module enthalten. (spiegelt sich in CMS wider)
Schreibe ich etwas ins Feld »Section Title«, erscheint links die Benennung als Seitenleiste auf der Website, lasse ich sie auf default leer, bleibt sie auf der Website unsichtbar und mein Inhalt füllt die komplette Breite der Seite aus. (Ausnahmen s. u.)

Dokumentation

Erklärung

Der Titel steht am Anfang einer Seite. Zum Titel kann man zusätzlich ein Foto hinzufügen. Dies wird automatisch optimiert, falls es zu groß ist.

Headlines können html-code enthalten um Umbrücke zu lenken z.B. & shy; oder & nbsp;
https://wiki.selfhtml.org/wiki/HTML/Textauszeichnung

Modul Subtitle

Subtitle

Steht zwischen verschiedenen Sektionen, um diese per Headline zu trennen.

  • Per default ohne Section-Title.
  • Auswählbare Hintergrundfarbe: White, Lightgrey, Mediumgrey, Darkgrey oder Light Mint

Collagen

Collagen kann ich überall auf der Seite frei platzieren, in dem ich das Modul "Collage" einsetze. Das Modul Collage im CMS über dem Element platzieren, auf dem es stehen soll.

Ein Textfeld kann immer markdown beinhalten.
https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
Das heißt ich kann auch hier Hierarchie mit Überschriften herstellen, Text italic, unterstreichen auszeichnen und Links, Buttons und Tags einfügen. z.B. Button1 Tag normaler Link

Kategorie

Dies ist ein Beispieltext für Fullwidth, Hintergrund: lightmint: Wir entwickeln Menschen und Kulturen, Strategien und Strukturen, Produkte und Services und Arbeitsumgebungen.
tion.

Dies ist ein Beispieltext für Fullwidth Fullscreen mit Foto, Hintergrund Mediumgrey: Wir entwickeln Menschen und Kulturen, Strategien und Strukturen, Produkte und Services und Arbeitsumgebungen.
tion.

Fullwidth Texte sind größere Texte, die z.b. auf Case-Seiten eingesetzt werden können. Sie können entweder in der Höhe des eingetragenen Textes dargestellt werden, oder in der Höhe des aktuellen Screens (ausgewählte Option: Fullscreen)
Sie können sowohl mit, als auch ohne Background-Image sein.
Mögliche Background Color: white, lightgrey, mediumgrey, darkgrey, lightmint
Falls ein Backgroundfoto hochgeladen wird UND eine Farbe, wird der Overlay des Bildes entsprechend der Farbe angepasst. (s. Bsp oben)

Kategorie

Headline

Dies ist ein Beispieltext:
Wir entwickeln Menschen und Kulturen,Strategien und Strukturen, Produkte und Services und Arbeitsumgebungen.
Aus diesen vier Triebkräften das richtige System für Eure Organisation zu entwickeln ist die ganze Kunst der Transformation. Wir sind Expert:innen in jedem dieser Bereiche. Auch wenn Ihr nur einzelne Maßnahmen durchführt, wir werfen ein Auge und ein Hirn auf das restliche System. Das macht uns erfolgreich weil es Euch erfolgreicher macht.
Tag1 Tag2 Tag3

Headline h2

Headline h3

Auch wenn es um Innenarchitektur geht: Bei Dark Horse versuchen wir zu Anfang tunlichst zu vermeiden, über Design, Farben oder Möbelsprache zu sprechen. Diese Zeit investieren wir in den Austausch und das Verstehen von Grundmotivationen, strategischen Zielen, organisationellen Rahmenbedingungen und vor allem die Bedürfnisse, Ängste und Ideen der Mitarbeitenden.

Headline h4

So freuten wir uns sehr als Lufthansa Technik (LHT) mit einer interessanten Anfrage auf uns zu kam: Unterstützung bei der Konzeption eines neuen Gebäudes, in das erstmalig alle IT-Teams — ca. 300 Kolleg:innen — zusammenziehen sollten. Der Knackpunkt hierbei: niemand wollte hier zusammenziehen, denn alle Mitarbeitenden liebten ihre Zweierbüros in den alten Gebäuden. Und das neue Gebäude würde ein offenes Konzept vorsehen, um die Kommunikation zu fördern. Lieber nicht!

Das Modul Headline und Text kann, nomen est omen, Headline und Text anzeigen.
Mögliche Einstellungen:
wenn man etwas ins Feld Kategorie einträgt, wird es dort angezeigt,
die Headline kann frei gelassen werden, dann steht der Text ohne Headline, die Headline kann groß sein (Auswahl Big Headline),
Hintergrundfarben: white, lightgrey, mediumgrey, darkgrey, light primary1, light primary 2, light primary 3 (usw.) light primary 8
Ein großer Initial-Letter kann ausgewählt werden.

Außerdem kann man im Text markdown verwenden:
verschiedene headlines: ## vorm text wird zu Headline 2, ### vorm Text wird zu Headline 3, #### vorm Text wird zu Headline 4
mit Text in geschwungenen Klammern (alt+8/ alt+9) werden Tags eingesetzt


Im Beispiel:
Kategorie eingetragen
Headline klein
Initial-letter: ✓
Fullscreen: ✘

Grid

Grids sind die »kompliziertesten« Module im CMS, es gibt viele Einstellungsmöglichkeiten, die das Aussehen und die Funktionen verändern.

Padded: Einzelne Items bekommen ein Abstand zueinander.
Colored Headlines: Die Headlines der Items verändert sich automatisch farblich.
Row Height: Damit das Grid funktioniert, muss immer die Höhe einer Reihe angegeben sein. Die Höhe der einzelnen Gridelemente lassen sich im CMS anpassen.

Grid

Items are padded: ✓
Row Height: L
Items: Offer, Text

Grid

Inhalte der einzelnen Items werden über das Dokumenten Symbol eingefügt.
Sobald die Felder Expand Text und Expand Direction ausgewählt sind, wird ein Text Item vergrößerbar.

CTA (Call to Action)
Backgroundcolor: white, lightgrey, mediumgrey, darkgrey, lightmint
Man schreibt Text und entsprechendne Link rein (selbsterklärend durch CMS)

CTAs vI

Stretch: ✔︎
Die einzelnen CTAs werden ohne abstand zueinander angezeigt, über Breite der gesamten Section gestretcht

CTAs II

Padding Top: Abstand nach oben
Padding Bottom: Abstand nach unten
In diesem Beispiel beides ausgewählt, Breite richtet sich nach INhalt des Buttons

Headline:

Text Top: Hier kann ich etwas schreiben.

Text Bottom: z.b. Link

Team Contact

Team items are connected to /global/team

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

Tags Marquee

Durchlaufendes Band mit verschiedenen Tags.

Portfolio

Als Verknüpfung / Alias zu verstehen.
Zeigt automatisch die Inhalte von /global/portfolio an.

Read More: Texte werden gekürzt


Separator: Line

Eine einfache Linie

Lorem

Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Google

Google

0800 1234567890

Headline Text

Unicode Emojis:
https://apps.timwhitlock.info/emoji/tables/unicode

U+1F64F
wird zu (ohne leerzeichen)
& # x 1F65F ;

https://www.w3schools.com/charsets/ref_utf_dingbats.asp

Accordion

Case Teaser

Lorem
Ipsum

Lorem
Ipsum

Offers

Lorem
Ipsum

Lorem?

Ipsum!

Team Contact

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Emphasized Image

  • 0 +

    Lorem

  • > 0

    Ipsum

  • 0

    Lorem

  • 0

    Ipsum

Counter

1

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Manifest

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Fullwidth Text

Lorem Ipsum

Lorem
Ipsum

Lorem ipsum.

1

Lorem Ipsum

Lorem Ipsum

2

Lorem Ipsum

Lorem Ipsum

Prozess