I dagens handledning visar vi dig hur du dynamiskt kan visa lediga platser på din karriärsida. Låt oss börja.

Resultatöversikt

Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.

1. Skapa en karriärsida

Lägg till en ny sida och växla till Visual Builder

Börja med att skapa en ny sida, ge din sida en titel och gå till Visual Builder.

2. Börja skapa karriärsidan på frontend

Lägg till det första avsnittet

Lutningbakgrund

Lägg till det första avsnittet på sidan, öppna avsnittinställningarna och använd en gradientbakgrund.

• Färg 1: # ff6600
• Färg 2: # fbff30
• Lutningsriktning: 126deg

Nedre delare

Använd också en nedre delningsdelare.

• Separationsstil: Sök i listan
• Divider höjd: 8vw
• Horisontell upprepning av delaren: 3x
• Arrangemang av avdelare: under innehåll i avsnittet

avstånd

Fyll i avsnittets parametrar genom att lägga till lägre stoppning.

• Botten stoppning: 200px

Lägg till en ny rad

Kolumnstruktur

Fortsätt att lägga till en ny rad i avsnittet med följande kolumnstruktur:

Lägg till en textmodul i kolumnen

Lägg till H1-innehåll

Lägg till en textmodul i radkolumnen med innehåll H1 efter eget val.

H1 textinställningar

Byt till fliken moduldesign och ändra H1-textinställningarna i enlighet med detta:

• Titelstilsort: Montserrat
• Titel typsnitt vikt: tung
• Rubriktextfärg: #ffffff
• Rubriktextstorlek: 8rem (skrivbord), 4rem (surfplatta), 2.5rem (telefon)

Lägg till en separationsmodul i kolumnen

synlighet

Precis under textmodulen lägger du till en separatormodul. Se till att alternativet "Visa separator" är aktiverat.

• Visa separator: Ja

Linje

Ändra sedan modulens linjefärg.

• Linjefärg: #ffffff

dimensionering

Och slutför modulparametrarna genom att ändra dimensioneringsparametrarna.

• Divider vikt: 8px
• Bredd: 30%

Lägg till avsnitt 2

Lägg till ytterligare ett vanligt avsnitt på sidan.

Lägg till en ny rad

Kolumnstruktur

Lägg till en ny rad i avsnittet med följande kolumnstruktur:

Lägg till en textmodul i kolumnen

Lägg till H2-innehåll

Lägg till en textmodul i radkolumnen och infoga text innehåll H2 efter eget val.

H2 textinställningar

Ändra H2-textparametrarna för modulen enligt följande:

• Avdelning 2 Polis: Montserrat
• Punkt 2 Politikens vikt: tung
• Textfärg på artikel 2: # ffa500
• Titel 2 Textstorlek: 2.3rem

Lägg till en separationsmodul i kolumnen

synlighet

Nästa modul vi behöver i den här kolumnen är en separationsmodul. Se till att alternativet "Visa separator" är aktiverat.

• Visa separator: Ja

Linje

Ändra sedan modulens linjefärg.

• Linjefärg: # ffa500

dimensionering

Och komplettera modulparametrarna genom att ändra vikten på delaren och maximal bredd i dimensioneringsparametrarna.

• Divider vikt: 6px
• Maximal bredd: 80 px

Lägg till en bloggmodul i kolumnen

Innehåll

För att visa de olika lediga platserna använder vi en bloggmodul som vi kommer att anpassa efter våra behov. Se till att följande innehållsinställningar gäller:

• Meddelandetyp: Meddelanden
• Inkludera kategorier: Marknadsföring
• Extraktlängd: 150

Element

I parametrarna för elementen är de enda två alternativen som vi aktiverar följande:

• Visa mer knapp: Ja
• Utdrag ur showen: Ja

Disposition

Byt till fliken moduldesign och se till att du använder en layout i full bredd.

• Layout: full bredd

Titeltextinställningar

Ändra också titeltextinställningarna.

• Titelnivå: H3
• Titelstilsort: Montserrat
• Titeltextstorlek: 1.5rem

Inställningar för kroppstext

Ändra sedan kroppsinställningarna.

• Body Police: Raleway
• Textstorlek: 1.1rem
• Höjd på kroppslinjen: 2.1em

Läs mer Textinställningar

Lär dig mer med textinställningarna.

• Läs mer Polisen: Montserrat
• Läs mer Teckensnittstil: huvudstad
• Läs mer Textfärg: #ffffff
• Läs mer Textstorlek: 1rem

avstånd

Lägg till anpassade marginaler och utfyllnadsvärden i avståndsinställningarna.

• Vänster marginal: 100 px (skrivbord), 50 px (surfplatta), 0 px (telefon)
• Övre stoppning: 0px
• Botten stoppning: 0px

Läs mer Knapp CSS

Och slutför modulinställningarna genom att lägga till CSS-uppspelningsknappar på den avancerade fliken.

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

Klona linjen så många gånger som behövs

När du har slutfört raden och alla dess moduler kan du klona den så många gånger du vill, beroende på antalet avdelningar i ditt företag.

Redigera innehållet i textmodulen

Se till att redigera H2-innehållet för varje duplikatrad.

Redigera kategorier av bloggmoduler

Med kategorierna i Blog-modulen.

Lägg till en kodmodul i kolumnen på den sista raden

Sätt in CSS-kod för att stilisera individuella öppna arbetsstationer

För att avsluta designen kommer vi att lägga till en kodmodul till den sista raden på vår sida och infoga följande rader med CSS-kod:

<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. Spara siddesignen och visa resultatet

När du är klar med att utforma sidan kan du spara alla ändringar, lämna Visual Builder och se resultatet!

Slutresultat

Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.

Avslutande tankar

I den här handledningen har vi visat dig hur du visar upp dessa dynamiska, öppna artiklar på din karriärsida med hjälp av bloggmodulen i Divi. Lämna gärna en kommentar i kommentarsfältet nedan.