H1 SEITENÜBERSCHRIFT IN HERO SECTION

H3 Hero Section Überschrift. Soll möglichst eine Bold Claim Wertversprechen enthalten und mit Highlight Farbe arbeiten.

smartmakers header image overlay

Layout & Containern

Aufbau von Sektionen mit Elementor Containern

Wichtige Informationen zur Layout Steuerung durch die Container einer Sektion:

  • Section Container: hier wird normalerweise nur die Höhe der Sektion individuell eingestellt sowie die Hintergrundfarbe der Sektion. Um Whitespace oberhalb und unterhalb der Inhalte einer Sektion zu garantieren, hat der Container ein Padding Top + Bottom eingestellt.
  • Align Container: hat drei Funktionen 1) dient zur mittigen Ausrichtung aller weiteren Inhalte / Container sowie 2) zur Bestimmung der Reihenfolge in der Desktop, Tablett oder Mobile Ansicht sowie 3) erzeugt eine 32px Abstand zwischen allen Containern.
  • Content Container: in diesen sitzen alle Inhaltselemente wie Überschriften, Texte, Listen und andere Widget.
Inhalte dieser Seite

Sektionen gibt es in fünf unterschiedlichen Höhen, siehe Beispiele unterhalb dieser Sektion

320px Sektion

H3 Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed facilisis sapien. Fusce euismod euismod lobortis. Aliquam pulvinar mi quis ipsum tristique, sit amet luctus dolor lacinia. Aenean non tincidunt justo.

480px Sektion

H3 Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed facilisis sapien. Fusce euismod euismod lobortis. Aliquam pulvinar mi quis ipsum tristique, sit amet luctus dolor lacinia. Aenean non tincidunt justo.

640px Sektion

H3 Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed facilisis sapien. Fusce euismod euismod lobortis. Aliquam pulvinar mi quis ipsum tristique, sit amet luctus dolor lacinia. Aenean non tincidunt justo.

800px Sektion

H3 Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed facilisis sapien. Fusce euismod euismod lobortis. Aliquam pulvinar mi quis ipsum tristique, sit amet luctus dolor lacinia. Aenean non tincidunt justo.

960px Sektion

H3 Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed facilisis sapien. Fusce euismod euismod lobortis. Aliquam pulvinar mi quis ipsum tristique, sit amet luctus dolor lacinia. Aenean non tincidunt justo.

Layout Beispiele für eine stylisch elegante User Experience

H2 Section Headline

4 x 384px Grid

H3 Überschrift. Dies ist eine beispielhafte Sektion mit zweizeiliger Überschrift

Dies ist ein regulärer Fließtext mit normaler Zeilenhöhe. Es gibt vier verschiedene Fließtext-Stile:

  • body-01-long ist der reguläre Fließtext mit hohem Zeilenabstand
  • body-01-short hat einen kleineren Zeilenabstand
  • body-02-long hat eine größere Schriftgröße
  • body-02-short hat kleinen Zeilenabstand bei größerer Schriftgröße  

Ein Bild sprechen lassen

8 x 176px Grid Sektion

Vernetzten Sie ihre Lieferketten, internen Materialflüsse, Lager und Baustellen

Body-02-Long durch modernste IoT Asset Tracking Technologie wird der Standort, Zustand und Status Ihrer Ladungsträgern, Sendungen, Behältern, Fahrzeuge und Ausrüstung in Echtzeit sichtbar.

Ein Bild sprechen lassen

8 x 176px Grid Sektion

Vernetzten Sie ihre Lieferketten, internen Materialflüsse, Lager und Baustellen

Body-02-Long durch modernste IoT Asset Tracking Technologie wird der Standort, Zustand und Status Ihrer Ladungsträgern, Sendungen, Behältern, Fahrzeuge und Ausrüstung in Echtzeit sichtbar.