So erstellen Sie eine Rezeptkartenvorlage mit dem Divi Theme Builder

Veröffentlicht: 2019-11-26

Foodblogger und Rezeptersteller wissen, wie wichtig es ist, ein einheitliches Aussehen der von ihnen veröffentlichten Rezepte zu haben. Eine gängige Lösung ist die Verwendung eines Rezeptkarten-Plugins, das jedoch mit Designbeschränkungen verbunden ist. Mit dem Divi Theme Builder können Sie jetzt Ihre eigene Rezeptkartenvorlage erstellen, die Sie auf Ihrer gesamten Website und Ihrem Blog verwenden können. Mit Hilfe des Plugins Advanced Custom Fields (ACF) ist das Entwerfen einer einzigartigen und wiederverwendbaren Rezeptkarte einfacher denn je.

In diesem Beitrag zeigen wir Ihnen, wie Sie eine Rezeptkartenvorlage mit dynamischem Inhalt erstellen. Durch die Verwendung der Divi Theme Builder-Einstellungen kann das Design auf die Blog-Posts angewendet werden, die Rezepte enthalten, indem Sie diese bestimmte Kategorie auswählen. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, Ihren eigenen Stil von Rezeptkarten mit Ihren eigenen benutzerdefinierten Feldern zu erstellen.

Schauen wir uns an, wie das Design auf verschiedenen Bildschirmgrößen aussieht.

Vorschau der Rezeptkartenvorlage

Schauen wir uns an, wie das Design auf verschiedenen Bildschirmgrößen aussieht.

Desktop

Tablette

Handy, Mobiltelefon

1. Laden Sie das Plugin für erweiterte benutzerdefinierte Felder herunter und installieren Sie es

Suchen und installieren

Suchen Sie das ACF-Plugin, indem Sie in der Suchleiste des Plugins nach „Advanced Custom Fields“ suchen, installieren und aktivieren Sie es.

Neue Feldgruppe hinzufügen

Klicken Sie auf die Registerkarte ACF und wählen Sie „Neu hinzufügen“. Benennen Sie die Gruppe 'Rezeptkarte'. Fügen Sie die benutzerdefinierten Felder nacheinander über die Schaltfläche "Feld hinzufügen" hinzu.

Benutzerdefinierte Felder hinzufügen

Klicken Sie für jedes benutzerdefinierte Feld auf die Schaltfläche "Feld hinzufügen". Jeder kann für einen anderen Inhaltstyp angepasst werden. Die folgende Liste gibt die Beschriftung und den Typ für jedes Feld an. Fügen Sie das Wort "Rezept" am Anfang jeder Feldbeschriftung hinzu, damit es beim Erstellen der Module leicht zu finden ist. Der Feldname wird automatisch ausgefüllt, sobald Sie das Label hinzugefügt haben.

Rezepttitel

Beginnen Sie mit dem Rezepttitel.

  • Feldbeschriftung: Rezepttitel
  • Feldtyp: Text
  • Erforderlich?: Ja
  • Platzhaltertext: Rezepttitel
  • Zeichenbegrenzung: 30

Rezeptautor

Erstellen Sie dann ein Feld für den Autor.

  • Feldbezeichnung: Rezeptautor
  • Feldtyp: Text
  • Erforderlich?: Ja
  • Platzhaltertext: Autor

Rezeptvorbereitungszeit

Folgen Sie dem mit der Vorbereitungszeit.

  • Feldbeschriftung: Rezeptvorbereitungszeit
  • Feldtyp: Zahl
  • Erforderlich?: Ja
  • Platzhaltertext: ##
  • Voraussetzen: Vorbereitungszeit:
  • Anhängen: mind.

Rezept Portionen

Dann die Portionen.

  • Feldbeschriftung: Rezeptportionen
  • Feldtyp: Zahl
  • Erforderlich?: Ja
  • Platzhaltertext: ##
  • Voranstellen: Portionen:

Rezept Geschmackstipp

Fügen Sie ein Flavour-Tipp-Feld hinzu.

  • Feldbeschriftung: Rezept Geschmackstipp
  • Feldtyp: Text
  • Erforderlich?: Ja
  • Prepend: Geschmackstipp:
  • Zeichenbegrenzung: 40

Rezeptbild

Fügen Sie nun das Bildfeld hinzu.

  • Feldbeschriftung: Rezeptbild
  • Feldtyp: Bild
  • Erforderlich?: Ja

Titel der Rezeptzutaten

Dann der Inhaltsstofftitel.

  • Feldbeschriftung: Titel der Rezeptzutaten
  • Feldtyp: Text
  • Anleitung: Schreiben Sie einfach das gleiche als Platzhaltertext.
  • Erforderlich?: Ja
  • Platzhaltertext: Zutaten

Rezept Zutatenliste

Folgen Sie dem mit der Zutatenliste.

  • Feldbeschriftung: Rezeptzutatenliste
  • Feldtyp: Textbereich
  • Anleitung: Fügen Sie nach jedem Element ein Leerzeichen hinzu
  • Erforderlich?: Ja
  • Reihen: 8
  • Neue Zeilen: Automatisch hinzufügen <br>

Titel der Rezeptvorbereitung

Vorletzter Titel der Vorbereitung.

  • Feldbeschriftung: Titel der Rezeptvorbereitung
  • Feldtyp: Text
  • Anleitung: Schreiben Sie einfach das gleiche als Platzhaltertext.
  • Erforderlich?: Ja
  • Platzhaltertext: Vorbereitung

Rezeptzubereitungsliste

Schließlich die Vorbereitungsliste.

  • Feldbeschriftung: Rezeptvorbereitungsliste
  • Feldtyp: Textbereich
  • Anleitung: Fügen Sie nach jedem Element ein Leerzeichen hinzu
  • Erforderlich?: Ja
  • Reihen: 10
  • Neue Zeilen: Automatisch hinzufügen <br>

Feldgruppe veröffentlichen

Veröffentlichen Sie die Feldgruppe. Ihr Feldgruppenfenster sollte wie im Screenshot unten aussehen.

So greifen Sie auf den Inhalt des ACF-Plugins für die Rezeptkartenvorlage in The Divi Builder zu

Die erweiterten benutzerdefinierten Felder können einem Divi-Modul hinzugefügt werden, indem Sie auf das Symbol für dynamische Inhalte klicken. Dieses Symbol befindet sich in der oberen rechten Ecke des Inhaltsfelds. So sieht es aus:

2. Erstellen Sie eine neue Rezeptkartenvorlage mit Divi Builder

Divi Theme Builder Schritte

1. Rezeptkategorie erstellen

Sie benötigen eine Kategorie namens 'Rezepte', damit Sie ihr die Vorlage zuweisen können. Fügen Sie es im Kategorie-Tab über das Dashboard hinzu.

2. Öffnen Sie den Divi Theme Builder und fügen Sie eine neue Vorlage hinzu

Öffnen Sie den Divi-Theme-Builder und fügen Sie eine neue Vorlage hinzu.

3. Globalen Körper hinzufügen

Klicken Sie auf 'Global Body hinzufügen' und weisen Sie die Vorlage Beiträgen in bestimmten Kategorien zu > Rezepte. Klicken Sie dann auf die Schaltfläche „Vorlage erstellen“.

4. Erstellen Sie einen benutzerdefinierten Körper

Klicken Sie auf „Globalen Körper hinzufügen“ und wählen Sie „Benutzerdefinierten Körper hinzufügen“.

3. Erstellen Sie das Rezeptkartendesign mit dynamischem Inhalt neu

Neuen Abschnitt hinzufügen

Jetzt können wir mit der Gestaltung der Rezeptkartenvorlage beginnen. Wenn der Divi-Builder geöffnet wird, wählen Sie „von Grund auf neu erstellen“. Beginnen Sie mit dem Hinzufügen eines neuen Abschnitts.

Hintergrund

Fügen Sie in den Abschnittseinstellungen eine Hintergrundfarbe hinzu.

  • Hintergrundfarbe: Hellgrau #ededed

Größe

Passen Sie auch die Größe auf der Registerkarte Design an.

  • Breite: 100%
  • Maximale Breite: 100%

1. Reihe hinzufügen

Spaltenstruktur

Fügen Sie eine neue Zeile mit einer Spalte hinzu.

Größe

Passen Sie vor dem Hinzufügen von Modulen die Größeneinstellungen der Zeile an.

  • Maximale Breite: 90%

Spalteneinstellungen

Hintergrund

Passen Sie die Spalteneinstellungen innerhalb der Zeile an. Fügen Sie zunächst eine Hintergrundfarbe hinzu.

  • Hintergrundfarbe: Weiß #ffffff

Grenze

Ändern Sie dann die Rahmenstile.

  • Abgerundete Ecken: 1vw alle vier Ecken
  • Rahmenstile: Alle vier Seiten
  • Breite: 5px
  • Farbe: Sehr Dunkelgrau #333333

Textmodul mit dynamischem Inhalt hinzufügen

Inhalt

Nachdem Sie die Zeilen- und Spalteneinstellungen abgeschlossen haben, können Sie Module hinzufügen. Beginnen Sie mit dem Hinzufügen eines Textbausteins. Wählen Sie im Inhaltsfenster den dynamischen Inhalt für den Rezepttitel aus. Klicken Sie nach der Auswahl auf das Zahnradsymbol und geben Sie H1-Schnipsel ein.

  • Hauptteil: Rezepttitel
  • Körpereinstellungen:
    • Vorher: <H1>
    • Nachher:</H1>

Überschriftstext

Dann formatieren Sie die H1-Texteinstellungen entsprechend:

  • Überschriftsebene: H1
  • Schriftart: Orienta
  • Gewicht: Fett
  • Ausrichtung: Mitte
  • Farbe: Sehr Dunkelgrau #3d3d3d
  • Größe:
    • Desktop: 3vw
    • Tablet: 4vw
    • Telefon: 5vw
  • Buchstabenabstand: 3px
  • Linienhöhe: 1.5em

Abstand

Ändern Sie auch die Abstandswerte.

  • Unterer Rand:
    • Desktop: -1vw
    • Tablet: -2vw
    • Telefon: -5vw
  • Obere Polsterung:
    • Desktop + Tablet: 1vw
    • Telefon: 2vw
  • Untere Polsterung: 0vw
  • Polsterung links + rechts:
    • Desktop + Tablet: 3vw
    • Telefon: 4vw

2. Textmodul mit dynamischem Inhalt hinzufügen

Inhalt

Fügen Sie einen zweiten Textbaustein hinzu und wählen Sie den dynamischen Inhalt für den Rezeptautor aus.

  • Text: Rezeptautor

Text

Dann formatieren Sie den Text.

  • Schriftart: Encode Sans
  • Farbe: Sehr Dunkelgrau #3d3d3d
  • Größe:
    • Desktop: 1.4vw
    • Tablet: 2.4vw
    • Telefon: 3vw
  • Ausrichtung: Mitte

Abstand

Passen Sie anschließend den Abstand an.

  • Oberer Rand: 1.5vw
  • Obere Polsterung:
    • Desktop + Tablet: 0vw
    • Telefon: 2vw
  • Untere Polsterung: 2vw
  • Polsterung links + rechts:
    • Desktop: 2vw
    • Tablet + Telefon: 3vw

2. Reihe hinzufügen

Spaltenstruktur

Fügen Sie nun eine zweite Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen und passen Sie die Größeneinstellungen entsprechend an:

  • Dachrinnenbreite: 2
  • Breite: 90%
  • Maximale Breite: 100%
  • Reihenausrichtung: Links

Abstand

Dann der Abstand.

  • Polsterung oben + unten: 0.5vw
  • Linke Polsterung: 10vw

Sichtweite

Passen Sie schließlich auf der Registerkarte "Erweitert" die Sichtbarkeit an.

  • Horizontaler Überlauf: Sichtbar
  • Vertikaler Überlauf: Sichtbar

Spalte 1 + 2 + 3 Einstellungen

Grenze

Stylen Sie alle drei Spalten auf die gleiche Weise. Gehen Sie zuerst zu den Rahmeneinstellungen und nehmen Sie einige Änderungen vor. Wiederholen Sie dies für alle drei Spalten.

  • Abgerundete Ecken: 1vw alle vier Ecken
  • Rahmenstile: Alle vier Seiten
  • Breite: 5px
  • Farbe: Sehr Dunkelgrau #333333

Verwandeln

Um dem Design einen Schwebeeffekt zu verleihen, passen Sie die Transformationseinstellungen wie folgt an. Wiederholen Sie dies für alle drei Spalten.

  • Skalierung beim Hover transformieren: 105 % x 105 %

Textmodul zu Spalte 1 hinzufügen

Inhalt

Fügen Sie einen Textbaustein hinzu und lassen Sie das Inhaltsfenster vorerst leer. Das fügen wir später hinzu.

Hintergrund

Fügen Sie dem Modul eine Hintergrundfarbe hinzu.

  • Hintergrundfarbe: Lindgrün #b1e88d

Überschriftstext

Stylen Sie als nächstes die H5-Texteinstellungen.

  • Überschriftsebene: H5
  • H5 Schriftart: Orienta
  • H5 Farbe: Sehr Dunkelgrau #3d3d3d
  • H5-Größe:
    • Desktop: 1vw
    • Tablet: 2.3vw
    • Telefon: 3.3vw
  • Ausrichtung: Mitte

Abstand

Passen Sie abschließend die Abstandswerte wie folgt an.

  • Obere Polsterung:
    • Desktop: 1vw
    • Tablet: 1.5vw
    • Telefon: 3.5vw
  • Untere Polsterung:
    • Desktop: 0.5vw
    • Tablet + Telefon: 1.5vw
  • Polsterung links + rechts:
    • Desktop: 2vw
    • Tablet + Telefon: 3vw

Textbaustein aus Spalte 1 zweimal duplizieren und in Spalte 2 und 3 verschieben

Duplizieren Sie in der Drahtmodellansicht das Textmodul in der ersten Spalte. Verschieben Sie dann die Duplikate in Spalte 2 und 3.

Dynamischen Inhalt zum Textmodul in Spalte 1 hinzufügen

Fügen Sie den dynamischen Inhalt für die Vorbereitungszeit hinzu und passen Sie die Einstellungen an.

  • Körper: Rezeptvorbereitungszeit
  • Körpereinstellungen:
    • Vorher: <H5>Vorbereitungszeit:
    • Nach: Min.</H5>

Dynamischen Inhalt zum Textmodul in Spalte 2 hinzufügen

Fügen Sie den dynamischen Inhalt für Rezeptportionen hinzu und passen Sie die Einstellungen an.

  • Körper: Rezept Portionen
  • Körpereinstellungen:
    • Vorher: <H5>Portionen:
    • Nachher: ​​</H5>

Dynamischen Inhalt zum Textmodul in Spalte 3 hinzufügen

Fügen Sie den dynamischen Inhalt für den Flavour-Tipp hinzu und passen Sie die Einstellungen an.

  • Körper: Rezept Geschmackstipp
  • Körpereinstellungen:
    • Vorher: <H5>Geschmackstipp:
    • Nachher: ​​</H5>

3. Reihe hinzufügen

Spaltenstruktur

Fügen Sie nun die dritte Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Passen Sie die Größe der Zeile an, bevor Sie Module hinzufügen.

  • Benutzerdefinierte Dachrinnenbreite: 2
  • Breite: 80%
  • Maximale Breite: 100%

Abstand

Löschen Sie außerdem den standardmäßigen oberen Rand.

  • Oberer Rand: 0vw

Sichtweite

Passen Sie abschließend die Sichtbarkeit auf der Registerkarte "Erweitert" an.

  • Horizontaler Überlauf: Sichtbar
  • Vertikaler Überlauf: Sichtbar

Spalte 1 + 2 + 3 Einstellungen

Grenze

Gestalten Sie alle drei Spalten gleich, beginnend mit den Rahmeneinstellungen. Wiederholen Sie dies für die Spalten 2 und 3.

  • Abgerundete Ecken: 1vw alle vier Ecken
  • Rahmenstile: Alle vier Seiten
  • Breite: 5px
  • Farbe: Sehr Dunkelgrau #333333

Verwandeln

Fahren Sie fort, indem Sie auf der Registerkarte "Design" eine Hover-Transformation hinzufügen. Wiederholen Sie dies für die Spalten 2 und 3.

  • Skalierung beim Hover transformieren: 105 % x 105 %

Bildmodul mit dynamischem Inhalt zu Spalte 1 hinzufügen

Inhalt

Fügen Sie ein Bildmodul mit dynamischem Inhalt für das Rezeptbild hinzu.

  • Bild: Rezeptbild

Textmodul mit dynamischem Inhalt zu Spalte 2 hinzufügen

Inhalt

Fügen Sie nun ein Textmodul mit dynamischem Inhalt für den Zutatentitel hinzu. Klicken Sie auf das Zahnradsymbol und geben Sie H3-Schnipsel wie folgt ein.

  • Textkörper: Titel der Rezeptzutaten
  • Körpereinstellungen:
    • Vorher: <H3>
    • Nachher: ​​</H3>

Überschriftstext

Dann formatieren Sie den Überschriftstext.

  • Überschriftsebene: H3
  • H3Font: Orienta
  • H3-Farbe: Sehr Dunkelgrau #3d3d3d
  • H3-Größe:
    • Desktop: 1.6vw
    • Tablet: 2vw
    • Telefon: 5.5vw
  • Ausrichtung: Mitte

Abstand

Vervollständigen Sie das Modul, indem Sie den Abstand anpassen.

  • Unterer Rand: 0vw
  • Obere Polsterung:
    • Desktop: 2vw
    • Tablet: 3vw
    • Telefon: 4vw
  • Polsterung links + rechts:
    • Desktop: 2vw
    • Tablet + Telefon: 3vw

Trennmodul zu Spalte 2 hinzufügen

Leitung

Fügen Sie ein Trennmodul hinzu und gestalten Sie es wie folgt.

  • Farbe: Lindgrün #b1e88d

Größe

Passen Sie dann die Größenwerte an.

  • Gewicht: 5px
  • Breite: 40%
  • Ausrichtung: Links

Abstand

Passen Sie zuletzt den Abstand an.

  • Oberer Rand: 0vw

Textmodul mit dynamischem Inhalt zu Spalte 2 hinzufügen

Inhalt

Fügen Sie ein Textmodul mit dynamischem Inhalt für die Zutatenliste hinzu. Klicken Sie auf das Zahnradsymbol auf der Registerkarte für dynamische Inhalte und aktivieren Sie RAW-HTML.

  • Textkörper: Rezeptzutatenliste
  • Körpereinstellungen: Raw HTML aktivieren

Text

Dann formatieren Sie den Text wie folgt.

  • Schriftart: Encode Sans
  • Farbe: Sehr Dunkelgrau #333333
  • Größe:
    • Desktop: 0.9vw
    • Tablet: 2vw
    • Telefon: 3vw

Abstand

Passen Sie außerdem den Abstand an.

  • Oberer Rand:
    • Desktop: -1vw
    • Tablet: -3vw
    • Telefon: -5vw
  • Obere Polsterung:
    • Desktop + Tablet: 0vw
  • Untere Polsterung:
    • Desktop: 3vw
    • Tablet + Telefon: 4vw
  • Polsterung links + rechts:
    • Desktop: 3vw
    • Tablet: 4vw
    • Telefon: 5vw

Duplizieren Sie alle Module in Spalte 2 und verschieben Sie sie in Spalte 3

Duplizieren Sie in der Drahtmodellansicht alle Module in Spalte zwei. Verschieben Sie die duplizierten Module in der gleichen Reihenfolge in Spalte drei.

Dynamischen Inhalt im 1. Textmodul in Spalte 3 hinzufügen

Fügen Sie den dynamischen Inhalt für den Vorbereitungstitel hinzu.

  • Hauptteil: Titel der Rezeptvorbereitung

Dynamischen Inhalt im 2. Textmodul in Spalte 3 hinzufügen

Fügen Sie außerdem dem letzten Textbaustein der Spalte den dynamischen Inhalt für die Vorbereitungsliste hinzu.

  • Hauptteil: Rezeptvorbereitungsliste

4. Reihe hinzufügen

Spaltenstruktur

Um die Vorlage zu vervollständigen, benötigen wir ein Post-Content-Modul. Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Passen Sie die Größe der Zeile an, bevor Sie ein Modul hinzufügen.

  • Benutzerdefinierte Rinnenbreite: 2
  • Breite: 100%
  • Maximale Breite: 80%

Abstand

Ändern Sie als nächstes die Abstandseinstellungen.
  • Links + Rechts Polsterung: 0vw

Spalte 1 Einstellungen

Hintergrund

Gestalten Sie die Spalte so, dass sie der obigen Rezeptkarte entspricht. Fügen Sie zunächst einen Hintergrund hinzu.

  • Hintergrundfarbe: Weiß #ffffff

Abstand

Passen Sie außerdem den Abstand an.

  • Linke Polsterung: 0vw

Grenze

Ändern Sie zu guter Letzt die Rahmeneinstellungen.

  • Abgerundete Ecken: 1vw alle vier Ecken
  • Rahmenstile: alle vier Seiten
  • Breite: 5px
  • Farbe: Sehr Dunkelgrau #333333

Lassen Sie Spalte 2 leer.

Fügen Sie das Post-Content-Modul zu Spalte 1 hinzu

Text

Fügen Sie der ersten Spalte ein Post-Inhaltsmodul hinzu und gestalten Sie den Text so, dass er der Rezeptkartenvorlage entspricht.

  • Schriftart: Encode Sans
  • Farbe: Sehr Dunkelgrau #333333
  • Größe:
    • Desktop: 0.9vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Linienhöhe: 2em

Überschrift 1 Text

  • Schriftart: Orienta
  • Farbe: Sehr Dunkelgrau #333333
  • Größe:
    • Desktop: 2vw
    • Tablet: 5vw
    • Telefon: 6vw

Überschrift 2 Text

  • Schriftart: Orienta
  • Farbe: Sehr Dunkelgrau #333333
  • Größe:
    • Desktop: 1.8vw
    • Tablet: 4.5vw
    • Telefon: 5.5vw

Überschrift 3 Text

  • Schriftart: Orienta
  • Farbe: Sehr Dunkelgrau #333333
  • Größe:
    • Desktop: 1.6vw
    • Tablet: 4.5vw
    • Telefon: 5vw

Abstand

Passen Sie die Abstandswerte an, um dem Stil der Rezeptkarte zu entsprechen.

  • Polsterung oben + unten: 2vw
  • Polsterung links + rechts:
    • Desktop: 4vw
    • Tablet + Telefon: 6vw

Wenn Sie die Farbe der Blockquote-Zeile oder Linkfarbe ändern möchten, können Sie dies im Theme-Customizer unter Akzentfarbe tun.

4. Bearbeiten / Erstellen Sie einen Beitrag mit den ACF-Plugin-Einstellungen und der Rezeptkartenvorlage

Benutzerdefinierte Felder eingeben

Öffne oder füge einen Beitrag hinzu. Unterhalb des Inhaltsbereichs finden Sie alle benutzerdefinierten Felder für die Rezeptkartenvorlage. Um dieses Avocado-Toast-Design nachzubilden, füllen Sie die Felder wie folgt aus.

Rezepttitel:

  • Supergrüner veganer Avocado-Toast

Rezeptautor:

  • Magdalena Swifter – www.veganchef.com

Rezeptvorbereitungszeit:

  • fünfzehn

Rezept Portionen:

  • 3

Rezept Geschmackstipp:

  • Verwenden Sie Meersalzflocken und natives Olivenöl extra

Rezeptbild:

  • Avocado-Toast-Bild

Titel der Rezeptzutaten:

  • Zutaten

Zutatenliste für das Rezept:

  • 3 Scheiben Vollkornbrot
  • 1 reife Avocado
  • 100g. Gekochte Saubohnen
  • 10g. Grüne Sprossen
  • 1 gehackte Frühlingszwiebel
  • 30g. Zerbröckelter Feta-Käse
  • 1 Zitrone halbiert
  • Spritzer Olivenöl
  • Mit Meersalz bestreuen

Titel der Rezeptzubereitung:

  • Vorbereitung

Liste der Rezeptzubereitungen:

  • 1. Toasten Sie die Brotscheiben nach Belieben.
  • 2. Avocado öffnen, Fruchtfleisch entfernen, mit einer Gabel zerdrücken.
  • 3. Zitronensaft über die Avocado pressen, mit Salz würzen.
  • 4. Verteile den Avocadobrei auf dem Toast.
  • 5. Bestreuen Sie die dicken Bohnen, Sprossen und die gehackte Frühlingszwiebel.
  • 6. Mit Salz würzen.
  • 7. Fügen Sie zerbröckelten Feta-Käse hinzu.
  • 8. Mit Olivenöl abschließen.

Gib dem Beitrag einen Titel

Titel

Vergessen Sie nicht, Ihrem Beitrag einen Titel hinzuzufügen.

  • Avocado-Toast-Rezept

Inhalt hinzufügen, Kategorie auswählen und ausgewähltes Bild hinzufügen

Schreiben oder fügen Sie den Inhalt des Blogbeitrags in den regulären Editor ein. Wählen Sie die Kategorie Rezepte aus und fügen Sie ein vorgestelltes Bild hinzu.

Vorschau der Rezeptkartenvorlage

Schauen wir uns noch einmal an, wie der fertige Beitrag mit der Rezeptkartenvorlage auf verschiedenen Bildschirmen aussieht.

Desktop

Tablette

Handy, Mobiltelefon

Es ist ein Wrap!

Sehen wir uns kurz die Schritte an, die wir unternommen haben, um dieses Rezeptkarten-Vorlagendesign zu erreichen.

  1. Installieren Sie das ACF-Plugin.
  2. Richten Sie eine Rezeptkarten-Feldgruppe ein.
  3. Benutzerdefinierte Felder hinzufügen.
  4. Erstellen Sie eine neue Vorlage und weisen Sie sie Blogposts unter der Kategorie „Rezepte“ zu.
  5. Verwenden Sie dynamische Inhalte aus ACF-Feldern in den Modulen.
  6. Erstellen oder bearbeiten Sie einen Blogbeitrag, indem Sie die Felder ausfüllen.
  7. Fügen Sie Blog-Post-Inhalte hinzu.

Da dieses Design als Vorlage mit dynamischem Inhalt erstellt wurde, bleibt es in allen Rezept-Blog-Posts konsistent, die die benutzerdefinierten Felder des ACF-Plugins verwenden. Wir hoffen, dass dieses Rezeptkarten-Vorlagendesign zu allen möglichen neuen und innovativen Rezeptvorlagen für Ihre Lebensmittelblogs inspiriert. Teilen Sie uns Ihre Gedanken in den Kommentaren mit.