Î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.
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.
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
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
spaţierea
Completați parametrii secțiunii adăugând o umplutură inferioară.
- Garnitura de jos: 200px
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:
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.
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)
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
Ligne
Apoi schimbați linia culorii modulului.
- Culoarea liniei: #ffffff
dimensionarea
Și completați parametrii modulului modificând parametrii de dimensionare.
- Greutatea separatorului: 8px
- Lățime: 30%
Adăugați secțiunea # 2
Adăugați o altă secțiune obișnuită la pagină.
Adăugați o linie nouă
Structura coloanei
Adăugați o nouă linie la secțiune folosind următoarea structură a coloanei:
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.
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
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
Ligne
Apoi schimbați linia culorii modulului.
- Culoarea liniei: # ffa500
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
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
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
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ă
Setări text de titlu
De asemenea, modificați setările textului titlului.
- Nivelul titlului: H3
- Titlul fontului: Montserrat
- Dimensiunea textului titlului: 1.5rem
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
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
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
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;
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.
Editați categoriile de module de blog
Cu categoriile modulului Blog.
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>
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.
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.
salut, sunt la partea în care trebuie să inserați cod, dar când salvez și merg pe site, stilul nu este aplicat și codul apare online fără etichetele de stil. Vă mulțumesc pentru ajutor.
Bună ziua!