So erstellen Sie mit Divi's Theme Builder & ACF eine dynamische Job-Opening-Post-Vorlage

Wenn Sie den Divi Theme Builder in Kombination mit dynamischen Inhalten verwenden, werden Sie schnell feststellen, dass Plugins durch selbst erstellte Vorlagen ersetzt werden. Im heutigen Tutorial zeigen wir Ihnen, wie Sie mit dem Divi Theme Builder und einer ACF-Feldgruppe eine vollständig dynamische Vorlage für Stellenausschreibungen erstellen. Diese dynamische Vorlage für Stellenangebote ist vollständig anpassbar und Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie die Vorlage für Stellenausschreibungen KOSTENLOS herunter

Um die kostenlose Vorlage für Stellenausschreibungen in die Hände zu bekommen, müssen Sie sie zunächst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

1. Beitragskategorien hinzufügen

Gehe zu Beitragskategorien

Der erste Teil der Erstellung der Vorlage für offene Stellen besteht darin, neue Stellenkategorien hinzuzufügen, die Sie für die von Ihnen hinzugefügten offenen Stellen verwenden. Gehen Sie zu den Beitragskategorien in Ihrem WordPress-Dashboard.

Offene Stellenkategorien hinzufügen

Fügen Sie für jede Abteilung eine übergeordnete Kategorie und eine separate Kategorie hinzu.

• Stellenangebote
  • Kommunikation
  • Entwurf
  • Entwicklung
  • Marketing
  • …

2. ACF installieren und Projektfelder einrichten

Installieren und aktivieren Sie ACF

Fahren Sie fort, indem Sie das kostenlose Advanced Custom Fields-Plugin installieren und aktivieren.

Feldgruppe einrichten

Richten Sie eine neue Feldgruppe ein, indem Sie zu Ihrem WordPress-Dashboard> Benutzerdefinierte Felder> Neu hinzufügen gehen .

Wir möchten, dass die Feldergruppe ausschließlich in den Beiträgen angezeigt wird, die Teil der übergeordneten Kategorie sind, die wir im vorherigen Teil dieses Tutorials hinzugefügt haben. Stellen Sie dazu sicher, dass die folgenden Regeln für die Feldgruppe gelten:

• Beitragstyp ist gleich Beitrag und
• Beitragskategorie ist gleich Stellenangebot

Felder hinzufügen

Nachdem die Feldgruppe erstellt wurde, ist es an der Zeit, die verschiedenen Felder hinzuzufügen. Um genau dieselbe Vorlage wie in der Vorschau dieses Tutorials neu zu erstellen, benötigen Sie die folgenden benutzerdefinierten Felder:

• Verantwortlichkeiten
  • Feldbezeichnung: Verantwortlichkeiten
  • Feldtyp: Textbereich
• Erforderliche Erfahrung
  • Feldbezeichnung: Erforderliche Erfahrung
  • Feldtyp: Wysiwyg-Editor
• Benötigte Fähigkeiten
  • Feldbezeichnung: Erforderliche Fähigkeiten
  • Feldtyp: Wysiwyg-Editor
• Bonusqualifikationen
  • Feldbezeichnung: Bonusqualifikationen
  • Feldtyp: Wysiwyg-Editor
• Standort
  • Feldbezeichnung: Standort
  • Feldtyp: Text
• Auftragstyp
  • Feldbezeichnung: Jobtyp
  • Feldtyp: Kontrollkästchen
  • Wahlmöglichkeiten: Vollzeit + Teilzeit + Freiberuflich (neue Zeile für jede Wahl)
• Weiterleitung anwenden
  • Feldbezeichnung: Weiterleitung anwenden
  • Feldtyp: URL

3. Neuen Blogbeitrag hinzufügen

Fügen Sie den Titel, die Kurzbeschreibung und die Kategorien der offenen Stelle hinzu

Nachdem Sie die benutzerdefinierte Feldergruppe und alle ihre Felder ausgefüllt haben, ist es an der Zeit, ein Beispiel für eine offene Stellenausschreibung zu erstellen. Geben Sie den Titel und die Stellenbeschreibung ein und wählen Sie die Kategorien aus.

Füllen Sie alle benutzerdefinierten Felder aus

Fahren Sie fort, indem Sie alle benutzerdefinierten Felder ausfüllen.

4. Neue Vorlage erstellen

Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Vorlage hinzu

Sobald Ihr Beispiel-Blog-Post fertig ist, ist es an der Zeit, die Vorlage für offene Stellen zu erstellen! Navigieren Sie dazu zum Divi Theme Builder und klicken Sie auf „Neue Vorlage hinzufügen“.

Verwenden Ein

Verwenden Sie die Vorlage für Beiträge in der Kategorie Stellenangebote.

5. Beginnen Sie mit dem Erstellen des Vorlagenkörpers

Beginnen Sie nun mit der Erstellung des Designs, indem Sie auf „Benutzerdefinierten Körper hinzufügen“ klicken und „Benutzerdefinierten Körper erstellen“ auswählen. Dadurch werden Sie zum Vorlageneditor weitergeleitet.

Abschnitt 1

Hintergrund mit Farbverlauf

Innerhalb des Divi-Vorlageneditors werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und fügen Sie einen Verlaufshintergrund hinzu.

• Farbe 1: #ff6600
• Farbe 2: #fbff30
• Verlaufsrichtung: 126deg

Unterteiler

Fügen Sie dem nächsten Abschnitt einen unteren Teiler hinzu.

• Teilerstil: In der Liste suchen
• Teilerhöhe: 8vw
• Teileranordnung: Unterhalb des Abschnittsinhalts

Abstand

Und schließen Sie auch einige untere Polsterung ein.

• Untere Polsterung: 400px

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Blurb-Modul zu Spalte 1 hinzufügen

Dynamischer Inhalt

Zeit, Module hinzuzufügen! Das erste Modul, das wir in Spalte 1 benötigen, ist ein Blurb-Modul. Wählen Sie den dynamischen Inhalt des Standorts für das Titelfeld aus und lassen Sie das Inhaltsfeld leer.

• Titel: Standort

Symbol auswählen

Fahren Sie fort, indem Sie ein Symbol auswählen.

Symboleinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Symboleinstellungen wie folgt:

• Symbolfarbe: #ffffff
• Bild-/Symbolplatzierung: Links
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 25px

Einstellungen für Titeltext

Ändern Sie auch die H3-Texteinstellungen.

• Titelüberschriftsebene: H3
• Titelschriftart: Lato
• Titeltextfarbe: #ffffff
• Titeltextgröße: 1.4rem

Animation

Entfernen Sie zuletzt die Symbolanimation in den Animationseinstellungen.

• Bild-/Symbolanimation: Keine Animation

Blurb-Modul klonen und Duplikat in Spalte 2 platzieren

Sobald Sie das Blurb-Modul in Spalte 1 ausgefüllt haben, können Sie es einmal klonen und das Duplikat in die zweite Spalte platzieren.

Dynamischen Inhalt und Symbol ändern

Stellen Sie sicher, dass Sie den dynamischen Inhalt des Titels zusammen mit dem Symbol ändern.

• Titel: Jobtyp

Schaltflächenmodul zu Spalte 3 hinzufügen

Kopie hinzufügen

Fügen Sie in der letzten Spalte ein Schaltflächenmodul hinzu. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Dynamischer Link

Wählen Sie als nächstes den Link zum dynamischen Anwenden der Weiterleitung aus.

• Schaltflächen-Link-URL: Weiterleitung anwenden
• Schaltflächen-Link-Ziel: In der neuen Registerkarte

Ausrichtung

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Ausrichtung über verschiedene Bildschirmgrößen hinweg.

• Tastenausrichtung: Rechts (Desktop), Links (Tablet & Telefon)

Tasteneinstellungen

Stylen Sie auch die Schaltfläche.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1rem
• Schaltflächentextfarbe: #ff6600
• Hintergrundfarbe der Schaltfläche: #ffffff
• Breite des Tastenrahmens: 0px

• Schaltflächenrandradius: 100px
• Button-Schriftart: Montserrat
• Schaltflächenschriftart: Großbuchstaben

Abstand

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie den Abstandseinstellungen einige benutzerdefinierte Abstandswerte hinzufügen.

• Obere Polsterung: 15px
• Untere Polsterung: 15px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die nächste Reihe! Wählen Sie die folgende Spaltenstruktur:

Textmodul zur Spalte hinzufügen

Dynamischer Inhalt

Fügen Sie der Spalte ein neues Textmodul hinzu und wählen Sie den dynamischen Inhalt des Posttitels aus.

• Dynamischer Inhalt: Titel des Beitrags/Archivs

• Vorher: <H1>
• Nachher: ​​</H1>

H1-Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die H1-Texteinstellungen entsprechend:

• Überschrift Schriftart: Montserrat
• Schriftstärke der Überschrift: Schwer
• Textfarbe der Überschrift: #ffffff
• Überschrift Textgröße: 8rem (Desktop), 4rem (Tablet), 2.5rem (Telefon)

Trennmodul zur Spalte hinzufügen

Sichtweite

Das nächste Modul, das wir brauchen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Ändern Sie als nächstes die Linienfarbe des Moduls.

• Linienfarbe: #ffffff

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 8px
• Breite: 30%
• Modulausrichtung: Links

Abschnitt 2 hinzufügen

Abstand

Auf zum nächsten Abschnitt! Entfernen Sie alle standardmäßigen oberen Polster.

• Obere Polsterung: 0px

Zeile 1 hinzufügen

Spaltenstruktur

Fügen Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Abstand

Öffnen Sie die Zeileneinstellungen und entfernen Sie die standardmäßige obere Auffüllung.

• Obere Polsterung: 0px

Modul für Post-Inhalte zur Spalte hinzufügen

Hintergrundfarbe

Fügen Sie der Zeile ein Post-Content-Modul hinzu und ändern Sie die Hintergrundfarbe in Weiß.

• Hintergrundfarbe: #ffffff

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Textschriftart: Raleway
• Textgröße: 1.1rem
• Textzeilenhöhe: 2.1em

Abstand

Spielen Sie als nächstes mit den Abstandswerten für verschiedene Bildschirmgrößen herum.

• Oberer Rand: -300px
• Obere Polsterung: 100px (Desktop), 50px (Tablet & Telefon)
• Untere Polsterung: 100px (Desktop), 50px (Tablet & Telefon)
• Linke Polsterung: 100px (Desktop), 50px (Tablet & Telefon)
• Rechte Polsterung: 100px (Desktop), 50px (Tablet & Telefon)

Grenze

Fügen Sie auch einen Randradius hinzu.

• Alle Ecken: 20px

Box Schatten

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie einen subtilen Kastenschatten hinzufügen.

• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0.09)

Zeile 2 hinzufügen

Spaltenstruktur

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

Textmodul Nr. 1 zur Spalte hinzufügen

H2-Inhalt hinzufügen

Fügen Sie der Spalte der Zeile ein Textmodul mit H2-Inhalt hinzu.

H2-Texteinstellungen

Ändern Sie die H2-Texteinstellungen des Moduls wie folgt:

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Schriftstärke: Schwer
• Überschrift 2 Textfarbe: #ffa500
• Überschrift 2 Textgröße: 1.5rem

Trennmodul zur Spalte hinzufügen

Sichtweite

Das nächste Modul, das wir brauchen, ist ein Divider-Modul. Stellen Sie sicher, dass das Modul 'Teiler anzeigen' aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Ändern Sie als nächstes die Linienfarbe des Moduls.

• Linienfarbe: #ffa500

Größe

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie mit den Größeneinstellungen herumspielen.

• Teilergewicht: 6px
• Maximale Breite: 80px

Textmodul #2 zur Spalte hinzufügen

Dynamischer Inhalt

Das nächste und letzte Modul, das wir in dieser Spalte benötigen, ist ein weiteres Textmodul. Wählen Sie den relevanten dynamischen Inhalt aus.

• Dynamischer Inhalt: Erforderliche Erfahrung

Stellen Sie sicher, dass Sie Roh-HTML aktivieren.

• Raw HTML aktivieren: Ja

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Raleway
• Textgröße: 1.1rem

Texteinstellungen für ungeordnete Liste

Ändern Sie auch die Zeilenhöhe der ungeordneten Liste.

• Zeilenhöhe der ungeordneten Liste: 2.3em

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 50px
• Untere Polsterung: 50px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Grenze

Fügen Sie auch einen Randradius hinzu.

• Alle Ecken: 20px

Box Schatten

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie einen subtilen Kastenschatten hinzufügen.

• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0.09)

Zeile 3 hinzufügen

Spaltenstruktur

Auf in die letzte Reihe! Verwenden Sie die folgende Spaltenstruktur:

Module in Spalte 2 zweimal klonen und Duplikate in Spalte 1 und 2 der neuen Zeile platzieren

Klonen Sie die Module, die Sie der vorherigen Zeile hinzugefügt haben, zweimal und platzieren Sie die Duplikate in der neuen Zeile.

Ändern Sie die Kopie von Textmodul Nr. 1

Stellen Sie sicher, dass Sie die H2-Kopie jedes doppelten Textmoduls ändern.

Ändern Sie den dynamischen Inhalt des Textmoduls #2

Zusammen mit den dynamischen Inhalten.

• Dynamischer Inhalt: Erforderliche Fähigkeiten

• Dynamischer Inhalt: Bonusqualifikationen

Stellen Sie erneut sicher, dass der Roh-HTML-Code für beide Textmodule mit dynamischem Inhalt aktiviert ist.

• Roh-HTML aktivieren: Ja

6. Theme Builder-Änderungen speichern und Ergebnis anzeigen

Sobald Sie den Vorlagentext ausgefüllt haben, können Sie alle Änderungen am Theme Builder speichern und das Ergebnis in Ihrem Beispiel für eine offene Stellenausschreibung anzeigen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit dem Divi Theme Builder und dem ACF-Plugin eine dynamische und vollständig anpassbare Vorlage für offene Stellen erstellen. Wir haben in unserer Beitragsvorlage nur dynamische Inhalte verwendet, sodass Sie mühelos zukünftige offene Stellen auf Ihrer Website hinzufügen können. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.