Cum să creați un șablon de postare de deschidere dinamică a jobului cu Divi's Theme Builder și ACF

Când utilizați Divi Theme Builder în combinație cu conținut dinamic, veți găsi rapid înlocuirea pluginurilor cu șabloane auto-realizate. În tutorialul de astăzi, vă vom arăta cum să creați un șablon de postare complet deschis dinamic, folosind Divi Theme Builder și un grup de câmpuri ACF. Acest șablon de postare dinamică pentru deschiderea jobului este complet personalizabil și veți putea descărca gratuit fișierul JSON!

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 șablonul Post de deschidere a postului

Pentru a pune mâna pe șablonul postului de deschidere a locului de muncă gratuit, 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 categorii de postări

Accesați Categorii de postări

Prima parte a creării șablonului de poziție de post deschis este adăugarea de noi categorii de postări pe care le veți folosi pentru posturile de posturi deschise pe care le adăugați. Accesați categoriile de postări din tabloul de bord WordPress.

Adăugați categorii de posturi deschise

Adăugați o categorie părinte și o categorie separată pentru fiecare departament.

• Deschiderea locului de muncă
  • Comunicări
  • Proiecta
  • Dezvoltare
  • Marketing
  • ...

2. Instalați câmpurile ACF & Setup Project

Instalați și activați ACF

Continuați instalând și activând pluginul gratuit Advanced Custom Fields.

Configurați grupul de câmpuri

Configurați un grup de câmpuri noi accesând tabloul de bord WordPress> Câmpuri personalizate> Adăugați un nou .

Vrem ca grupul de câmpuri să apară exclusiv în postările care fac parte din categoria părinte pe care am adăugat-o în partea anterioară a acestui tutorial. Pentru aceasta, asigurați-vă că următoarele reguli se aplică grupului de câmpuri:

• Tipul de postare este egal cu Postarea și
• Categoria de postare este egală cu deschiderea locului de muncă

Adăugați câmpuri

Odată ce grupul de câmpuri a fost creat, este timpul să adăugați diferitele câmpuri. Pentru a recrea exact același șablon ca în previzualizarea acestui tutorial, veți avea nevoie de următoarele câmpuri personalizate:

• Responsabilități
  • Etichetă de teren: Responsabilități
  • Tipul câmpului: zonă de text
• Experiență necesară
  • Etichetă de câmp: Experiență necesară
  • Tipul câmpului: Editor Wysiwyg
• Aptitudini necesare
  • Etichetă de câmp: Abilități necesare
  • Tipul câmpului: Editor Wysiwyg
• Calificări bonus
  • Etichetă de câmp: Calificări bonus
  • Tipul câmpului: Editor Wysiwyg
• Locație
  • Etichetă câmp: Locație
  • Tipul câmpului: Text
• Tipul postului
  • Etichetă de câmp: Tipul de job
  • Tipul câmpului: Casetă de selectare
  • Opțiuni: Full-time + Part-time + Freelance (linie nouă pentru fiecare alegere)
• Aplicați redirecționarea
  • Etichetă câmp: aplicați redirecționarea
  • Tipul câmpului: URL

3. Adăugați o postare nouă pe blog

Adăugați titlul poziției de post deschis, scurtă descriere și categorii

După ce ați completat grupul de câmpuri personalizate și toate câmpurile acestuia, este timpul să creați un eșantion de post de post deschis. Introduceți titlul, descrierea postului și selectați categoriile.

Completați toate câmpurile personalizate

Continuați completând toate câmpurile personalizate.

4. Creați un șablon nou

Accesați Divi Theme Builder și adăugați un șablon nou

Odată ce eșantionul de postare pe blog este la locul său, este timpul să creați șablonul de poziție deschisă a postului! Pentru aceasta, navigați la Divi Theme Builder și faceți clic pe „Adăugați un șablon nou”.

Utilizați Activat

Utilizați șablonul pentru postări din categoria Deschiderea locului de muncă.

5. Începeți construirea corpului șablonului

Acum, începeți să creați designul făcând clic pe „Adăugați corp personalizat” și selectând „Construiți corp personalizat”. Aceasta vă va redirecționa către editorul de șabloane.

Sectiunea 1

Fundal de gradient

În editorul de șabloane Divi, veți observa o secțiune. Deschideți acea secțiune și adăugați un fundal de gradient.

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

Separator inferior

Adăugați un separator inferior în secțiunea următoare.

• Stil divizor: găsiți în listă
• Înălțimea împărțitorului: 8vw
• Aranjament divizor: Conținutul sub secțiune

Spațiere

Și includeți și câteva căptușeli de fund.

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

Adăugați rândul # 1

Structura coloanei

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

Adăugați Blurb Module la coloana 1

Conținut dinamic

E timpul să începeți să adăugați module! Primul modul de care avem nevoie în coloana 1 este un modul Blurb. Selectați conținutul dinamic de locație pentru caseta de titlu și lăsați caseta de conținut goală.

• Titlu: Locație

Selectați pictograma

Continuați selectând o pictogramă.

Setări pictograme

Treceți la fila de proiectare și modificați setările pictogramei după cum urmează:

• Culoare pictogramă: #ffffff
• Plasare imagine / pictogramă: stânga
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 25 px

Setări text titlu

Modificați și setările de text H3.

• Titlu Nivel antet: H3
• Titlu Font: Lato
• Culoarea textului titlului: #ffffff
• Dimensiune text titlu: 1.4rem

Animaţie

În cele din urmă, eliminați animația pictogramei din setările animației.

• Animație imagine / pictogramă: fără animație

Clonați modulul Blurb și plasați duplicatul în coloana 2

După ce ați finalizat modulul Blurb din coloana 1, îl puteți clona o dată și plasa duplicatul în a doua coloană.

Schimbați conținutul și pictograma dinamice

Asigurați-vă că modificați conținutul dinamic al titlului împreună cu pictograma.

• Titlu: Tipul locului de muncă

Adăugați un modul buton la coloana 3

Adăugați o copie

În ultima coloană, adăugați un modul buton. Adăugați o copie la alegere.

Link dinamic

Selectați linkul de redirecționare aplicabil dinamic în continuare.

• Adresa URL a butonului: aplicați redirecționarea
• Buton Link Link: În fila nouă

Aliniere

Treceți la fila de proiectare a modulului și schimbați alinierea pe diferite dimensiuni de ecran.

• Aliniere buton: Dreapta (Desktop), Stânga (Tabletă și telefon)

Setări buton

Stilează și butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1rem
• Culoarea textului butonului: # ff6600
• Culoarea fundalului butonului: #ffffff
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 100 px
• Buton Font: Montserrat
• Stilul fontului butonului: majuscule

Spațiere

Și completați setările modulului prin adăugarea unor valori de umplere personalizate la setările de spațiere.

• Căptușeală superioară: 15 px
• Căptușeală inferioară: 15 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Adăugați rândul # 2

Structura coloanei

Trecem la rândul următor! Alegeți următoarea structură de coloane:

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

Conținut dinamic

Adăugați un nou modul de text în coloană și selectați conținutul dinamic al titlului postării.

• Conținut dinamic: titlu de postare / arhivă

• Înainte: <H1>
• După: </H1>

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

Următorul modul de care avem nevoie este 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

Modificați și setările de dimensionare.

• Greutatea divizorului: 8 px
• Lățime: 30%
• Alinierea modulului: stânga

Adăugați secțiunea 2

Spațiere

Treci la următoarea secțiune! Eliminați toate umpluturile implicite de sus.

• Căptușeală de sus: 0 px

Adăugați rândul # 1

Structura coloanei

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

Spațiere

Deschideți setările de rând și eliminați umplutura de sus implicită.

• Căptușeală de sus: 0 px

Adăugați un modul de conținut pentru postare în coloană

Culoare de fundal

Adăugați un modul de conținut de postare pe rând și schimbați culoarea de fundal în alb.

• Culoare fundal: #ffffff

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Raleway
• Dimensiune text: 1.1rem
• Înălțimea liniei textului: 2.1em

Spațiere

În continuare, jucați cu valorile de spațiere pe diferite dimensiuni ale ecranului.

• Marja superioară: -300px
• Căptușeală superioară: 100 px (desktop), 50 px (tabletă și telefon)
• Căptușeală inferioară: 100 px (desktop), 50 px (tabletă și telefon)
• Căptușeală stângă: 100 px (desktop), 50 px (tabletă și telefon)
• Căptușeală dreaptă: 100 px (desktop), 50 px (tabletă și telefon)

Frontieră

Adăugați și o rază de margine.

• Toate colțurile: 20 px

Box Shadow

Și completați setările modulului adăugând o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0.09)

Adăugați rândul # 2

Structura coloanei

Adăugați un alt rând folosind următoarea structură de coloane:

Adăugați modulul de text nr. 1 în coloană

Adăugați conținut H2

Adăugați un modul de text în coloana rândului cu un conținut H2.

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: 1,5rem

Adăugați modulul divizor în coloană

Vizibilitate

Următorul modul de care avem nevoie este un modul divizor. Asigurați-vă că modulul „Afișează divizorul” este activat.

• Show Divider: Da

Linia

Schimbați culoarea liniei modulului în continuare.

• Culoare linie: # ffa500

Dimensionare

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

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

Adăugați modulul de text nr. 2 în coloană

Conținut dinamic

Următorul și ultimul modul de care avem nevoie în această coloană este un alt modul de text. Selectați conținutul dinamic relevant.

• Conținut dinamic: experiență necesară

Asigurați-vă că activați HTML brut.

• Activați HTML Raw: Da

Setări text

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

• Font text: Raleway
• Dimensiune text: 1.1rem

Setări text de listă neordonate

Modificați și înălțimea liniei de listă neordonate.

• Înălțime linie de listă neordonată: 2.3em

Spațiere

Apoi, accesați setările de spațiere și adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 50 px
• Căptușeală inferioară: 50 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Frontieră

Adăugați și o rază de margine.

• Toate colțurile: 20 px

Box Shadow

Și completați setările modulului adăugând o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0.09)

Adăugați rândul # 3

Structura coloanei

Pe ultimul rând! Utilizați următoarea structură de coloane:

Clonați module în coloana 2 de două ori și plasați duplicatele în coloanele 1 și 2 din rândul nou

Clonați de două ori modulele pe care le-ați adăugat la rândul anterior și plasați duplicatele în noul rând.

Modificați textul modulului # 1 Copiați

Asigurați-vă că modificați copia H2 a fiecărui modul de text duplicat.

Modificați conținutul dinamic al modulului de text nr. 2

Împreună cu conținutul dinamic.

• Conținut dinamic: abilități necesare

• Conținut dinamic: calificări bonus

Din nou, asigurați-vă că HTML-ul brut este activat pentru ambele module de text care conțin conținut dinamic.

• Activați codul HTML brut: Da

6. Salvați modificările constructorului de teme și vedeți rezultatul

Odată ce ați completat corpul șablonului, puteți salva toate modificările constructorului de teme și puteți vizualiza rezultatul pe eșantionul de post de post deschis!

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

În această postare, v-am arătat cum să creați un șablon de poziție deschisă dinamic și complet personalizabil, folosind Divi Theme Builder și pluginul ACF. Am folosit doar conținut dinamic în șablonul nostru de postare, ceea ce face ca adăugarea unor viitoare posturi deschise de locuri de muncă pe site-ul dvs. web să fie fără efort. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări, 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.