Dalam tutorial hari ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat secara dinamis menampilkan lowongan di halaman Karier Anda. Ayo mulai.

Ikhtisar hasil

Sebelum kita menyelami tutorialnya, mari kita lihat sekilas hasil pada ukuran layar yang berbeda.

1. Buat halaman Karir

Tambahkan halaman baru dan beralih ke Pembuat Visual

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

2. Mulai buat halaman Karir di frontend

Tambahkan bagian pertama

Latar belakang gradien

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

• Warna 1: # ff6600
• Warna 2: # fbff30
• Arah gradien: 126 derajat

Pembagi lebih rendah

Juga gunakan pembagi bagian bawah.

• Gaya pemisahan: Cari dalam daftar
• Tinggi pembagi: 8vw
• Pengulangan horizontal pembagi: 3x
• Susunan pembagi: di bawah isi dari bagian tersebut

jarak

Lengkapi parameter bagian dengan menambahkan lapisan bawah.

• Lapisan bawah: 200px

Tambahkan baris baru

Struktur kolom

Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Tambahkan modul teks ke kolom

Tambahkan konten H1

Tambahkan modul teks ke kolom baris dengan isi H1 pilihan Anda.

Pengaturan teks H1

Beralih ke tab desain modul dan ubah pengaturan teks H1 sesuai:

• Font judul: Montserrat
• Judul font berat: berat
• Warna Teks Tajuk: #ffffff
• Ukuran Teks Header: 8rem (desktop), 4rem (tablet), 2.5rem (ponsel)

Tambahkan modul pemisahan ke kolom

jarak penglihatan

Tepat di bawah modul teks, tambahkan modul pemisah. Pastikan opsi "Tampilkan Pemisah" diaktifkan.

• Tampilkan pemisah: Ya

Baris

Kemudian ubah warna garis modul.

• Warna garis: #ffffff

perekat

Dan lengkapi parameter modul dengan memodifikasi parameter dimensi.

• Berat pembagi: 8px
• Lebar: 30%

Tambahkan bagian # 2

Tambahkan bagian reguler lain 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 teks isi H2 pilihan Anda.

Pengaturan teks H2

Ubah parameter teks H2 modul sebagai berikut:

• Judul 2 Polisi: Montserrat
• Butir 2 Berat polis: berat
• Warna teks item 2: # ffa500
• Judul 2 Ukuran teks: 2.3rem

Tambahkan modul pemisahan ke kolom

jarak penglihatan

Modul selanjutnya yang kita butuhkan pada kolom ini adalah modul separasi. Pastikan opsi "Tampilkan Pemisah" diaktifkan.

• Tampilkan pemisah: Ya

Baris

Kemudian ubah warna garis modul.

• Warna garis: # ffa500

perekat

Dan lengkapi parameter modul dengan memodifikasi berat pembagi dan lebar maksimum dalam parameter dimensi.

• Berat pembagi: 6px
• Lebar maksimum: 80 px

Tambahkan modul blog ke kolom

Isi

Untuk menampilkan lowongan yang berbeda, kita akan menggunakan modul blog yang akan kita sesuaikan dengan kebutuhan kita. Pastikan pengaturan konten berikut berlaku:

• Jenis pesan: Pesan
• Sertakan kategori: Marketing
• Panjang ekstrak: 150

Elemen

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

• Tampilkan lebih banyak tombol: Ya
• Kutipan dari pertunjukan: Ya

ketentuan

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

• Layout: lebar penuh

Pengaturan teks judul

Juga ubah pengaturan teks judul.

• Tingkat judul: H3
• Font judul: Montserrat
• Ukuran teks judul: 1.5rem

Pengaturan teks tubuh

Kemudian ubah pengaturan teks isi.

• Polisi Tubuh: Raleway
• Ukuran badan teks: 1.1rem
• Ketinggian garis tubuh: 2.1em

Pelajari lebih lanjut Pengaturan teks

Dengan pengaturan teks, pelajari lebih lanjut.

• Baca selengkapnya Polisi: Montserrat
• Pelajari lebih lanjut Gaya font: Modal
• Pelajari lebih lanjut Warna teks: #ffffff
• Baca selengkapnya Ukuran teks: 1rem

jarak

Tambahkan margin kustom dan nilai padding ke pengaturan jarak.

• Margin kiri: 100px (desktop), 50px (tablet), 0px (telepon)
• Lapisan atas: 0px
• Lapisan bawah: 0px

Pelajari lebih lanjut Tombol CSS

Dan selesaikan pengaturan modul dengan menambahkan tombol putar 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;

Kloning garis sebanyak yang diperlukan

Setelah Anda menyelesaikan garis dan semua modulnya, Anda dapat mengkloningnya sesering mungkin, tergantung pada jumlah departemen di perusahaan Anda.

Edit konten modul teks

Pastikan untuk mengedit konten H2 setiap baris duplikat.

Edit kategori modul blog

Dengan kategori modul Blog.

Tambahkan modul kode ke kolom baris terakhir

Masukkan kode CSS untuk menyesuaikan dgn mode setiap workstation terbuka

Untuk menyelesaikan desain, kami akan menambahkan modul kode ke baris terakhir halaman kami 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 dan tampilkan hasilnya

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

Hasil akhir

Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.

final pikiran

Dalam tutorial ini, kami telah menunjukkan kepada Anda cara menampilkan artikel dinamis dan terbuka ini di Halaman Karier Anda menggunakan modul Blog dari Divi. Jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.