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.

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

Untere Trennwand

Verwenden Sie auch einen Unterteiler.

• Art der Trennung: Suche in der Liste
• Teilerhöhe: 8vw
• Horizontale Wiederholung des Teilers: 3x
• Anordnung der Trennwände: unter der Inhalt Abschnitt

Abstand

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

• Polsterung unten: 200px

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

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

Fügen Sie der Spalte einen Textbaustein hinzu

Fügen Sie H1-Inhalte hinzu

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

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

Linie

Ändern Sie dann die Linienfarbe des Moduls.

• Linienfarbe: #ffffff

Sizing

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

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

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 Text ein Inhalt H2 Ihrer Wahl.

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

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

Linie

Ändern Sie dann die Linienfarbe des Moduls.

• Linienfarbe: # ffa500

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

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:

• Nachrichtentyp: Nachrichten
• Kategorien einschließen: Marketing
• Extraktlänge: 150

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

Bereitstellung

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

• Layout: volle Breite

Einstellungen für den Titeltext

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

• Titelstufe: H3
• Titelschrift: Montserrat
• Titeltextgröße: 1.5rem

Body-Text-Einstellungen

Ändern Sie dann die Körpertexteinstellungen.

• Körperpolizei: Raleway
• Textkörpergröße: 1.1rem
• Höhe der Körperlinie: 2.1em

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

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

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;

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.

Bearbeiten Sie Kategorien von Blog-Modulen

Mit den Kategorien des Blog-Moduls.

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:

<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. 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, offenen Artikel auf Ihrer Karriereseite mit dem Blog-Modul von präsentieren Divi. Fühlen Sie sich frei, einen Kommentar im Kommentarbereich unten zu hinterlassen.