วิธีออกแบบโพสต์ล่าสุดตามเลย์เอาต์หมวดหมู่พร้อมเอฟเฟกต์โฮเวอร์สุดเจ๋งใน Divi

เราทุกคนเคยชินกับการเห็นโพสต์ล่าสุดที่แสดงบนเว็บไซต์ โดยปกติแล้วจะสร้างขึ้นโดยใช้วิดเจ็ต WordPress โพสต์ล่าสุดหรือปลั๊กอินเพื่อแสดงบทความที่เผยแพร่ล่าสุดในบล็อก และมักจะปรากฏในหน้าบล็อก ที่ด้านล่างของโพสต์ ในแถบด้านข้าง หรือเป็นส่วนเด่นของหน้า Landing Page (ลักษณะนี้)

สำหรับบทช่วยสอนนี้ เราจะแสดงวิธีแสดงโพสต์ล่าสุดตามหมวดหมู่ การใช้ Divi Builder เท่านั้น (และโมดูลบล็อกบางส่วน) เราจะสร้างส่วนที่แสดงโพสต์ล่าสุดจากสี่หมวดหมู่ที่แตกต่างกัน โพสต์ล่าสุดตามหมวดหมวดหมู่นี้จะมีแท็กหมวดหมู่ แอนิเมชั่น และเอฟเฟกต์โฮเวอร์ที่ไม่เหมือนใคร ทั้งหมดนี้ไม่มีปลั๊กอิน

ตรวจสอบออก!

แอบมอง

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

ดาวน์โหลดกระทู้ล่าสุดตามรูปแบบการจัดหมวดหมู่ฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

Letis ได้รับการกวดวิชาเราจะ?

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

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

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

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้างโพสต์ล่าสุดตามหมวดหมวดใน Divi

สร้างแถว 4 คอลัมน์

ในการเริ่มต้นสิ่งต่างๆ ใน ​​Divi Builder ให้สร้างแถว 4 คอลัมน์

การสร้างโมดูลบล็อก1

แต่ละคอลัมน์ทั้งสี่จะมีโมดูลบล็อกแยกต่างหาก เพิ่มโมดูลบล็อกแรกในคอลัมน์ 1

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

เนื้อหาบล็อก

อัปเดตตัวเลือกเนื้อหาบล็อกดังนี้:

• ประเภทกระทู้: กระทู้
• จำนวนโพสต์: 1
• รวมหมวดหมู่: ข่าว (หรืออย่างใดอย่างหนึ่งของคุณเอง)
• ใช้ข้อความที่ตัดตอนมา: NO
• ความยาวข้อความที่ตัดตอนมา: 120

ตัวเลือกองค์ประกอบ

จากนั้นอัปเดตตัวเลือกองค์ประกอบดังนี้:

• แสดงหมวดหมู่: NO
• แสดงข้อความที่ตัดตอนมา: ไม่ (เดสก์ท็อป), ใช่ (โฮเวอร์และแท็บเล็ต)
• แสดงการแบ่งหน้า: NO

ออกแบบบล็อก

จากนั้นอัปเดตการออกแบบดังนี้:

• สีพื้นหลัง (เดสก์ท็อป): #ffffff
• สีพื้นหลัง (โฮเวอร์): #8ac829
• น้ำหนักแบบอักษรของชื่อเรื่อง: กึ่งหนา
• รูปแบบตัวอักษรของชื่อเรื่อง: TT
• ขนาดข้อความชื่อเรื่อง: 24px
• ระยะห่างของตัวอักษรชื่อเรื่อง: 1px
• ความสูงของบรรทัดชื่อเรื่อง: 1.4em
• สีข้อความ: #ffffff
• น้ำหนักแบบอักษร Meta: เบา
• Meta Letter ระยะห่าง: 3px

• ความสูงขั้นต่ำ: 450px (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ต)
• Padding: 5% บน, 5% ด้านล่าง, 5% ซ้าย, 5% ขวา
• กล่องเงา: ดูภาพหน้าจอ
• สไตล์แอนิเมชั่น: Zoom

ที่ดูแลการออกแบบโมดูลบล็อกแรกของเรา ตอนนี้เราต้องสร้างแท็กหมวดหมู่ที่กำหนดเอง

การสร้างแท็กหมวดหมู่ 1

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

เนื้อหาข้อความ

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

การออกแบบแท็กหมวดหมู่

ภายใต้การตั้งค่าการออกแบบข้อความ ให้อัปเดตสิ่งต่อไปนี้:

• สีพื้นหลัง: #8ac829
• น้ำหนักแบบอักษรของข้อความ: Ultra Bold
• สีข้อความ: #ffffff
• การจัดตำแหน่งข้อความ: center
• ความกว้าง: 120px
• ขอบ: 80px ด้านบน, -80px ด้านล่าง
• Padding : บน 10px ล่าง 10px
• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 1000ms
• ดัชนี Z: 1

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

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

คัดลอกข้อความและโมดูลบล็อกในคอลัมน์ 1 แล้ววางลงในคอลัมน์ 2,3 และ 4 เพื่อให้คุณมีโมดูลที่เหมือนกันในแต่ละคอลัมน์

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

อัปเดตโมดูลในคอลัมน์ 2

อยู่ในมุมมองโครงร่าง เปิดการตั้งค่าสำหรับโมดูลบล็อกในคอลัมน์ 2 และอัปเดตสิ่งต่อไปนี้:

• หมวดหมู่ที่รวม: ธุรกิจ (หรือของคุณเอง)
• สีพื้นหลัง (โฮเวอร์): #f64937

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

• ร่างกาย: “ธุรกิจ”
• สีพื้นหลัง: #f64937

อัปเดตโมดูลในคอลัมน์ 3

จากนั้นเปิดการตั้งค่าสำหรับโมดูลบล็อกในคอลัมน์ 3 และอัปเดตสิ่งต่อไปนี้:

• หมวดหมู่ที่รวม: เงิน (หรือของคุณเอง)
• สีพื้นหลัง (โฮเวอร์): #6529c7

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

• ร่างกาย: “เงิน”
• สีพื้นหลัง: #6529c7

อัปเดตโมดูลในคอลัมน์ 4

จากนั้นเปิดการตั้งค่าสำหรับโมดูลบล็อกในคอลัมน์ 4 และอัปเดตสิ่งต่อไปนี้:

• หมวดหมู่ที่รวม: การฝึกสอน (หรือของคุณเอง)
• สีพื้นหลัง (โฮเวอร์): #f17809

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

• ร่างกาย: “การฝึกสอน”
• สีพื้นหลัง: #f17809

กำลังอัปเดตการตั้งค่าแถว

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 2
• ความกว้าง: 94%
• ความกว้างสูงสุด: 1400px
• ความสูง: 540px (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ต)
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

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

กำลังอัปเดตการตั้งค่าสำหรับแต่ละคอลัมน์

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

• มาตราส่วนการแปลง (โฮเวอร์): 115%

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ให้กับองค์ประกอบหลักบนจอแสดงผลแท็บเล็ตเท่านั้น:

transform: none !important

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

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

กำลังอัปเดตการตั้งค่าส่วน

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

• ไล่สีพื้นหลังด้านซ้าย: #6529c7
• ไล่สีพื้นหลังด้านขวา: #f64937
• ทิศทางการไล่ระดับสี: 270deg
• Padding: บน 10vw, 10vw ด้านล่าง

ผลสุดท้าย

แค่นั้นแหละ! มาดูผลสุดท้ายกัน รูปภาพนี้มีชื่อที่สามารถเพิ่มได้ง่ายเพื่อให้การออกแบบสมบูรณ์

และนี่คือเอฟเฟกต์แอนิเมชั่นและโฮเวอร์

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

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!