I dagens opplæring viser vi deg hvordan du dynamisk kan vise ledige stillinger på karrieresiden din. La oss begynne.

Resultatoversikt

Før vi dykker ned i opplæringen, la oss ta en rask titt på resultatet på forskjellige skjermstørrelser.

1. Lag en karriereside

Legg til en ny side og bytt til Visual Builder

Start med å lage en ny side, gi siden en tittel og gå til Visual Builder.

2. Begynn å lage karrieresiden på fronten

Legg til den første delen

Gradient bakgrunn

Legg til den første delen på siden, åpne seksjonsinnstillingene og bruk en gradientbakgrunn.

• Farge 1: # ff6600
• Farge 2: # fbff30
• Gradientretning: 126deg

Nedre skillelinje

Bruk også en delingsdel.

• Separasjonsstil: Søk i listen
• Skillehøyde: 8vw
• Horisontal gjentagelse av skillet: 3x
• Arrangement av skillevegger: under innhold av seksjonen

avstanden

Fullfør seksjonsparametrene ved å legge til lavere polstring.

• Bunnpolstring: 200px

Legg til en ny linje

Kolonne struktur

Fortsett å legge til en ny linje til seksjonen ved hjelp av følgende kolonnestruktur:

Legg til en tekstmodul i kolonnen

Legg til H1-innhold

Legg til en tekstmodul i radkolonnen med innhold H1 etter eget valg.

H1 tekstinnstillinger

Bytt til moduldesignfanen og endre H1-tekstinnstillingene deretter:

• Tittel font: Montserrat
• Tittel skriftvekt: tung
• Topptekstfarge: #ffffff
• Topptekststørrelse: 8rem (desktop), 4rem (tablet), 2.5rem (telefon)

Legg til en skillemodul i kolonnen

synlighet

Rett under tekstmodulen legger du til en skillemodul. Forsikre deg om at alternativet "Vis separator" er aktivert.

• Vis separator: Ja

Ligne

Endre deretter linjefargen på modulen.

• Linjefarge: #ffffff

dimensjonering

Og fullfør modulparametrene ved å endre dimensjoneringsparametrene.

• Divider vekt: 8px
• Bredde: 30%

Legg til del 2

Legg til en annen vanlig seksjon på siden.

Legg til en ny linje

Kolonne struktur

Legg til en ny linje i seksjonen ved hjelp av følgende kolonnestruktur:

Legg til en tekstmodul i kolonnen

Legg til H2-innhold

Legg til en tekstmodul i radkolonnen og sett inn tekst innhold H2 etter eget valg.

H2 tekstinnstillinger

Endre H2-tekstparametrene for modulen som følger:

• Tittel 2 Politi: Montserrat
• Punkt 2 Politikkens vekt: tung
• Tekstfarge på artikkel 2: # ffa500
• Tittel 2 Tekststørrelse: 2.3rem

Legg til en skillemodul i kolonnen

synlighet

Den neste modulen vi trenger i denne kolonnen er en separasjonsmodul. Forsikre deg om at alternativet "Vis separator" er aktivert.

• Vis separator: Ja

Ligne

Endre deretter linjefargen på modulen.

• Linjefarge: # ffa500

dimensjonering

Og fullfør modulparametrene ved å endre vekten på deleren og maksimal bredde i dimensjonsparametrene.

• Divider vekt: 6px
• Maksimal bredde: 80 px

Legg til en bloggmodul i kolonnen

Innhold

For å vise de forskjellige ledige stillingene, bruker vi en bloggmodul som vi vil tilpasse etter våre behov. Forsikre deg om at følgende innholdsinnstillinger gjelder:

• Meldingstype: Meldinger
• Ta med kategorier: Marketing
• Ekstraktlengde: 150

Elements

I parametrene til elementene er de eneste to alternativene som vi aktiverer følgende:

• Vis mer-knapp: Ja
• Utdrag fra showet: Ja

Disposisjon

Bytt til moduldesignfanen og sørg for at du bruker en layout i full bredde.

• Oppsett: full bredde

Tekstinnstillinger for tittel

Endre også titteltekstinnstillingene.

• Tittelnivå: H3
• Tittel font: Montserrat
• Tittelstørrelse: 1.5rem

Innstillinger for brødtekst

Endre deretter innstillingene for brødtekst.

• Kroppspoliti: Raleway
• Tekst kroppsstørrelse: 1.1rem
• Høyde på kroppslinjen: 2.1em

Lær mer Tekstinnstillinger

Lær mer med tekstinnstillingene.

• Les mer Police: Montserrat
• Lær mer Skriftstil: Hovedstad
• Lær mer Tekstfarge: #ffffff
• Les mer Tekststørrelse: 1rem

avstanden

Legg til egendefinerte marginer og polstringsverdier i avstandsinnstillingene.

• Venstre margin: 100 piksler (stasjonær), 50 piksler (nettbrett), 0 piksler (telefon)
• Øvre polstring: 0px
• Bunnpolstring: 0px

Lær mer Knapp CSS

Og fullfør modulinnstillingene ved å legge til CSS-avspillingsknapper i den avanserte fanen.

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

Klone linjen så mange ganger som nødvendig

Når du har fullført linjen og alle modulene, kan du klone den så mange ganger du vil, avhengig av antall avdelinger i selskapet ditt.

Rediger innholdet i tekstmodulen

Sørg for å redigere H2-innholdet på hver duplikatlinje.

Rediger kategorier av bloggmoduler

Med kategoriene i Blog-modulen.

Legg til en kodemodul i kolonnen på den siste linjen

Sett inn CSS-kode for å stilisere individuelle åpne arbeidsstasjoner

For å fullføre designen, vil vi legge til en kodemodul til den siste linjen på siden vår og sette inn 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. Lagre sidedesignet og vis resultatet

Når du er ferdig med å designe siden, kan du lagre alle endringene, gå ut av Visual Builder og se resultatet!

Endelig resultat

Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.

avslutt~~POS=TRUNC tanker

I denne opplæringen har vi vist deg hvordan du viser frem disse dynamiske, åpne artiklene på karrieresiden din ved å bruke bloggmodulen til Divi. Legg gjerne igjen en kommentar i kommentarfeltet nedenfor.