คุณต้องการใช้โมดูล Portfolio ที่กรองได้ของ .หรือไม่ Divi และคุณไม่รู้ว่าจะเลือกเลย์เอาต์ไหน?
โมดูล « ผลงานที่กรองได้ "เพื่อ Divi มีตัวเลือกเค้าโครงให้คุณเลือกได้สองแบบ ทั้งสองตัวเลือกมีข้อดีและทำงานได้ดีสำหรับวัตถุประสงค์บางอย่าง
ในบทความนี้ เราจะเปรียบเทียบเค้าโครงแบบเต็มความกว้างและตารางของโมดูลนี้เพื่อช่วยให้คุณตัดสินใจได้ว่าต้องการอะไรสำหรับคุณ เว็บไซต์เว็บ.
นอกจากนี้เรายังจะปรับแต่งทั้งสองเลย์เอาต์เพื่อดูว่ามันทำงานอย่างไรในเลย์เอาต์เดียว Divi.
ขอเริ่มต้น!
การสำรวจ
ก่อนอื่น มาดูกันว่าเราจะสร้างอะไรในบทช่วยสอนนี้
เลย์เอาต์กริดเวอร์ชันเดสก์ท็อป
ดาวน์โหลด DIVI ทันที !!!
เค้าโครงกริดเวอร์ชันโทรศัพท์
เลย์เอาต์แบบเต็มความกว้างเวอร์ชันเดสก์ท็อป
อ่าน: Divi: วิธีใช้เอฟเฟกต์เงาและโฮเวอร์เพื่อสร้างเนื้อหาแบบโต้ตอบ
เลย์เอาต์แบบเต็มความกว้างเวอร์ชันโทรศัพท์
วิธีการเปลี่ยนเค้าโครงของโมดูลผลงานที่กรองได้
ตามค่าเริ่มต้น โมดูล "ผลงานที่กรองได้" จะแสดงเค้าโครงแบบเต็มความกว้าง คุณสามารถเปลี่ยนเค้าโครงเพื่อแสดงรายการในตารางได้ ก่อนอื่นให้เปิด พารามิเตอร์โมดูล.
จากนั้นเลือกแท็บ ออกแบบ ตัวเลือกแรกคือ แบบ. มีรายการดรอปดาวน์พร้อมตัวเลือกไม่กี่อย่าง เลือกเพื่อเลือกระหว่าง เต็มความกว้าง et ตะแกรง.
หากคุณเลือกตัวเลือกที่ยังไม่ได้เลือก โมดูลจะโหลดใหม่และแสดงรายการพอร์ตโฟลิโอในเลย์เอาต์นี้ ตัวอย่างด้านล่างแสดงเค้าโครงกริด
การเปรียบเทียบเค้าโครงโมดูลพอร์ตโฟลิโอที่กรองได้
เลย์เอาต์ทั้งสองแตกต่างกันมาก แต่ก็มีความคล้ายคลึงกันบางประการ ทั้งสองแสดงตัวกรองที่ด้านบนของโมดูล ชื่อและเมตาด้านล่างรูปภาพของรายการ และการแบ่งหน้าที่ด้านล่างของโมดูล
มีความแตกต่างกันอย่างไร
รูปแบบความกว้างเต็ม
ความกว้างเต็มแสดงภาพขนาดใหญ่ที่มีองค์ประกอบของพอร์ตโฟลิโอที่ใช้ความกว้างเต็มของพื้นที่พอร์ตโฟลิโอ รูปภาพจะแสดงในรูปแบบดั้งเดิมและขยายให้พอดีกับความกว้างที่มี
มันไม่ได้เพิ่มช่องว่างระหว่างรายการกระเป๋าเงินมากนัก เราแนะนำให้จำกัดจำนวนโพสต์ไว้ไม่กี่โพสต์ ตัวอย่างด้านล่างแสดงเลย์เอาต์เต็มความกว้างที่มี 2 โพสต์
เค้าโครงกริด
เลย์เอาต์ Grid แสดงรายการได้สูงสุด 4 รายการติดต่อกัน ช่วยเพิ่มช่องว่างระหว่างองค์ประกอบต่างๆ รูปภาพจะถูกครอบตัดเพื่อสร้างภาพขนาดย่อที่มีขนาดเท่ากันโดยไม่คำนึงถึงขนาดและรูปร่างของรูปภาพ
สำหรับสิ่งนี้ เราจำกัดโมดูลให้แสดงสี่โพสต์เพื่อแสดงการแบ่งหน้า
เมื่อใดควรใช้เลย์เอาต์ของโมดูลพอร์ตโฟลิโอที่สามารถกรองได้แต่ละแบบ
การจัดเตรียมทั้งสองมีข้อดี ต่อไปนี้คือเคล็ดลับบางประการเกี่ยวกับเวลาที่จะใช้แต่ละเลย์เอาต์
รูปแบบความกว้างเต็ม
ใช้เค้าโครงแบบเต็มความกว้างเมื่อคุณมีเพียงไม่กี่รายการที่จะแสดงหรือต้องการเน้นที่บางรายการ
ใช้เลย์เอาต์นี้เมื่อคุณต้องการเน้นหรือดึงความสนใจไปที่รูปภาพเด่น
เค้าโครงกริด
ใช้เค้าโครงตารางเมื่อคุณต้องการแสดงรายการจำนวนมาก หรือเมื่อคุณต้องการให้เค้าโครงแสดงรายการเพิ่มเติมในพื้นที่ขนาดเล็ก
วิธีปรับแต่งเค้าโครงโมดูลพอร์ตโฟลิโอที่สามารถกรองได้
ตอนนี้เราได้เห็นวิธีการเลือกเลย์เอาต์ วิธีการทำงาน และเวลาที่จะใช้แล้ว มาดูวิธีปรับแต่งเลย์เอาต์ทั้งสองนี้กัน
เราจะใช้หน้า Portfolio ของ ชุดเค้าโครงจิตรกรฟรี มีอยู่ใน Divi นี่คือหน้าเดิม
เราจะแทนที่พอร์ตโฟลิโอด้วยโมดูลพอร์ตโฟลิโอที่กรองได้และใช้รูปภาพและชื่อเดียวกัน
เราจะสร้างสองเวอร์ชัน: เวอร์ชันหนึ่งมีเลย์เอาต์เต็มความกว้าง และอีกเวอร์ชันหนึ่งมีเลย์เอาต์กริด
วิธีปรับแต่งเค้าโครงกริดของโมดูลพอร์ตโฟลิโอที่สามารถกรองได้
เราจะเริ่มด้วยเค้าโครงกริด ฉันจะใช้สีและแบบอักษรจากเลย์เอาต์ดั้งเดิม
เนื้อหา
เปิดพวกเขา พารามิเตอร์โมดูล และป้อน 4 สำหรับ นับจำนวนโพสต์. เลือกทั้งหมด ประเภท ที่คุณต้องการแสดงในโมดูล
- จำนวนโพสต์: 4
- หมวดหมู่ที่รวม: เลือกหมวดหมู่
อารมณ์
จากนั้นเลือกแท็บ ออกแบบ และเลือก ตะแกรง ในตัวเลือกเค้าโครง
- เค้าโครง: Grid
ภาพ
เลื่อนไปที่ ภาพ และเลือกตัวเลือก กล่องเงา. เปลี่ยนมัน สีเงา ใน rgba(0,0,0,0.05)
- กล่องเงา: 4ème ตัวเลือก
- เงาสี: rgba(0,0,0,0.05)
ตำรา
จากนั้นเลื่อนลงไปที่ ตำรา และแก้ไข การจัดตำแหน่ง ในศูนย์. ซึ่งจัดศูนย์ตัวกรอง ชื่อ เมตา และการแบ่งหน้า
- การจัดตำแหน่งข้อความ: กึ่งกลาง
ข้อความชื่อ
จากนั้นเลื่อนลงไปที่ ข้อความชื่อเรื่อง และเปลี่ยนการตั้งค่าต่อไปนี้
- แบบอักษรของชื่อเรื่อง : Merriweather
- ชื่อข้อความสี: #000000
เปลี่ยนขนาดของ ตำรวจ ที่ 26px สำหรับเดสก์ท็อป 20px สำหรับแท็บเล็ต และ 18px สำหรับโทรศัพท์
- ขนาดข้อความของชื่อเรื่อง: เดสก์ท็อป 26px, แท็บเล็ต 20px, โทรศัพท์ 18px
ข้อความเกณฑ์การกรอง
จากนั้นเลื่อนลงไปที่ ข้อความเกณฑ์ตัวกรอง และเปลี่ยนการตั้งค่าต่อไปนี้:
- เกณฑ์การกรอง:
- แบบอักษร: มอนต์เซอร์รัต
- น้ำหนักแบบอักษร: ตัวหนา
- สไตล์: TT
- สีข้อความ: #fd6927
- ขนาดตัวอักษร: 12px
ข้อความเมตา
จากนั้นเลื่อนลงไปที่ ข้อความเมตา. เปลี่ยนมัน ตำรวจ ในมอนต์เซอร์รัตและ Couleur ใน #fd6927
- ขนาดข้อความ Meta: มอนต์เซอร์รัต
- Meta Text Color: #fd6927
ตั้งค่า ขนาด บน 12 พิกเซล, theระยะห่างตัวอักษร บน 2 พิกเซลและ ความสูง ของบรรทัดบน 1,2 em
- ขนาดตัวอักษร: 12px
- Meta Letter ระยะห่าง: 2px
- ความสูงของเส้น Meta: 1,2 em
ข้อความเลขหน้า
สุดท้ายเลื่อนลงไปที่ ข้อความเลขหน้า และเปลี่ยนมัน ตำรวจ ในมอนต์เซอร์รัตและตั้งค่า Couleur แบบอักษรบนสีดำ ปิดโมดูลและบันทึกการตั้งค่าของคุณ
- แบบอักษรของเลขหน้า: มอนต์เซอร์รัต
- สีข้อความการแบ่งหน้า: #000000
วิธีปรับแต่งโมดูลพอร์ตโฟลิโอที่กรองได้ในรูปแบบเต็มความกว้าง
ตอนนี้ มากำหนดค่าโมดูลในรูปแบบเต็มความกว้างกัน
เราจะใช้ตัวชี้นำการออกแบบเดียวกันกับเค้าโครงกริด แต่เราจะทำการเปลี่ยนแปลงบางอย่างที่ทำงานได้ดีสำหรับเค้าโครงนี้ เราจะใช้ CSS แบบง่าย ๆ เพื่อปรับแต่งเล็กน้อย
เนื้อหา
เปิดพวกเขา พารามิเตอร์โมดูล และเปลี่ยนจำนวน สิ่งพิมพ์ ถึง 2 ทำให้หน้ามีขนาดเล็กลงและสามารถจัดการได้มากขึ้นด้วยรูปภาพขนาดใหญ่ เลือกทั้งหมด ประเภท ที่คุณต้องการแสดงในโมดูล
- จำนวนโพสต์: 2
- หมวดหมู่ที่รวม: เลือกหมวดหมู่
องค์ประกอบ
เลื่อนไปที่ องค์ประกอบ และปิดการใช้งาน แสดงหมวดหมู่. ปล่อยให้คนอื่น ๆ เปิดใช้งาน หมวดหมู่จะยังคงเปิดใช้งานสำหรับตัวกรอง แต่จะไม่แสดงพร้อมกับชื่อ
- แสดงหมวดหมู่: NO
อารมณ์
เลือกแท็บ ออกแบบ ภายใต้ แบบ, ปล่อยให้ Layout ตั้งค่าเป็น เต็มความกว้างซึ่งเป็นการตั้งค่าเริ่มต้น
- เลย์เอาต์: เต็มความกว้าง
ภาพ
จากนั้นเลื่อนลงไปที่ ภาพ . เลือกตัวเลือก กล่องเงา และเปลี่ยนมัน Couleur แรเงาใน rgba (0,0,0,0.05)
- กล่องเงา: 4ème ตัวเลือก
- เงาสี: rgba(0,0,0,0.05)
ตำรา
จากนั้นเลื่อนลงไปที่ ข้อความ. เปลี่ยน การจัดตำแหน่ง ในศูนย์. ตัวกรอง ชื่อเรื่อง และการแบ่งหน้าจะอยู่กึ่งกลางของรูปภาพ
- การจัดตำแหน่งข้อความ: กึ่งกลาง
ข้อความชื่อ
จากนั้นเลื่อนลงไปที่ ข้อความชื่อ . เปลี่ยนมัน ตำรวจ เป็น Merriweather และเปลี่ยน Couleur ในสีดำ.
- แบบอักษรของชื่อเรื่อง : Merriweather
- ชื่อข้อความสี: #000000
เปลี่ยนขนาดของ ตำรวจ ที่ 40px สำหรับเดสก์ท็อป 20px สำหรับแท็บเล็ต และ 18px สำหรับโทรศัพท์
- ขนาดข้อความของชื่อเรื่อง: เดสก์ท็อป 40px, แท็บเล็ต 20px, โทรศัพท์ 18px
ข้อความเกณฑ์การกรอง
จากนั้นเลื่อนลงไปที่ ข้อความเกณฑ์ตัวกรอง และเปลี่ยนการตั้งค่าต่อไปนี้:
- เกณฑ์การกรอง:
- แบบอักษร: มอนต์เซอร์รัต
- น้ำหนักแบบอักษร: ตัวหนา
- สไตล์: TT
- สีข้อความ: #fd6927
ข้อความเลขหน้า
จากนั้นเลื่อนลงไปที่ ข้อความเลขหน้า. เปลี่ยนมัน ตำรวจ ในมอนต์เซอร์รัต ให้เปลี่ยน น้ำหนัก กึ่งหนาและตั้งค่า สีตัวอักษร บน #fd6927 ปิดโมดูลและบันทึกการตั้งค่าของคุณ
- แบบอักษรของเลขหน้า: มอนต์เซอร์รัต
- สี: #fd6927
- น้ำหนักแบบอักษร: กึ่งหนา
CSS Title Text
เปิดแท็บ ระดับสูง และเลื่อนไปที่ ชื่อผลงาน. เลือกไอคอนเดสก์ท็อป คัดลอกโค้ดด้านล่างสำหรับขนาดหน้าจอต่างๆ ปิดโมดูลและบันทึกการตั้งค่าของคุณ
ชื่อผลงาน:
- เดสก์ทอป
padding-bottom:40px- ยาเม็ด
padding-bottom:30px- เบอร์โทรศัพท์
padding-bottom:20px
Résultats
เลย์เอาต์กริดเวอร์ชันเดสก์ท็อป
เค้าโครงกริดเวอร์ชันโทรศัพท์
ดาวน์โหลด DIVI ทันที !!!
เวอร์ชันเดสก์ท็อปของเลย์เอาต์แบบเต็มความกว้าง
ดูสิ่งนี้ด้วย: Divi: วิธีเปลี่ยนการไล่ระดับสีของพื้นหลังบนโฮเวอร์
เวอร์ชันโทรศัพท์ของรูปแบบเต็มความกว้าง
ดาวน์โหลด DIVI ทันที !!!
สรุป
นี่คือสิ่งที่เราต้องใช้เลย์เอาต์แบบเต็มความกว้างกับกริดในโมดูล พอร์ตโฟลิโอที่กรองได้ ของดีวี การเลือกระหว่างตัวเลือกเลย์เอาต์ทั้งสองนั้นทำได้ง่าย
แต่ละตัวเลือกมีข้อดีและควรได้รับการออกแบบให้ทำงานแตกต่างกัน เว็บไซต์เว็บ. เพียงปรับแต่งเล็กน้อยเพื่อให้แน่ใจว่าโมดูลของคุณทำงานได้ดีกับเลย์เอาต์ Divi
เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการ Divi ครั้งต่อไปของคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ
อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
