วิธีสร้างหน้าบล็อกใน Divi

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

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

ดูตัวอย่างการออกแบบ

การสร้างเพจ

ขั้นแรก ไปที่เพจ>เพิ่มใหม่ และสร้างเพจใหม่

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

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

ชื่อหน้า: หน้าบล็อกของ Acai

ย้ายไปที่ Divi Builder

หลังจากนั้นคุณจะต้องเปลี่ยนไปใช้ Divi Builder ใช้ Divi Builder โดยคลิกปุ่มสีม่วงตรงกลางหน้า สิ่งนี้จะนำคุณไปยังส่วนหน้า ซึ่ง Divi Builder จะทำงาน และพร้อมให้เราเริ่มสร้างเพจ

ส่วนฮีโร่พร้อมชื่อเรื่อง

ส่วนฮีโร่สไตล์

เราจะเริ่มต้นด้วยส่วนแรก เปิดตัวเลือกสำหรับส่วน

ทำการเปลี่ยนแปลงบางอย่างในการตั้งค่าส่วน

พื้นหลัง: #f9f3fd
ป้ายกำกับผู้ดูแลระบบ: บล็อก

ชื่อหน้าบล็อก

หลังจากนั้น เราจะสร้างแถวสำหรับชื่อเรื่อง เลือกแถวที่มีสัญญาณสีเขียวที่มีคอลัมน์เดียว

จากนั้นเพิ่มโมดูลข้อความ

จัดสไตล์โมดูลข้อความ

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

แบบอักษร: หัวเรื่อง 1
ข้อความ: บล็อกของเรา

ตอนนี้ให้ย้ายไปที่แท็บการออกแบบแล้วทำการเปลี่ยนแปลงด้านล่างนี้

การจัดแนวข้อความ: กึ่งกลาง
ข้อความหัวเรื่อง: H1
แบบอักษร: ทารกนกกาน้ำ
น้ำหนัก: ตัวหนา

เปลี่ยนสีตัวอักษร ขนาด และความสูงด้วย

สี: #442854
ขนาดข้อความบนเดสก์ท็อป: 130px
ความสูงของเส้น: 0.8em

ตอนนี้เปลี่ยนขนาดข้อความส่วนหัว

ขนาดข้อความแท็บเล็ต: 60px

ตอนนี้เปลี่ยนขนาดไอคอนโทรศัพท์

โทรศัพท์: 40px

สร้างโพสต์บล็อกล่าสุดและ CTA

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

เปิดการตั้งค่าแถวและเปลี่ยนระยะห่างจากแท็บการออกแบบ

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

โมดูลโพสต์บล็อกที่โดดเด่น

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

ใต้การตั้งค่าเนื้อหา ให้ป้อน 1 สำหรับบล็อกการนับโพสต์

จำนวนโพสต์: 1

องค์ประกอบ

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

แสดงผู้แต่ง: ไม่
แสดงการแบ่งหน้า: ไม่ใช่

เค้าโครง

บนแท็บ ออกแบบ ให้เปลี่ยนการตั้งค่าเค้าโครงและการซ้อนทับ

เค้าโครง: เต็มความกว้าง
การซ้อนทับภาพเด่น: ปิด

ข้อความชื่อเรื่อง

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

ระดับหัวเรื่อง: H2
แบบอักษร: ทารกนกกาน้ำ
น้ำหนัก: ตัวหนา
สี: #442854

นอกจากนี้ให้เปลี่ยนขนาดตัวอักษรด้วย

ขนาด: เดสก์ท็อป 30px, แท็บเล็ต 20px, โทรศัพท์ 18px
ความสูงของบรรทัดหัวเรื่อง: 1.1em

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

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

แบบอักษร: ห้องโดยสาร
สี: #442854
ความสูงของเส้น: 1.8em

ข้อความเมตา

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

แบบอักษร: ทารกนกกาน้ำ
น้ำหนัก: ปกติ
สไตล์: ไม่มี
สี: #442854
ขนาด: เดสก์ท็อป 16px, แท็บเล็ต 15px, โทรศัพท์ 14px
ความสูงของเส้น: 1.8em

ระยะห่าง

ตอนนี้เพิ่มระยะห่างบางส่วน

อัตรากำไรขั้นต้น: 0vw

เงากล่อง

สุดท้ายให้ปิดการใช้งาน box-shadow

เงากล่อง: ปิดการใช้งาน

โมดูลข้อความอีเมลบล็อก

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

เนื้อหา

เลือกหัวเรื่อง 2 และป้อนข้อความที่น่าสนใจ

แบบอักษร: H2
ข้อความ: สมัครสมาชิกเพื่อรับข้อเสนอและสูตรอาหาร

ข้อความหัวเรื่อง

สำหรับข้อความหัวเรื่อง ให้เลือกการจัดกึ่งกลาง เลือก H2 เลือก Cormorant Infant และตั้งค่าเป็นตัวหนา

การจัดแนวข้อความ: กึ่งกลาง
ข้อความหัวเรื่อง: H2
แบบอักษร: ทารกนกกาน้ำ
น้ำหนัก: ตัวหนา

สี: #442854
ขนาด:32px
ความสูงของเส้น: 0.95em

ระยะห่าง

สุดท้าย เพิ่มระยะขอบด้านล่างให้กับรายการ

ขอบล่าง: 10px

โมดูล Optin อีเมลบล็อก

ตอนนี้เพิ่มโมดูลตัวเลือกอีเมลลงในคอลัมน์ด้านขวา

เนื้อหา

ลบชื่อเรื่องและข้อความเนื้อหา

ชื่อเรื่อง: ไม่มี
เนื้อความ: ไม่มี

เลื่อนลงไปที่บัญชีอีเมลและเพิ่มผู้ให้บริการของคุณ

จากนั้นเลื่อนไปที่พื้นหลังแล้วยกเลิกการเลือก

ใช้สีพื้นหลัง: ไม่ใช่

เขตข้อมูล

ไปที่แท็บการออกแบบและเปลี่ยนสีพื้นหลังของฟิลด์

สีพื้นหลัง: RGBA(255,255,255,0)
สีข้อความของฟิลด์: #442854

เลื่อนลงไปที่ตัวเลือกแบบอักษรและทำการเปลี่ยนแปลงต่อไปนี้

แบบอักษรของฟิลด์: ห้องโดยสาร
ขนาด: 16px
ความสูงของเส้น: 1.8em

ฟิลด์มุมโค้งมน: 32px
ความกว้างของเส้นขอบ: 2px
สีขอบ: #442854

ปุ่ม

เลื่อนลงไปที่ปุ่มแล้วเลือกใช้สไตล์ที่กำหนดเองสำหรับปุ่ม

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
ขนาด: 18px
สี: #ffffff
พื้นหลังปุ่ม: #442854

รัศมีเส้นขอบ: 50px
แบบอักษร: ทารกนกกาน้ำ
น้ำหนัก: ตัวหนา

มาเพิ่ม Button Margin และ Padding กัน

ขอบบนของปุ่ม: 20px
ช่องว่างด้านบน, ด้านล่าง: 12px
ซ้าย, ขวาแพดดิ้ง: 32px

เพิ่มแถวใหม่สำหรับรายการบล็อก

มาเพิ่มแถวคอลัมน์เดียวใต้ส่วนฮีโร่

การตั้งค่าแถวรายการบล็อก

ไปที่แท็บการออกแบบและปรับช่องว่างภายใน

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

โมดูลบล็อกไปที่แถวของคุณ

เพิ่มโมดูล aBlog ลงในแถวใหม่ของคุณ

จัดสไตล์ฟีดบล็อก

เนื้อหาฟีดของบล็อก

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

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

จำนวนโพสต์: 3

อินพุต 1 เป็นออฟเซ็ต สิ่งนี้จะสั่งให้ Divi เริ่มต้นด้วยโพสต์บล็อกที่สอง เพื่อป้องกันไม่ให้เราแสดงเนื้อหาที่เหมือนกันกับแถวโพสต์บล็อกที่ไฮไลต์เหนือโพสต์นี้

หมายเลขออฟเซ็ตหลัง: 1