Cum să creați o secțiune dinamică de listare a posturilor de muncă cu modulul Blogului Divi

Într-un tutorial anterior Divi, v-am arătat cum să creați un șablon de poziție deschisă complet dinamic, cu Divi's Theme Builder și pluginul Advanced Custom Fields. În tutorialul de astăzi, vă vom arăta cum puteți prezenta dinamic pozițiile de locuri de muncă deschise pe pagina dvs. despre cariere. Acest tutorial este o continuare a postului de șablon pentru poziția de lucru deschis, deci asigurați-vă că recreați mai întâi șablonul și apoi reveniți la acest tutorial.

Să ajungem la asta.

previzualizare

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

Desktop

Mobil

Descărcați GRATUIT schema de listare a posturilor de muncă din dinamică

Pentru a vă pune mâna pe aspectul gratuit al listării posturilor din cariera dinamică, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

1. Adăugați pagina Cariere

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

Începeți prin crearea unei noi pagini, acordând titlului paginii dvs. și trecând la Visual Builder.

2. Începeți construirea paginii Cariere pe Frontend

Adăugați secțiunea nr. 1

Fundal de gradient

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

• Culoare 1: # ff6600
• Culoare 2: # fbff30
• Direcția gradientului: 126deg

Separator inferior

Folosiți și un separator de secțiune de jos.

• Stil divizor: Găsiți în listă
• Înălțimea împărțitorului: 8vw
• Repartitor orizontal Repetare: 3x
• Aranjament divizor: Conținutul sub secțiune

Spațiere

Completați setările secțiunii adăugând niște umplutură de jos.

• Căptușeală inferioară: 200 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

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

Adăugați conținut H1

Adăugați un modul de text în coloana rândului cu un conținut 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ță:

• Titlu Font: Montserrat
• Greutatea fontului antet: greu
• Culoare text antet: #ffffff
• Dimensiune text antet: 8rem (desktop), 4rem (tabletă), 2,5rem (telefon)

Adăugați modulul divizor în coloană

Vizibilitate

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

• Show Divider: Da

Linia

Schimbați culoarea liniei modulului în continuare.

• Culoare linie: #ffffff

Dimensionare

Și completați setările modulului modificând setările de dimensionare.

• Greutatea divizorului: 8 px
• Lățime: 30%

Adăugați secțiunea 2

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

Adăugați un rând nou

Structura coloanei

Adăugați un rând nou la secțiune folosind următoarea structură de coloane:

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

Adăugați conținut H2

Adăugați un modul de text în coloana rândului și introduceți un conținut H2 la alegere.

Setări text H2

Modificați setările de text H2 ale modulului după cum urmează:

• Rubrica 2 Font: Montserrat
• Rubrica 2 Greutate font: Greu
• Rubrica 2 Culoarea textului: # ffa500
• Rubrica 2 Dimensiune text: 2.3rem

Adăugați modulul divizor în coloană

Vizibilitate

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

• Show Divider: Da

Linia

Modificați culoarea liniei modulului în continuare.

• Culoare linie: # ffa500

Dimensionare

Și completați setările modulului modificând greutatea separatorului și lățimea maximă în setările de dimensionare.

• Greutatea divizorului: 6 px
• Lățime maximă: 80 px

Adăugați modulul Blog în coloană

Conţinut

Pentru a afișa diferitele posturi de lucru deschise, 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 postării: Postări
• Includeți categorii: Marketing
• Lungime extras: 150

Elemente

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

• Afișează butonul Citește mai mult: Da
• Afișați extras: Da

Aspect

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 titlu

Modificați și setările pentru textul titlului.

• Titlu Nivel antet: H3
• Titlu Font: Montserrat
• Dimensiune text titlu: 1.5rem

Setări text corp

Apoi, modificați setările pentru textul corpului.

• Font corp: Raleway
• Dimensiunea textului corpului: 1.1rem
• Înălțimea liniei corpului: 2.1em

Citiți mai multe setări de text

Împreună cu citirea mai multor setări de text.

• Citește mai mult Font: Montserrat
• Citește mai mult Stilul fontului: majuscule
• Citește mai mult Culoare text: #ffffff
• Citește mai mult Dimensiune text: 1rem

Spațiere

Adăugați câteva valori de marjă și umplere personalizate la setările de spațiere.

• Marja stângă: 100 px (desktop), 50 px (tabletă), 0 px (telefon)
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Citiți mai multe Buton CSS

Și completați setările modulului adăugând câteva butoane de citit mai multe 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 rândul de câte ori este necesar

După ce ați completat rândul și toate modulele sale, îl puteți clona de câte ori doriți, în funcție de câte departamente are compania dvs.

Schimbați conținutul modulului text

Asigurați-vă că modificați conținutul H2 al fiecărui rând duplicat.

Schimbați categoriile modulului blogului

Împreună cu categoriile Blog Module.

Adăugați un modul de cod în coloana ultimului rând

Introduceți codul CSS pentru a stiliza posturile deschise individual

Pentru a finaliza proiectarea, vom adăuga un modul de cod la ultimul rând de pe pagina noastră ș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 proiectarea paginii și vizualizați rezultatul

După ce ați finalizat proiectarea paginii, puteți salva toate modificările, ieși din Visual Builder și vizualiza rezultatul!

previzualizare

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

Desktop

Mobil

Gânduri finale

Acest tutorial este o continuare a unui tutorial anterior, în care v-am arătat cum să creați un șablon de poziție de lucru deschis. În acest tutorial, am făcut un pas mai departe și v-am arătat cum să prezentați acele posturi dinamice deschise de locuri de muncă pe pagina carierelor dvs., folosind modulul Blog Divi. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.