SchokoladenkuchenLayout Komponenten
Rezeptkarten in sechs Darstellungsweisen, Blog-Bausteine und Seitenlayouts für Foodblogs.
Rezeptkarten
Eine Rezeptkarte, sechs Darstellungsweisen. Alle kommen aus dem Makro recipe_preview(r, variant) und zeigen Kategorie, Zubereitungszeit, Schwierigkeit und Bewertung mit Icons. Die Raster passen sich der Breite an: auf dem Handy werden hochkant gestellte Karten zweispaltig, Zeilenkarten einspaltig, das Karussell wischbar.
Vollbild hochkant
Bild im Format 2:3, Text auf einem Verlauf im Bild. Wirkt wie ein Pin oder eine Story und nutzt auf dem Handy die Höhe statt der Breite.
variant="tall" · .rp-grid.rp-grid--tallSchokoladenkuchen
TortenSacher Torte
KäsekuchenSchoko-Cheesecake
DessertsSchokoladen-Lavakuchen
Karussell
Hochkant-Karten in einer wischbaren Reihe mit Einrasten. Desktop zeigt vier Karten, Tablet gut zwei, Handy eine mit Anschnitt der nächsten, damit klar ist, dass es weitergeht.
variant="tall" · .rp-scrollerSchokoladenkuchenSaftiger Schokoladenkuchen
TortenSacher Torte
KäsekuchenSchoko-Cheesecake
DessertsSchokoladen-Lavakuchen
TortenSchoko-Himbeertorte
TortenSchoko-Mousse-Torte
Vollbild quer
Bild im Format 4:3 mit Text im Bild. Für Startseite, Saisonrezepte und hervorgehobene Kategorien.
variant="overlay" · .rp-gridDessertsSchokoladen-Lavakuchen
TortenSchoko-Himbeertorte
TortenSchoko-Mousse-Torte
Standard
Bild oben, Text darunter. Die ruhigste Variante für Kategorie- und Archivseiten. Mit "highlight" bekommt eine Karte einen Rahmen in der Primärfarbe, zum Beispiel für das Rezept der Woche.
SchokoladenkuchenSaftiger Schokoladenkuchen
TortenSacher Torte
KäsekuchenSchoko-Cheesecake
Kompakt
Flacheres 16:9-Bild und kleinerer Titel, damit mehr Rezepte auf eine Bildschirmhöhe passen. Für "Ähnliche Rezepte" unter einem Rezept. Mit .rp-grid--dense bleibt das Raster auf dem Handy zweispaltig.
KäsekuchenSchoko-Cheesecake
DessertsSchokoladen-Lavakuchen
TortenSchoko-Himbeertorte
TortenSchoko-Mousse-Torte
Zeile
Quadratisches Bild links, Text rechts. Für Suchergebnisse, Merklisten und Seitenleisten. Auf dem Handy untereinander, eine Karte pro Zeile.
variant="row" · .rp-grid.rp-grid--rowsSchokoladenkuchenSaftiger Schokoladenkuchen
TortenSacher Torte
KäsekuchenSchoko-Cheesecake
DessertsSchokoladen-Lavakuchen
Minimal
Nur quadratisches Bild und Titel. Für Rezeptsammlungen, Saisonkalender und Mega-Menüs. Auf dem Handy dreispaltig.
variant="minimal" · .rp-grid.rp-grid--minimalSchokoladenkuchenSaftiger Schokoladenkuchen
TortenSacher Torte
KäsekuchenSchoko-Cheesecake
DessertsSchokoladen-Lavakuchen
TortenSchoko-Himbeertorte
TortenSchoko-Mousse-Torte
Recipe Cards (klassisch)
Die bisherige Rezeptkarte des Themes im Grid: 4:3-Bild, Zeit, Schwierigkeit und Auszug.
.recipe-grid + .recipe-cardPost Cards
Blogpost-Karten im responsive Grid mit Bild, Kategorie, Titel und Auszug.
.post-grid + .post-cardBild
10 Tipps für bessere Food-Fotos
Licht, Komposition und Styling: So setzt du deine Gerichte perfekt in Szene.
Bild
Saftiger Zitronenkuchen mit Guss
Ein Klassiker, der immer gelingt. Mit extra viel Zitrone und cremigem Guss.
Bild
Blog-Performance optimieren
Core Web Vitals verbessern und Ladezeiten reduzieren — ein praktischer Guide.
FAQ und Tipp-Box
Häufige Fragen unter einem Rezept auf nativen <details>-Elementen, aufklappbar ohne JavaScript. Die Tipp-Box hebt einen Absatz auf Salbei-Hintergrund hervor, etwa einen Back-Tipp.
Wie bleibt der Schokoladenkuchen saftig?
Nimm ihn aus dem Ofen, sobald an einem Holzstäbchen noch ein paar feuchte Krümel hängen. Er zieht beim Abkühlen nach.
Kann ich den Kuchen einfrieren?
Ja, ohne Glasur. In Stücken eingefroren hält er etwa drei Monate.
Geht das Rezept auch ohne Ei?
Ersetze jedes Ei durch 60 g Apfelmus. Der Kuchen wird etwas dichter, bleibt aber saftig.
Unser Tipp
Gib einen Teelöffel Espressopulver in den Teig. Man schmeckt keinen Kaffee, aber die Schokolade wirkt deutlich intensiver.
Page Header
Standard-Seitenüberschrift für Archiv- und Kategorieseiten.
.page-headerKategorie: Fotografie
Alle Beiträge rund um Food-Fotografie, Styling und Bildbearbeitung.
Author Box
Autoreninfo mit Avatar, Name und Link — erscheint unter Blogposts.
.author-boxSharing Bar
Social-Sharing-Buttons unter Blogposts und Rezepten.
.sharing-barHero Section
Die Hero Section mit Gradient-Blob-Hintergrund, Überschrift und CTA-Buttons.
.heroDein Foodblog, professionell betreut
Wir helfen Foodbloggern, ihren Blog zu einem erfolgreichen Business auszubauen.
CTA Block
Der Call-to-Action-Bereich mit Gradient-Hintergrund und zentriertem Inhalt.
.home-ctaBereit, deinen Blog auf das nächste Level zu bringen?
Lass uns gemeinsam an deinem Foodblog arbeiten.
Kostenloses ErstgesprächService Grid
Drei-Spalten-Grid für Services oder Features mit Icon, Titel und Beschreibung.
.home-services-gridBlog-Betreuung
Wir kümmern uns um Technik, Design und Performance, damit du dich aufs Bloggen konzentrieren kannst.
Content-Strategie
Gemeinsam entwickeln wir eine Content-Strategie, die zu deiner Nische und deinen Zielen passt.
SEO & Performance
Optimierung deiner Ladezeiten, Struktur und Sichtbarkeit in Suchmaschinen.
About / Zwei-Spalten-Layout
Bild-Text-Kombination mit leichter Drehung des Bildes.
.home-about-grid Bild-Platzhalter
Die Gründerin hinter Foodblogliebe
Foodblogliebe wurde aus der Leidenschaft für gutes Essen und schöne Blogs geboren. Wir glauben daran, dass jeder Foodblogger das Potenzial hat, eine starke Marke aufzubauen.
Mit individueller Betreuung und bewährten Strategien helfen wir dir, deinen Blog professionell zu gestalten und nachhaltig zu wachsen.
Mehr über unsFooter
Der Footer wird automatisch auf jeder Seite eingebunden (siehe unten). Enthält Copyright, Impressum, Datenschutz und Design System Link.
.site-footer