วิธีตั้งค่าโครงการ WordPress สำหรับโมดูลผลงานที่กรองได้ของ Divi

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

ในโพสต์นี้ เราจะดูวิธีตั้งค่าโครงการ WordPress สำหรับโมดูล Divi's Filterable Portfolio

มาเริ่มกันเลย!

ดูตัวอย่างโมดูลพอร์ตโฟลิโอที่กรองได้

ก่อนอื่น มาดูกันว่าเราจะสร้างอะไรในบทช่วยสอนนี้

เดสก์ทอป

โทรศัพท์

การตั้งค่าโครงการ WordPress

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

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

โครงการทั้งหมด

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

เพิ่มใหม่

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

หมวดหมู่

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

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

ตัวอย่างเช่น หากคุณกำลังสร้างหมวดหมู่สำหรับการซ่อมแซมบ้าน คุณอาจแยกหมวดหมู่สำหรับไฟฟ้า ประปา การก่อสร้าง ฯลฯ การซ่อมแซมบ้านจะไม่อยู่ในหมวดหมู่ในกรณีนี้ เนื่องจากเป็นหัวข้อของเว็บไซต์ การซ่อมแซมบ้านอาจเป็นหัวข้อสำหรับบริษัทขนาดใหญ่ที่ทำการก่อสร้างใหม่ ซ่อมแซมสิ่งก่อสร้างเก่า ทำงานกับทั้งอุตสาหกรรมและการก่อสร้างที่อยู่อาศัย ฯลฯ ดังนั้น หมวดหมู่จำเป็นต้องเหมาะสมกับเว็บไซต์

สำหรับตัวอย่างของฉัน ฉันได้สร้างหมวดหมู่เพื่ออธิบายประเภทของการถ่ายภาพที่เว็บไซต์นี้จะนำเสนอ พวกเขาตอบคำถามว่า "การถ่ายภาพประเภทใด"

สำหรับตัวอย่างของฉัน ฉันได้สร้างหมวดหมู่:

• งานแต่งงาน
• ข้อเสนอ
• วันครบรอบ
• งานพรอม
• การสำเร็จการศึกษา

แต่ละหมวดหมู่เหล่านี้อธิบายประเภทการถ่ายภาพเฉพาะที่ลูกค้าอาจมองหา ตามหลักการแล้ว แต่ละโครงการจะจัดอยู่ในหมวดหมู่เดียว

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

แท็ก

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

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

สำหรับตัวอย่างของฉัน ฉันสร้างหกแท็ก:

• ข้างใน
• ข้างนอก
• มัธยม
• บริษัท
• คริสตจักร
• ตระกูล

สิ่งเหล่านี้จะบอกให้ลูกค้าทราบเพิ่มเติมเล็กน้อยเกี่ยวกับการถ่ายภาพแต่ละครั้ง เราสามารถไปไกลกว่านี้ได้หากเราต้องการอธิบายประเภทของฝูงชนว่าใหญ่หรือเล็ก ประเภทของภาพถ่ายเป็นสีหรือขาวดำ และอื่นๆ อีกมากมาย

ตัวแก้ไขแท็กประกอบด้วยชื่อ บุ้ง และคำอธิบาย คุณสามารถแก้ไขได้จากรายการ

ตัวอย่างโครงการ

ในตัวอย่างนี้ ฉันได้เพิ่มชื่อเรื่อง เนื้อหาบางส่วน รวมถึงคำอธิบายและรูปภาพ หมวดหมู่ แท็ก และรูปภาพเด่น ฉันได้เลือกงานแต่งงานเป็นหมวดหมู่และภายนอกเป็นแท็ก ฉันใช้แท็กเป็นคำอธิบายงานแต่งงาน ฉันสามารถเพิ่มแท็กเพิ่มเติมได้หากจำเป็น

โมดูลผลงานที่กรองได้ของ Divi

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

สำหรับตัวอย่างนี้ ฉันได้เลือกเค้าโครงกริด ดังนั้นโครงการทั้งหมดจึงสามารถมองเห็นได้พร้อมกัน จะแสดงตัวกรองพร้อมหมวดหมู่ แต่ละโครงการจะแสดงภาพเด่น ชื่อเรื่อง และหมวดหมู่

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

โมดูลผลงานที่กรองได้ของ Styling Divi

ต่อไป เรามาดูวิธีการจัดรูปแบบโมดูลผลงานที่กรองได้ สำหรับตัวอย่างของฉัน ฉันกำลังเพิ่มส่วนโปรเจ็กต์ในหน้า Landing Page ใน Photography Studio Layout Pack ฟรีที่มีให้ใน Divi

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

ต่อไปนี้คือส่วนแรกๆ ของเลย์เอาต์ ฉันจะเพิ่มพอร์ตโฟลิโอหลังส่วนฮีโร่ ฉันจะใช้ตัวชี้นำการออกแบบจากเค้าโครงเอง

เพิ่มส่วน

ขั้นแรก เพิ่มส่วน ใหม่ ภายใต้ส่วนฮีโร่

เปิดการตั้งค่าของส่วน เลื่อนลงไปที่ พื้นหลัง และเปลี่ยน สีพื้นหลังเป็นสี ดำ ปิดการตั้งค่าของส่วน

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

เพิ่มแถว

ถัดไป เพิ่ม แถวหนึ่งคอลัมน์

เพิ่มโมดูลผลงานที่กรองได้

สุดท้าย เพิ่ม โมดูลผลงาน ที่กรองได้จากรายการโมดูล

เนื้อหาโมดูลพอร์ตโฟลิโอที่กรองได้

สำหรับ Post Count ให้ป้อน 4 ลงในฟิลด์ จากนั้น เลือก หมวดหมู่ ที่คุณต้องการแสดงในโมดูลผลงานที่กรองได้ ตามค่าเริ่มต้น โมดูลจะแสดงชื่อเรื่อง ประเภท และการแบ่งหน้า ฉันปล่อยให้การตั้งค่าเหล่านี้เป็นค่าเริ่มต้น

• โพสต์จำนวน: 4
• หมวดหมู่: หมวดหมู่ที่ต้องการ

เค้าโครงโมดูลผลงานที่กรองได้

จากนั้นไปที่แท็บ ออกแบบ ส่วนแรกคือ เค้าโครง โมดูลแสดงแบบเต็มความกว้างตามค่าเริ่มต้น แต่ฉันต้องการแสดงโครงการในกริด เปลี่ยนเค้าโครงเป็นตาราง เราจะปล่อยให้รูปภาพและภาพซ้อนทับเป็นค่าเริ่มต้น

• รูปแบบ: ตาราง

ข้อความชื่อโมดูลพอร์ตโฟลิโอที่กรองได้

เลื่อนลงไปที่ ข้อความชื่อเรื่อง ใช้ H2 สำหรับ ระดับหัวเรื่อง และเปลี่ยน ฟอนต์ เป็น Inter สไตล์ เป็นตัวหนา และ สี เป็น #ff5a17

• ระดับหัวเรื่อง: H2
• แบบอักษร: อินเตอร์
• สไตล์: ตัวหนา
• สี: #ff5a17

เปลี่ยน ขนาด เป็น 14px ระยะห่างตัวอักษร เป็น 1px และ ความสูงของบรรทัด เป็น 1.4em

• ขนาด: 14px
• ระยะห่างตัวอักษร 1px
• ความสูงของเส้น: 1.4em

ข้อความเกณฑ์ตัวกรองโมดูลผลงานที่กรองได้

จากนั้น เลื่อนลงไปที่ Filter Criteria Text เปลี่ยน Font เป็น Inter สไตล์ เป็นตัวหนา และเปลี่ยน สี เป็นสีดำ สิ่งนี้ทำให้ฟิลเตอร์มีสไตล์ที่เข้ากับเลย์เอาต์และโดดเด่นกว่าพอร์ตโฟลิโอ

• แบบอักษร: อินเตอร์
• สไตล์: ตัวหนา
• สี: #000000

ปล่อย ขนาดตัวอักษร ไว้ที่ 14 ซึ่งเป็นการตั้งค่าเริ่มต้น เปลี่ยน ความสูงของเส้น เป็น 1.4em

• ขนาด: 14px
• ความสูงของเส้น: 1.4em

ข้อความเมตาของโมดูลผลงานที่กรองได้

ถัดไป เลื่อนลงไปที่ Meta Text เปลี่ยน Font เป็น Inter และเปลี่ยน สี เป็นสีขาว

• แบบอักษร: อินเตอร์
• สี: #ffffff

เปลี่ยน ความสูงของเส้น เป็น 1.4em

• ความสูงของเส้น: 1.4em

การแบ่งหน้าโมดูลผลงานที่กรองได้

สุดท้าย เลื่อนลงไปที่การ แบ่งหน้า เปลี่ยน Font เป็น Inter และ Color เป็นสีขาว ปิดโมดูลและบันทึกการตั้งค่าของคุณ

• แบบอักษร: อินเตอร์
• สี: #ffffff

ผลลัพธ์โมดูลพอร์ตโฟลิโอที่กรองได้

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

เดสก์ทอป

โทรศัพท์

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

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

เราต้องการได้ยินจากคุณ คุณได้ตั้งค่าโครงการ WordPress สำหรับ Divi Filterable Portfolio ของคุณแล้วหรือยัง? แจ้งให้เราทราบในความคิดเห็น