วิธีเพิ่มคำคมเน้น Divi ที่สร้างขึ้นตลอดโพสต์ Gutenberg ของคุณ

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

ไปกันเถอะ

ดูตัวอย่าง

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

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงคำคมที่เน้น Divi-Built ฟรี

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

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

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

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

ดาวน์โหลด

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

https://youtu.be/zScpa4-I7-8

สมัครสมาชิกช่อง Youtube ของเรา

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

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

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

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

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

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

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

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

ขั้นตอนทั่วไป

ใช้เทมเพลตโพสต์บล็อกที่เรียบง่ายและเป็นมิตรกับ UX

ดาวน์โหลดเทมเพลต

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

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

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

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

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

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

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

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

เพิ่มบล็อก Divi ใหม่ภายในโพสต์ของคุณ

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

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

สร้างตัวอย่างใหม่ #1

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

ระยะห่าง

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

• ขอบบน: 50px
• ขอบล่าง: 50px
• ระยะขอบซ้าย: -5%
• ระยะขอบขวา: -5%

ชายแดน

เพิ่มเส้นขอบด้านซ้ายในส่วนถัดไป

• ความกว้างของเส้นขอบด้านซ้าย: 2px
• สีขอบซ้าย: #000000

แอนิเมชั่น

และใช้การตั้งค่าแอนิเมชั่นต่อไปนี้:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ลง
• ระยะเวลาแอนิเมชั่น: 1500ms
• ความเข้มของแอนิเมชั่น: 200%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out

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

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

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

ขนาด

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

• ความกว้าง: 90%
• ความกว้างสูงสุด: 100%

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 1500ms
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out

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

แทรกเนื้อหา H3

โมดูลเดียวที่เราต้องการคือโมดูลข้อความ แทรกเนื้อหาใบเสนอราคาที่เน้น H3

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

ตั้งค่าโมดูลให้สมบูรณ์โดยแก้ไขการตั้งค่าข้อความ H3 ดังนี้:

• รูปแบบตัวอักษร H3: ตัวเอียง
• ขนาดข้อความ H3: 2.1rem (เดสก์ท็อป), 1.5rem (แท็บเล็ต), 1.3rem (โทรศัพท์)
• ความสูงของสาย H3: 1.5em

สร้างตัวอย่างใหม่ #2

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

ระยะห่าง

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

• ขอบบน: 50px
• ขอบล่าง: 50px
• ระยะขอบซ้าย: -5%
• ระยะขอบขวา: -5%
• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

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

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

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

ขนาด

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

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

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

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

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

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

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

• แบบอักษรข้อความ: Playfair Display
• สีข้อความ: #eaeaea
• ขนาดตัวอักษร: 500px
• ความสูงของบรรทัดข้อความ: 0em

ระยะห่าง

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

• ขอบบน: 150px

แอนิเมชั่น

จากนั้น เราจะเปลี่ยนการตั้งค่าภาพเคลื่อนไหว

• สไตล์แอนิเมชั่น: Flip
• ทิศทางของแอนิเมชั่น: ศูนย์
• ภาพเคลื่อนไหวล่าช้า: 500ms
• ความเข้มของแอนิเมชั่น: 200%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out

ตำแหน่ง

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

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

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

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

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

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

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

• ส่วนหัว 3 รูปแบบตัวอักษร: ตัวเอียง
• หัวเรื่อง 3 ขนาดข้อความ: 2.6rem (เดสก์ท็อป), 1.7rem (แท็บเล็ต), 1.3rem (โทรศัพท์)
• ส่วนหัว 3 ความสูงของบรรทัด: 1.4em

ระยะห่าง

เพิ่มค่าระยะขอบที่กำหนดเองในขนาดหน้าจอต่างๆ ด้วย

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

แอนิเมชั่น

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยเปลี่ยนการตั้งค่าแอนิเมชั่นดังนี้:

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 2000ms
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out

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

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

ไปยังโมดูลถัดไปและโมดูลสุดท้าย ซึ่งเป็นโมดูลข้อความอื่น เพิ่มสัญลักษณ์คำพูดลงในกล่องเนื้อหา

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

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

• แบบอักษรข้อความ: Playfair Display
• สีข้อความ: #eaeaea
• ขนาดตัวอักษร: 500px
• ความสูงของบรรทัดข้อความ: 0em
• การจัดตำแหน่งข้อความ: ขวา

แอนิเมชั่น

ใช้การตั้งค่าแอนิเมชั่นต่อไปนี้:

• สไตล์แอนิเมชั่น: Flip
• ทิศทางของแอนิเมชั่น: ศูนย์
• ภาพเคลื่อนไหวล่าช้า: 1000ms
• ความเข้มของแอนิเมชั่น: 200%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out

ตำแหน่ง

และตรวจสอบให้แน่ใจว่าใบเสนอราคาอยู่ในมุมขวาล่างของคอนเทนเนอร์แถว

• ตำแหน่ง: Absolute
• ตำแหน่ง: ล่างขวา

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

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

ดูตัวอย่าง

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

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

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

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

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