U današnjem uputstvu pokazat ćemo vam kako možete dinamički prikazati slobodna mjesta na svojoj stranici Karijere. Počnimo.

Pregled rezultata

Prije nego što uđemo u tutorial, pogledajmo na brzinu rezultate na različitim veličinama zaslona.

1. Stvorite stranicu o karijeri

Dodajte novu stranicu i prebacite se na Visual Builder

Započnite stvaranjem nove stranice, dajte joj stranicu i idite na Visual Builder.

2. Počnite stvarati stranicu karijere na sučelju

Dodajte prvi odjeljak

Gradijentna pozadina

Na stranicu dodajte prvi odjeljak, otvorite postavke odjeljka i upotrijebite pozadinu gradijenta.

• Boja 1: # ff6600
• Boja 2: # fbff30
• Smjer gradijenta: 126deg

Donji razdjelnik

Koristite i razdjelnik donjeg dijela.

• Stil razdvajanja: potražite na popisu
• Visina razdjelnika: 8vw
• Vodoravno ponavljanje razdjelnika: 3x
• Raspored pregrada: ispod sadržaj odjeljka

razmak

Ispunite parametre odjeljka dodavanjem donjih obloga.

• Donja obloga: 200px

Dodajte novi redak

Struktura stupaca

Nastavite dodavati novi redak odjeljku koristeći sljedeću strukturu stupaca:

Dodajte tekstualni modul u stupac

Dodajte H1 sadržaj

Dodajte tekstualni modul stupcu reda s sadržaj H1 po vašem izboru.

Postavke teksta H1

Prebacite se na karticu dizajna modula i u skladu s tim promijenite postavke teksta H1:

• Font naslova: Montserrat
• Težina naslova: težak
• Boja teksta zaglavlja: #ffffff
• Veličina teksta zaglavlja: 8rem (radna površina), 4rem (tablet), 2.5rem (telefon)

Dodajte modul za odvajanje u stupac

vidljivost

Odmah ispod tekstualnog modula dodajte modul za razdvajanje. Provjerite je li omogućena opcija "Prikaži separator".

• Pokaži separator: Da

Crta

Zatim promijenite boju linije modula.

• Boja linije: #ffffff

dimenzioniranje

Ispunite parametre za dimenzioniranje i dovršite parametre modula.

• Težina razdjelnika: 8px
• Širina: 30%

Dodajte odjeljak br. 2

Dodajte još jedan redoviti odjeljak na stranicu.

Dodajte novi redak

Struktura stupaca

Dodajte novi redak odjeljku koristeći sljedeću strukturu stupaca:

Dodajte tekstualni modul u stupac

Dodajte H2 sadržaj

Dodajte tekstualni modul stupcu retka i umetnite tekst sadržaj H2 po vašem izboru.

Postavke teksta H2

Izmijenite H2 tekst parametre modula na sljedeći način:

• Naslov 2. Policija: Montserrat
• Točka 2. Težina police: teška
• Boja teksta predmeta 2: # ffa500
• Naslov 2 Veličina teksta: 2.3rem

Dodajte modul za odvajanje u stupac

vidljivost

Sljedeći modul koji nam treba u ovom stupcu je modul za odvajanje. Provjerite je li omogućena opcija "Prikaži separator".

• Pokaži separator: Da

Crta

Zatim promijenite boju linije modula.

• Boja linije: # ffa500

dimenzioniranje

Ispunite parametre modula izmjenom težine razdjelnika i maksimalne širine u parametrima za dimenzioniranje.

• Težina razdjelnika: 6px
• Maksimalna širina: 80 px

Dodajte modul bloga u stupac

Sadržaj

Za prikaz različitih slobodnih mjesta koristit ćemo modul bloga koji ćemo prilagoditi prema svojim potrebama. Obavezno primijenite sljedeće postavke sadržaja:

• Vrsta poruke: Poruke
• Uključi kategorije: Marketing
• Duljina ekstrakta: 150

Elementi

U parametrima elemenata jedine dvije mogućnosti koje aktiviramo su sljedeće:

• Prikaži još gumba: Da
• Izvadak iz emisije: Da

raspored

Prebacite se na karticu dizajna modula i provjerite koristite li raspored pune širine.

• Izgled: puna širina

Postavke teksta naslova

Također promijenite postavke teksta naslova.

• Razina naslova: H3
• Font naslova: Montserrat
• Veličina teksta naslova: 1.5rem

Postavke teksta tijela

Zatim promijenite postavke teksta tijela.

• Tijelo policije: Raleway
• Veličina tijela teksta: 1.1rem
• Visina linije tijela: 2.1em

Saznajte više Postavke teksta

Pomoću postavki teksta saznajte više.

• Pročitajte više Police: Montserrat
• Saznajte više stil fonta: glavni
• Saznajte više Boja teksta: #ffffff
• Pročitajte više Veličina teksta: 1rem

razmak

Postavkama razmaka dodajte prilagođene margine i vrijednosti obloga.

• Lijeva margina: 100px (desktop), 50px (tablet), 0px (telefon)
• Gornja obloga: 0px
• Donja obloga: 0px

Saznajte više CSS gumba

I dovršite postavke modula dodavanjem CSS gumba za reprodukciju u naprednu karticu.

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

Klonirajte liniju onoliko puta koliko je potrebno

Nakon što dovršite liniju i sve njene module, možete je klonirati koliko god puta želite, ovisno o broju odjeljenja u vašoj tvrtki.

Uredite sadržaj tekstualnog modula

Obavezno uredite sadržaj H2 svakog duplikata.

Uređivanje kategorija modula bloga

Uz kategorije modula Blog.

Dodajte modul koda u stupac zadnjeg retka

Umetnite CSS kôd za stiliziranje pojedinih otvorenih radnih stanica

Za završetak dizajna dodaćemo kodni modul u posljednji redak naše stranice i umetnuti ćemo sljedeće redove CSS koda:

<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. Spremite dizajn stranice i prikažite rezultat

Nakon što završite s dizajniranjem stranice, možete spremiti sve promjene, zatvoriti Visual Builder i vidjeti rezultat!

Konačni rezultat

Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.

Završne misli

U ovom smo vam vodiču pokazali kako prikazati ove dinamične, otvorene članke na svojoj stranici karijera pomoću blog modula Divi. Slobodno ostavite komentar u odjeljku za komentare ispod.