Dieses Rezept zeigt, wie man Flexible Content verwendet, um Content-Managern die Möglichkeit zu geben, benutzerdefinierte Landing Pages zu erstellen, indem sie vorgefertigte Abschnitte auswählen, anordnen und ausfüllen.
Schritt 1: Erstellen der Flexible Content Feldgruppe
- Gehe zu Field Forge > Neue Feldgruppe
- Titel es Landing Page Builder
- Füge ein Flexible Content Feld (PRO) mit der Bezeichnung Seitenabschnitte und dem Namen
page_sections hinzu
- Setze die Schaltflächenbezeichnung auf Abschnitt hinzufügen (dies passt den Schaltflächentext an, den die Redakteure sehen)
Schritt 2: Layouts definieren
Füge die folgenden Layouts zum Flexible Content Feld hinzu:
Layout 1: Hero Abschnitt
| Unterfeld | Typ | Einstellungen |
|---|
| Überschrift | Text | Erforderlich: Ja, Platzhalter: “Deine Hauptüberschrift hier” |
| Unterüberschrift | Textarea | Zeilen: 2 |
| Hintergrundbild | Bild | Erforderlich: Ja, Anweisungen: “Verwende mindestens 1920×1080” |
| Schaltflächentext | Text | Standard: “Loslegen” |
| Schaltflächen-URL | URL | Erforderlich: Ja |
| Schaltflächenstil | Schaltgruppierung | Auswahl: Primär, Sekundär, Umriss |
| Unterfeld | Typ | Einstellungen |
|---|
| Abschnittsüberschrift | Text | Platzhalter: “Warum uns wählen” |
| Abschnittsuntertitel | Textarea | Zeilen: 2 |
| Features | Wiederholer | Unterfelder: Icon (Bild), Titel (Text, Erforderlich), Beschreibung (Textarea) |
| Spalten | Schaltgruppierung | Auswahl: 2 Spalten, 3 Spalten, 4 Spalten |
| Unterfeld | Typ | Einstellungen |
|---|
| Abschnittsüberschrift | Text | Standard: “Was unsere Kunden sagen” |
| Testimonials | Wiederholer | Unterfelder: Zitat (Textarea, Erforderlich), Autorname (Text), Autorenfoto (Bild), Unternehmen (Text), Bewertung (Zahl, Min: 1, Max: 5) |
| Anzeige-Stil | Schaltgruppierung | Auswahl: Karussell, Raster, Gestapelt |
| Unterfeld | Typ | Einstellungen |
|---|
| Überschrift | Text | Erforderlich: Ja |
| Beschreibung | Textarea | Zeilen: 3 |
| Schaltflächentext | Text | Standard: “Jetzt starten” |
| Schaltflächen-URL | URL | Erforderlich: Ja |
| Hintergrundfarbe | Farbauswahl | Standard: #1a73e8 |
| Textfarbe | Farbauswahl | Standard: #ffffff |
| Unterfeld | Typ | Einstellungen |
|---|
| Abschnittsüberschrift | Text | Standard: “Häufig gestellte Fragen” |
| Fragen | Wiederholer | Unterfelder: Frage (Text, Erforderlich), Antwort (Textarea, Erforderlich) |
| Anzeige-Stil | Schaltgruppierung | Auswahl: Akkordeon, Zwei Spalten, Gestapelt |
| Unterfeld | Typ | Einstellungen |
|---|
| Abschnittsüberschrift | Text | Standard: “Wähle deinen Plan” |
| Pläne | Wiederholer | Unterfelder: Planname (Text, Erforderlich), Preis (Text), Abrechnungszeitraum (Auswahl: Monatlich/Jährlich), Features (Textarea), Schaltflächentext (Text), Schaltflächen-URL (URL), Hervorgehoben (Wahr/Falsch) |
| Umschaltanzeige | Wahr/Falsch | Bezeichnung: “Monatlichen/jährlichen Umschalter anzeigen” |
Schritt 3: Standortregeln festlegen
- Setze: Seitenvorlage ist gleich Landing Page (du benötigst eine Landing Page-Vorlage in deinem Theme)
- Alternativ, ziele auf eine spezifische Seite oder Beitragstyp
- Speichere die Feldgruppe
Schritt 4: Wie Content-Manager eine Landing Page erstellen
- Erstelle eine neue Seite und wähle die Vorlage “Landing Page”
- Scrolle zum Metabox “Landing Page Builder”
- Klicke auf Abschnitt hinzufügen und wähle Hero Abschnitt
- Gib die Überschrift, Unterüberschrift ein, lade ein Hintergrundbild hoch und setze den Schaltflächentext und den Link
- Klicke erneut auf Abschnitt hinzufügen, wähle Features Grid
- Füge eine Abschnittsüberschrift hinzu und erstelle Feature-Elemente mit Icons, Titeln und Beschreibungen
- Wähle die Anzahl der Spalten (3 ist am häufigsten)
- Füge weiterhin Abschnitte hinzu: Testimonials, Preistabelle, FAQ Abschnitt, Call to Action
- Ziehe Abschnitte, um sie neu anzuordnen — typischerweise: Hero oben, CTA unten, unterstützende Inhalte dazwischen
- Klicke auf Veröffentlichen oder Aktualisieren
Tipps für effektive Landing Pages
- Beginne mit einem Hero: Jede Landing Page sollte mit einer klaren Überschrift und einem starken Call-to-Action-Button beginnen
- Begrenze auf 4-6 Abschnitte: Zu viele Abschnitte erzeugen eine lange, unkonzentrierte Seite. Jeder Abschnitt sollte einen Zweck erfüllen
- Soziale Beweise früh: Platziere Testimonials oder einen Statistikabschnitt nahe der Spitze, um Vertrauen aufzubauen, bevor du zur Handlung aufforderst
- Eine primäre CTA: Die Seite sollte die Besucher zu einer einzigen primären Handlung führen. Verwende dieselbe Schaltflächen-URL in den Hero- und CTA-Abschnitten
- Schließe mit einer CTA ab: Schließe die Seite immer mit einem Call to Action Abschnitt ab, damit Besucher, die die gesamte Seite durchscrollen, einen klaren nächsten Schritt haben
- Teste auf Mobilgeräten: Bitte deinen Entwickler, zu überprüfen, ob das Layout auf Handys gut aussieht. Der Großteil des Traffics auf Landing Pages kommt von mobilen Geräten
—