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.
hej, jag är vid den del där du måste infoga kod, men när jag sparar och går till webbplatsen tillämpas inte stilen och koden visas online utan stiltaggarna. Tack för din hjälp.
Bonne journée!