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