Gå till innehållet

Hur man skapar ett dynamiskt jobblistavsnitt med Divi Blog-modulen

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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.

Skapa en divi-karriärsida

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
Skapa ett avsnitt med en tonad bakgrund

Nedre delare

Använd också en nedre delningsdelare.

  • Separationsstil: Sök i listan
  • Divider höjd: 8vw
  • Horisontell upprepning av delaren: 3x
  • Separatorlayout: under sektionens innehåll
Divi sektion justering

avstånd

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

  • Botten stoppning: 200px
Divi-sektionens bottenavstånd

Lägg till en ny rad

Kolumnstruktur

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

Välj divi-layout

Lägg till en textmodul i kolumnen

Lägg till H1-innehåll

Lägg till en textmodul i radkolumnen med H1-innehåll som du väljer.

Lägg till textavsnitt

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
Lägg till separeringsmodul

Linje

Ändra sedan modulens linjefärg.

  • Linjefärg: #ffffff

dimensionering

Och slutför modulparametrarna genom att ändra dimensioneringsparametrarna.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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

dynamiska karriärer

Lägg till en textmodul i kolumnen

Lägg till H2-innehåll

Lägg till en textmodul i radkolumnen och sätt in H2-innehåll som du väljer.

Lägg till divi-textmodul

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
Anpassning färgavsnitt text divi

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
Lägg till diviseparator

Linje

Ändra sedan modulens linjefärg.

  • Linjefärg: # ffa500
Anpassa färgseparator divi

dimensionering

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

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

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:

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Meddelandetyp: Meddelanden
  • Inkludera kategorier: Marknadsföring
  • Extraktlängd: 150
Lägg till en bloggmodul

Element

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

  • Visa mer knapp: Ja
  • Utdrag ur showen: Ja
Konfiguration av Divi-bloggmodul 1

Disposition

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

  • Layout: full bredd
Konfiguration av bloggmodullayout 1

Titeltextinställningar

Ändra också titeltextinställningarna.

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

Inställningar för kroppstext

Ändra sedan kroppsinställningarna.

  • Body Police: Raleway
  • Textstorlek: 1.1rem
  • Höjd på kroppslinjen: 2.1em
Konfiguration av typsnitt för bloggmodul

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
Konfiguration läs mer bloggmodul 1

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
Avståndskonfiguration

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;

Anpassad kodbloggmodul

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.

Ändra innehållet i divi-texten

Redigera kategorier av bloggmoduler

Med kategorierna i Blog-modulen.

dynamiska karriärer

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:

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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

Lägg till css divi-kod

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 denna handledning har vi visat dig hur du presenterar dessa dynamiska och öppna artiklar på din karriärsida med hjälp av Divi Blog-modulen. Lämna gärna en kommentar i kommentarfältet nedan.

Denna artikel innehåller 1 kommentar

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

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer