So erstellen Sie mit Divi's Blog-Modul einen dynamischen Stellenangebotsbereich für Karrieren

In einem früheren Divi-Tutorial haben wir Ihnen gezeigt, wie Sie mit Divis Theme Builder und dem Advanced Custom Fields-Plugin eine vollständig dynamische Vorlage für offene Stellen erstellen. Im heutigen Tutorial zeigen wir Ihnen, wie Sie die offenen Stellen auf Ihrer Karriereseite dynamisch ausweisen können. Dieses Tutorial ist eine Fortsetzung des Posts mit der Vorlage für offene Stellen. Stellen Sie also sicher, dass Sie zuerst die Vorlage neu erstellen und dann zu diesem Tutorial zurückkehren.

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 das dynamische Stellenangebots-Layout für Karrieren KOSTENLOS herunter

Um das kostenlose Layout für dynamische Karriere-Stellenangebote in die Hände zu bekommen, müssen Sie es 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. Karriereseite hinzufügen

Neue Seite hinzufügen und zu Visual Builder wechseln

Erstellen Sie zunächst eine neue Seite, geben Sie Ihrer Seite einen Titel und wechseln Sie zu Visual Builder.

2. Beginnen Sie mit dem Aufbau einer Karriereseite im Frontend

Abschnitt 1 hinzufügen

Hintergrund mit Farbverlauf

Fügen Sie der Seite den ersten Abschnitt hinzu, öffnen Sie die Abschnittseinstellungen und verwenden Sie einen Hintergrund mit Farbverlauf.

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

Unterteiler

Verwenden Sie auch einen Unterteiler.

• Teilerstil: In Liste suchen
• Teilerhöhe: 8vw
• Teiler Horizontale Wiederholung: 3x
• Teileranordnung: Unterhalb des Abschnittsinhalts

Abstand

Vervollständigen Sie die Abschnittseinstellungen, indem Sie etwas Bodenpolsterung hinzufügen.

• Untere Polsterung: 200px

Neue Zeile hinzufügen

Spaltenstruktur

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

Textmodul zur Spalte hinzufügen

H1-Inhalt hinzufügen

Fügen Sie der Spalte der Zeile ein Textmodul mit einem H1-Inhalt Ihrer Wahl hinzu.

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

Fügen Sie direkt unter dem Textmodul ein Trennmodul hinzu. 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

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

• Teilergewicht: 8px
• Breite: 30%

Abschnitt 2 hinzufügen

Fügen Sie der Seite einen weiteren regulären Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

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

Textmodul zur Spalte hinzufügen

H2-Inhalt hinzufügen

Fügen Sie der Spalte der Zeile ein Textmodul hinzu und fügen Sie H2-Inhalt Ihrer Wahl ein.

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: 2.3rem

Trennmodul zur Spalte hinzufügen

Sichtweite

Das nächste Modul, das wir in dieser Spalte benötigen, 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: #ffa500

Größe

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie das Teilergewicht und die maximale Breite in den Größeneinstellungen ändern.

• Teilergewicht: 6px
• Maximale Breite: 80px

Blog-Modul zur Spalte hinzufügen

Inhalt

Um die verschiedenen offenen Stellen anzuzeigen, verwenden wir ein Blog-Modul, das wir an unsere Bedürfnisse anpassen. Stellen Sie sicher, dass die folgenden Inhaltseinstellungen gelten:

• Beitragstyp: Beiträge
• Kategorien einschließen: Marketing
• Auszug Länge: 150

Elemente

In den Elementeinstellungen sind die einzigen beiden Optionen, die wir aktivieren, die folgenden:

• Weiterlesen-Button anzeigen: Ja
• Auszug anzeigen: Ja

Layout

Wechseln Sie zur Registerkarte Design des Moduls und stellen Sie sicher, dass Sie ein Layout in voller Breite verwenden.

• Layout: Volle Breite

Einstellungen für Titeltext

Ändern Sie auch die Einstellungen für den Titeltext.

• Titelüberschriftsebene: H3
• Titelschriftart: Montserrat
• Titeltextgröße: 1.5rem

Textkörpereinstellungen

Ändern Sie dann die Textkörpereinstellungen.

• Körperschriftart: Raleway
• Körpertextgröße: 1.1rem
• Körperlinienhöhe: 2.1em

Lesen Sie mehr Texteinstellungen

Zusammen mit den Lesen Sie mehr Texteinstellungen.

• Mehr lesen Schriftart: Montserrat
• Mehr lesen Schriftstil: Großbuchstaben
• Lesen Sie mehr Textfarbe: #ffffff
• Lesen Sie mehr Textgröße: 1rem

Abstand

Fügen Sie den Abstandseinstellungen einige benutzerdefinierte Rand- und Abstandswerte hinzu.

• Linker Rand: 100 Pixel (Desktop), 50 Pixel (Tablet), 0 Pixel (Telefon)
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Mehr lesen Button-CSS

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie auf der Registerkarte "Erweitert" einige CSS für die Schaltfläche "Weiterlesen" hinzufügen.

max-width: 200px;
text-align: center;
padding: 20px;
margin-top: 40px;
border-radius: 100px;
background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;

Zeile so oft wie nötig klonen

Nachdem Sie die Zeile und alle ihre Module fertiggestellt haben, können Sie sie beliebig oft klonen, je nachdem, wie viele Abteilungen Ihr Unternehmen hat.

Inhalt des Textmoduls ändern

Stellen Sie sicher, dass Sie den H2-Inhalt jeder doppelten Zeile ändern.

Kategorien des Blog-Moduls ändern

Zusammen mit den Kategorien des Blog-Moduls.

Codemodul zur Spalte der letzten Zeile hinzufügen

CSS-Code einfügen, um offene Stellen individuell zu gestalten

Um das Design zu vervollständigen, fügen wir der letzten Zeile auf unserer Seite ein Code-Modul hinzu und fügen die folgenden Zeilen CSS-Code ein:

<style>
.et_pb_posts .et_pb_post {
box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);
padding: 50px;
border-radius: 20px;
background-color: #fff;
}
</style>

3. Seitendesign speichern und Ergebnis anzeigen

Sobald Sie das Seitendesign abgeschlossen haben, können Sie alle Änderungen speichern, den Visual Builder beenden und das Ergebnis 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

Dieses Tutorial ist eine Fortsetzung eines vorherigen Tutorials, in dem wir Ihnen gezeigt haben, wie Sie eine Vorlage für offene Stellen erstellen. In diesem Tutorial sind wir noch einen Schritt weiter gegangen und haben Ihnen gezeigt, wie Sie diese dynamischen offenen Stellen mit dem Blog-Modul von Divi auf Ihrer Karriereseite präsentieren können. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen 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.