I dagens vejledning viser vi dig, hvordan du dynamisk kan vise ledige stillinger på din karriere-side. Lad os begynde.

Resultatoversigt

Før vi dykker ned i vejledningen, lad os hurtigt se på resultatet på forskellige skærmstørrelser.

Liste over karrierer divi blog modul

1. Opret en karriere-side

Tilføj en ny side, og skift til Visual Builder

Start med at oprette en ny side, give din side en titel og gå til Visual Builder.

Opret en divi-karriereside

2. Begynd med at oprette Karriere-siden på frontend

Tilføj det første afsnit

Gradient baggrund

Føj det første afsnit til siden, åbn sektionsindstillingerne og brug en gradientbaggrund.

  • Farve 1: # ff6600
  • Farve 2: # fbff30
  • Gradientretning: 126deg
Opret en sektion med en gradientbaggrund

Nederste skillelinje

Brug også en nedre sektion.

  • Adskillelsesstil: Søg på listen
  • Opdelingshøjde: 8vw
  • Vandret gentagelse af skillet: 3x
  • Arrangement af skillevægge: under indhold Sektion
Divi sektion justering

afstand

Fuldfør sektionsparametrene ved at tilføje lavere polstring.

  • Bundpolstring: 200px
Divi sektion bundafstand

Tilføj en ny linje

Kolonne struktur

Fortsæt med at tilføje en ny linje til sektionen ved hjælp af følgende kolonnestruktur:

Vælg divi-layout

Føj et tekstmodul til kolonnen

Tilføj H1 indhold

Tilføj et tekstmodul til rækkekolonnen med indhold H1 efter eget valg.

Tilføj tekstafsnit

H1 tekstindstillinger

Skift til moduldesignfanen, og rediger H1-tekstindstillingerne i overensstemmelse hermed:

  • Titeltype: Montserrat
  • Vægt på titeltype: tung
  • Sidehovedtekstfarve: #ffffff
  • Overskriftstekststørrelse: 8rem (desktop), 4rem (tablet), 2.5rem (telefon)
Divi-teksttilpasning

Føj et separationsmodul til kolonnen

synlighed

Læg lige under tekstmodulet, tilføj et skillemodul. Sørg for, at indstillingen "Vis separator" er aktiveret.

  • Vis separator: Ja
Tilføj skillemodul

Linje

Skift derefter modulets linjefarve.

  • Linjefarve: #ffffff
Divi separator modul farvetilpasning

dimensionering

Og færdiggør modulparametrene ved at ændre dimensioneringsparametrene.

  • Divider vægt: 8px
  • Bredde: 30%
Divi separator bredde

Tilføj sektion # 2

Føj en anden regelmæssig sektion til siden.

Tilføj divi normal sektion

Tilføj en ny linje

Kolonne struktur

Føj en ny linje til sektionen ved hjælp af følgende kolonnestruktur:

dynamiske karrierer

Føj et tekstmodul til kolonnen

Tilføj H2 indhold

Tilføj et tekstmodul til rækkekolonnen og indsæt tekst indhold H2 efter eget valg.

Tilføj divi-tekstmodul

H2 tekstindstillinger

Rediger H2-tekstparametrene for modulet som følger:

  • Afsnit 2 Politi: Montserrat
  • Punkt 2 Politikens vægt: tung
  • Tekstfarve på artikel 2: # ffa500
  • Titel 2 Tekststørrelse: 2.3rem
Tilpasning farve sektion tekst divi

Føj et separationsmodul til kolonnen

synlighed

Det næste modul, vi har brug for i denne kolonne, er et separationsmodul. Sørg for, at indstillingen "Vis separator" er aktiveret.

  • Vis separator: Ja
Tilføj diviseparator

Linje

Skift derefter modulets linjefarve.

  • Linjefarve: # ffa500
Tilpas farveseparator divi

dimensionering

Og fuldfør modulparametrene ved at ændre vægten af ​​skillelinjen og den maksimale bredde i dimensioneringsparametrene.

  • Divider vægt: 6px
  • Maksimal bredde: 80 px
Separatorkonfiguration

Føj et blogmodul til kolonnen

Indhold

For at vise de forskellige ledige stillinger bruger vi et blogmodul, som vi vil tilpasse efter vores behov. Sørg for, at følgende indholdsindstillinger gælder:

  • Meddelelsestype: Meddelelser
  • Inkluder kategorier: Marketing
  • Ekstraktlængde: 150
Tilføj et blogmodul

Elementer

I parametrene til elementerne er de eneste to muligheder, som vi aktiverer, følgende:

  • Vis mere-knap: Ja
  • Uddrag fra showet: Ja
Divi-blogmodulkonfiguration 1

Disposition

Skift til moduldesignfanen, og sørg for at bruge et layout i fuld bredde.

  • Layout: fuld bredde
Konfiguration af blogmodullayout 1

Titeltekstindstillinger

Skift også titeltekstindstillingerne.

  • Titleniveau: H3
  • Titeltype: Montserrat
  • Titeltekststørrelse: 1.5rem
Konfiguration af tekst til blogmodul

Indstillinger for kropstekst

Skift derefter indstillinger for kropstekst.

  • Body Police: Raleway
  • Tekstkropsstørrelse: 1.1rem
  • Højde på kropslinjen: 2.1em
Konfiguration af skrifttype for blogmodul

Lær mere Tekstindstillinger

Lær mere med tekstindstillingerne.

  • Læs mere Police: Montserrat
  • Lær mere Skrifttype: Hovedstad
  • Lær mere Tekstfarve: #ffffff
  • Læs mere Tekststørrelse: 1rem
Konfiguration læs mere blogmodul 1

afstand

Føj tilpassede margener og polstringsværdier til afstandsindstillingerne.

  • Venstre margen: 100px (desktop), 50px (tablet), 0px (telefon)
  • Øvre polstring: 0px
  • Bundpolstring: 0px
Mellemrumskonfiguration

Lær mere Knap CSS

Og fuldfør modulindstillingerne ved at tilføje CSS-afspilningsknapper i den avancerede fane.

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

Brugerdefineret kode blog modul

Klon linjen så mange gange som nødvendigt

Når du har afsluttet linjen og alle dens moduler, kan du klone den så mange gange du vil, afhængigt af antallet af afdelinger i din virksomhed.

Rediger indholdet af tekstmodulet

Sørg for at redigere H2-indholdet på hver duplikatlinie.

Ændring af indholdet af divi-teksten

Rediger kategorier af blogmoduler

Med kategorierne i Blog-modulet.

dynamiske karrierer

Føj et kodemodul til kolonnen på den sidste linje

Indsæt CSS-kode for at stilisere individuelle åbne arbejdsstationer

For at afslutte designet, tilføjer vi et kodemodul til den sidste linje på vores side og indsætter følgende linjer med CSS-kode:

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

Tilføj kode css divi

3. Gem sidedesignet, og vis resultatet

Når du er færdig med at designe siden, kan du gemme alle ændringerne, forlade Visual Builder og se resultatet!

Endelig resultat

Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.

Endelig resultat

endelige tanker

I dette selvstudie har vi vist dig, hvordan du fremviser disse dynamiske, åbne artikler på din karriereside ved hjælp af blogmodulet i Divi. Du er velkommen til at efterlade en kommentar i kommentarfeltet nedenfor.