In de tutorial van vandaag laten we je zien hoe je vacatures dynamisch kunt weergeven op je carrièrepagina. Laten we beginnen.

Resultaat overzicht

Laten we, voordat we in de tutorial duiken, het resultaat snel bekijken op verschillende schermformaten.

Lijst met carrières divi blog module

1. Maak een carrièrepagina

Voeg een nieuwe pagina toe en schakel over naar Visual Builder

Begin met het maken van een nieuwe pagina, geef uw pagina een titel en ga naar Visual Builder.

Maak een divi-carrièrepagina

2. Begin met het maken van de carrièrepagina op de frontend

Voeg de eerste sectie toe

Achtergrond met kleurovergang

Voeg de eerste sectie toe aan de pagina, open de sectie-instellingen en gebruik een verloopachtergrond.

  • Kleur 1: # ff6600
  • Kleur 2: # fbff30
  • Verlooprichting: 126 graden
Maak een sectie met een verloopachtergrond

Lagere scheidingswand

Gebruik ook een scheidingswand in het onderste gedeelte.

  • Stijl van scheiding: zoeken in de lijst
  • Divider hoogte: 8vw
  • Horizontale herhaling van de verdeler: 3x
  • Opstelling van verdelers: onder de inhoud van de sectie
Divi sectie aanpassing

tussenruimte

Voltooi de sectieparameters door lagere opvulling toe te voegen.

  • Vulling onderkant: 200px
Divi-sectie bodemafstand

Voeg een nieuwe regel toe

Kolomstructuur

Ga door met het toevoegen van een nieuwe regel aan de sectie met behulp van de volgende kolomstructuur:

Kies de divi-indeling

Voeg een tekstmodule toe aan de kolom

Voeg H1-inhoud toe

Voeg een tekstmodule toe aan de rijkolom met inhoud H1 naar keuze.

Voeg een tekstgedeelte toe

H1 tekstinstellingen

Schakel over naar het tabblad moduleontwerp en wijzig de H1-tekstinstellingen dienovereenkomstig:

  • Titel lettertype: Montserrat
  • Gewicht lettertype titel: zwaar
  • Kleur koptekst: #ffffff
  • Tekstgrootte koptekst: 8rem (desktop), 4rem (tablet), 2.5rem (telefoon)
Divi-tekstaanpassing

Voeg een scheidingsmodule toe aan de kolom

zichtbaarheid

Voeg net onder de tekstmodule een scheidingsmodule toe. Zorg ervoor dat de optie "Show Separator" is ingeschakeld.

  • Scheidingsteken tonen: Ja
Voeg een scheidingsmodule toe

lijn

Wijzig vervolgens de lijnkleur van de module.

  • Lijnkleur: #ffffff
Kleuraanpassing van de Divi-scheidingsmodule

sizing

En voltooi de moduleparameters door de dimensioneringsparameters te wijzigen.

  • Gewicht verdeler: 8px
  • Breedte: 30%
Divi scheidingsteken breedte

Voeg sectie # 2 toe

Voeg nog een normaal gedeelte toe aan de pagina.

Voeg divi normale sectie toe

Voeg een nieuwe regel toe

Kolomstructuur

Voeg een nieuwe regel toe aan de sectie met behulp van de volgende kolomstructuur:

dynamische carrières

Voeg een tekstmodule toe aan de kolom

Voeg H2-inhoud toe

Voeg een tekstmodule toe aan de rijkolom en voeg tekst in inhoud H2 naar keuze.

Voeg divi-tekstmodule toe

H2 tekstinstellingen

Wijzig de H2-tekstparameters van de module als volgt:

  • Titel 2 Politie: Montserrat
  • Item 2 Gewicht van het beleid: zwaar
  • Tekstkleur van item 2: # ffa500
  • Titel 2 Tekstgrootte: 2.3rem
Aanpassing kleursectie tekst divi

Voeg een scheidingsmodule toe aan de kolom

zichtbaarheid

De volgende module die we in deze kolom nodig hebben, is een scheidingsmodule. Zorg ervoor dat de optie "Show Separator" is ingeschakeld.

  • Scheidingsteken tonen: Ja
Scheidingsteken toevoegen

lijn

Wijzig vervolgens de lijnkleur van de module.

  • Lijnkleur: # ffa500
Pas kleurscheidingsteken divi aan

sizing

En voltooi de moduleparameters door het gewicht van de verdeler en de maximale breedte in de maatparameters te wijzigen.

  • Gewicht verdeler: 6px
  • Maximale breedte: 80 px
Scheidingsteken configuratie

Voeg een blogmodule toe aan de kolom

Inhoud

Om de verschillende vacatures weer te geven, zullen we een blogmodule gebruiken die we aanpassen aan onze behoeften. Zorg ervoor dat de volgende inhoudinstellingen van toepassing zijn:

  • Soort bericht: Berichten
  • Voeg categorieën toe: Marketing
  • Extractie lengte: 150
Voeg een blogmodule toe

Communie

In de parameters van de elementen zijn de enige twee opties die we activeren de volgende:

  • Toon meer knop: Ja
  • Fragment uit de show: Ja
Divi blog module configuratie 1

Aanleg

Schakel over naar het tabblad moduleontwerp en zorg ervoor dat u een lay-out over de volledige breedte gebruikt.

  • Indeling: volledige breedte
Configuratie van de lay-out van de blogmodule 1

Instellingen voor titeltekst

Wijzig ook de titeltekstinstellingen.

  • Titel niveau: H3
  • Titel lettertype: Montserrat
  • Tekstgrootte titel: 1.5 rem
Tekstconfiguratie van blogmodule

Instellingen hoofdtekst

Wijzig vervolgens de instellingen voor de hoofdtekst.

  • Lichaamspolitie: Raleway
  • Tekstlichaamsgrootte: 1.1rem
  • Hoogte van de lichaamslijn: 2.1em
Lettertype-configuratie van blogmodule

Meer informatie Tekstinstellingen

Met de tekstinstellingen leert u meer.

  • Lees meer Politie: Montserrat
  • Meer informatie Letterstijl: Capital
  • Meer informatie Tekstkleur: #ffffff
  • Lees meer Tekstgrootte: 1rem
Configuratie lees meer blog module 1

tussenruimte

Voeg aangepaste marges en opvulwaarden toe aan de afstandsinstellingen.

  • Linkermarge: 100 px (desktop), 50 px (tablet), 0 px (telefoon)
  • Bovenste vulling: 0 px
  • Vulling onderkant: 0px
Afstandsconfiguratie

Meer informatie Knop CSS

En voltooi de module-instellingen door CSS-afspeelknoppen toe te voegen op het tabblad Geavanceerd.

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

Aangepaste code blogmodule

Kloon de lijn zo vaak als nodig

Nadat u de lijn en alle modules hebt voltooid, kunt u deze zo vaak als u wilt klonen, afhankelijk van het aantal afdelingen in uw bedrijf.

Bewerk de inhoud van de tekstmodule

Zorg ervoor dat u de H2-inhoud van elke dubbele regel bewerkt.

De inhoud van de divi-tekst wijzigen

Bewerk categorieën van blogmodules

Met de categorieën van de Blog-module.

dynamische carrières

Voeg een codemodule toe aan de kolom van de laatste regel

Voeg CSS-code in om afzonderlijke open werkstations te stileren

Om het ontwerp te voltooien, voegen we een codemodule toe aan de laatste regel van onze pagina en voegen we de volgende regels CSS-code in:

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

Voeg code css divi

3. Sla het paginaontwerp op en geef het resultaat weer

Als u klaar bent met het ontwerpen van de pagina, kunt u alle wijzigingen opslaan, Visual Builder afsluiten en het resultaat bekijken!

Eindresultaat

Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.

Eindresultaat

Final gedachten

In deze zelfstudie hebben we u laten zien hoe u deze dynamische, open artikelen op uw carrièrepagina kunt presenteren met behulp van de blogmodule van Divi. Laat gerust een reactie achter in de commentaarsectie hieronder.