Në udhëzuesin e sotëm, ne do t'ju tregojmë se si mund të shfaqni dinamikisht vendet e lira të punës në faqen tuaj të Karrierës. Le të fillojmë.

Pasqyrë e rezultateve

Para se të zhyteni në tutorial, le të hedhim një vështrim të shpejtë të rezultatit në madhësi të ndryshme të ekranit.

1. Krijoni një faqe Karriere

Shtoni një faqe të re dhe kaloni te Visual Builder

Filloni duke krijuar një faqe të re, jepni një titull në faqen tuaj dhe shkoni te Visual Builder.

2. Filloni të krijoni faqen e Karrierës në pjesën e përparme

Shtoni pjesën e parë

Sfondi i gradientit

Shtoni pjesën e parë në faqe, hapni cilësimet e seksionit dhe përdorni një sfond gradient.

• Ngjyra 1: # ff6600
• Ngjyra 2: # fbff30
• Drejtimi i gradientit: 126deg

Ndarësi i poshtëm

Përdorni gjithashtu një ndarës të seksionit më të ulët.

• Stili i ndarjes: Kërko në listë
• Lartësia e ndarjes: 8vw
• Përsëritja horizontale e ndarësit: 3x
• Rregullimi i ndarësve: nën përmbajtje të seksionit

ndarje

Plotësoni parametrat e seksionit duke shtuar mbushjen më të ulët.

• Mbushja e poshtme: 200px

Shto një rresht të ri

Struktura e kolonës

Vazhdoni të shtoni një rresht të ri në seksion duke përdorur strukturën e kolonës së mëposhtme:

Shtoni një modul teksti në kolonë

Shto përmbajtje H1

Shtoni një modul teksti në kolonën e rreshtit me përmbajtje H1 sipas zgjedhjes suaj.

Cilësimet e tekstit H1

Kaloni në skedën e dizajnit të modulit dhe ndryshoni përkatësisht cilësimet e tekstit H1:

• Shkronja e titullit: Montserrat
• Pesha e shkronjave të titullit: e rëndë
• Ngjyra e tekstit të kokës: #ffffff
• Madhësia e tekstit të kokës: 8rem (desktop), 4rem (tabletë), 2.5rem (telefon)

Shtoni një modul ndarjeje në kolonë

dukshmëri

Poshtë modulit të tekstit, shtoni një modul ndarës. Sigurohuni që opsioni "Trego ndarësin" të jetë i aktivizuar.

• Trego ndarësin: Po

Linjë

Pastaj ndryshoni ngjyrën e linjës së modulit.

• Ngjyra e linjës: #ffffff

sizing

Dhe plotësoni parametrat e modulit duke modifikuar parametrat e dimensionimit.

• Pesha e ndarësit: 8px
• Gjerësia: 30%

Shtoni seksionin # 2

Shtoni një pjesë tjetër të rregullt në faqe.

Shto një rresht të ri

Struktura e kolonës

Shtoni një rresht të ri në seksion duke përdorur strukturën e mëposhtme të kolonës:

Shtoni një modul teksti në kolonë

Shto përmbajtje H2

Shtoni një modul teksti në kolonën e rreshtit dhe futni tekst përmbajtje H2 sipas zgjedhjes suaj.

Cilësimet e tekstit H2

Modifikoni parametrat e tekstit H2 të modulit si më poshtë:

• Titulli 2 Policia: Montserrat
• Pika 2 Pesha e politikës: e rëndë
• Ngjyra e tekstit të artikullit 2: # ffa500
• Titulli 2 Madhësia e tekstit: 2.3rem

Shtoni një modul ndarjeje në kolonë

dukshmëri

Moduli tjetër që na duhet në këtë kolonë është një modul i ndarjes. Sigurohuni që opsioni "Trego ndarësin" të jetë i aktivizuar.

• Trego ndarësin: Po

Linjë

Pastaj ndryshoni ngjyrën e linjës së modulit.

• Ngjyra e linjës: # ffa500

sizing

Dhe plotësoni parametrat e modulit duke modifikuar peshën e ndarësit dhe gjerësinë maksimale në parametrat e dimensionimit.

• Pesha e ndarësit: 6px
• Gjerësia maksimale: 80 px

Shtoni një modul blog në kolonën

Përmbajtje

Për të shfaqur vende të lira të punës, ne do të përdorim një modul blog që do ta rregullojmë në përputhje me nevojat tona. Sigurohuni që të zbatohen cilësimet e mëposhtme të përmbajtjes:

• Lloji i mesazhit: Mesazhet
• Përfshi kategoritë: Marketing
• Gjatësia e ekstraktit: 150

elementet

Në parametrat e elementeve, dy opsionet e vetme që aktivizojmë janë këto:

• Shfaq butonin më shumë: Po
• Ekstrakt nga shfaqja: Po

natyrë

Kaloni në skedën e dizajnit të modulit dhe sigurohuni që po përdorni një paraqitje me gjerësi të plotë.

• Layout: gjerësia e plotë

Cilësimet e tekstit të titullit

Ndryshoni gjithashtu cilësimet e tekstit të titullit.

• Niveli i titullit: H3
• Shkronja e titullit: Montserrat
• Madhësia e tekstit të titullit: 1.5rem

Cilësimet e tekstit të trupit

Pastaj ndryshoni cilësimet e tekstit të trupit.

• Policia e Trupit: Rrugor
• Madhësia e trupit të tekstit: 1.1rem
• Lartësia e vijës së trupit: 2.1em

Mësoni më shumë Cilësimet e tekstit

Me cilësimet e tekstit mësoni më shumë.

• Lexoni më shumë Policia: Montserrat
• Mësoni më shumë Stili i fontit: Kapital
• Mësoni më shumë Ngjyra e tekstit: #ffffff
• Lexoni më shumë Madhësia e tekstit: 1rem

ndarje

Shtoni kufijtë e personalizuar dhe vlerat e mbushjes në cilësimet e ndarjes.

• Marzhi i majtë: 100px (desktop), 50 px (tabletë), 0px (telefon)
• Mbushja e sipërme: 0px
• Mbushja e poshtme: 0px

Mësoni më shumë Button CSS

Dhe plotësoni cilësimet e modulit duke shtuar butonat e luajtjes CSS në skedën e përparuar.

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

Klononi rreshtin sa herë të jetë e nevojshme

Pasi të keni përfunduar linjën dhe të gjitha modulet e saj, mund ta klononi atë sa herë që dëshironi, në varësi të numrit të departamenteve në kompaninë tuaj.

Redaktoni përmbajtjen e modulit të tekstit

Sigurohuni që të redaktoni përmbajtjen H2 të secilës rresht të kopjuar.

Redaktoni kategori të moduleve në blog

Me kategoritë e modulit Blog.

Shtoni një modul kodi në kolonën e rreshtit të fundit

Vendosni kodin CSS për të stilizuar vendet e punës individuale të hapura

Për të përfunduar modelin, ne do të shtojmë një modul kodi në rreshtin e fundit të faqes sonë dhe do të vendosim rreshtat e mëposhtëm të kodit CSS:

<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. Ruani hartimin e faqes dhe shfaqni rezultatin

Pasi të keni përfunduar hartimin e faqes, mund të ruani të gjitha ndryshimet, të dilni nga Visual Builder dhe të shikoni rezultatin!

Rezultati përfundimtar

Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.

Mendimet e fundit

Në këtë tutorial, ne ju kemi treguar se si t'i shfaqni këta artikuj dinamikë dhe të hapur në faqen tuaj të karrierës duke përdorur modulin Blog të Divi. Mos ngurroni të lini një koment në seksionin e komenteve më poshtë.