Beispielprojekt Eins
Website und Portal für ein Beispielunternehmen.
Blocktest — jeder Block in jeder Variante. Vor jeder Variante steht ihre Nummer und die Einstellungen, die sie ausmachen. Jeder Block hat zusätzlich eine eigene Seite.
Hero Unit (24) — einzeln
Basic Content (27) — einzeln
CTA Section (14) — einzeln
Accordion (7) — einzeln
Fakten (9) — einzeln
Info-Kacheln (15) — einzeln
Block-Intro (5) — einzeln
Siegel (8) — einzeln
Prozessschritte (5) — einzeln
Projekt-Fakten (3) — einzeln
Media (15) — einzeln
Teaser (10) — einzeln
Post List (7) — einzeln
Testimonials (6) — einzeln
Zitat (4) — einzeln
Logo-Leiste (4) — einzeln
Förderrechner (4) — einzeln
Formular (4) — einzeln
Hero Unit — 24 Varianten · acf/hero-unit
Layouts × Medienart, dazu Punktraster und Buttons untereinander als Zusatz zu jedem Layout. Der Verlauf zeigt kein Medium und kein Punktraster; das Badge erscheint nur auf Case Studies.
Nur diesen Block · Zur Übersicht
Hero Unit 1/24 · Nebeneinander, Galerielayout: split · kind_of_media: gallery
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 2/24 · Nebeneinander, Bildlayout: split · kind_of_media: image
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 3/24 · Nebeneinander, eingebettetes Videolayout: split · kind_of_media: embed_video
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 4/24 · Nebeneinander, hochgeladenes Videolayout: split · kind_of_media: self_hosted_video
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 5/24 · Nebeneinander auf Graulayout: split · kind_of_media: image · background_color: sand
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 6/24 · Zentriert, Icon, drei Links, Galerielayout: centered · kind_of_media: gallery
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 7/24 · Zentriert, Bildlayout: centered · kind_of_media: image
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 8/24 · Zentriert, eingebettetes Videolayout: centered · kind_of_media: embed_video
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 9/24 · Zentriert, Display-Überschrift, ohne Mediumlayout: centered · kind_of_media: gallery · headline_tag: display
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 10/24 · Zentriert auf Navylayout: centered · kind_of_media: image · background_color: primary
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 11/24 · Titel mit Bild darunter, Link auf dem Bildlayout: statement · kind_of_media: image
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 12/24 · Titel mit Galerie darunterlayout: statement · kind_of_media: gallery
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 13/24 · Titel ohne Mediumlayout: statement · kind_of_media: gallery
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 14/24 · Nur Text, linksbündiglayout: text
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 15/24 · Binär-Raster, nur Textlayout: text · dot_grid: binary
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 16/24 · Binär-Raster auf Navylayout: centered · kind_of_media: image · dot_grid: binary · background_color: primary
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 17/24 · Nur Text, Punktraster, Buttons untereinanderlayout: text · dot_grid: 1 · links_arrangement: stack
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 18/24 · Punktraster, nebeneinanderlayout: split · kind_of_media: image · dot_grid: 1
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 19/24 · Punktraster, zentriert, Buttons untereinanderlayout: centered · kind_of_media: image · dot_grid: 1 · links_arrangement: stack
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 20/24 · Punktraster, Titel mit Bild darunterlayout: statement · kind_of_media: image · dot_grid: 1
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 21/24 · Punktraster auf Navylayout: centered · kind_of_media: image · dot_grid: 1 · background_color: primary
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 22/24 · Nebeneinander, Buttons untereinanderlayout: split · kind_of_media: image · links_arrangement: stack
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 23/24 · Verlauf, Links, Anker-Pfeillayout: gradient
Ein Hinweis in der Pille
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Hero Unit 24/24 · Verlauf, externer Linklayout: gradient
Ein einleitender Absatz in ein bis zwei Sätzen. Er sagt, worum es auf dieser Seite geht.
Basic Content — 27 Varianten · acf/basic-content
Spalten, Ausrichtung, Füllung und jedes Inhalts-Layout der Spalten (Text, Link, Bild, Medium, Slider, Accordion, Formular, Punkte, CTA).
Nur diesen Block · Zur Übersicht
Basic Content 1/27 · Einspaltig, linkscolumns: one
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Mit fett und einem Link im Text.
Basic Content 2/27 · Einspaltig, zentriertcolumns: one
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Mit fett und einem Link im Text.
Basic Content 3/27 · Einspaltig, rechtscolumns: one
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Mit fett und einem Link im Text.
Basic Content 4/27 · Zwei Spalten, oben bündigcolumns: two · vertical_alignment: top
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Mit fett und einem Link im Text.
Basic Content 5/27 · Zwei Spalten, mittigcolumns: two · vertical_alignment: center
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Mit fett und einem Link im Text.
Basic Content 6/27 · Zwei Spalten, unten bündigcolumns: two · vertical_alignment: bottom
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Mit fett und einem Link im Text.
Basic Content 7/27 · Zwei Spalten, getauschtcolumns: two · swap_columns: 1 · vertical_alignment: center
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Mit fett und einem Link im Text.
Basic Content 8/27 · Zwei Spalten, eingefärbtcolumns: two · columns_filled: 1
Kurzer Text in dieser Spalte, zwei Zeilen lang.
Kurzer Text in dieser Spalte, zwei Zeilen lang.
Basic Content 9/27 · Drei Spaltencolumns: three
Kurzer Text in dieser Spalte, zwei Zeilen lang.
Kurzer Text in dieser Spalte, zwei Zeilen lang.
Kurzer Text in dieser Spalte, zwei Zeilen lang.
Basic Content 10/27 · Drei Spalten, eingefärbt, zentriertcolumns: three · columns_filled: 1
Kurzer Text in dieser Spalte, zwei Zeilen lang.
Kurzer Text in dieser Spalte, zwei Zeilen lang.
Kurzer Text in dieser Spalte, zwei Zeilen lang.
Basic Content 11/27 · Label links mit Trennliniecolumns: label · top_rule: 1
Herausforderung & Lösung
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Ein zweiter Absatz mit weiteren Details zum Kapitel.
Basic Content 12/27 · Label links, Liste und nummeriertes Accordioncolumns: label · top_rule: 1
Was wir machen
Je nach Bedarf übernehmen wir das ganze Projekt oder nur einzelne Abschnitte.
Nach einem ersten Gespräch erhalten Sie ein Angebot. Danach planen wir gemeinsam die nächsten Schritte.
Das hängt vom Umfang ab — meist zwischen vier und zwölf Wochen.
Basic Content 13/27 · Label links, Punkte und CTAcolumns: label · top_rule: 1
Vorher & nachher
Ein Satz, der zum nächsten Schritt einlädt, und ein zweiter, der ihn leicht macht.
Basic Content 14/27 · Label links, nummerierte Kartencolumns: label · top_rule: 1
Arbeitsweise
Wir sind ein kleines Team mit einem großen Netzwerk. Du sprichst direkt mit den Menschen, die dein Projekt umsetzen. Bei Bedarf holen wir passende Fachleute aus unserem Netzwerk dazu. Jedes Projekt folgt einem klaren Ablauf. So weißt du von Anfang an, was als Nächstes passiert und wann du gefragt bist.
Wir lernen dein Unternehmen, deine Ziele und deine bestehenden Abläufe kennen.
Wir entwickeln Struktur, Design und technische Lösung und stimmen sie mit dir ab.
Wir bauen, testen und binden bestehende Systeme ein. Du siehst Zwischenstände und gibst Feedback.
Nach dem Launch bleiben wir Ansprechpartner für Wartung, Weiterentwicklung und neue Ideen.
Basic Content 15/27 · Nummerierte Karten auf Navycolumns: label · background_color: primary
Auf Navy
Wir lernen dein Unternehmen, deine Ziele und deine bestehenden Abläufe kennen.
Wir entwickeln Struktur, Design und technische Lösung und stimmen sie mit dir ab.
Basic Content 16/27 · Alle Link- und Button-Stilecolumns: two
Basic Content 17/27 · Medium: Bildcolumns: one
Basic Content 18/27 · Medium: Bildstreifencolumns: one
Basic Content 19/27 · Medium: Bildpaar schmal–breitcolumns: one
Basic Content 20/27 · Medium: eingebettetes Videocolumns: one
Basic Content 21/27 · Medium: hochgeladenes Videocolumns: one
Basic Content 22/27 · Medium: iFramecolumns: one
Basic Content 23/27 · Slider neben Textcolumns: two · vertical_alignment: center
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Mit fett und einem Link im Text.
Basic Content 24/27 · Formular neben Textcolumns: two
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Mit fett und einem Link im Text.
Basic Content 25/27 · Auf Graucolumns: two · vertical_alignment: center · background_color: sand
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Mit fett und einem Link im Text.
Basic Content 26/27 · Auf Navycolumns: two · vertical_alignment: center · background_color: primary
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Mit fett und einem Link im Text.
Basic Content 27/27 · Label links auf Navycolumns: label · top_rule: 1 · background_color: primary
Auf Navy
CTA Section — 14 Varianten · acf/call-to-action
Small, Medium und Large teilen Rahmen, Ecken und Raster ohne eigene Fläche; Bildstil und Hintergrund. Auf Navy kehrt sich der CTA um. Large hat immer den Pfeil nach unten und kein Bild.
Nur diesen Block · Zur Übersicht
CTA Section 1/14 · Small, Bild als Schmucklayout: boxed · image_style: decor
Ein kurzer Satz, der zur Handlung auffordert.
CTA Section 2/14 · Small, Foto im Panellayout: boxed · image_style: overlap
Ein kurzer Satz, der zur Handlung auffordert.
CTA Section 3/14 · Small ohne Bild, drei Aktionenlayout: boxed
Ein kurzer Satz, der zur Handlung auffordert.
CTA Section 4/14 · Small auf Navylayout: boxed · background_color: primary
Ein kurzer Satz, der zur Handlung auffordert.
CTA Section 5/14 · Small, Primarylayout: boxed · variant: primary
Ein kurzer Satz, der zur Handlung auffordert.
CTA Section 6/14 · Small, Primary, drei Aktionenlayout: boxed · variant: primary
Ein kurzer Satz, der zur Handlung auffordert.
CTA Section 7/14 · Medium, Primarylayout: fullwidth · variant: primary
Ein kurzer Satz, der zur Handlung auffordert.
CTA Section 8/14 · Medium, Foto im Panellayout: fullwidth · image_style: overlap
Ein kurzer Satz, der zur Handlung auffordert.
CTA Section 9/14 · Medium, Bild als Schmucklayout: fullwidth · image_style: decor
Ein kurzer Satz, der zur Handlung auffordert.
CTA Section 10/14 · Medium ohne Bildlayout: fullwidth
Ein kurzer Satz, der zur Handlung auffordert.
CTA Section 11/14 · Medium auf Navylayout: fullwidth · background_color: primary
Ein kurzer Satz, der zur Handlung auffordert.
CTA Section 12/14 · Largelayout: statement
Ein kurzer Satz, der zur Handlung auffordert.
CTA Section 13/14 · Large auf Graulayout: statement · background_color: sand
Ein kurzer Satz, der zur Handlung auffordert.
CTA Section 14/14 · Large auf Navylayout: statement · background_color: primary
Ein kurzer Satz, der zur Handlung auffordert.
Accordion — 7 Varianten · acf/accordion
Einspaltig oder zweispaltig (Intro links), mit oder ohne Nummern.
Nur diesen Block · Zur Übersicht
Accordion 1/7 · Einspaltig mit Linkslayout: no-columns
Nach einem ersten Gespräch erhalten Sie ein Angebot. Danach planen wir gemeinsam die nächsten Schritte.
Das hängt vom Umfang ab — meist zwischen vier und zwölf Wochen.
Sie erhalten vorab ein transparentes Angebot.
Accordion 2/7 · Einspaltig, nummeriertlayout: no-columns · numbered: 1
Nach einem ersten Gespräch erhalten Sie ein Angebot. Danach planen wir gemeinsam die nächsten Schritte.
Das hängt vom Umfang ab — meist zwischen vier und zwölf Wochen.
Sie erhalten vorab ein transparentes Angebot.
Accordion 3/7 · Sublines, erster offenlayout: no-columns
Nach einem ersten Gespräch erhalten Sie ein Angebot. Danach planen wir gemeinsam die nächsten Schritte.
Das hängt vom Umfang ab — meist zwischen vier und zwölf Wochen.
Sie erhalten vorab ein transparentes Angebot.
Accordion 4/7 · Zweispaltiglayout: two-columns
Die wichtigsten Antworten auf einen Blick.
Nach einem ersten Gespräch erhalten Sie ein Angebot. Danach planen wir gemeinsam die nächsten Schritte.
Das hängt vom Umfang ab — meist zwischen vier und zwölf Wochen.
Sie erhalten vorab ein transparentes Angebot.
Accordion 5/7 · Zweispaltig, nummeriertlayout: two-columns · numbered: 1
Nach einem ersten Gespräch erhalten Sie ein Angebot. Danach planen wir gemeinsam die nächsten Schritte.
Das hängt vom Umfang ab — meist zwischen vier und zwölf Wochen.
Sie erhalten vorab ein transparentes Angebot.
Accordion 6/7 · Auf Graulayout: two-columns · background_color: sand
Nach einem ersten Gespräch erhalten Sie ein Angebot. Danach planen wir gemeinsam die nächsten Schritte.
Das hängt vom Umfang ab — meist zwischen vier und zwölf Wochen.
Sie erhalten vorab ein transparentes Angebot.
Accordion 7/7 · Auf Navylayout: no-columns · numbered: 1 · background_color: primary
Nach einem ersten Gespräch erhalten Sie ein Angebot. Danach planen wir gemeinsam die nächsten Schritte.
Das hängt vom Umfang ab — meist zwischen vier und zwölf Wochen.
Sie erhalten vorab ein transparentes Angebot.
Fakten — 9 Varianten · acf/facts
Große Zahl, Aussage und Karten. Icon, Bildunterschrift und abgeschnittene Ecke gibt es nur bei Karten.
Nur diesen Block · Zur Übersicht
Fakten 1/9 · Große Zahlvariant: number
Projekte umgesetzt
120
Jahre Erfahrung
15
Zufriedene Kundinnen und Kunden
98 %
Fakten 2/9 · Große Zahl, Trennlinie, auf Navyvariant: number · top_rule: 1 · background_color: primary
Projekte umgesetzt
120
Jahre Erfahrung
15
Zufriedene Kundinnen und Kunden
98 %
Fakten 3/9 · Aussagevariant: statement
arbeiten wir mit Ihnen — vom ersten Gespräch bis zum Start.
Persönlich und direkt
bleiben wir an Ihrer Seite, auch nach dem Projekt.
Langfristig
Fakten 4/9 · Aussage auf Grauvariant: statement · background_color: sand
arbeiten wir mit Ihnen.
Persönlich
bleiben wir da.
Langfristig
Fakten 5/9 · Karten mit Icon, Trennlinievariant: cards · top_rule: 1
Besucher:innen
>125k
Besucher:innen auf der Website im letzten Jahr
Bestellungen
>6k
Erfolgreich abgeschlossene Bestellungen
Downloads
>10k
Downloads von Infomaterial
Fakten 6/9 · Karten, Ecke abgeschnitten, viervariant: cards · notched: 1
10+
Jahre Erfahrung
80+
Projekte umgesetzt
140k+
Monatliche Besucher
5+
Jahre Kundenbeziehung
Fakten 7/9 · Karten, zweivariant: cards
Besucher:innen
>125k
Besucher:innen auf der Website im letzten Jahr
Bestellungen
>6k
Erfolgreich abgeschlossene Bestellungen
Fakten 8/9 · Eine Karte ohne Zusatzfeldervariant: cards
42
Fakten 9/9 · Karten auf Navyvariant: cards · notched: 1 · background_color: primary
Besucher:innen
>125k
Besucher:innen auf der Website im letzten Jahr
Bestellungen
>6k
Erfolgreich abgeschlossene Bestellungen
Downloads
>10k
Downloads von Infomaterial
Info-Kacheln — 15 Varianten · acf/info-cards
Eine bis sechs Spalten, Badge über oder neben der Überschrift in vier Tönen, Kachelfarbe, Icon, Checkliste und Link.
Nur diesen Block · Zur Übersicht
Info-Kacheln 1/15 · Eine Spaltecolumns: one
Info-Kacheln 2/15 · Zwei Spalten, Icon, Weiß und Graucolumns: two
Mit Icon und weißer Kachel.
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Ohne Icon, graue Kachel.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Ein zweiter Absatz.
Info-Kacheln 3/15 · Drei Spalten, nummeriertcolumns: three · numbered: 1
Erster Schritt
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zweiter Schritt
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Dritter Schritt
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Info-Kacheln 4/15 · Drei Spalten, nur Rahmencolumns: three · numbered: 1
Erste
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zweite
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Dritte
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Info-Kacheln 5/15 · Nur Rahmen auf Navycolumns: two · background_color: primary
Erste
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zweite
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Info-Kacheln 6/15 · Drei Spalten, Badge darüber, Checklistecolumns: three · badge_position: stacked · intro: centered
Ein einleitender Satz, der die drei Ziele zusammenfasst.
Erstes Ziel
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zweites Ziel
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Drittes Ziel
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Info-Kacheln 7/15 · Drei Spalten, Badge daneben, vier Tönecolumns: three · badge_position: inline · intro: centered
Navy
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Akzent
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Akzent hell
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Akzent blass
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Info-Kacheln 8/15 · Vier Spalten mit Linkscolumns: four
Betreuung
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Info-Kacheln 9/15 · Fünf Spalten mit Iconscolumns: five · numbered: 1
Erste
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zweite
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Dritte
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Vierte
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Fünfte
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Info-Kacheln 10/15 · Sechs Spaltencolumns: six
Eins
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zwei
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Drei
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Vier
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Fünf
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Sechs
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Info-Kacheln 11/15 · Mit Abschlusscolumns: three
Erste
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zweite
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Dritte
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Ein Satz zum Abschluss.
Info-Kacheln 12/15 · Rastercolumns: four
Eins
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zwei
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Drei
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Vier
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Fünf
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Info-Kacheln 13/15 · Auf Weiß, Weiß und Graucolumns: two · background_color: paper
Weiße Kachel
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Graue Kachel
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Info-Kacheln 14/15 · Auf Graucolumns: three · background_color: sand
Erste
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zweite
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Dritte
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Info-Kacheln 15/15 · Auf Navycolumns: three · background_color: primary
Erste
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zweite
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Block-Intro — 5 Varianten · acf/info-cards
Das Intro (Subheadline, Überschrift, Text, Link) teilen sich elf Blöcke; hier an den Info-Kacheln gezeigt.
Nur diesen Block · Zur Übersicht
Block-Intro 1/5 · Linkscolumns: three
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Erste
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zweite
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Dritte
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Block-Intro 2/5 · Zentriertcolumns: three · intro: centered
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Erste
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zweite
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Dritte
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Block-Intro 3/5 · Rechtscolumns: three · intro: right
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Erste
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zweite
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Dritte
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Block-Intro 4/5 · Button rechts danebencolumns: three · link_right: 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Erste
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zweite
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Dritte
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Block-Intro 5/5 · Display-Überschriftcolumns: three · intro headline_tag: display
Erste
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Zweite
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Dritte
Ein, zwei Sätze, worum es bei dieser Kachel geht.
Siegel — 8 Varianten · acf/seals
Eins bis fünf Siegel pro Reihe, mit oder ohne Icon und Text, Abschluss darunter.
Nur diesen Block · Zur Übersicht
Siegel 1/8 · Fünf mit Abschluss
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Ein Satz, der zu Fragen einlädt.
Siegel 2/8 · Fünf mit CTA
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Siegel 3/8 · Vier mit CTA, nur Linktext
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Siegel 4/8 · Vier ohne Icons, Trennlinietop_rule: 1
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Siegel 5/8 · Drei, eines ohne Icon und Text
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Siegel 6/8 · Einesintro: centered
Eine kurze Zeile dazu
Siegel 7/8 · Auf Graubackground_color: sand
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Abschluss auf Grau.
Siegel 8/8 · Auf Navybackground_color: primary
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Eine kurze Zeile dazu
Abschluss auf Navy.
Prozessschritte — 5 Varianten · acf/process-steps
Anzahl der Schritte, Dauer und Förderung je Schritt optional.
Nur diesen Block · Zur Übersicht
Prozessschritte 1/5 · Vier Schritteintro: centered
Von der ersten Idee bis zum Start, strukturiert und transparent.
Erstgespräch, Klärung der Ziele und Prüfung der Möglichkeiten.
Workshop, technisches Konzept und Fahrplan mit Meilensteinen.
Entwicklung in kurzen Schritten mit regelmäßigen Abstimmungen.
Go-Live, Beobachtung der ersten Wochen und Feinschliff.
Prozessschritte 2/5 · Drei Schritte nur mit Dauer
Erstgespräch, Klärung der Ziele und Prüfung der Möglichkeiten.
Workshop, technisches Konzept und Fahrplan mit Meilensteinen.
Entwicklung in kurzen Schritten mit regelmäßigen Abstimmungen.
Prozessschritte 3/5 · Ein Schritt ohne Angaben
Ohne Dauer und Förderung erscheint keine Zeile darunter.
Prozessschritte 4/5 · Auf Graubackground_color: sand
Erstgespräch, Klärung der Ziele und Prüfung der Möglichkeiten.
Workshop, technisches Konzept und Fahrplan mit Meilensteinen.
Entwicklung in kurzen Schritten mit regelmäßigen Abstimmungen.
Go-Live, Beobachtung der ersten Wochen und Feinschliff.
Prozessschritte 5/5 · Auf Navybackground_color: primary
Erstgespräch, Klärung der Ziele und Prüfung der Möglichkeiten.
Workshop, technisches Konzept und Fahrplan mit Meilensteinen.
Entwicklung in kurzen Schritten mit regelmäßigen Abstimmungen.
Go-Live, Beobachtung der ersten Wochen und Feinschliff.
Projekt-Fakten — 3 Varianten · acf/project-facts
Ein Layout: die Fakten links, die Einleitung rechts; das Label ist nur für Screenreader. Bis zu fünf Spalten, leere fallen weg. Hintergrund keiner oder Navy.
Nur diesen Block · Zur Übersicht
Projekt-Fakten 1/3 · Einleitung und Label
Das Projekt
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Projekt-Fakten 2/3 · Vier Spalten, eine leere fällt weg
Das Projekt
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Projekt-Fakten 3/3 · Auf Navybackground_color: primary
Das Projekt
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Media — 15 Varianten · acf/media
Medienart × Layout × Breite. Bildstreifen und Bildpaar haben kein Layout und keine Breite; volle Breite hat keine Breite.
Nur diesen Block · Zur Übersicht
Media 1/15 · Bild, Standard, volllayout: default · kind_of_media: image · width: full · intro: centered
Media 2/15 · Bild, Standard, 70 %layout: default · kind_of_media: image · width: w70
Media 3/15 · Bild, Standard, 45 %layout: default · kind_of_media: image · width: w45
Media 4/15 · Bild, Boxed, volllayout: boxed · kind_of_media: image · width: full
Media 5/15 · Bild, Boxed, 70 %layout: boxed · kind_of_media: image · width: w70
Media 6/15 · Bild, volle Breitelayout: full-width · kind_of_media: image
Media 7/15 · Bildstreifenkind_of_media: strip
Media 8/15 · Bildpaar schmal–breitkind_of_media: pair · order: narrow-wide
Media 9/15 · Bildpaar breit–schmalkind_of_media: pair · order: wide-narrow
Media 10/15 · Eingebettetes Video mit Vorschaubildlayout: default · kind_of_media: embed_video · width: w70
Media 11/15 · Eingebettetes Video ohne Vorschaubildlayout: boxed · kind_of_media: embed_video · width: full
Media 12/15 · Hochgeladenes Videolayout: default · kind_of_media: self_hosted_video · width: full
Media 13/15 · iFramelayout: default · kind_of_media: iframe · width: w70
Media 14/15 · Auf Graulayout: default · kind_of_media: image · width: w70 · background_color: sand
Media 15/15 · Auf Navykind_of_media: pair · background_color: primary · order: narrow-wide
Post List — 7 Varianten · acf/post-list
Automatisch (mit Filter, Seiten oder Mehr laden) oder manuell; Beiträge oder Case Studies.
Nur diesen Block · Zur Übersicht
Post List 1/7 · Beiträge automatisch, Filter, Seitensource: auto · pagination_style: pagination · show_image: 1 · show_filter: 1
Ein Beispielartikel: wie ein Baukasten aus Blöcken Redaktion und Entwicklung entlastet.
Ein Beispielartikel über Kontraste, Tastaturbedienung und klare Strukturen.
Ein Beispielartikel: in welchen Schritten ein gefördertes Projekt abläuft.
Post List 2/7 · Beiträge automatisch, Mehr laden, ohne Bildsource: auto · pagination_style: load_more · show_image: 0 · show_filter: 0
Ein Beispielartikel: wie ein Baukasten aus Blöcken Redaktion und Entwicklung entlastet.
Ein Beispielartikel über Kontraste, Tastaturbedienung und klare Strukturen.
Ein Beispielartikel: in welchen Schritten ein gefördertes Projekt abläuft.
Post List 3/7 · Beiträge manuellcontent_type: post · source: manual · show_image: 1
Ein Beispielartikel: wie ein Baukasten aus Blöcken Redaktion und Entwicklung entlastet.
Ein Beispielartikel über Kontraste, Tastaturbedienung und klare Strukturen.
Ein Beispielartikel: in welchen Schritten ein gefördertes Projekt abläuft.
Post List 4/7 · Case Studies automatischcontent_type: case_study · source: auto · pagination_style: none · show_image: 1
Effiziente Zeiterfassung durch eigene Softwarelösung
Zusätzlicher Kanal ohne zusätzlichen Aufwand
Umstellung auf digitale Buchungsplattform
Modernisierung des Außenauftritts nach Neuübernahme
Eine Web-App für interne Abläufe.
Ein Onlineshop mit angebundenem Warenwirtschaftssystem.
Post List 5/7 · Case Studies manuellcontent_type: case_study · source: manual · show_image: 1
Post List 6/7 · Auf Grausource: auto · pagination_style: none · show_image: 1 · show_filter: 1 · background_color: sand
Ein Beispielartikel: wie ein Baukasten aus Blöcken Redaktion und Entwicklung entlastet.
Ein Beispielartikel über Kontraste, Tastaturbedienung und klare Strukturen.
Ein Beispielartikel: in welchen Schritten ein gefördertes Projekt abläuft.
Post List 7/7 · Auf Navysource: auto · pagination_style: pagination · show_image: 1 · show_filter: 1 · background_color: primary
Ein Beispielartikel: wie ein Baukasten aus Blöcken Redaktion und Entwicklung entlastet.
Ein Beispielartikel über Kontraste, Tastaturbedienung und klare Strukturen.
Ein Beispielartikel: in welchen Schritten ein gefördertes Projekt abläuft.
Testimonials — 6 Varianten · acf/testimonials
Die Anzahl entscheidet das Layout: eines allein, zwei nebeneinander, ab drei ein Raster. Entwürfe fallen weg.
Nur diesen Block · Zur Übersicht
Testimonials 1/6 · Eines
„Ein zweites Zitat ohne Foto. An seiner Stelle stehen die Initialen.“
Testimonials 2/6 · Zwei, der Entwurf dazwischen fehlt
„Ein Satz darüber, wie die Zusammenarbeit war: verlässlich, schnell und mit einem guten Blick für die Details.“
„Ein zweites Zitat ohne Foto. An seiner Stelle stehen die Initialen.“
Testimonials 3/6 · Raster mit Intro
„Ein Satz darüber, wie die Zusammenarbeit war: verlässlich, schnell und mit einem guten Blick für die Details.“
„Ein zweites Zitat ohne Foto. An seiner Stelle stehen die Initialen.“
„Ein drittes Zitat für das Raster mit drei Spalten.“
Testimonials 4/6 · Auf Graubackground_color: sand
„Ein Satz darüber, wie die Zusammenarbeit war: verlässlich, schnell und mit einem guten Blick für die Details.“
„Ein zweites Zitat ohne Foto. An seiner Stelle stehen die Initialen.“
Testimonials 5/6 · Auf Weißbackground_color: paper
„Ein Satz darüber, wie die Zusammenarbeit war: verlässlich, schnell und mit einem guten Blick für die Details.“
„Ein zweites Zitat ohne Foto. An seiner Stelle stehen die Initialen.“
Testimonials 6/6 · Auf Navybackground_color: primary
„Ein Satz darüber, wie die Zusammenarbeit war: verlässlich, schnell und mit einem guten Blick für die Details.“
„Ein zweites Zitat ohne Foto. An seiner Stelle stehen die Initialen.“
„Ein drittes Zitat für das Raster mit drei Spalten.“
Zitat — 4 Varianten · acf/quote
Mit oder ohne Bild.
Nur diesen Block · Zur Übersicht
Zitat 1/4 · Mit Bild
„Ein Zitat, das zeigt, wie es sich anfühlt, mit uns zu arbeiten — ehrlich, konkret und in eigenen Worten.“
Zitat 2/4 · Ohne Bild
„Kurz und klar: so soll ein Zitat auch ohne Bild wirken.“
Zitat 3/4 · Auf Graubackground_color: sand
„Ein Zitat, das zeigt, wie es sich anfühlt, mit uns zu arbeiten — ehrlich, konkret und in eigenen Worten.“
Zitat 4/4 · Auf Navybackground_color: primary
„Ein Zitat, das zeigt, wie es sich anfühlt, mit uns zu arbeiten — ehrlich, konkret und in eigenen Worten.“
Logo-Leiste — 4 Varianten · acf/logo-strip
Läuft endlos; ein Logo ohne Bild fällt weg.
Nur diesen Block · Zur Übersicht
Logo-Leiste 1/4 · Ohne Intro
Logo-Leiste 2/4 · Mit Introintro: centered
Logo-Leiste 3/4 · Auf Graubackground_color: sand
Logo-Leiste 4/4 · Auf Navybackground_color: primary
Förderrechner — 4 Varianten · acf/funding-calculator
Ohne eigene Phasen rechnet er mit den Standardwerten; Regler-Spanne und Startwert sind einstellbar.
Nur diesen Block · Zur Übersicht
Förderrechner 1/4 · Standardwerte
Berechnen Sie Ihren voraussichtlichen Eigenanteil
*Bei vollständiger Fördernutzung: Analyse (80 %) + Strategie (50 %) + Umsetzung (30 %)
Förderrechner 2/4 · Eigene Phasen und Spanne
Zwei Phasen, eine mit Deckel
*Bei vollständiger Fördernutzung: Konzept (80 %) + Umsetzung (30 %)
Förderrechner 3/4 · Auf Graubackground_color: sand
*Bei vollständiger Fördernutzung: Analyse (80 %) + Strategie (50 %) + Umsetzung (30 %)
Förderrechner 4/4 · Auf Navybackground_color: primary
*Bei vollständiger Fördernutzung: Analyse (80 %) + Strategie (50 %) + Umsetzung (30 %)
Formular — 4 Varianten · acf/form
Das erste aktive Gravity-Forms-Formular, mit Intro links oder zentriert.
Nur diesen Block · Zur Übersicht
Formular 1/4 · Intro links
Wir melden uns innerhalb eines Werktags.
Formular 2/4 · Intro zentriertintro: centered
Formular 3/4 · Auf Graubackground_color: sand
Formular 4/4 · Auf Navybackground_color: primary