Cara Membuat Template Posting Pembukaan Pekerjaan Dinamis dengan Divi's Theme Builder & ACF

Saat Anda menggunakan Divi Theme Builder dalam kombinasi dengan konten dinamis, Anda akan segera menemukan diri Anda mengganti plugin dengan template buatan sendiri. Dalam tutorial hari ini, kami akan menunjukkan kepada Anda cara membuat templat posting lowongan kerja yang sepenuhnya dinamis menggunakan Divi Theme Builder dan grup bidang ACF. Templat posting lowongan pekerjaan dinamis ini sepenuhnya dapat disesuaikan dan Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Posting Pembukaan Pekerjaan GRATIS

Untuk mendapatkan template lowongan pekerjaan gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Tambahkan Kategori Posting

Pergi ke Kategori Posting

Bagian pertama dari pembuatan template posisi pekerjaan terbuka adalah menambahkan kategori posting baru yang akan Anda gunakan untuk posisi pekerjaan terbuka yang Anda tambahkan. Buka kategori posting di dalam dasbor WordPress Anda.

Tambahkan Kategori Posisi Pekerjaan Terbuka

Tambahkan kategori induk dan kategori terpisah untuk setiap departemen.

• Lowongan pekerjaan
  • Komunikasi
  • Desain
  • Perkembangan
  • Pemasaran
  • …

2. Instal Bidang Proyek ACF & Setup

Instal & Aktifkan ACF

Lanjutkan dengan menginstal dan mengaktifkan plugin Bidang Kustom Tingkat Lanjut gratis.

Siapkan Grup Bidang

Siapkan grup bidang baru dengan membuka Dasbor WordPress > Bidang Khusus > Tambah Baru .

Kami ingin grup bidang muncul secara eksklusif pada posting yang merupakan bagian dari kategori induk yang kami tambahkan di bagian sebelumnya dari tutorial ini. Untuk melakukannya, pastikan aturan berikut berlaku untuk grup bidang:

• Jenis Postingan sama dengan Posting dan
• Kategori Postingan sama dengan Job Opening

Tambahkan Bidang

Setelah grup bidang dibuat, saatnya untuk menambahkan bidang yang berbeda. Untuk membuat ulang template yang sama persis seperti di pratinjau tutorial ini, Anda memerlukan bidang khusus berikut:

• tanggung jawab
  • Label Bidang: Tanggung Jawab
  • Jenis Bidang: Area Teks
• Pengalaman yang dibutuhkan
  • Label Bidang: Pengalaman yang dibutuhkan
  • Jenis Bidang: Editor Wysiwyg
• Keterampilan yang dibutuhkan
  • Label Bidang: Keterampilan yang diperlukan
  • Jenis Bidang: Editor Wysiwyg
• Kualifikasi bonus
  • Label Bidang: Kualifikasi bonus
  • Jenis Bidang: Editor Wysiwyg
• Lokasi
  • Label Bidang: Lokasi
  • Jenis Bidang: Teks
• Jenis pekerjaan
  • Label Bidang: Jenis pekerjaan
  • Jenis Bidang: Kotak centang
  • Pilihan: Penuh waktu + Paruh waktu + Freelance (baris baru untuk setiap pilihan)
• Terapkan pengalihan
  • Label Bidang: Terapkan pengalihan
  • Jenis Bidang: Url

3. Tambahkan Postingan Blog Baru

Tambahkan Judul Posisi Pekerjaan Terbuka, Deskripsi Singkat & Kategori

Setelah Anda menyelesaikan grup bidang khusus dan semua bidangnya, saatnya untuk membuat contoh posting posisi pekerjaan terbuka. Masukkan judul, deskripsi pekerjaan dan pilih kategori.

Isi Semua Bidang Kustom

Lanjutkan dengan melengkapi semua bidang khusus.

4. Buat Template Baru

Buka Divi Theme Builder & Tambahkan Template Baru

Setelah contoh posting blog Anda siap, saatnya untuk membuat template posisi pekerjaan terbuka! Untuk melakukannya, navigasikan ke Divi Theme Builder dan klik 'Tambahkan Template Baru'.

Digunakan pada

Gunakan template pada posting dalam kategori Pembukaan Pekerjaan.

5. Mulai Membangun Tubuh Template

Sekarang, mulailah membuat desain dengan mengklik 'Add Custom Body' dan pilih 'Build Custom Body'. Ini akan mengarahkan Anda ke editor template.

Bagian 1

Latar Belakang Gradien

Di dalam editor template Divi, Anda akan melihat sebuah bagian. Buka bagian itu dan tambahkan latar belakang gradien.

• Warna 1: #ff6600
• Warna 2: #fbff30
• Arah Gradien: 126deg

Pembagi Bawah

Tambahkan pembagi bawah ke bagian berikutnya.

• Gaya Pembagi: Temukan dalam daftar
• Tinggi Pembagi: 8vw
• Pengaturan Pembagi: Isi Bagian Bawah

Jarak

Dan sertakan beberapa bantalan bawah juga.

• Padding Bawah: 400px

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Tambahkan Modul Blurb ke Kolom 1

Konten Dinamis

Saatnya mulai menambahkan modul! Modul pertama yang kita butuhkan di kolom 1 adalah Modul Blurb. Pilih konten dinamis lokasi untuk kotak judul dan biarkan kotak konten kosong.

• Judul: Lokasi

Pilih Ikon

Lanjutkan dengan memilih ikon.

Pengaturan Ikon

Pindah ke tab desain dan ubah pengaturan ikon sebagai berikut:

• Warna Ikon: #ffffff
• Penempatan Gambar/Ikon: Kiri
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 25px

Pengaturan Teks Judul

Ubah juga pengaturan teks H3.

• Judul Judul Level: H3
• Judul Font: Lato
• Warna Teks Judul: #ffffff
• Judul Teks Ukuran: 1.4rem

Animasi

Terakhir, hapus animasi ikon di pengaturan animasi.

• Gambar/Ikon Animasi: Tanpa Animasi

Clone Blurb Module & Tempatkan Duplikat di Kolom 2

Setelah Anda menyelesaikan Modul Blurb di kolom 1, Anda dapat mengkloningnya sekali dan menempatkan duplikatnya di kolom kedua.

Ubah Konten & Ikon Dinamis

Pastikan Anda mengubah konten dinamis judul beserta ikonnya.

• Judul: Jenis pekerjaan

Tambahkan Modul Tombol ke Kolom 3

Tambahkan Salinan

Di kolom terakhir, tambahkan Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Tautan Dinamis

Pilih tautan penerapan pengalihan dinamis berikutnya.

• URL Tautan Tombol: Terapkan pengalihan
• Target Tautan Tombol: Di Tab Baru

Penyelarasan

Pindah ke tab desain modul dan ubah perataan di berbagai ukuran layar.

• Penjajaran Tombol: Kanan (Desktop), Kiri (Tablet & Ponsel)

Pengaturan Tombol

Gaya tombol juga.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1rem
• Warna Teks Tombol: #ff6600
• Warna Latar Tombol: #ffffff
• Lebar Batas Tombol: 0px

• Radius Batas Tombol: 100px
• Font Tombol: Montserrat
• Gaya Font Tombol: Huruf Besar

Jarak

Dan selesaikan pengaturan modul dengan menambahkan beberapa nilai padding khusus ke pengaturan spasi.

• Padding Atas: 15px
• Padding Bawah: 15px
• Padding Kiri: 50px
• Padding Kanan: 50px

Tambahkan Baris #2

Struktur Kolom

Ke baris berikutnya! Pilih struktur kolom berikut:

Tambahkan Modul Teks ke Kolom

Konten Dinamis

Tambahkan Modul Teks baru ke kolom dan pilih konten dinamis judul posting.

• Konten Dinamis: Judul Postingan/Arsip

• Sebelum: <H1>
• Setelah: </H1>

Pengaturan Teks H1

Pindah ke tab desain modul dan ubah pengaturan teks H1 yang sesuai:

• Font Judul: Montserrat
• Berat Huruf Judul: Berat
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 8rem (Desktop), 4rem (Tablet), 2.5rem (Telepon)

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Modul selanjutnya yang kita butuhkan adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Ubah warna garis modul selanjutnya.

• Warna Garis: #ffffff

Perekat

Ubah juga pengaturan ukuran.

• Berat Pembagi: 8px
• Lebar: 30%
• Penyelarasan Modul: Kiri

Tambahkan Bagian #2

Jarak

Ke bagian berikutnya! Hapus semua padding atas default.

• Padding Atas: 0px

Tambahkan Baris #1

Struktur Kolom

Tambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Jarak

Buka pengaturan baris dan hapus padding atas default.

• Padding Atas: 0px

Tambahkan Modul Konten Posting ke Kolom

Warna latar belakang

Tambahkan Modul Konten Posting ke baris dan ubah warna latar belakang menjadi putih.

• Warna Latar Belakang: #ffffff

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Raleway
• Ukuran Teks: 1.1rem
• Tinggi Baris Teks: 2.1em

Jarak

Bermain-main dengan nilai spasi di berbagai ukuran layar berikutnya.

• Margin Atas: -300px
• Padding Atas: 100px (Desktop), 50px (Tablet & Ponsel)
• Padding Bawah: 100px (Desktop), 50px (Tablet & Ponsel)
• Padding Kiri: 100px (Desktop), 50px (Tablet & Ponsel)
• Padding Kanan: 100px (Desktop), 50px (Tablet & Ponsel)

Berbatasan

Tambahkan beberapa radius perbatasan juga.

• Semua Sudut: 20px

Bayangan Kotak

Dan selesaikan pengaturan modul dengan menambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.09)

Tambahkan Baris #2

Struktur Kolom

Tambahkan baris lain menggunakan struktur kolom berikut:

Tambahkan Modul Teks #1 ke Kolom

Tambahkan Konten H2

Tambahkan Modul Teks ke kolom baris dengan beberapa konten H2.

Pengaturan Teks H2

Ubah pengaturan teks H2 modul sebagai berikut:

• Judul 2 Font: Montserrat
• Judul 2 Berat Font: Berat
• Judul 2 Warna Teks: #ffa500
• Judul 2 Ukuran Teks: 1.5rem

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Modul selanjutnya yang kita butuhkan adalah Modul Pembagi. Pastikan modul 'Show Divider' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Ubah warna garis modul selanjutnya.

• Warna Garis: #ffa500

Perekat

Dan selesaikan pengaturan modul dengan bermain-main dengan pengaturan ukuran.

• Berat Pembagi: 6px
• Lebar Maks: 80px

Tambahkan Modul Teks #2 ke Kolom

Konten Dinamis

Modul berikutnya dan terakhir yang kita butuhkan di kolom ini adalah Modul Teks lainnya. Pilih konten dinamis yang relevan.

• Konten Dinamis: Pengalaman yang dibutuhkan

Pastikan Anda mengaktifkan HTML mentah.

• Aktifkan HTML Mentah: Ya

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks yang sesuai:

• Font Teks: Raleway
• Ukuran Teks: 1.1rem

Pengaturan Teks Daftar Tidak Terurut

Ubah juga tinggi baris daftar yang tidak berurutan.

• Tinggi Baris Daftar Tidak Terurut: 2.3em

Jarak

Lalu, buka pengaturan spasi dan tambahkan beberapa nilai padding khusus.

• Padding Atas: 50px
• Padding Bawah: 50px
• Padding Kiri: 50px
• Padding Kanan: 50px

Berbatasan

Tambahkan beberapa radius perbatasan juga.

• Semua Sudut: 20px

Bayangan Kotak

Dan selesaikan pengaturan modul dengan menambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.09)

Tambahkan Baris #3

Struktur Kolom

Ke baris terakhir! Gunakan struktur kolom berikut:

Kloning Modul di Kolom 2 Dua Kali & Tempatkan Duplikat di Kolom 1 & 2 Baris Baru

Kloning modul yang telah Anda tambahkan ke baris sebelumnya dua kali dan tempatkan duplikatnya di baris baru.

Ubah Modul Teks #1 Salin

Pastikan Anda mengubah salinan H2 dari setiap Modul Teks duplikat.

Ubah Modul Teks #2 Konten Dinamis

Seiring dengan konten dinamis.

• Konten Dinamis: Keterampilan yang diperlukan

• Konten Dinamis: Kualifikasi bonus

Sekali lagi, pastikan HTML mentah diaktifkan untuk kedua Modul Teks yang berisi konten dinamis.

• Aktifkan HTML mentah: Ya

6. Simpan Perubahan Pembuat Tema & Lihat Hasil

Setelah Anda menyelesaikan badan template, Anda dapat menyimpan semua perubahan pembuat tema dan melihat hasilnya pada contoh posting posisi pekerjaan terbuka Anda!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat templat posisi pekerjaan terbuka yang dinamis dan dapat disesuaikan sepenuhnya menggunakan Divi Theme Builder dan plugin ACF. Kami hanya menggunakan konten dinamis di template posting kami, yang membuat penambahan posisi pekerjaan terbuka di masa mendatang ke situs web Anda menjadi mudah. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.