În tutorialul de astăzi, vă vom arăta cum puteți afișa dinamic posturile vacante pe pagina dvs. Cariere. Să începem.

Prezentare generală a rezultatelor

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Lista de cariere divi modul blog

1. Creați o pagină de cariere

Adăugați o pagină nouă și treceți la Visual Builder

Începeți prin a crea o pagină nouă, acordați-vă unui titlu paginii dvs. și mergeți la Visual Builder.

Creați o pagină de carieră divi

2. Începeți să creați pagina Cariere pe frontend

Adăugați prima secțiune

Fundal gradient

Adăugați prima secțiune la pagină, deschideți setările secțiunii și utilizați un fundal de gradient.

  • Culoarea 1: # ff6600
  • Culoarea 2: # fbff30
  • Direcția gradientului: 126deg
Creați o secțiune cu un fundal de gradient

Divizor inferior

De asemenea, utilizați un divizor de secțiune inferioară.

  • Stil de separare: căutați în listă
  • Înălțimea divizorului: 8vw
  • Repetarea orizontală a divizorului: 3x
  • Aranjarea separatoarelor: sub cuprins a secțiunii
Reglarea secțiunii Divi

spaţierea

Completați parametrii secțiunii adăugând o umplutură inferioară.

  • Garnitura de jos: 200px
Distanțarea inferioară a secțiunii Divi

Adăugați o linie nouă

Structura coloanei

Continuați să adăugați o nouă linie la secțiune utilizând următoarea structură a coloanei:

Alegeți aspectul divi

Adăugați un modul text la coloană

Adăugați conținut H1

Adăugați un modul de text la coloana de rând cu cuprins H1 la alegere.

Adăugați secțiunea text

Setări text H1

Treceți la fila de proiectare a modulului și modificați setările de text H1 în consecință:

  • Titlul fontului: Montserrat
  • Greutatea fontului din titlu: grea
  • Culoarea textului antetului: #ffffff
  • Dimensiune text antet: 8rem (desktop), 4rem (tabletă), 2.5rem (telefon)
Personalizare text Divi

Adăugați un modul de separare în coloană

vizibilitate

Chiar sub modulul text, adăugați un modul separator. Asigurați-vă că este activată opțiunea „Afișați separatorul”.

  • Afișare separator: Da
Adăugați un modul separator

Ligne

Apoi schimbați linia culorii modulului.

  • Culoarea liniei: #ffffff
Personalizarea culorii modulului separator Divi

dimensionarea

Și completați parametrii modulului modificând parametrii de dimensionare.

  • Greutatea separatorului: 8px
  • Lățime: 30%
Lățimea separatorului Divi

Adăugați secțiunea # 2

Adăugați o altă secțiune obișnuită la pagină.

Adăugați secțiunea normală divi

Adăugați o linie nouă

Structura coloanei

Adăugați o nouă linie la secțiune folosind următoarea structură a coloanei:

cariere dinamice

Adăugați un modul text la coloană

Adăugați conținut H2

Adăugați un modul de text în coloana de rând și inserați text cuprins H2 la alegere.

Adăugați un modul de text divi

Setări text H2

Modificați parametrii text H2 ai modulului după cum urmează:

  • Titlul 2 Poliție: Montserrat
  • Postul 2 Greutatea poliței: grea
  • Culoarea textului articolului 2: # ffa500
  • Titlul 2 Dimensiunea textului: 2.3rem
Personalizare secțiune culoare text divi

Adăugați un modul de separare în coloană

vizibilitate

Următorul modul de care avem nevoie în această coloană este un modul de separare. Asigurați-vă că este activată opțiunea „Afișați separatorul”.

  • Afișare separator: Da
Adăugați separator divi

Ligne

Apoi schimbați linia culorii modulului.

  • Culoarea liniei: # ffa500
Personalizați separatorul de culori divi

dimensionarea

Și completați parametrii modulului modificând greutatea divizorului și lățimea maximă a parametrilor de dimensionare.

  • Greutatea separatorului: 6px
  • Lățimea maximă: 80 px
Configurare separator

Adăugați un modul de blog în coloană

Conținut

Pentru a afișa diferitele posturi vacante, vom folosi un modul de blog pe care îl vom personaliza în funcție de nevoile noastre. Asigurați-vă că se aplică următoarele setări de conținut:

  • Tipul mesajului: Mesaje
  • Includeți categorii: Marketing
  • Lungimea extrasului: 150
Adăugați un modul de blog

Element

În parametrii elementelor, singurele două opțiuni pe care le activăm sunt următoarele:

  • Afișează mai mult buton: Da
  • Extras din emisiune: Da
Configurarea modulului blogului Divi 1

Dispoziţie

Treceți la fila de proiectare a modulului și asigurați-vă că utilizați un aspect cu lățime completă.

  • Aspect: lățime completă
Configurarea aspectului modulului de blog 1

Setări text de titlu

De asemenea, modificați setările textului titlului.

  • Nivelul titlului: H3
  • Titlul fontului: Montserrat
  • Dimensiunea textului titlului: 1.5rem
Configurare text modul blog

Setări text corp

Apoi schimbați setările textului corpului.

  • Corpul Poliției: Raleway
  • Dimensiunea corpului textului: 1.1rem
  • Înălțimea liniei corporale: 2.1em
Configurarea fontului modulului blog

Aflați mai multe Setări text

Cu setările textului aflați mai multe.

  • Citește mai mult Poliție: Montserrat
  • Aflați mai multe Stiluri de caractere: Capital
  • Aflați mai multe Culoarea textului: #ffffff
  • Citiți mai multe Dimensiunea textului: 1rem
Configurare citiți mai multe blog modulul 1

spaţierea

Adăugați marje personalizate și valori de umplere la setările de spațiere.

  • Marja stângă: 100px (desktop), 50px (tabletă), 0px (telefon)
  • Garnitură superioară: 0px
  • Garnitura de jos: 0px
Configurarea spațiului

Aflați mai multe Button CSS

Și completați setările modulului adăugând butoane de redare CSS în fila avansată.

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

Modul de blog cod personalizat

Clonați linia de câte ori este necesar

După ce ați finalizat linia și toate modulele sale, o puteți clona de câte ori doriți, în funcție de numărul de departamente din compania dvs.

Editați conținutul modulului text

Asigurați-vă că editați conținutul H2 al fiecărei linii duplicate.

Modificarea conținutului textului divi

Editați categoriile de module de blog

Cu categoriile modulului Blog.

cariere dinamice

Adăugați un modul de cod la coloana ultimei linii

Introduceți cod CSS pentru stilizarea stațiilor de lucru individuale deschise

Pentru a termina proiectarea, vom adăuga un modul de cod pe ultima linie a paginii noastre și vom introduce următoarele linii de cod 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>

Adaugă cod css divi

3. Salvați designul paginii și afișați rezultatul

După ce ați terminat de proiectat pagina, puteți salva toate modificările, ieșiți din Visual Builder și vizualizați rezultatul!

Rezultat final

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.

Rezultat final

Ultimele gânduri

În acest tutorial, v-am arătat cum să prezentați aceste articole dinamice și deschise pe Pagina dvs. Cariere folosind modulul Blog al Divi. Simțiți-vă liber să lăsați un comentariu în secțiunea de comentarii de mai jos.