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.
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
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
afstand
Fuldfør sektionsparametrene ved at tilføje lavere polstring.
- Bundpolstring: 200px
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:
Føj et tekstmodul til kolonnen
Tilføj H1 indhold
Tilføj et tekstmodul til rækkekolonnen med indhold H1 efter eget valg.
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
Linje
Skift derefter modulets linjefarve.
- Linjefarve: #ffffff
dimensionering
Og færdiggør modulparametrene ved at ændre dimensioneringsparametrene.
- 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:
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.
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
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
Linje
Skift derefter modulets linjefarve.
- Linjefarve: # ffa500
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
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
Elementer
I parametrene til elementerne er de eneste to muligheder, som vi aktiverer, følgende:
- Vis mere-knap: Ja
- Uddrag fra showet: Ja
Disposition
Skift til moduldesignfanen, og sørg for at bruge et layout i fuld bredde.
- Layout: fuld bredde
Titeltekstindstillinger
Skift også titeltekstindstillingerne.
- Titleniveau: H3
- Titeltype: Montserrat
- Titeltekststørrelse: 1.5rem
Indstillinger for kropstekst
Skift derefter indstillinger for kropstekst.
- Body Police: Raleway
- Tekstkropsstørrelse: 1.1rem
- Højde på kropslinjen: 2.1em
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
afstand
Føj tilpassede margener og polstringsværdier til afstandsindstillingerne.
- Venstre margen: 100px (desktop), 50px (tablet), 0px (telefon)
- Øvre polstring: 0px
- Bundpolstring: 0px
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;
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.
Rediger kategorier af blogmoduler
Med kategorierne i Blog-modulet.
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>
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 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.
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!