วิธีสร้างบล็อกโพสต์ฮีโร่แบบไดนามิกที่สวยงามและมีส่วนร่วมด้วย Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์สุดท้ายของทั้งสามตัวอย่างที่เราจะสร้างกัน

ตัวอย่าง #1

ตัวอย่าง #2

ตัวอย่าง #3

เพิ่มโพสต์บล็อกใหม่

โพสต์รายละเอียด

สิ่งแรก เริ่มต้นด้วยการสร้างโพสต์บล็อกใหม่ เพิ่มชื่อ หมวดหมู่ที่เลือก และรูปภาพเด่น เมื่อเสร็จแล้ว ให้เปิดใช้งาน Divi Builder

การตั้งค่าหน้า Divi

ก่อนที่จะเปลี่ยนไปใช้ Visual Builder ให้เปลี่ยนการตั้งค่าหน้า Divi ที่มุมบนขวาของโพสต์บล็อกใหม่

• เค้าโครงหน้า: เต็มความกว้าง
• ชื่อกระทู้ : ซ่อน

เปลี่ยนไปใช้ Visual Builder

ถึงเวลาเปลี่ยนไปใช้ Visual Builder เพื่อเริ่มสร้างตัวอย่างต่างๆ

การสร้างโมดูล

เพิ่มส่วนใหม่ + แถวหนึ่งคอลัมน์

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

โมดูลข้อความหัวเรื่อง

เลือกชื่อโพสต์ เนื้อหาแบบไดนามิก

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

การตั้งค่าข้อความ

จากนั้นไปที่การตั้งค่าข้อความและทำการเปลี่ยนแปลงบางอย่าง

• แบบอักษรของข้อความ: Lato
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #000000
• ขนาดตัวอักษร: 58px (เดสก์ท็อป), 45px (แท็บเล็ต), 35px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

เปลี่ยนค่าระยะห่างด้วย

• ขอบล่าง: 50px
• ช่องว่างภายในด้านบน: 10px
• ช่องว่างภายในด้านล่าง: 10px

โพสต์โมดูลข้อความวันที่เผยแพร่

เลือกวันที่เผยแพร่ เนื้อหาแบบไดนามิก

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

การตั้งค่าข้อความ

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

• น้ำหนักแบบอักษรของข้อความ: เบา
• สีข้อความ: #000000
• ขนาดตัวอักษร: 30px (เดสก์ท็อป), 20px (แท็บเล็ต), 16px (โทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: 14px
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

เพิ่มระยะขอบด้านล่างด้วย

• ขอบล่าง: 50px

โพสต์หมวดหมู่ โมดูลข้อความ

เลือกหมวดหมู่ เนื้อหาแบบไดนามิก

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

การตั้งค่าข้อความ

ไปที่การตั้งค่าข้อความและเปลี่ยนการวางแนวข้อความ

• การวางแนวข้อความ: ศูนย์

ลิงก์การตั้งค่าข้อความ

จากนั้น ใช้การปรับเปลี่ยนบางอย่างกับการตั้งค่าข้อความลิงก์

• ลิงก์น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษรของลิงก์: ตัวพิมพ์ใหญ่
• ลิงค์สีข้อความ: #000000
• ขนาดข้อความลิงก์: 15px
• ระยะห่างระหว่างตัวอักษรของลิงก์: 5px

ระยะห่าง

เพิ่ม padding ด้านล่างต่อไป

• ช่องว่างภายในด้านล่าง: 20px

ชายแดน

และปิดท้ายด้วยขอบด้านล่างที่บอบบาง

• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: #000000

การสร้างตัวอย่าง #1

เพิ่มมาตราใหม่

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ด้วยโครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

เปิดการตั้งค่าขนาดของแถวนี้และเปลี่ยนแปลงสิ่งต่างๆ

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ระยะห่าง

เพิ่มค่าการเว้นวรรคที่กำหนดเองต่อไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• คอลัมน์ที่ 2 ช่องว่างภายในด้านบน: 130px
• คอลัมน์ที่ 2 ช่องว่างภายใน: 130px
• คอลัมน์ 2 ช่องว่างภายในด้านซ้าย: 50px
• คอลัมน์ 2 ช่องว่างภายในด้านขวา: 50px

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

เลือกรูปภาพเด่น เนื้อหาไดนามิก

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

ค่าเริ่มต้นของเส้นขอบ

เรากำลังเพิ่มเส้นขอบด้านขวาบนโฮเวอร์ โดยเลือกความกว้างของเส้นขอบเริ่มต้นต่อไปนี้ก่อน:

• ความกว้างของเส้นขอบขวา: 0px

โฮเวอร์ชายแดน

และเพิ่มการตั้งค่าต่อไปนี้เมื่อวางเมาส์เหนือ:

• ความกว้างของเส้นขอบขวา: 24px
• สีขอบขวา: #FFFFFF

กล่องเงาเริ่มต้น

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

• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 80px
• เงาสี: rgba(255,255,255,0)

กล่องเงาโฮเวอร์

และเปลี่ยนแปลงสิ่งต่าง ๆ เมื่อวางเมาส์เหนือ:

• ตำแหน่งแนวนอนของกล่องเงา: 600px
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 80px
• สีเงา: #E4BAC7

การเปลี่ยนผ่าน

หากต้องการสร้างการเปลี่ยนแปลงที่ราบรื่น ให้เปลี่ยนระยะเวลาการเปลี่ยนในแท็บขั้นสูง

• ระยะเวลาการเปลี่ยนภาพ: 1200ms

วางโมดูลไดนามิกในคอลัมน์2

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

การสร้างตัวอย่าง #2

เพิ่มมาตราใหม่

ค่าเริ่มต้นตัวแบ่งด้านบน

ต่อตอนต่อไป! เพิ่มส่วนใหม่ด้วยตัวแบ่งด้านบนต่อไปนี้:

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ตัวแบ่งสี: #FFFFFF
• ความสูงของตัวแบ่ง: 50px
• การจัดเรียงตัวแบ่ง: ด้านบนของเนื้อหาส่วน

ตัวแบ่งด้านบน Hover

เปลี่ยนความสูงของตัวแบ่งเมื่อโฮเวอร์

• ความสูงของตัวแบ่ง: 174px

ระยะห่าง

ลบช่องว่างภายในที่กำหนดเองทั้งหมดของส่วนถัดไป ซึ่งจะทำให้แถวและส่วนชนกันในขั้นตอนต่อไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

การเปลี่ยนผ่าน

หากต้องการสร้างการเปลี่ยนผ่านตัวแบ่งที่ราบรื่น ให้เปลี่ยนระยะเวลาการเปลี่ยนในแท็บขั้นสูง

• ระยะเวลาการเปลี่ยนภาพ: 500ms

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ตอนนี้ ไปข้างหน้าและเพิ่มแถวในส่วนของคุณโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ค่าเริ่มต้นของสีพื้นหลัง

เพิ่มสีพื้นหลังต่อไปนี้:

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

โฮเวอร์สีพื้นหลัง

เปลี่ยนสีพื้นหลังบนโฮเวอร์

• สีพื้นหลัง: rgba(255,255,255,0.56)

รูปภาพเด่น ภาพพื้นหลังแบบไดนามิก

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

• การผสมผสานภาพพื้นหลัง: หน้าจอ

ขนาด

อนุญาตให้แถวใช้ความกว้างทั้งหมดของหน้าจอโดยเปลี่ยนการตั้งค่าการปรับขนาด

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

และเพิ่มค่าระยะห่างช่องว่างภายในที่กำหนดเอง

• ช่องว่างภายในด้านบน: 200px
• ช่องว่างภายในด้านล่าง: 200px
• ช่องว่างภายในด้านซ้าย: 100px (เดสก์ท็อป), 50px (แท็บเล็ต), 20px (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 100px (เดสก์ท็อป), 50px (แท็บเล็ต), 20px (โทรศัพท์)

การเปลี่ยนผ่าน

สุดท้ายแต่ไม่ท้ายสุด สร้างการเปลี่ยนแปลงที่ราบรื่นโดยการเปลี่ยนระยะเวลาการเปลี่ยน

• ระยะเวลาการเปลี่ยนภาพ: 700ms

วางโมดูลไดนามิกในคอลัมน์

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

การสร้างตัวอย่าง #3

เพิ่มมาตราใหม่

รูปภาพเด่น ภาพพื้นหลังแบบไดนามิก

สู่ตัวอย่างสุดท้าย! เพิ่มส่วนใหม่และเลือกรูปภาพเด่นเป็นภาพพื้นหลังของส่วน

ระยะห่างเริ่มต้น

จากนั้น ให้ลบช่องว่างภายในแบบกำหนดเองเริ่มต้นทั้งหมดของส่วนนั้น

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

โฮเวอร์ระยะห่าง

เพิ่มระยะขอบแบบกำหนดเองบนโฮเวอร์เพื่อสร้างเอฟเฟกต์การย่อขนาด

• ช่องว่างภายในด้านซ้าย: 150px (เดสก์ท็อป), 50px (แท็บเล็ต), 30px (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 150px (เดสก์ท็อป), 50px (แท็บเล็ต), 30px (โทรศัพท์)

การเปลี่ยนผ่าน

เปลี่ยนระยะเวลาการเปลี่ยนเช่นกัน

• ระยะเวลาการเปลี่ยนภาพ: 500ms

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

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

ค่าเริ่มต้นของสีพื้นหลัง

เพิ่มสีพื้นหลังต่อไปนี้:

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

โฮเวอร์สีพื้นหลัง

เปลี่ยนสีพื้นหลังบนโฮเวอร์

• สีพื้นหลัง: rgba(255,255,255,0.46)

พื้นหลังไล่โทนสี

เพิ่มพื้นหลังไล่ระดับแนวรัศมีด้วย

• สี 1: rgba(41,196,169,0)
• สี 2: #ffffff
• ประเภทการไล่ระดับสี: เรเดียล
• ตำแหน่งเริ่มต้น: 29%
• ตำแหน่งสุดท้าย: 29%

ขนาด

เปลี่ยนการตั้งค่าขนาดของแถวถัดไป

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

และเพิ่มค่าการเติมที่กำหนดเอง

• ช่องว่างภายในด้านบน: 200px
• ช่องว่างภายในด้านล่าง: 200px
• ช่องว่างภายในด้านซ้าย: 100px (เดสก์ท็อป), 50px (แท็บเล็ต), 20px (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 100px (เดสก์ท็อป), 50px (แท็บเล็ต), 20px (โทรศัพท์)

การเปลี่ยนผ่าน

สุดท้ายแต่ไม่ท้ายสุด ให้เปลี่ยนระยะเวลาการเปลี่ยนภาพเพื่อให้การเปลี่ยนแปลงราบรื่น

• ระยะเวลาการเปลี่ยนภาพ: 500ms

วางโมดูลไดนามิกในคอลัมน์

ไปข้างหน้าและวางโมดูลที่สร้างไว้ล่วงหน้าทั้งหมดในคอลัมน์ของแถว

เปลี่ยนการวางแนวข้อความของโมดูลทั้งหมด

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

• การวางแนวข้อความ: ซ้าย

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูตัวอย่างสุดท้ายที่เราได้สร้างไว้

ตัวอย่าง #1

ตัวอย่าง #2

ตัวอย่าง #3

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

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