วิธีสร้างส่วนรายการงานแบบไดนามิกด้วยโมดูลบล็อกของ Divi

ในบทช่วยสอน Divi ก่อนหน้านี้ เราได้แสดงวิธีสร้างเทมเพลตตำแหน่งงานเปิดแบบไดนามิกอย่างสมบูรณ์ด้วยตัวสร้างธีมของ Divi และปลั๊กอิน Advanced Custom Fields ในบทช่วยสอนของวันนี้ เราจะแสดงให้คุณเห็นถึงวิธีการแสดงตำแหน่งงานที่เปิดรับแบบไดนามิกในหน้าอาชีพของคุณ บทช่วยสอนนี้เป็นภาคต่อของโพสต์เทมเพลตตำแหน่งงานที่เปิดอยู่ ดังนั้นตรวจสอบให้แน่ใจว่าคุณได้สร้างเทมเพลตขึ้นใหม่ก่อนแล้วจึงกลับมาที่บทช่วยสอนนี้

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดแผนผังรายการงาน Dynamic Careers ฟรี

หากต้องการใช้เลย์เอาต์รายการอาชีพแบบไดนามิกฟรี ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง

ดาวน์โหลด

คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!

1. เพิ่มหน้าอาชีพ

เพิ่มหน้าใหม่ & เปลี่ยนไปใช้ Visual Builder

เริ่มต้นด้วยการสร้างหน้าใหม่ ตั้งชื่อหน้าของคุณและเปลี่ยนไปใช้ Visual Builder

2. เริ่มสร้างหน้าอาชีพในส่วนหน้า

เพิ่มมาตรา #1

พื้นหลังไล่โทนสี

เพิ่มส่วนแรกในหน้า เปิดการตั้งค่าส่วนและใช้พื้นหลังแบบไล่ระดับสี

• สี 1: #ff6600
• สี 2: #fbff30
• ทิศทางการไล่ระดับสี: 126deg

ตัวแบ่งด้านล่าง

ใช้ตัวแบ่งส่วนด้านล่างเช่นกัน

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ความสูงของตัวแบ่ง: 8vw
• ตัวแบ่งแนวนอน ทำซ้ำ: 3x
• การจัดเรียงตัวแบ่ง: ใต้เนื้อหาส่วน

ระยะห่าง

ตั้งค่าส่วนให้สมบูรณ์โดยเพิ่มช่องว่างภายใน

• ช่องว่างภายในด้านล่าง: 200px

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มเนื้อหา H1

เพิ่มโมดูลข้อความลงในคอลัมน์ของแถวด้วยเนื้อหา H1 ที่คุณเลือก

การตั้งค่าข้อความ H1

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความ H1 ตามนั้น:

• แบบอักษรของหัวเรื่อง: มอนต์เซอร์รัต
• น้ำหนักตัวอักษรของหัวเรื่อง: หนัก
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความของหัวเรื่อง: 8rem (เดสก์ท็อป), 4rem (แท็บเล็ต), 2.5rem (โทรศัพท์)

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

ด้านล่างโมดูลข้อความ ให้เพิ่มโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

• แสดงตัวแบ่ง: ใช่

เส้น

เปลี่ยนสีเส้นของโมดูลถัดไป

• สีเส้น: #ffffff

ขนาด

และตั้งค่าโมดูลให้สมบูรณ์โดยเปลี่ยนการตั้งค่าการปรับขนาด

• น้ำหนักตัวแบ่ง: 8px
• ความกว้าง: 30%

เพิ่มส่วน #2

เพิ่มส่วนปกติอื่นในหน้า

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

เพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มเนื้อหา H2

เพิ่มโมดูลข้อความลงในคอลัมน์ของแถวและแทรกเนื้อหา H2 ที่คุณเลือก

การตั้งค่าข้อความ H2

แก้ไขการตั้งค่าข้อความ H2 ของโมดูลดังนี้:

• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• หัวข้อ 2 น้ำหนักแบบอักษร: หนัก
• หัวเรื่อง 2 สีข้อความ: #ffa500
• หัวเรื่อง 2 ขนาดข้อความ: 2.3rem

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

โมดูลต่อไปที่เราต้องการในคอลัมน์นี้คือโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

• แสดงตัวแบ่ง: ใช่

เส้น

แก้ไขสีเส้นของโมดูลถัดไป

• สีเส้น: #ffa500

ขนาด

และตั้งค่าโมดูลให้สมบูรณ์โดยเปลี่ยนน้ำหนักตัวแบ่งและความกว้างสูงสุดในการตั้งค่าการปรับขนาด

• น้ำหนักตัวแบ่ง: 6px
• ความกว้างสูงสุด: 80px

เพิ่มโมดูลบล็อกลงในคอลัมน์

เนื้อหา

ในการแสดงตำแหน่งงานว่างต่างๆ เราจะใช้โมดูลบล็อกที่เราจะปรับแต่งตามความต้องการของเรา ตรวจสอบให้แน่ใจว่าใช้การตั้งค่าเนื้อหาต่อไปนี้:

• ประเภทกระทู้: กระทู้
• รวมหมวดหมู่: การตลาด
• ความยาวข้อความที่ตัดตอนมา: 150

องค์ประกอบ

ในการตั้งค่าองค์ประกอบ มีเพียงสองตัวเลือกที่เราเปิดใช้งานคือตัวเลือกต่อไปนี้:

• แสดงปุ่มอ่านเพิ่มเติม: ใช่
• แสดงข้อความที่ตัดตอนมา: ใช่

เค้าโครง

ไปที่แท็บการออกแบบของโมดูล และตรวจสอบให้แน่ใจว่าคุณกำลังใช้เค้าโครงแบบเต็มความกว้าง

• เลย์เอาต์: เต็มความกว้าง

การตั้งค่าข้อความชื่อเรื่อง

เปลี่ยนการตั้งค่าข้อความชื่อเรื่องด้วย

• ระดับหัวเรื่อง: H3
• แบบอักษรของชื่อเรื่อง: Montserrat
• ขนาดข้อความชื่อเรื่อง: 1.5rem

การตั้งค่าข้อความเนื้อหา

จากนั้น แก้ไขการตั้งค่าข้อความเนื้อหา

• แบบอักษรของร่างกาย: Raleway
• ขนาดข้อความเนื้อหา: 1.1rem
• ความสูงของเส้นร่างกาย: 2.1em

อ่านเพิ่มเติม การตั้งค่าข้อความ

พร้อมกับอ่านการตั้งค่าข้อความเพิ่มเติม

• อ่านเพิ่มเติม แบบอักษร: มอนต์เซอร์รัต
• อ่านเพิ่มเติม รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่
• อ่านเพิ่มเติมสีข้อความ: #ffffff
• อ่านเพิ่มเติม ขนาดตัวอักษร: 1rem

ระยะห่าง

เพิ่มระยะขอบและค่าช่องว่างภายในที่กำหนดเองลงในการตั้งค่าการเว้นวรรค

• ระยะขอบซ้าย: 100px (เดสก์ท็อป), 50px (แท็บเล็ต), 0px (โทรศัพท์)
• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ปุ่มอ่านเพิ่มเติม CSS

และทำการตั้งค่าของโมดูลให้สมบูรณ์โดยเพิ่มปุ่ม CSS เพื่ออ่านเพิ่มเติมในแท็บขั้นสูง

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

โคลนแถวหลาย ๆ ครั้งตามต้องการ

เมื่อคุณเสร็จสิ้นแถวและโมดูลทั้งหมดแล้ว คุณสามารถโคลนได้มากเท่าที่คุณต้องการ ขึ้นอยู่กับจำนวนแผนกที่บริษัทของคุณมี

เปลี่ยนเนื้อหาโมดูลข้อความ

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนเนื้อหา H2 ของแต่ละแถวที่ซ้ำกัน

เปลี่ยนหมวดหมู่โมดูลบล็อก

พร้อมกับหมวดหมู่โมดูลบล็อก

เพิ่มโมดูลโค้ดในคอลัมน์ของแถวสุดท้าย

แทรกโค้ด CSS เพื่อกำหนดรูปแบบตำแหน่งงานที่เปิดเป็นรายบุคคล

เพื่อให้การออกแบบสมบูรณ์ เราจะเพิ่ม Code Module ลงในแถวสุดท้ายในหน้าของเรา และแทรกโค้ด 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. บันทึกการออกแบบหน้าและดูผลลัพธ์

เมื่อคุณออกแบบเพจเสร็จแล้ว คุณสามารถบันทึกการเปลี่ยนแปลงทั้งหมด ออกจาก Visual Builder และดูผลลัพธ์ได้!

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ความคิดสุดท้าย

บทช่วยสอนนี้เป็นภาคต่อของบทช่วยสอนก่อนหน้านี้ ซึ่งเราได้แสดงวิธีสร้างเทมเพลตตำแหน่งงานที่เปิดรับ ในบทช่วยสอนนี้ เราได้ก้าวไปอีกขั้นและได้แสดงวิธีแสดงตำแหน่งงานที่เปิดรับแบบไดนามิกเหล่านั้นบนหน้าอาชีพของคุณโดยใช้โมดูลบล็อกของ Divi คุณสามารถดาวน์โหลดไฟล์ JSON ได้ฟรีเช่นกัน! หากคุณมีคำถามหรือข้อเสนอแนะโปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง

หากคุณอยากเรียนรู้เพิ่มเติมเกี่ยวกับ Divi และรับ Divi freebies เพิ่มเติม อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้เป็นหนึ่งในคนกลุ่มแรกๆ ที่รู้จักและรับประโยชน์จากเนื้อหาฟรีนี้เสมอ