Gå til hovedindhold

Sådan oprettes en dynamisk joblistesektion med Divi Blog-modulet

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

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.

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
  • Separatorlayout: under sektionens indhold
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

Føj et tekstmodul til rækkekolonnen med H1 indhold 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)

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

dimensionering

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

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

  • Divider vægt: 8px
  • Bredde: 30%

Tilføj sektion # 2

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

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

Føj et tekstmodul til rækkekolonnen, og indsæt det valgte H2-indhold.

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:

Leder du efter de bedste WordPress-temaer og plugins?

Download de bedste plugins og WordPress-temaer på Envato og nemt oprette dit websted. Allerede mere end 49.720.000 downloads. [EXCLUSIVE]

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

Opret nemt din online butik

Download gratis WooCommerce, de bedste e-handels-plugins til at sælge dine fysiske og digitale produkter på WordPress. [Anbefalet]

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

endelige tanker

I denne vejledning har vi vist dig, hvordan du præsenterer disse dynamiske og åbne artikler på din karriereside ved hjælp af Divi Blog-modulet. Du er velkommen til at efterlade en kommentar i kommentarfeltet nedenfor.

Denne artikel indeholder 1 kommentar

  1. hej, jeg er ved den del, hvor du skal indsætte kode, men når jeg gemmer og går til webstedet, anvendes stilen ikke, og koden vises online uden typekoder. Tak for din hjælp.

    God dag!

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
0 aktier
andel
tweet
Tilmeld