Cara Membuat Bagian Daftar Pekerjaan Karir Dinamis dengan Modul Blog Divi

Dalam tutorial Divi sebelumnya, kami telah menunjukkan kepada Anda cara membuat templat posisi pekerjaan terbuka yang sepenuhnya dinamis dengan Pembuat Tema Divi dan plugin Bidang Kustom Tingkat Lanjut. Dalam tutorial hari ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat secara dinamis menampilkan posisi pekerjaan terbuka di halaman karir Anda. Tutorial ini adalah lanjutan dari postingan template posisi lowongan kerja, jadi pastikan Anda membuat ulang template terlebih dahulu lalu kembali ke tutorial ini.

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Tata Letak Daftar Pekerjaan Karir Dinamis GRATIS

Untuk mendapatkan tata letak daftar pekerjaan karir dinamis 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 Halaman Karir

Tambahkan Halaman Baru & Beralih ke Visual Builder

Mulailah dengan membuat halaman baru, beri judul halaman Anda dan beralih ke Visual Builder.

2. Mulai Membangun Halaman Karir di Frontend

Tambahkan Bagian #1

Latar Belakang Gradien

Tambahkan bagian pertama ke halaman, buka pengaturan bagian dan gunakan latar belakang gradien.

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

Pembagi Bawah

Gunakan juga pembagi bagian bawah.

• Gaya Pembagi: Temukan di Daftar
• Tinggi Pembagi: 8vw
• Pembagi Horizontal Ulangi: 3x
• Pengaturan Pembagi: Isi Bagian Bawah

Jarak

Selesaikan pengaturan bagian dengan menambahkan beberapa bantalan bawah.

• Padding Bawah: 200px

Tambahkan Baris Baru

Struktur Kolom

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

Tambahkan Modul Teks ke Kolom

Tambahkan Konten H1

Tambahkan Modul Teks ke kolom baris dengan beberapa konten H1 pilihan Anda.

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

Tepat di bawah Modul Teks, tambahkan Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Ubah warna garis modul selanjutnya.

• Warna Garis: #ffffff

Perekat

Dan selesaikan pengaturan modul dengan mengubah pengaturan ukuran.

• Berat Pembagi: 8px
• Lebar: 30%

Tambahkan Bagian #2

Tambahkan bagian reguler lainnya ke halaman.

Tambahkan Baris Baru

Struktur Kolom

Tambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Tambahkan Modul Teks ke Kolom

Tambahkan Konten H2

Tambahkan Modul Teks ke kolom baris dan masukkan beberapa konten H2 pilihan Anda.

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: 2.3rem

Tambahkan Modul Pembagi ke Kolom

Visibilitas

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

• Tampilkan Pembagi: Ya

Garis

Ubah warna garis modul selanjutnya.

• Warna Garis: #ffa500

Perekat

Dan selesaikan pengaturan modul dengan mengubah berat pembagi dan lebar maksimal dalam pengaturan ukuran.

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

Tambahkan Modul Blog ke Kolom

Isi

Untuk menampilkan berbagai posisi pekerjaan terbuka, kami akan menggunakan Modul Blog yang akan kami sesuaikan dengan kebutuhan kami. Pastikan setelan konten berikut berlaku:

• Jenis Posting: Posting
• Sertakan Kategori: Pemasaran
• Panjang Kutipan: 150

Elemen

Dalam pengaturan elemen, hanya dua opsi yang kami aktifkan adalah yang berikut:

• Tampilkan Tombol Baca Selengkapnya: Ya
• Kutipan Pertunjukan: Ya

Tata Letak

Pindah ke tab desain modul dan pastikan Anda menggunakan tata letak lebar penuh.

• Tata letak: Lebar penuh

Pengaturan Teks Judul

Ubah juga pengaturan teks judul.

• Judul Judul Level: H3
• Judul Font: Montserrat
• Judul Teks Ukuran: 1.5rem

Pengaturan Teks Tubuh

Kemudian, ubah pengaturan teks isi.

• Font Tubuh: Raleway
• Ukuran Teks Tubuh: 1.1rem
• Tinggi Garis Tubuh: 2.1em

Baca Lebih Lanjut Pengaturan Teks

Seiring dengan pengaturan teks read more.

• Baca Selengkapnya Font: Montserrat
• Baca Lebih Lanjut Gaya Font: Huruf Besar
• Baca Selengkapnya Warna Teks: #ffffff
• Baca Lebih Lanjut Ukuran Teks: 1rem

Jarak

Tambahkan beberapa margin kustom dan nilai padding ke pengaturan spasi.

• Margin Kiri: 100px (Desktop), 50px (Tablet), 0px (Telepon)
• Padding Atas: 0px
• Padding Bawah: 0px

Baca Lebih Lanjut Tombol CSS

Dan selesaikan pengaturan modul dengan menambahkan beberapa tombol baca lebih lanjut CSS di tab lanjutan.

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

Baris Klon Sesering yang Dibutuhkan

Setelah Anda menyelesaikan baris dan semua modulnya, Anda dapat mengkloningnya sebanyak yang Anda inginkan, tergantung pada berapa banyak departemen yang dimiliki perusahaan Anda.

Ubah Konten Modul Teks

Pastikan Anda mengubah konten H2 dari setiap baris duplikat.

Ubah Kategori Modul Blog

Bersamaan dengan kategori Modul Blog.

Tambahkan Modul Kode ke Kolom Baris Terakhir

Masukkan Kode CSS untuk Menata Posisi Pekerjaan yang Terbuka Secara Individual

Untuk menyelesaikan desain, kita akan menambahkan Modul Kode ke baris terakhir di halaman kita dan menyisipkan baris kode CSS berikut:

<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. Simpan Desain Halaman & Lihat Hasil

Setelah Anda menyelesaikan desain halaman, Anda dapat menyimpan semua perubahan, keluar dari Visual Builder dan melihat hasilnya!

Pratinjau

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

Desktop

Seluler

Pikiran Akhir

Tutorial ini adalah lanjutan dari tutorial sebelumnya, di mana kami telah menunjukkan kepada Anda cara membuat template posisi pekerjaan terbuka. Dalam tutorial ini, kami telah melangkah lebih jauh dan kami telah menunjukkan kepada Anda bagaimana menampilkan posisi pekerjaan terbuka yang dinamis tersebut di halaman karir Anda menggunakan Modul Blog Divi. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, 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.