การสร้างบล็อกโพสต์ที่มีคุณค่าต้องใช้เวลาและความพยายาม นอกเหนือจากการค้นหาหัวข้อที่ดีที่สุดเพื่อเขียนในช่องของคุณแล้วสิ่งสำคัญคือต้องทำให้ผู้อ่านมีส่วนร่วมและช่วยให้พวกเขาค้นหาข้อมูลที่ต้องการได้อย่างรวดเร็ว
ตอนนี้วิธีที่ดีในการเข้าถึงประสบการณ์ของผู้ใช้ประเภทนี้คือการแบ่งปันกล่องสรุปภาพที่ส่วนท้ายของโพสต์บล็อกของคุณก่อนความคิดสุดท้าย
ด้วยบล็อกรูปแบบใหม่ของ Divi ตอนนี้คุณสามารถสร้างกล่องสรุปได้อย่างง่ายดายด้วยตัวเลือกในตัวของ Divi ในบทช่วยสอนนี้เราจะแนะนำคุณตลอดกระบวนการและคุณจะสามารถดาวน์โหลดไฟล์ JSON ของเค้าโครงได้ฟรี!
เริ่มสร้างใหม่กันเถอะ!
ใช้เทมเพลตสิ่งพิมพ์สำหรับชุดรูปแบบที่หก
ดาวน์โหลด Sixth Theme Builder Pack
กล่องสรุปที่เราจะสร้างใหม่ตลอดบทช่วยสอนนี้ตรงกับเทมเพลตโพสต์ Sixth Theme Builder Pack อย่างสมบูรณ์แบบ ฟรี. เข้าถึงบทความบล็อก และดาวน์โหลดทั้งชุด
ไปที่ตัวสร้างธีม Divi
จากนั้นไปที่เครื่องมือสร้างธีม Divi
ดาวน์โหลดเทมเพลตสิ่งพิมพ์
คลิกไอคอนที่มุมขวาบนและดาวน์โหลดเทมเพลตโพสต์จาก Theme Building Pack อย่าลืมแก้ไขการเปลี่ยนแปลงใด ๆ ในตัวสร้างธีมในภายหลัง
เปิดสิ่งพิมพ์ Gutenberg ที่มีอยู่หรือสร้างขึ้นใหม่
เมื่อคุณเพิ่มเทมเพลตโพสต์ที่เกี่ยวข้องแล้วก็ถึงเวลาสร้างกล่องสรุป เปิดหรือสร้างโพสต์ใหม่โดยใช้ Gutenberg
เพิ่มบทสรุปของชื่อ H2
ในตอนท้ายของโพสต์บล็อกเราจะเพิ่มชื่อ H2 ใหม่
เพิ่มบล็อก Divi ใหม่ออนไลน์
ต่อไปเราจะเพิ่มบล็อกเลย์เอาต์ Divi ใหม่
สร้างเค้าโครงใหม่ภายในบล็อก Divi
เมื่อคุณเพิ่มบล็อกแล้วคุณจะมีสองตัวเลือก เลือกสร้างเค้าโครงใหม่
การตั้งค่ามาตรา
สีพื้นหลัง
ภายในตัวแก้ไขบล็อกเค้าโครง 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
- ช่องว่างด้านซ้าย: 70 พิกเซล
- ช่องว่างภายในขวา: 70px
กล่องเงา
ดำเนินการต่อโดยการเพิ่มเงาของกล่องที่ละเอียดอ่อนด้วยสีเริ่มต้นและสีเงาที่วางเมาส์เหนือ
- ความแรงของกล่องเงาเบลอ: 50px
- สีเงาเริ่มต้น: rgba (0,0,0,0)
- เลื่อนสีเงา: rgba (0,0,0,0,15)
โฮเวอร์สเกลการแปลง
เมื่อวางเมาส์เหนือเราต้องการปรับขนาดคอลัมน์เล็กน้อย
- ขวา: 105%
- ต่ำ: 105%
ดัชนี Hover Z
ทำพารามิเตอร์คอลัมน์ให้สมบูรณ์โดยการเพิ่มดัชนีโฮเวอร์ z
- ดัชนีโฮเวอร์ Z: 11
เพิ่มโมดูลข้อความ # 1 ลงในคอลัมน์
เพิ่มตัวเลขลงในพื้นที่เนื้อหา
ถึงเวลาเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความแรก เพิ่มตัวเลขลงในกล่อง เนื้อหา.
พื้นหลังไล่ระดับสี
จากนั้นเพิ่มพื้นหลังไล่ระดับสี
- สี 1: # ff5e92
- สี 2: # ffd4b6
- ทิศทางการไล่ระดับสี: 165deg
การตั้งค่าข้อความ
ไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความดังนี้:
- แบบอักษร: Poppins
- สีข้อความ: #ffffff
- ขนาดตัวอักษร: 26px
- การจัดตำแหน่งของข้อความ: ศูนย์
ปรับขนาด
จากนั้นกำหนดความกว้างและความสูง
- ความกว้าง: 150px
- ความสูง: 150px
ชายแดน
เพิ่มรัศมีชายแดน
- ซ้ายล่างขวาบนและล่างขวา: 100 พิกเซล
องค์ประกอบหลัก CSS
เพื่อให้ข้อความอยู่ตรงกลางในคอนเทนเนอร์ของเราเราจะต้องเพิ่มโค้ด CSS สองสามบรรทัดในองค์ประกอบโมดูลหลักในแท็บขั้นสูง
display: flex;align-items: center;justify-content: center;
ตำแหน่ง
และเราจะสิ้นสุดพารามิเตอร์ของโมดูลด้วยการเปลี่ยนตำแหน่งของโมดูล
- ตำแหน่ง: สัมบูรณ์
- ที่ตั้ง: ด้านบนซ้าย
เพิ่มโมดูลข้อความ # 2 ลงในคอลัมน์
เพิ่มเนื้อหา H3
มาดูโมดูลข้อความถัดไปกันดีกว่า เพิ่มบางส่วน เนื้อหา H3 ที่คุณเลือก
การตั้งค่าข้อความ H3
จากนั้นแก้ไขขนาดของข้อความ H3 ของโมดูล
- หัวเรื่องข้อความขนาด 3: 23px
การเว้นวรรค
เปลี่ยนการตั้งค่าระยะห่างด้วย
- ขอบบน: 100px
- ขอบล่าง: 20px
เพิ่มโมดูลการแยกลงในคอลัมน์
ความชัดเจน
โมดูลต่อไปที่เราต้องการคือโมดูลแยก ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก“ แสดงตัวคั่น”
- แสดงตัวแยก: ใช่
การตั้งค่าสาย
สลับไปที่แท็บออกแบบโมดูลและเปลี่ยนการตั้งค่าแถวดังนี้:
- สีของเส้น: # ff5e92
- สไตล์ไลน์: ทึบ
- ตำแหน่งเส้น: สูง
ปรับขนาด
ปรับเปลี่ยนขนาดของโมดูลด้วย
- น้ำหนัก Divider: 2px
- ความกว้าง: 20%
เพิ่มโมดูลข้อความ # 3 ลงในคอลัมน์
เพิ่มเนื้อหา
เรามาดูโมดูลข้อความถัดไปและสุดท้ายกันดีกว่า เพิ่มบางส่วน เนื้อหา เดจาด Choix
คอลัมน์การโคลน
เมื่อคุณเสร็จสิ้นคอลัมน์และโมดูลทั้งหมดแล้วคุณสามารถโคลนคอลัมน์ทั้งหมดได้
เปลี่ยนสีเงาของกล่องเริ่มต้น
เปิดการตั้งค่าในคอลัมน์ 2 และเปลี่ยนสีเงาเริ่มต้น
- สีเงา: rgba (0,0,0,0,06)
เปลี่ยนพื้นหลังไล่ระดับสีของโมดูลข้อความ n ° 1
เปิดโมดูลข้อความแรกใน 2 คอลัมน์ถัดไปและเปลี่ยนพื้นหลังไล่ระดับสี
- สี 1: # 7e5ce6
- สี 2: # 25b8ee
เปลี่ยนเส้นขอบของโมดูลข้อความ n ° 1
เปลี่ยนการตั้งค่าชายแดนโมดูลด้วย
- ซ้ายบน, ซ้ายล่างและล่างขวา: 100 พิกเซล
เปลี่ยนตำแหน่งของโมดูลข้อความ # 1
และเปลี่ยนตำแหน่งโมดูลในแท็บขั้นสูง
- ที่ตั้ง: ด้านบนขวา
เปลี่ยนสีของตัวคั่น
ดำเนินการต่อโดยเปิดการตั้งค่าสำหรับโมดูลการแยก เปลี่ยนสีของเส้นให้เข้ากับโทนสีใหม่
- สีของเส้น: # 7e5ce6
เปลี่ยนเนื้อหาทั้งหมด
สุดท้ายปรับเปลี่ยนเนื้อหาทั้งหมดของโมดูลในคอลัมน์ 2
โคลนทั้งส่วนสองครั้ง
เมื่อคุณทำหัวข้อแรกเสร็จแล้วคุณสามารถโคลนได้สองครั้ง
เปลี่ยนระยะห่างของส่วนที่ซ้ำกันแรก
เปิดการตั้งค่าในส่วนที่ซ้ำกันแรกและเปลี่ยนค่าระยะขอบตาม:
- ระยะขอบซ้าย: -5% (คอมพิวเตอร์เดสก์ท็อป), 0% (แท็บเล็ตและโทรศัพท์)
- ระยะขอบขวา: -5% (สำนักงาน), 0% (แท็บเล็ตและโทรศัพท์)
เปลี่ยนระยะห่างของส่วนที่ซ้ำกันที่สอง
เปิดสำเนาที่สองซ้ำลบค่ามาร์จิ้นทั้งหมดและเพิ่มระยะห่างที่ต่ำกว่าแทน
- ขอบล่าง: 100px
เปลี่ยนเนื้อหาทั้งหมด
สุดท้ายปรับเปลี่ยนเนื้อหาทั้งหมดของโมดูล
บันทึกเค้าโครงในไลบรารี Divi เพื่อนำมาใช้ใหม่
หากคุณวางแผนที่จะใช้กล่องสรุปนี้ในบทความบล็อกอื่น ๆ อย่าลืมบันทึกลงในคลัง Divi ของคุณเพื่อให้คุณสามารถเข้าถึงได้อย่างง่ายดาย! แค่นั้นแหละ !
การสำรวจ
ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ
คิดสุดท้าย
ในบทความนี้ เราได้แสดงวิธีเพิ่มกล่องสรุปในโพสต์ Gutenberg ของคุณด้วยบล็อกเลย์เอาต์ใหม่ของ Divi กล่องสรุปเป็นวิธีการแสดงภาพที่ดีในการช่วยคุณ ผู้เข้าชม เพื่อหาข้อมูลที่ต้องการ
คุณยังสามารถดาวน์โหลดไฟล์ JSON สำหรับเลย์เอาต์ได้ฟรี! หากคุณมีคำถามใด ๆ อย่าลังเลที่จะแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง
