Hero

Hero – Fullscreen Media

Der große Auftakt einer Seite: ein bildschirmfüllendes Bild oder Video mit Text-Overlay. Gepflegt werden eine optionale Roofline, die Überschrift (H1–H3, Pflicht) und ein optionaler Fließtext sowie bis zu zwei Buttons. Als Medium lässt sich ein Bild aus der Mediathek und/oder ein Video (YouTube, Vimeo oder Direct-URL) hinterlegen, dazu ein optionaler Scroll-Hinweis. Das Design ist fest dunkel gehalten – hier gibt es keinen Hintergrund-Wähler.
Scroll
Tagline

Medium length hero headline goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Scroll
Hero

Two Columns

Ein zweispaltiger Hero mit Text und Medium nebeneinander. Neben Roofline, Überschrift (H1–H3), Fließtext und bis zu zwei Buttons legst du fest, ob das Medium links oder rechts steht. Der Hintergrund ist frei wählbar.
Hero

Media Stage

Eine Hero-Variante mit abgesetzter Medien-Bühne. Wie beim Full-screen-Hero pflegst du Roofline, Überschrift (H1–H3), Fließtext, Bild oder Video und bis zu zwei Buttons – ergänzt um die Textausrichtung und einen Scroll-Hinweis. Der Hintergrund ist frei wählbar (hell/dunkel, Verlauf oder Fläche).
Inhalts-Sektionen

Media Stage

Eine Sektion, die ein einzelnes Medium in den Mittelpunkt stellt. Gepflegt werden Roofline, Überschrift (H2–H6), Fließtext und das Medium (Bild oder Video). Buttons sind hier nicht vorgesehen; der Hintergrund ist wählbar.
Inhalts-Sektionen

Text Media

Text und Medium nebeneinander – der klassische Content-Baustein. Pflegbar sind Roofline, Überschrift (H2–H6), ein formatierbarer Fließtext (Rich-Text), ein Bild oder Video sowie bis zu zwei Buttons in wählbarem Stil (primär, sekundär oder tertiär). Ob das Medium links oder rechts steht und welcher Hintergrund gilt, stellst du frei ein.

Inhalts-Sektionen

Text Section

Eine reine Textsektion ohne Medium. Du pflegst Roofline, Überschrift (H2–H6), einen formatierbaren Fließtext und bis zu zwei Buttons. Zusätzlich wählbar sind die Ausrichtung (links oder rechts), die volle Breite (an/aus), ein sanftes Einblenden des Textes beim Scrollen sowie der Hintergrund.
Inhalts-Sektionen

Problem & Solution

Stellt Probleme ihren Lösungen gegenüber – jeweils mit einer Kennzahl. Im Kopfbereich pflegst du Roofline, Überschrift (H2–H6) und einen Rich-Text. Darunter legst du beliebig viele Paare an: Jedes Paar besteht aus einer Problem- und einer Lösungsseite (je mit Roofline, Überschrift und Text) sowie einem KPI-Wert mit Pfeilrichtung (auf oder ab). Der Hintergrund ist wählbar.
Problem

Steigende Netzentgelte

Unkalkulierbare Strompreise belasten Ihre Betriebskosten erheblich.

Solution

Lastspitzenkappung

Batteriespeicher kappt automatisch Lastspitzen und senkt Netzentgelte.

↓ 20%

Problem

PV-Überschuss geht verloren

Solarenergie wird zu niedrigen Vergütungen eingespeist statt genutzt.

Solution

Eigenverbrauchsoptimierung

PV-Energie speichern und nutzen, wenn Sie sie brauchen – für maximale Autarkie.

↓ 10%

Problem

Strommarkt als Kostenfaktor

Volatile Strompreise treffen Ihr Unternehmen ungefiltert – ohne Möglichkeit gegenzusteuern.

Solution

Intraday Trading

Batteriekapazitäten gezielt handeln und die Volatilität am Strommarkt zum Wettbewerbsvorteil machen.

↓ 10%

Cards & Lists

Icon Text

Kompakte Icon-Spalten für Features oder Leistungen. Neben Roofline, Überschrift (H2–H6) und Fließtext pflegst du ein bis vier Einträge – je Eintrag ein Icon (Bild/SVG), eine Überschrift und ein Text. Hier kommen bewusst nur Icons zum Einsatz, keine großformatigen Bilder; der Hintergrund ist wählbar.

Medium length section heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Medium length section heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Medium length section heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Cards & Lists

KPI Scroll Section

Messbare Ergebnisse

Präsentiert Kennzahlen mit einer Scroll-Animation vor einem Hintergrundbild. Gepflegt werden Roofline, Überschrift (H2–H6), ein Highlight-Satz, ein Fließtext und bis zu zwei Buttons. Es lassen sich bis zu sechs Kennzahlen anlegen – je Kennzahl ein Wert (etwa „70 %“), ein Label und eine kurze Beschreibung. Das Design ist fest dunkel gehalten (Hintergrundbild statt Wähler).

70%

↓ GESAMTERSPARNIS

Bis zu 70 % Reduktion der Energiekosten

↓ LEISTUNGSSTEIGERUNG

Bis zu 3× höhere Effizienz im Vergleich zu fossilen Energiequellen

40%

↓ CO₂-EINSPARUNG

Bis zu 40 % weniger CO₂-Emissionen im Jahresvergleich

< 2 J.

↓ AMORTISATION

Durchschnittliche Amortisationszeit unter 2 Jahren

99%

↓ VERFÜGBARKEIT

Systemverfügbarkeit durch prädiktive Wartung

Cards & Lists

Teaser Grid

Ein statisches Raster aus bis zu drei Teaser-Karten. Über Roofline, Überschrift (H2–H6) und Fließtext hinaus pflegst du genau drei Karten mit je Bild oder Icon, Titel (H5) und Text. Ein Umschalter legt fest, ob alle Karten ein Icon oder ein Bild zeigen; der Hintergrund ist wählbar.
Medium length section heading goes here
Medium length section heading goes here
Medium length section heading goes here
Interaktiv

Tabs

Individuelles Energiekonzept

Gliedert Inhalte in umschaltbare Reiter. Im Kopfbereich pflegst du Roofline und Überschrift (H2–H6). Reiter fügst du beliebig viele über das Plus-Symbol in der Komponente hinzu; jeder Reiter hat einen Titel, einen Inhalt, ein Bild und einen Link (Text + URL). Der Hintergrund ist wählbar.

Learn More

Bau des Energiesystems

Gliedert Inhalte in umschaltbare Reiter. Im Kopfbereich pflegst du Roofline und Überschrift (H2–H6). Reiter fügst du beliebig viele über das Plus-Symbol in der Komponente hinzu; jeder Reiter hat einen Titel, einen Inhalt, ein Bild und einen Link (Text + URL). Der Hintergrund ist wählbar.

Learn More

Intelligente Energiesteuerung

Gliedert Inhalte in umschaltbare Reiter. Im Kopfbereich pflegst du Roofline und Überschrift (H2–H6). Reiter fügst du beliebig viele über das Plus-Symbol in der Komponente hinzu; jeder Reiter hat einen Titel, einen Inhalt, ein Bild und einen Link (Text + URL). Der Hintergrund ist wählbar.

Learn More

Individuelles Energiekonzept

Gliedert Inhalte in umschaltbare Reiter. Im Kopfbereich pflegst du Roofline und Überschrift (H2–H6). Reiter fügst du beliebig viele über das Plus-Symbol in der Komponente hinzu; jeder Reiter hat einen Titel, einen Inhalt, ein Bild und einen Link (Text + URL). Der Hintergrund ist wählbar.

Learn More

Bau des Energiesystems

Gliedert Inhalte in umschaltbare Reiter. Im Kopfbereich pflegst du Roofline und Überschrift (H2–H6). Reiter fügst du beliebig viele über das Plus-Symbol in der Komponente hinzu; jeder Reiter hat einen Titel, einen Inhalt, ein Bild und einen Link (Text + URL). Der Hintergrund ist wählbar.

Learn More

Intelligente Energiesteuerung

Gliedert Inhalte in umschaltbare Reiter. Im Kopfbereich pflegst du Roofline und Überschrift (H2–H6). Reiter fügst du beliebig viele über das Plus-Symbol in der Komponente hinzu; jeder Reiter hat einen Titel, einen Inhalt, ein Bild und einen Link (Text + URL). Der Hintergrund ist wählbar.

Learn More
Interaktiv

Accordion

Aufklappbare Einträge – ideal für FAQ oder gebündelte Detailinfos. Im Kopfbereich pflegst du Roofline, Überschrift (H2–H6) und einen Rich-Text. Einträge legst du beliebig viele über das Plus-Symbol an; jeder Eintrag hat einen Titel und einen Inhalt aus freien Blöcken (standardmäßig ein Absatz, es lassen sich aber beliebige Blöcke einfügen). Der Hintergrund ist wählbar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Slider

Image Slider

Ein Slider für Bildergalerien. Neben Roofline, Überschrift (H2–H6) und Fließtext fügst du beliebig viele Bilder aus der Mediathek hinzu und ordnest sie per Pfeil-Buttons. Der Hintergrund ist wählbar.

Logo Slider
Slider

Teaser Slider

Ein Slider aus manuell kuratierten Teaser-Karten mit zentriertem Button-Bereich darunter. Gepflegt werden Roofline, Überschrift (H2–H4), ein Fließtext und bis zu zwei Buttons. Die Karten legst du selbst an – je Karte ein Bild, ein Titel, ein Text und ein frei wählbares Linkziel (Seite, Beitrag oder externe URL). Dieser Slider zieht keine Beiträge automatisch; dafür gibt es den Related Teaser Slider. Der Hintergrund ist wählbar.

  • Medium length section heading goes here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Medium length section heading goes here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Medium length section heading goes here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Medium length section heading goes here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Testimonial

Kundenstimme

“Eine hervorgehobene Kundenstimme. Gepflegt werden Roofline, ein Logo, das Zitat (Pflicht) sowie Name und Position der Person. Der Hintergrund ist wählbar.”
Weitere Komponenten

Contact Form

in Kontaktbereich mit Formular. Neben Roofline, Überschrift (H2–H6) und Fließtext pflegst du Kontakt-E-Mail, Telefon und Adresse. Das Formular selbst wird über den Shortcode des Microsoft-Dynamics-Marketingformulars eingebunden; ohne Shortcode erscheint ein Platzhalter-Hinweis. Der Hintergrund ist wählbar.