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

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

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

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

แอบมอง

นี่คือตัวอย่างสิ่งที่เราจะออกแบบ

รูปแบบเลขหน้าหนึ่ง

รูปแบบการแบ่งหน้าสอง

รูปแบบการแบ่งหน้าสาม

สิ่งที่คุณต้องการเพื่อเริ่มต้น

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

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

เพิ่มผลงานโครงการ

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

ตอนนี้คุณพร้อมที่จะเริ่มต้นแล้ว!

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

สร้างหน้าใหม่ด้วยเค้าโครงที่สร้างไว้ล่วงหน้า

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

เพิ่มหน้าใหม่ในเว็บไซต์ของคุณ ตั้งชื่อ และเลือกตัวเลือกเพื่อใช้ Divi Builder

เราจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ ดังนั้นให้เลือกเรียกดูเลย์เอาต์

ค้นหาและเลือกเค้าโครงหน้าผลงานจิตรกร

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

ตอนนี้เราพร้อมที่จะสร้างการออกแบบของเราแล้ว

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

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

ถัดไป แทรกส่วนใหม่บนหน้า ใต้ส่วน "งานล่าสุด"

จากนั้นเพิ่มแถวที่มีคอลัมน์เดียวในส่วน

เพิ่มโมดูลพอร์ตที่กรองได้ลงในแถวใหม่

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

การตั้งค่าผลงานที่กรองได้

ตอนนี้ มาปรับแต่งการออกแบบพอร์ตโฟลิโอที่กรองได้ เปิดการตั้งค่าโมดูล จากนั้นเปลี่ยนจำนวนโพสต์เป็น 6

• จำนวนโพสต์: 6

ภายใต้องค์ประกอบ ปิดการใช้งานแสดงหมวดหมู่

• แสดงหมวดหมู่: ไม่

เลื่อนไปที่แท็บออกแบบแล้วเปิดการตั้งค่าเค้าโครง ตั้งค่าเลย์เอาต์เป็น Grid

• เค้าโครง: Grid

ถัดไป เปิดการตั้งค่าโอเวอร์เลย์ ตั้งค่าสีไอคอนซูม สีโอเวอร์เลย์ และตัวเลือกไอคอนโฮเวอร์ดังนี้:

• สีไอคอนซูม: #fdd23a
• วางเมาส์เหนือสี: rgba(61,61,61,0.28)
• ตัวเลือกไอคอนโฮเวอร์: ไอคอนพลัส

เปิดการตั้งค่ารูปภาพ จากนั้นเพิ่มเงาของกล่องรูปภาพ

จากนั้นกำหนดสีเงา

• สีเงา: #f2f2f2

ถัดไป เปลี่ยนการตั้งค่าแบบอักษรของชื่อเรื่องดังนี้:

• แบบอักษรของชื่อเรื่อง: Merriweather
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ชื่อข้อความสี#000000

กำหนดขนาดข้อความชื่อเรื่องและความสูงของบรรทัด

• ขนาดข้อความชื่อเรื่อง: 25px
• ความสูงของบรรทัดหัวเรื่อง: 2em

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

• แบบอักษรเกณฑ์การกรอง: มอนต์เซอร์รัต
• เกณฑ์การกรอง น้ำหนักแบบอักษร: ตัวหนา
• สีข้อความเกณฑ์การกรอง: #000000

เมื่อการออกแบบโมดูลส่วนใหญ่ของเราเสร็จสมบูรณ์แล้ว เราสามารถดำเนินการปรับแต่งรูปแบบการแบ่งหน้าได้

รูปแบบเลขหน้าหนึ่ง

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

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

• แบบอักษรของเลขหน้า: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของเลขหน้า: ตัวหนา
• การจัดตำแหน่งข้อความการแบ่งหน้า: ขวา
• สีข้อความการแบ่งหน้า: #000000

กำหนดขนาดตัวอักษร แล้ว. ใช้การตั้งค่าโฮเวอร์เพื่อเพิ่มขนาดข้อความเมื่อวางเมาส์เหนือ

• ขนาดข้อความการแบ่งหน้า: 17px
• ขนาดข้อความการแบ่งหน้าเมื่อวางเมาส์เหนือ: 21px

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

color: #FDD23A !important;

การออกแบบขั้นสุดท้าย

และนี่คือรูปลักษณ์สุดท้ายของการออกแบบครั้งแรกของเรา

รูปแบบการแบ่งหน้าสอง

รูปแบบการแบ่งหน้าที่สองที่เราจะออกแบบประกอบด้วยสีพื้นหลังที่อยู่เบื้องหลังการแบ่งหน้า เอฟเฟกต์สีโฮเวอร์บางส่วน และสีอื่นสำหรับเพจที่ใช้งานอยู่

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

• แบบอักษรเลขหน้า: Merriweather
• น้ำหนักแบบอักษรของเลขหน้า: ตัวหนา
• การจัดตำแหน่งข้อความการแบ่งหน้า: Center
• สีข้อความการแบ่งหน้า: #9e9e9e
• สีข้อความการแบ่งหน้าเมื่อวางเมาส์เหนือ: #000000

ถัดไป กำหนดขนาดข้อความและความสูงของบรรทัด

• ขนาดข้อความการแบ่งหน้า: 26px
• ความสูงของเส้นแบ่งหน้า: 2em

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

background:#f2f2f2;
border:none;

สุดท้าย เพิ่ม CSS ต่อไปนี้ไปยังส่วน CSS ของเพจที่ใช้งานอยู่เพื่อกำหนดสีข้อความอื่นสำหรับเพจที่ใช้งานอยู่

color: #000000 !important;

การออกแบบขั้นสุดท้าย

นี่คือการออกแบบขั้นสุดท้ายสำหรับรูปแบบการแบ่งหน้าที่สองของเรา

รูปแบบการแบ่งหน้าสาม

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

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

• แบบอักษรเลขหน้า: Merriweather
• น้ำหนักแบบอักษรของเลขหน้า: ตัวหนา
• การจัดตำแหน่งข้อความการแบ่งหน้า: Center
• สีข้อความการแบ่งหน้า: #000000
• สีข้อความการแบ่งหน้าเมื่อวางเมาส์เหนือ: #FDD23A
• ขนาดข้อความการแบ่งหน้า: 26px

ย้ายไปยังแท็บขั้นสูงและเพิ่ม CSS แบบกำหนดเองต่อไปนี้ไปยังส่วน CSS การแบ่งหน้าพอร์ตโฟลิโอเพื่อลบเส้นขอบ:

border:none;

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

padding: 10% 60% 10% 60%;
background-color: #FDD23A;
border-radius: 80%;
color: #ffffe7!important;

การออกแบบขั้นสุดท้าย

นี่คือการออกแบบขั้นสุดท้ายสำหรับเลย์เอาต์สุดท้ายของเรา

ผลสุดท้าย

ตอนนี้ มาดูการออกแบบขั้นสุดท้ายทั้งสามแบบที่มีรูปแบบการแบ่งหน้าที่แตกต่างกันของเรา

รูปแบบเลขหน้าหนึ่ง

รูปแบบการแบ่งหน้าสอง

รูปแบบการแบ่งหน้าสาม

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

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