คุณต้องการลอยโพสต์บล็อกใน Divi หรือไม่?
วันนี้เราจะแสดงวิธีที่สร้างสรรค์ในการนำเสนอโพสต์บล็อกเป็นการ์ดลอยใน Divi ทุกบล็อกหรือ เว็บไซต์เว็บ ควรตั้งเป้าให้มีความเป็นเลิศ เนื้อหา น่าดึงดูดและอาจมีความสำคัญหรือเข้าถึงได้พอๆ กัน
วิธีหนึ่งที่จะทำให้มั่นใจได้ว่า เนื้อหา ผู้ใช้ยังคงเข้าถึงได้คือการทำให้ลอยอยู่บนหน้า
และสำหรับบล็อกเกอร์เราจะแสดงวิธีการนำเสนอบทความจาก บล็อกของคุณ เป็นการ์ดลอยเพื่อให้มองเห็นได้ในขณะที่เลื่อนหน้า
Let 's go
การสำรวจ
นี่คือภาพรวมโดยย่อของผลลัพธ์ที่เราจะได้รับเมื่อสิ้นสุดบทช่วยสอนนี้
สิ่งที่คุณต้องเริ่มต้น
ก่อนที่คุณจะเริ่มสร้างการออกแบบนี้ใน Divi คุณจะต้องทำสิ่งต่อไปนี้:
- สร้างหน้าใหม่ ตั้งชื่อที่เกี่ยวข้องแล้วคลิก 'ใช้ Divi Builder'
- เลือกตัวเลือก เลือกเลย์เอาต์".
- ค้นหาและเลือกเค้าโครง 'หน้า Landing Page ของบล็อกเกอร์'
- คลิกที่ปุ่ม เลือกเลย์เอาต์ เพื่อโหลดลงเพจ
หลังจากนั้น คุณจะมีเลย์เอาต์ที่สร้างไว้ล่วงหน้าพร้อมใช้สำหรับบทช่วยสอนนี้
วิธีสร้างบล็อกโพสต์การ์ดลอยโดยใช้โมดูลบล็อกของ Divi
เมื่อโหลดเลย์เอาต์บนหน้าแล้ว เราก็พร้อมที่จะสร้างการ์ดลอยโพสต์บล็อกของเรา
อ่าน: วิธีสร้าง Sticky Global Header ใน Divi
สร้างส่วนใหม่ที่ด้านล่างสุดของเค้าโครง
จากนั้นเพิ่มแถวหนึ่งคอลัมน์ใหม่ในส่วน
เพิ่มโมดูลบล็อกและชื่อให้กับแถว/คอลัมน์
แทนที่จะสร้างโมดูลบล็อกใหม่ที่นี่ ให้เลื่อนขึ้นและค้นหาโมดูลบล็อกที่มีอยู่ซึ่งแสดงโพสต์บล็อกสามรายการ (อยู่ในส่วนที่สามใกล้กับตรงกลางของหน้า) เปิด " พารามิเตอร์โมดูลอื่นๆ »และเลือก« สำเนาโมดูล".
จากนั้นวางโมดูลลงในแถวหนึ่งคอลัมน์ใหม่ที่เราสร้างขึ้นที่ด้านล่างของหน้าโดยคลิกขวาที่ไอคอนเครื่องหมายบวกสีเทาแล้วเลือก " วางโมดูล".
ต่อไป เราจะเพิ่มชื่อเหนือโพสต์บล็อกของเราซึ่งจะลอยอยู่เหนือการ์ดบล็อกด้วย เมื่อต้องการทำสิ่งนี้ ให้คัดลอกโมดูล Text ที่มีอยู่ด้วยข้อความชื่อขนาดเล็ก " ไลฟ์สไตล์".
จากนั้นวางโมดูลเหนือโมดูลบล็อกใหม่ที่เราเพิ่งเพิ่มเข้าไป
ถัดไป แก้ไขข้อความชื่อเพื่ออธิบายประเภทของโพสต์ในบล็อกที่คุณต้องการนำเสนอ ในตัวอย่างนี้ เราจะใช้ " จุดเด่น".
ปรับแต่งเส้นด้วยตำแหน่งคงที่และความกว้างที่กำหนดเอง
เราต้องการลดขนาดของบล็อกโพสต์แบบลอยเพื่อไม่ให้ใช้พื้นที่บนหน้ามากเกินไปเมื่อมีตำแหน่งคงที่ มันจะสนุกสนาน ในการดำเนินการนี้ ให้เปิดการตั้งค่าบรรทัดและอัปเดตสิ่งต่อไปนี้:
ในการทำให้ไอเทมลอยได้ เราต้องกำหนดตำแหน่งที่แน่นอนให้กับเส้น ภายใต้แท็บขั้นสูง ให้อัปเดตสิ่งต่อไปนี้:
- ตำแหน่ง: คงที่
- ตำแหน่ง: ล่างขวา
- ออฟเซ็ตแนวตั้ง: 20px
- ออฟเซ็ตแนวนอน: 20px
- ดัชนี Z: 12
อัปเดตโมดูลบล็อกที่มีเนื้อหาน้อยที่สุดและเงากล่อง
โดยทั่วไป โมดูลบล็อกมีเค้าโครงกริดแบบสามคอลัมน์อยู่แล้วและสไตล์ที่ดีที่มาพร้อมกับชุดเค้าโครงที่เราได้เลือกไว้ แต่มีบางสิ่งที่เราต้องทำ
ดูเพิ่มเติม: วิธีสร้างส่วนหัวส่วนกลางด้วยแบบฟอร์มการเข้าสู่ระบบใน Divi
ก่อนอื่น เราต้องลดขนาดของแผนที่ (แนวตั้ง) และลบองค์ประกอบบางส่วนออก เนื้อหา.
ในการดำเนินการนี้ ให้เปิดการตั้งค่าบล็อกและซ่อนองค์ประกอบทั้งหมดยกเว้นรูปภาพเด่น ซึ่งจะทำให้โพสต์แสดงเฉพาะภาพและชื่อที่แนะนำ
ภายใต้แท็บ สไตล์ กำหนดค่าเงาของกล่องดังนี้:
- กล่องเงา: ดูภาพหน้าจอ
- ความแรงของกล่องเงาเบลอ: 28px
- สีแบบอักษรของคำบรรยาย: rgba(0,0,0,0.19)
การสำรวจ
นี่คือตัวอย่างผลลัพธ์ที่เรามี
ทำให้บรรทัดของบทความปรากฏบนโฮเวอร์
สุดท้ายนี้ เราสามารถเพิ่มเอฟเฟกต์โฮเวอร์ที่สวยงามซึ่งกระตุ้นให้ผู้ใช้โต้ตอบกับบทความลอยตัวได้
อ่าน: วิธีสร้างหน้าบล็อกด้วยโมดูลบล็อกใน Divi
เปิดการตั้งค่าบรรทัดและอัปเดตตัวเลือก:
สำหรับสำนักงาน
- แปลงร่าง: 50%
สำหรับสถานะโฮเวอร์
- แปลงร่าง: 0%
ในขั้นต้น การดำเนินการนี้จะทำให้ทั้งบรรทัดอยู่นอกวิวพอร์ตของเบราว์เซอร์ 50% เมื่อผู้ใช้เลื่อนเมาส์ไปเหนือบรรทัด ผู้ใช้จะกลับเข้าสู่มุมมองใหม่ทั้งหมด
ซ่อนแถวบนมือถือ
เว้นแต่ว่าคุณต้องการเผยแพร่โพสต์บล็อกเดียว ไม่ควรลอยโพสต์บล็อกเหล่านั้นบนมือถือ อาจใช้พื้นที่มากเกินไปและทำให้เกิดปัญหาเมื่อพยายามเลื่อน
ดูเพิ่มเติม: วิธีเพิ่มแบบฟอร์มการติดต่อในส่วนหัวส่วนกลางใน Divi
หากต้องการซ่อนแผนที่บนมือถือ ให้เปิดการตั้งค่าส่วนและปิดการมองเห็นส่วนในโทรศัพท์และแท็บเล็ต
ผลสุดท้าย
ดาวน์โหลด DIVI ทันที!!!
สรุป
ดังนั้น ! เราได้แสดงให้คุณเห็นในบทช่วยสอนนี้ถึงวิธีที่สร้างสรรค์และเป็นต้นฉบับในการนำเสนอบทความในบล็อกที่คุณต้องการเน้น
หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
