Springe zum Hauptinhalt

So erstellen Sie einen dynamischen Joblistenabschnitt mit dem Divi Blog-Modul

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Im heutigen Tutorial zeigen wir Ihnen, wie Sie offene Stellen auf Ihrer Karriereseite dynamisch anzeigen können. Lasst uns beginnen.

Ergebnisübersicht

Bevor wir uns mit dem Tutorial befassen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

1. Erstellen Sie eine Karriereseite

Fügen Sie eine neue Seite hinzu und wechseln Sie zu Visual Builder

Beginnen Sie mit dem Erstellen einer neuen Seite, geben Sie Ihrer Seite einen Titel und wechseln Sie zu Visual Builder.

Erstellen Sie eine Divi-Karriereseite

2. Beginnen Sie mit der Erstellung der Karriereseite im Frontend

Fügen Sie den ersten Abschnitt hinzu

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
  • Steigungsrichtung: 126deg
Erstellen Sie einen Abschnitt mit einem Verlaufshintergrund

Untere Trennwand

Verwenden Sie auch einen Unterteiler.

  • Art der Trennung: Suche in der Liste
  • Teilerhöhe: 8vw
  • Horizontale Wiederholung des Teilers: 3x
  • Trennzeichen-Layout: Unter Abschnittsinhalt
Divi Abschnitt Einstellung

Abstand

Vervollständigen Sie die Parameter des Abschnitts, indem Sie eine geringere Polsterung hinzufügen.

  • Polsterung unten: 200px
Divi Abschnitt Bodenabstand

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie dem Abschnitt weiterhin eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Wählen Sie das Divi-Layout

Fügen Sie der Spalte einen Textbaustein hinzu

Fügen Sie H1-Inhalte hinzu

Fügen Sie der Zeilenspalte einen Textbaustein mit einem H1-Inhalt Ihrer Wahl hinzu.

Textabschnitt hinzufügen

H1-Texteinstellungen

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die H1-Texteinstellungen entsprechend:

  • Titelschrift: Montserrat
  • Gewicht der Titelschrift: schwer
  • Kopfzeilentextfarbe: #ffffff
  • Größe des Kopfzeilentextes: 8rem (Desktop), 4rem (Tablet), 2.5rem (Telefon)

Fügen Sie der Säule ein Trennmodul hinzu

Sichtbarkeit

Fügen Sie direkt unter dem Textmodul ein Trennmodul hinzu. Stellen Sie sicher, dass die Option "Trennzeichen anzeigen" aktiviert ist.

  • Trennzeichen anzeigen: Ja
Trennmodul hinzufügen

Linie

Ändern Sie dann die Linienfarbe des Moduls.

  • Linienfarbe: #ffffff

Sizing

Vervollständigen Sie die Modulparameter, indem Sie die Bemaßungsparameter ändern.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

  • Teilergewicht: 8px
  • Breite: 30%

Fügen Sie Abschnitt 2 hinzu

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

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

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

dynamische Karrieren

Fügen Sie der Spalte einen Textbaustein hinzu

Fügen Sie H2-Inhalte hinzu

Fügen Sie der Zeilenspalte einen Textbaustein hinzu und fügen Sie einen H2-Inhalt Ihrer Wahl ein.

Divi-Textmodul hinzufügen

H2-Texteinstellungen

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

  • Titel 2 Polizei: Montserrat
  • Punkt 2 Gewicht der Police: schwer
  • Textfarbe von Punkt 2: # ffa500
  • Titel 2 Textgröße: 2.3rem
Anpassung Farbabschnitt Text Divi

Fügen Sie der Säule ein Trennmodul hinzu

Sichtbarkeit

Das nächste Modul, das wir in dieser Spalte benötigen, ist ein Trennmodul. Stellen Sie sicher, dass die Option "Trennzeichen anzeigen" aktiviert ist.

  • Trennzeichen anzeigen: Ja
Divi-Trennzeichen hinzufügen

Linie

Ändern Sie dann die Linienfarbe des Moduls.

  • Linienfarbe: # ffa500
Passen Sie die Farbseparator-Divi an

Sizing

Vervollständigen Sie die Modulparameter, indem Sie das Gewicht des Teilers und die maximale Breite in den Bemaßungsparametern ändern.

  • Teilergewicht: 6px
  • Maximale Breite: 80 px
Separator-Konfiguration

Fügen Sie der Spalte ein Blog-Modul hinzu

Inhalt

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

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

  • Nachrichtentyp: Nachrichten
  • Kategorien einschließen: Marketing
  • Extraktlänge: 150
Fügen Sie ein Blog-Modul hinzu

Elemente

In den Parametern der Elemente sind die einzigen zwei Optionen, die wir aktivieren, die folgenden:

  • Schaltfläche Mehr anzeigen: Ja
  • Auszug aus der Show: Ja
Konfiguration des Divi-Blog-Moduls 1

Bereitstellung

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

  • Layout: volle Breite
Konfiguration des Blog-Modul-Layouts 1

Einstellungen für den Titeltext

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

  • Titelstufe: H3
  • Titelschrift: Montserrat
  • Titeltextgröße: 1.5rem
Textkonfiguration des Blog-Moduls

Body-Text-Einstellungen

Ändern Sie dann die Körpertexteinstellungen.

  • Körperpolizei: Raleway
  • Textkörpergröße: 1.1rem
  • Höhe der Körperlinie: 2.1em
Konfiguration der Schriftart des Blog-Moduls

Weitere Informationen Texteinstellungen

Mit den Texteinstellungen erfahren Sie mehr.

  • Lesen Sie mehr Polizei: Montserrat
  • Weitere Informationen Schriftschnitt: Capital
  • Weitere Informationen Textfarbe: #ffffff
  • Lesen Sie mehr Textgröße: 1rem
Konfiguration Lesen Sie mehr Blog-Modul 1

Abstand

Fügen Sie den Abstandseinstellungen benutzerdefinierte Ränder und Füllwerte hinzu.

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

Weitere Infos Button CSS

Vervollständigen Sie die Moduleinstellungen, indem Sie auf der Registerkarte "Erweitert" CSS-Wiedergabetasten 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;

Benutzerdefiniertes Code-Blog-Modul

Klonen Sie die Linie so oft wie nötig

Sobald Sie die Linie und alle Module fertiggestellt haben, können Sie sie je nach Anzahl der Abteilungen in Ihrem Unternehmen beliebig oft klonen.

Bearbeiten Sie den Inhalt des Textbausteins

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

Ändern des Inhalts des Divitextes

Bearbeiten Sie Kategorien von Blog-Modulen

Mit den Kategorien des Blog-Moduls.

dynamische Karrieren

Fügen Sie der Spalte der letzten Zeile ein Codemodul hinzu

Fügen Sie CSS-Code ein, um einzelne offene Arbeitsstationen zu stilisieren

Zum Abschluss des Entwurfs fügen wir der letzten Zeile unserer Seite ein Codemodul hinzu und fügen die folgenden Zeilen CSS-Code ein:

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

<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>

Fügen Sie CSS-Divi-Code hinzu

3. Speichern Sie das Seitendesign und zeigen Sie das Ergebnis an

Wenn Sie mit dem Entwerfen der Seite fertig sind, können Sie alle Änderungen speichern, den Visual Builder beenden und das Ergebnis anzeigen!

Endgültiges Ergebnis

Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Abschließende Gedanken

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie diese dynamischen und offenen Artikel mithilfe des Divi Blog-Moduls auf Ihrer Karriereseite präsentieren können. Bitte hinterlassen Sie einen Kommentar im Kommentarbereich unten.

Dieser Artikel enthält 1 Kommentar

  1. Hallo, ich bin an dem Punkt angelangt, an dem Sie Code einfügen müssen, aber wenn ich speichere und zur Site gehe, wird der Stil nicht angewendet und der Code wird online ohne die Stil-Tags angezeigt. Danke für deine Hilfe.

    Bonne journée!

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren