วิธีสร้างเทมเพลตโครงการผลงานแบบไดนามิกด้วย Divi & ACF

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลตโครงการผลงานแบบไดนามิกฟรี

สำคัญ: คุณจะต้องเพิ่มเนื้อหาแบบไดนามิกด้วยตนเองในแต่ละโมดูลหลังจากที่คุณตั้งค่าฟิลด์ ACF และอัปโหลดไฟล์ JSON ของเทมเพลตไปยัง Theme Builder

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

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

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

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

ดาวน์โหลด

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

1. ติดตั้ง ACF & ตั้งค่าฟิลด์โปรเจ็กต์

ติดตั้งและเปิดใช้งาน ACF

เริ่มต้นด้วยการติดตั้งปลั๊กอิน Advanced Custom Fields ฟรีบนเว็บไซต์ WordPress ของคุณ หลังจากติดตั้งแล้ว อย่าลืมเปิดใช้งานด้วย

ตั้งค่ากลุ่มฟิลด์

เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอินแล้ว ก็ถึงเวลาที่จะเริ่มสร้างฟิลด์ที่กำหนดเอง ไปที่การตั้งค่าปลั๊กอินของคุณและเพิ่มกลุ่มฟิลด์ใหม่

แก้ไขที่ตั้งของกลุ่มฟิลด์ของคุณ เราต้องการให้ปรากฏในโครงการของเราเท่านั้น

• ประเภทโพสต์ – เท่ากับ – Project

เพิ่มช่อง

ดำเนินการต่อโดยเพิ่มฟิลด์ใหม่สำหรับแต่ละรายการที่กล่าวถึงด้านล่าง:

• ปัญหา
  • ป้ายกำกับ: ปัญหา
  • ประเภทฟิลด์: Text Area
• สารละลาย
  • ป้ายกำกับ: โซลูชัน
  • ประเภทฟิลด์: Text Area
• ข้อความรับรอง
  • ป้ายกำกับ: ข้อความรับรอง
  • ประเภทฟิลด์: Text
• ผู้ติดต่อ
  • ป้ายกำกับ: ผู้ติดต่อ
  • ประเภทฟิลด์: Text
• รูปภาพผู้ติดต่อ
  • ป้ายกำกับ: รูปภาพผู้ติดต่อ
  • ประเภทฟิลด์: Image
• ติดต่อ ตำแหน่งงาน
  • ป้ายกำกับ: บุคคลที่ติดต่อ ตำแหน่งงาน
  • ประเภทฟิลด์: Text
• โลโก้ลูกค้า
  • ป้ายกำกับ: โลโก้ลูกค้า
  • ประเภทฟิลด์: Image
• เว็บไซต์ลูกค้า
  • ป้ายกำกับ: เว็บไซต์ลูกค้า
  • ประเภทฟิลด์: Url
• ระยะเวลาโครงการ
  • ป้ายกำกับ: ระยะเวลาโครงการ
  • ประเภทสนาม: ช่วง
  • ต่อท้าย: สัปดาห์

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

2. สร้างโครงการใหม่

เพิ่ม Portfolio ชื่อโครงการและคำอธิบาย

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

อัพโหลดรูปเด่น

จากนั้นอัปโหลดภาพเด่นที่คุณเลือก

กรอกข้อมูลในฟิลด์ที่กำหนดเองทั้งหมด

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

3. สร้างเทมเพลตใหม่

ไปที่ตัวสร้างธีม Divi และสร้างเทมเพลตใหม่

ได้เวลาเริ่มสร้างเทมเพลตแล้ว! ไปที่ Divi Theme Builder และเพิ่มเทมเพลตใหม่

ใช้ On

ใช้เทมเพลตกับโครงการทั้งหมดของคุณ

• ใช้เมื่อ: โครงการทั้งหมด

4. เริ่มสร้างเทมเพลต Body

ดำเนินการต่อโดยเริ่มสร้างเนื้อหาแบบกำหนดเองของเทมเพลต

ส่วนที่ 1

สีพื้นหลัง

ภายในตัวแก้ไขเทมเพลต คุณจะสังเกตเห็นส่วน เปิดส่วนนั้นและเพิ่มสีพื้นหลังสีดำ

• สีพื้นหลัง: #000000

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 250px
• แผ่นรองด้านล่าง: 250px

ชายแดน

เพิ่มรัศมีเส้นขอบด้านล่างซ้ายและขวาด้วย

• ล่างซ้าย: 8vw
• ล่างขวา: 8vw

เพิ่มแถว #1

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

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

เพิ่มโมดูลข้อความ #1 ให้กับคอลัมน์

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

จากนั้น เพิ่มโมดูลข้อความและใส่เนื้อหาลงในกล่องเนื้อหา

• เนื้อหา: ระยะเวลาโครงการ:

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• สีข้อความ: #a0a0a0
• ขนาดตัวอักษร: 1.2rem

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์

เนื้อหาแบบไดนามิก

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

• เนื้อหาแบบไดนามิก: ระยะเวลาโปรเจ็กต์
• หลังจาก: สัปดาห์

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

เปลี่ยนการตั้งค่าข้อความของโมดูลถัดไป

• แบบอักษรของข้อความ: Lora
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 1.5rem

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

เนื้อหาแบบไดนามิก

เพิ่มโมดูลข้อความอื่นและเลือกเนื้อหาแบบไดนามิกของชื่อโพสต์/ที่เก็บถาวร

• เนื้อหาแบบไดนามิก: ชื่อโพสต์/ที่เก็บถาวร
• ก่อน: <H1>
• หลัง: </H1>

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

จัดรูปแบบการตั้งค่าข้อความ H1 ของโมดูล

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

ระยะห่าง

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

• ขอบบน: 100px
• ขอบล่าง: 100px

เพิ่มโมดูลเนื้อหาโพสต์

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

โมดูลถัดไปและโมดูลสุดท้ายที่เราต้องการในคอลัมน์คือโมดูลเนื้อหาโพสต์ นี่จะแสดงรายละเอียดของโครงการของคุณ เปลี่ยนการตั้งค่าข้อความของโมดูลดังนี้:

• แบบอักษรของข้อความ: Lora
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 1.5rem (เดสก์ท็อป), 0.9rem
• ความสูงของบรรทัดข้อความ: 2em

เพิ่มแถว #2

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

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

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

เนื้อหาแบบไดนามิก

เพิ่มโมดูลรูปภาพในคอลัมน์ 1 และเลือกเนื้อหาไดนามิกของโลโก้ไคลเอ็นต์

• เนื้อหาแบบไดนามิก: โลโก้ไคลเอ็นต์

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

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

จากนั้น เพิ่มโมดูลข้อความลงในคอลัมน์ 2 และป้อนสำเนาที่คุณเลือก

เชื่อมโยงเนื้อหาแบบไดนามิก

เชื่อมโยงโมดูลกับเว็บไซต์ไคลเอ็นต์โดยเลือกเนื้อหาแบบไดนามิกของเว็บไซต์ไคลเอ็นต์ในการตั้งค่าลิงก์

• เนื้อหาแบบไดนามิก: เว็บไซต์ลูกค้า

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

เปลี่ยนการตั้งค่าข้อความของโมดูลถัดไป

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 1.5rem
• ความสูงของบรรทัดข้อความ: 1em

ระยะห่าง

เพิ่ม padding ด้านล่างแบบกำหนดเองด้วย

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

ชายแดน

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

• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: #ffc300

เพิ่มส่วน #2

ระยะห่าง

ไปยังส่วนถัดไป! ลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมด

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

เพิ่มแถว

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

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

ระยะห่าง

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

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

เพิ่มโมดูลรูปภาพลงในคอลัมน์

เนื้อหาแบบไดนามิก

โมดูลเดียวที่เราต้องการในแถวนี้คือโมดูลรูปภาพ เชื่อมต่อรูปภาพกับรูปภาพเด่นของโครงการ

• เนื้อหาแบบไดนามิก: รูปภาพเด่น

ชายแดน

เพิ่มรัศมีเส้นขอบด้านล่างซ้ายและขวาด้วย

• ล่างซ้าย: 8vw
• ล่างขวา: 8vw

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

ระยะห่าง

เพิ่มส่วนปกติอีกส่วนด้วยการเติมด้านบนและด้านล่างแบบกำหนดเอง

• ช่องว่างภายในด้านบน: 250px
• แผ่นรองด้านล่าง: 250px

เพิ่มแถว #1

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

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

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

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

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

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

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

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

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

เนื้อหาแบบไดนามิก

ไปยังคอลัมน์ที่สอง เพิ่มโมดูลข้อความ และใช้เนื้อหาไดนามิกของปัญหา

• เนื้อหาแบบไดนามิก: ปัญหา

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

จากนั้น เปลี่ยนการตั้งค่าข้อความของโมดูล:

• แบบอักษรของข้อความ: Lora
• ขนาดตัวอักษร: 1.5rem (เดสก์ท็อป), 0.9vw (แท็บเล็ตและโทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2em

โคลนโรว์

เมื่อคุณทำแถวเสร็จแล้ว ให้ดำเนินการโคลนทั้งหมด

เปลี่ยนสำเนาของโมดูลข้อความในคอลัมน์ 1

เปลี่ยนสำเนาของโมดูลข้อความคอลัมน์ 1 ของแถวที่ซ้ำกัน

เปลี่ยนเนื้อหาแบบไดนามิกของโมดูลข้อความในคอลัมน์2

แก้ไขเนื้อหาแบบไดนามิกของโมดูลข้อความในคอลัมน์ 2 ของแถวที่ซ้ำกันด้วย

• เนื้อหาแบบไดนามิก: โซลูชัน

เพิ่มโมดูลปุ่มในคอลัมน์ 2 ของแถวที่ซ้ำกัน

เพิ่มสำเนา

ดำเนินการต่อโดยเพิ่มโมดูลปุ่มลงในคอลัมน์ 2 ของแถวที่ซ้ำกัน เพิ่มสำเนาที่คุณเลือก

การตั้งค่าปุ่ม

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1.5rem
• สีข้อความของปุ่ม: #000000
• รัศมีเส้นขอบของปุ่ม: 0px

• แบบอักษรของปุ่ม: มอนต์เซอร์รัต

ระยะห่าง

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

• ขอบบน: 100px

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

สีพื้นหลัง

ไปยังส่วนถัดไปและสุดท้าย! เพิ่มสีพื้นหลังสีดำ

• สีพื้นหลัง: #000000

ชายแดน

เพิ่มรัศมีเส้นขอบซ้ายและขวาบนส่วนด้วย

• ซ้ายบน: 8vw
• ขวาบน: 8vw

เพิ่มแถว

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

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

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

เนื้อหาแบบไดนามิก

เพิ่ม Testimonial Module ลงในแถวและเลือกเนื้อหาแบบไดนามิกสำหรับองค์ประกอบต่างๆ ภายในโมดูล

• ผู้เขียน: ผู้ติดต่อ
• ตำแหน่งงาน: บุคคลที่ติดต่อ ตำแหน่งงาน
• เนื้อหา: ข้อความรับรอง
• รูปภาพ: รูปภาพผู้ติดต่อ

องค์ประกอบ

ปิดการใช้งานไอคอนใบเสนอราคาถัดไป

• แสดงไอคอนใบเสนอราคา: ไม่

สีพื้นหลัง

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

• สีพื้นหลัง: #000000

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

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

• สีข้อความ: เบา

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

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

• แบบอักษรของร่างกาย: มอนต์เซอร์รัต
• ขนาดตัวอักษร: 2rem (เดสก์ท็อป), 1.5rem (แท็บเล็ตและโทรศัพท์)

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

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

• แบบอักษรผู้แต่ง: Lora
• ขนาดข้อความของผู้เขียน: 1.4rem (เดสก์ท็อป), 0.9rem (แท็บเล็ตและโทรศัพท์)

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

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

• แบบอักษรของตำแหน่ง: Lora
• ตำแหน่งสีข้อความ: #a8a8a8
• ขนาดข้อความตำแหน่ง: 1.4rem (เดสก์ท็อป), 0.9rem (แท็บเล็ตและโทรศัพท์)

4. บันทึกการเปลี่ยนแปลงตัวสร้างธีมและดูผลลัพธ์

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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