ในบทช่วยสอนของวันนี้เราจะแสดงวิธีแสดงตำแหน่งงานว่างในหน้าอาชีพของคุณแบบไดนามิก เริ่มกันเลย.

ภาพรวมผลลัพธ์

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

1. สร้างหน้าอาชีพ

เพิ่มหน้าใหม่และเปลี่ยนเป็น Visual Builder

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

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

เพิ่มส่วนแรก

พื้นหลังไล่ระดับสี

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

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

ตัวแบ่งส่วนล่าง

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

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

การเว้นวรรค

ทำพารามิเตอร์ส่วนให้สมบูรณ์โดยการเพิ่มการเติมด้านล่าง

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

เพิ่มบรรทัดใหม่

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

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

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

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

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

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

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

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

เพิ่มโมดูลการแยกลงในคอลัมน์

ความชัดเจน

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

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

ออนไลน์

จากนั้นเปลี่ยนสีเส้นของโมดูล

• สีของเส้น: #ffffff

ปรับขนาด

และทำพารามิเตอร์โมดูลให้สมบูรณ์โดยแก้ไขพารามิเตอร์การวัดขนาด

• น้ำหนัก Divider: 8px
• ความกว้าง: 30%

เพิ่มส่วน # 2

เพิ่มส่วนปกติอื่นไปยังหน้า

เพิ่มบรรทัดใหม่

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

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

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

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

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

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

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

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

เพิ่มโมดูลการแยกลงในคอลัมน์

ความชัดเจน

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

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

ออนไลน์

จากนั้นเปลี่ยนสีเส้นของโมดูล

• สีของเส้น: # ffa500

ปรับขนาด

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

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

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

เนื้อหา

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

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

องค์ประกอบ

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

• แสดงปุ่มเพิ่มเติม: ใช่
• ตัดตอนมาจากรายการ: ใช่

อารมณ์

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

• เค้าโครง: ความกว้างเต็ม

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

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

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

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

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

• ตำรวจนครบาล: Raleway
• ขนาดตัวอักษร: 1.1rem
• ความสูงของเส้นร่างกาย: 2.1em

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

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

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

การเว้นวรรค

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

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

เรียนรู้เพิ่มเติม CSS Button

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มปุ่มเล่น 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 เพื่อจัดสไตล์เวิร์คสเตชั่เปิดแต่ละอัน

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