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

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลด The Inline & Animated Divi CTA Layout Block ฟรี

หากต้องการวางมือบนส่วนฮีโร่ฟรี ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล 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 จากเค้าโครงที่บันทึกไว้

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

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

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

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

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

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

เมื่อคุณดาวน์โหลดชุดตัวสร้างธีมชุดที่สามแล้ว คุณสามารถไปที่ตัวสร้างธีม Divi ได้

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

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

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

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

ขั้นตอนต่อไปคือการเพิ่มบล็อกเลย์เอาต์ Divi CTA ในโพสต์ Gutenberg ของเรา ในการทำเช่นนั้น ให้เปิดโพสต์ที่มีอยู่หรือสร้างใหม่

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

เมื่ออยู่ในโพสต์ คุณจะสามารถเพิ่มบล็อกเลย์เอาต์ Divi ใหม่ได้

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

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

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

ระยะห่าง

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

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

เพิ่มแถว #1

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

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

ขนาด

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

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

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

ทัศนวิสัย

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

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

เส้น

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

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

ขนาด

แก้ไขการตั้งค่าการปรับขนาดด้วย

• น้ำหนักตัวแบ่ง: 3px
• ความกว้าง: 30%
• การจัดตำแหน่งโมดูล: ขวา
• ส่วนสูง: 3px

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ระยะเวลาของแอนิเมชั่น: 2000ms
• ภาพเคลื่อนไหวล่าช้า: 500ms
• ความเข้มของแอนิเมชั่น: 100%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

เพิ่มตัวแบ่ง #2 ในคอลัมน์

ทัศนวิสัย

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

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

เส้น

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

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

ขนาด

แก้ไขการตั้งค่าขนาดของโมดูลถัดไป

• น้ำหนักตัวแบ่ง: 3px
• ส่วนสูง: 3px

ระยะห่าง

เพิ่มค่าการเว้นวรรคแบบกำหนดเองด้วย

• ระยะขอบซ้าย: 10%
• ระยะขอบขวา: -20%

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ระยะเวลาของแอนิเมชั่น: 2000ms
• ภาพเคลื่อนไหวล่าช้า: 500ms
• ความเข้มของแอนิเมชั่น: 100%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

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

ทัศนวิสัย

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

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

เส้น

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

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

ขนาด

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

• น้ำหนักตัวแบ่ง: 3px
• ส่วนสูง: 3px

ระยะห่าง

พร้อมกับการตั้งค่าระยะห่าง

• ขอบล่าง: 100px
• ระยะขอบซ้าย: -20%
• ระยะขอบขวา: 10%

แอนิเมชั่น

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

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

เพิ่มแถว #2

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 70%
• การจัดแนวแถว: กึ่งกลาง

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

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

จากนั้น เพิ่มโมดูลข้อความแรกลงในคอลัมน์ของแถวด้วยเนื้อหา H2 ที่คุณเลือก

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

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

• หัวเรื่อง 2 สีข้อความ: #fc526e
• หัวเรื่อง 2 ขนาดข้อความ: 28px

ระยะห่าง

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

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

ชายแดน

เรากำลังใช้เส้นขอบด้านซ้ายด้วย

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

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: Flip
• ทิศทางของแอนิเมชั่น: ศูนย์
• ภาพเคลื่อนไหวล่าช้า: 1500ms

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

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

เพิ่มโมดูลข้อความอื่นด้านล่างโมดูลก่อนหน้าพร้อมเนื้อหาบางส่วนที่คุณเลือก

ระยะห่าง

ย้ายบนแท็บการออกแบบของโมดูลและแก้ไขค่าการเติมให้เหมาะสม:

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

ชายแดน

เพิ่มเส้นขอบด้านบนและด้านขวาถัดไป

• ขอบบน & ขวา: 2px
• สีขอบบน & ขวา: #fc526e

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: Flip
• ทิศทางของแอนิเมชั่น: ศูนย์
• ภาพเคลื่อนไหวล่าช้า: 1700ms

เพิ่มโมดูลปุ่มลงในคอลัมน์

เพิ่มสำเนา

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

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 13px
• สีข้อความของปุ่ม: #ffffff
• ไล่ระดับสี 1: #ff5b84
• ไล่ระดับสี 2: #f94857
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 165deg
• ความกว้างของขอบปุ่ม: 0px

• รัศมีเส้นขอบของปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของปุ่ม: กึ่งหนา
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ระยะห่าง

เพิ่มช่องว่างภายในด้านบนและด้านล่างที่กำหนดเองต่อไป

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

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: Flip
• ภาพเคลื่อนไหวล่าช้า: 1900ms

โคลนแถว #1 & วางที่ด้านล่างของมาตรา

เมื่อคุณทำแถวแรกและแถวที่สองเสร็จแล้ว คุณสามารถโคลนแถวแรกและวางสำเนาที่ด้านล่างของส่วน

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

สลับตำแหน่งสำหรับโมดูลตัวแบ่งแรกและตัวสุดท้าย

เปลี่ยนตัวแบ่ง #1 ระยะห่าง

จากนั้นเปิดโมดูลตัวแบ่งแรกในแถวของคุณและแก้ไขการตั้งค่าการเว้นวรรค

• ขอบบน: 100px
• ระยะขอบซ้าย: 10%
• ระยะขอบขวา: -20%

เปลี่ยนตัวแบ่ง #2 ระยะห่าง

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

• ระยะขอบซ้าย: -20%
• ระยะขอบขวา: 10%

เปลี่ยนตัวแบ่ง #3 ขนาด

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

• การจัดตำแหน่งโมดูล: ซ้าย

Remove Divider #3 ภาพเคลื่อนไหวล่าช้า

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

• ภาพเคลื่อนไหวล่าช้า: 0ms

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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