วิธีจัดรูปแบบรายการตารางในโมดูลพอร์ตโฟลิโอที่กรองได้ของ Divi

Rifat Dec 26, 2022

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

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

Divi’s คืออะไร โมดูลผลงานที่กรองได้?

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

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

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

ต่อไปนี้คือตัวอย่างการตั้งค่าโมดูลพื้นฐานพร้อมตัวอย่างบางโครงการ:

ข้อควรพิจารณาสำหรับผลงานที่กรองได้ของ Styling Divi

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

  • ชื่อโครงการ
  • หมวดโครงการ
  • ภาพขนาดย่อ
  • กรองข้อความ
  • โฮเวอร์ภาพขนาดย่อ
  • การแบ่งหน้า

นี่ไม่ใช่รายการทั้งหมด และเรายังไม่ได้เริ่มพูดคุยถึงวิธีที่ CSS ได้ปรับปรุงการปรับแต่งของโมดูล!

We’ จะออกแบบโมดูลผลงานที่กรองได้ของ Divi’s อย่างไร

ตามที่กล่าวไว้ก่อนหน้านี้ เราจะใช้สองเค้าโครงจาก Divi Conference และ Divi Online Yoga Instructor สำหรับเซสชันนี้ คุณสามารถดูตัวอย่างงานที่เราจะทำในชั้นเรียนนี้ได้ด้านล่าง

นี่คือลักษณะของเค้าโครงกิจกรรมการประชุม Divi -

The Divi Conference Event Layout with the Filterable Portfolio Module

และนี่คือลักษณะของเค้าโครงหน้า Landing Page ของผู้สอนโยคะ Divi Online-

The Divi Online Yoga Instructor Layout with the Filterable Portfolio Module

เค้าโครงทั้งสองสามารถเข้าถึงได้ง่ายจากภายใน Divi Builder เริ่มปาร์ตี้กันเถอะ!

โมดูลผลงาน Divi’s ที่กรองได้: Divi Conference Edition

ก่อนอื่น เราจะต้องติดตั้งเทมเพลตหน้ากิจกรรมของ Divi Conference Layout Pack เราจะไปที่ Divi Library หลังจากที่คุณสร้างหน้าใหม่ใน WordPress และเปิดใช้งาน Divi Builder

เข้าสู่ Divi Layout Library

ในการเข้าถึง Divi Layout Library ให้คลิกที่ไอคอน Load from Library

Load the Divi Layout Library

ค้นหาเลย์เอาต์ภายในไลบรารีเลย์เอาต์ Divi

ค้นหาไลบรารีเค้าโครงของ Divi สำหรับเค้าโครงหน้ากิจกรรมการประชุม Divi โดยใช้คุณลักษณะการค้นหา

Search for the Divi Conference event page layout within the Divi Layout Library

ติดตั้งเค้าโครง

เมื่อคุณตัดสินใจเลือกเลย์เอาต์แล้ว ให้คลิกปุ่มใช้เลย์เอาต์นี้เพื่อเพิ่มลงในเพจของคุณ

Install selected layout

ลบและเปลี่ยนโมดูลรูปภาพ

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

Remove Image Module

ใส่โมดูลผลงาน Divi Filterable

ตอนนี้เราสามารถสร้างที่ว่างสำหรับโมดูลพอร์ตโฟลิโอที่กรองได้โดยการลบโมดูลรูปภาพ เราจะเลือกโมดูลจากกล่องโมดูลโมดูลที่ปรากฏโดยคลิกที่ไอคอนเพิ่มโมดูล (เครื่องหมายบวกสีเทา)

Insert the Filterable Portfolio Module

การตั้งค่าจำนวนโพสต์และเค้าโครงผลงาน

โมดูลนี้จะแสดงงานของคุณในคอลัมน์เดียวตามค่าเริ่มต้น อย่างไรก็ตาม เราจะใช้เค้าโครงตารางซึ่งมีสี่คอลัมน์ตามค่าเริ่มต้น ด้วยเหตุนี้ เราขอแนะนำให้เลือกตัวเลขที่เป็นผลคูณของ 4 (4, 8, 12, 16 ฯลฯ) เป็น Post Count ของพอร์ตโฟลิโอของคุณ เราจะใช้ 12 โครงการในตารางของเราสำหรับบทช่วยสอนนี้

Setting the Post Count and Portfolio Layout

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

ตอนนี้โครงการของเราแสดงเป็นตารางแล้ว เรามารวมการออกแบบบางส่วนจากเทมเพลตที่เราเลือก ในสถานการณ์นี้ เราจะรวมสไตล์จาก Divi Conference Layout Pack เข้ากับโมดูลใหม่ของเรา

สำหรับการจัดรูปแบบข้อความ:

  • การจัดตำแหน่งข้อความ: กึ่งกลาง
  • สีข้อความ: เข้ม

สำหรับการจัดรูปแบบข้อความชื่อเรื่อง:

  • ระดับหัวเรื่อง: H2
  • ตัวอักษรหัวเรื่อง: Krona One
  • สีข้อความของชื่อเรื่อง: #000000

สำหรับการจัดรูปแบบข้อความเมตา:

  • Meta Font: ค่าเริ่มต้น (เปิด Sans)
  • สีข้อความ Meta: #ff6651
Text styling edits for your newly added module
Styled titles within the Filterable Portfolio Module

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

แก้ไขภาพขนาดย่อของโครงการ

เราใช้การผสมผสานที่ไม่เหมือนใครของมุมโค้งมนใน Divi Conference Layout Collection เพื่อให้รูปภาพสำคัญบางรูปในชุดมีรูปทรงที่ไม่เหมือนใคร มาเพิ่มสไตล์นี้ให้กับภาพขนาดย่อของโมดูลของเรา

หากต้องการแก้ไขรูปภาพ ให้ใช้การตั้งค่าต่อไปนี้:

  • รูปภาพมุมโค้งมน: 50px 50px 50px 0px
  • รูปแบบเส้นขอบรูปภาพ: ทั้งหมด
  • ความกว้างของขอบภาพ: 3px
  • สีของเส้นขอบรูปภาพ: #000000
  • รูปแบบเส้นขอบรูปภาพ: ทึบ
Adding the corners and borders to the featured image
Rounded corners and border styling added to portfolio list items

ภาพขนาดย่อของเราจะมีรูปร่างเหมือนกันกับภาพที่เหลือในเลย์เอาต์แพ็ก

วางเมาส์เหนือ

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

สำหรับโฮเวอร์โอเวอร์เลย์ ให้เปลี่ยนแปลงดังนี้:

  • สีของไอคอนซูม: #bcf5fd
  • วางเมาส์เหนือสี: #ff6651
  • ตัวเลือกไอคอนโฮเวอร์: ซูม
Setting for the hover overlay effect

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

จัดรูปแบบการแบ่งหน้า

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

สำหรับข้อความเลขหน้า ใช้การตั้งค่าที่กล่าวถึงด้านล่าง:

  • แบบอักษรเลขหน้า: Krona One
  • การจัดตำแหน่งข้อความเลขหน้า: กึ่งกลาง
  • สีข้อความการแบ่งหน้า: #ff6651
  • สีข้อความการแบ่งหน้า (โฮเวอร์): #000000
Styling the pagination of the Divi Filterable Module

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

border-top: 0px;
Portfolio Pagination CSS

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

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

สำหรับข้อความเกณฑ์การกรอง ต่อไปนี้คือการเปลี่ยนแปลงที่คุณควรทำ:

  • แบบอักษรของเกณฑ์การกรอง: Krona One
  • เกณฑ์การกรอง สีข้อความ: #ffffff
  • เกณฑ์การกรอง สีข้อความ (โฮเวอร์): #000000
Filter criteria text styling

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

Access page settings

คลิกที่จุดสามจุดที่ตรงกลางหน้าจอเพื่อเปิดการตั้งค่าเพจ จากนั้นคลิกไอคอนรูปเฟืองเพื่อเข้าสู่การตั้งค่าเพจ หากต้องการเพิ่มฉากหลังให้กับข้อความตัวกรอง ให้ไปที่แท็บ Custom CSS แล้วป้อนโค้ดต่อไปนี้

Access and enter into the page settings for adding additional CSS

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

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}
Using Page Settings to set the color of the background of the module's filters

จัดรูปแบบแท็บตัวกรองผลงานที่ใช้งานอยู่

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

background: #ff6651;
color: #ffffff !important;

เราจะทำให้พื้นหลังเป็นสีดำเมื่อโฮเวอร์

color: #000000!important;
Background styling of hover for Active Portfolio Filter

ดูตัวอย่างสุดท้าย

และนี่คือผลลัพธ์ที่ได้!

Finished Styling Divi's Filterable Portfolio Module for Divi Conference

และตอนนี้คุณจะเห็นว่ามันเป็นอย่างไรเมื่อเราวางเมาส์เหนือ!

Finished Styling Divi's Filterable Portfolio Module for Divi Conference

สรุปแล้ว

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

Divi WordPress Theme