วิธีรวมช่องสรุปเค้าโครง Divi บล็อกใน Gutenberg Post ของคุณ

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลด The Summary Box Divi Layout Block ฟรี

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

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

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

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

ดาวน์โหลด

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

การนำเข้า Layout Block JSON

อัปโหลดเค้าโครงไปยัง Divi Library

หากต้องการนำเข้าไฟล์ JSON ที่คุณสามารถดาวน์โหลดได้ด้านบน ให้ไปที่ไลบรารี Divi ในส่วนหลังของแดชบอร์ด WordPress แล้วคลิก 'นำเข้าและส่งออก'

จากนั้นเลือกไฟล์ JSON ภายในโฟลเดอร์ดาวน์โหลดของคุณและคลิกที่ 'นำเข้า Divi Builder Layouts'

เพิ่ม Divi Block Block ใหม่ภายใน Gutenberg Post

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

นำเข้าไฟล์ JSON จากเค้าโครงที่บันทึกไว้

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

มาเริ่มสร้างใหม่กันเถอะ!

ใช้เทมเพลตการโพสต์ชุดตัวสร้างธีมที่หก

ดาวน์โหลด Sixth Theme Builder Pack

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

ไปที่ตัวสร้างธีม Divi

จากนั้นไปที่ตัวสร้างธีม Divi

อัปโหลดเทมเพลตโพสต์

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

เปิด Gutenberg Post ที่มีอยู่หรือสร้างใหม่

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

เพิ่มบทสรุป H2 Title

ใกล้ถึงจุดสิ้นสุดของบล็อกโพสต์ เราจะเพิ่มชื่อ H2 ใหม่

เพิ่มบล็อก Divi แบบอินไลน์ใหม่

จากนั้นเราจะเพิ่มบล็อกเลย์เอาต์ Divi ใหม่

สร้างเค้าโครงใหม่ภายใน Divi Block

เมื่อคุณเพิ่มบล็อกแล้ว คุณจะได้รับสองตัวเลือก เลือกสร้างเค้าโครงใหม่

การตั้งค่ามาตรา

สีพื้นหลัง

ภายในตัวแก้ไขบล็อกเลย์เอาต์ Divi คุณจะสังเกตเห็นส่วน เปิดส่วนนั้นและใช้พื้นหลังสีขาว

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

ระยะห่าง

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

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

ชายแดน

เพิ่มรัศมีเส้นขอบด้วย

• ล่างซ้าย: 16px
• ล่างขวา: 16px

กล่องเงา

พร้อมด้วยกล่องเงาที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 60px
• ความแรงของการกระจายเงาของกล่อง: 10px
• เงาสี: rgba(0,0,0,0.08)

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

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

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

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและอนุญาตให้แถวใช้ความกว้างของคอนเทนเนอร์ส่วนทั้งหมด

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

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นของแถวถัดไป

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

คอลัมน์ 1 การตั้งค่า

สีพื้นหลัง

ถัดไป เปิดการตั้งค่าคอลัมน์ 1 และใช้สีพื้นหลังสีขาว

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

ระยะห่าง

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

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

กล่องเงา

ดำเนินการต่อโดยเพิ่มเงากล่องที่ละเอียดอ่อนด้วยสีเริ่มต้นและเงาโฮเวอร์ที่แตกต่างกัน

• ความแรงของกล่องเงาเบลอ: 50px
• สีเงาเริ่มต้น: rgba(0,0,0,0)
• โฮเวอร์เงาสี: rgba(0,0,0,0.15)

โฮเวอร์แปลงมาตราส่วน

เมื่อวางเมาส์เหนือ เราต้องการปรับขนาดคอลัมน์เล็กน้อยเช่นกัน

• ขวา: 105%
• ด้านล่าง: 105%

ดัชนีโฮเวอร์ Z

ตั้งค่าคอลัมน์ให้สมบูรณ์โดยเพิ่มดัชนีโฮเวอร์ z

• ดัชนีโฮเวอร์ Z: 11

เพิ่มโมดูลข้อความ #1 ให้กับคอลัมน์

เพิ่มหมายเลขลงในกล่องเนื้อหา

ถึงเวลาเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความแรก เพิ่มตัวเลขลงในกล่องเนื้อหา

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

จากนั้นเพิ่มพื้นหลังแบบไล่ระดับ

• สี 1: #ff5e92
• สี 2: #ffd4b6
• ทิศทางการไล่ระดับสี: 165deg

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

ไปที่แท็บการออกแบบของโมดูลและแก้ไขการตั้งค่าข้อความดังนี้:

• แบบอักษรของข้อความ: Poppins
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 26px
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ขนาด

กำหนดความกว้างและความสูงต่อไป

• ความกว้าง: 150px
• ส่วนสูง: 150px

ชายแดน

เพิ่มรัศมีเส้นขอบด้วย

• ล่างซ้าย ขวาบน และล่างขวา: 100px

องค์ประกอบหลัก CSS

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

display: flex;
align-items: center;
justify-content: center;

ตำแหน่ง

และเราจะดำเนินการตั้งค่าโมดูลให้เสร็จสิ้นโดยจัดตำแหน่งโมดูลใหม่

• ตำแหน่ง: Absolute
• ตำแหน่ง: บนซ้าย

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์

เพิ่มเนื้อหา H3

ไปยังโมดูลข้อความถัดไป เพิ่มเนื้อหา H3 ที่คุณเลือก

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

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

• หัวเรื่อง 3 ขนาดข้อความ: 23px

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างด้วย

• ขอบบน: 100px
• ขอบล่าง: 20px

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

โมดูลต่อไปที่เราต้องการคือโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

• แสดงตัวแบ่ง: ใช่

การตั้งค่าสาย

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าบรรทัดดังนี้:

• สีเส้น: #ff5e92
• สไตล์เส้น: Solid
• ตำแหน่งสาย: Top

ขนาด

ปรับเปลี่ยนขนาดของโมดูลด้วย

• น้ำหนักตัวแบ่ง: 2px
• ความกว้าง: 20%

เพิ่มโมดูลข้อความ #3 ลงในคอลัมน์

เพิ่มเนื้อหา

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

คอลัมน์โคลน

เมื่อคุณสร้างคอลัมน์และโมดูลทั้งหมดเสร็จแล้ว คุณสามารถโคลนทั้งคอลัมน์ได้

เปลี่ยนสีเงาเริ่มต้นของกล่อง

เปิดการตั้งค่าคอลัมน์ 2 และเปลี่ยนสีเงาเริ่มต้น

• เงาสี: rgba(0,0,0,0.06)

เปลี่ยนโมดูลข้อความ #1 พื้นหลังไล่ระดับ

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

• สี 1: #7e5ce6
• สี 2: #25b8ee

เปลี่ยนโมดูลข้อความ #1 เส้นขอบ

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

• ซ้ายบน ล่างซ้าย & ขวาล่าง: 100px

เปลี่ยนโมดูลข้อความ #1 ตำแหน่ง

และเปลี่ยนตำแหน่งโมดูลในแท็บขั้นสูง

• Loaction: ขวาบน

เปลี่ยนสีตัวแบ่ง

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

• สีเส้น: #7e5ce6

เปลี่ยนเนื้อหาทั้งหมด

สุดท้ายแต่ไม่ท้ายสุด ให้เปลี่ยนเนื้อหาโมดูลทั้งหมดในคอลัมน์ 2

โคลนทั้งส่วนสองครั้ง

เมื่อคุณเสร็จสิ้นส่วนแรกทั้งหมดแล้ว คุณสามารถโคลนได้สองครั้ง

เปลี่ยนระยะห่างของส่วนที่ซ้ำกันครั้งแรก

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

• ระยะขอบซ้าย: -5% (เดสก์ท็อป), 0% (แท็บเล็ตและโทรศัพท์)
• ระยะขอบขวา: -5% (เดสก์ท็อป), 0% (แท็บเล็ตและโทรศัพท์)

เปลี่ยนระยะห่างของส่วนที่ซ้ำกันที่สอง

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

• ขอบล่าง: 100px

เปลี่ยนเนื้อหาทั้งหมด

สุดท้ายแต่ไม่ท้ายสุด ให้เปลี่ยนเนื้อหาโมดูลทั้งหมด

บันทึกเค้าโครงไปยังห้องสมุด Divi เพื่อนำมาใช้ใหม่

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

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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