เมื่อคุณปรับปรุงวิธีการสร้างโพสต์บนบล็อกของคุณ เว็บไซต์เว็บคุณอาจต้องการรวม CTA ที่น่าสนใจไว้ในบทความของคุณ ขณะนี้ด้วยการผสานรวม Gutenberg Layout Block ใหม่ของ Divi คุณสามารถเพิ่มบล็อกที่สร้างโดย Divi ใหม่ได้ทุกที่ในโพสต์บล็อก Gutenberg ของคุณได้อย่างง่ายดาย ซึ่งจะทำให้คุณสามารถเก็บ เนื้อหา โพสต์บล็อกโดยรวมในสภาพแวดล้อม Gutenberg ในขณะที่ยังคงสร้าง Divi CTA แบบกำหนดเองโดยใช้ตัวเลือกในตัวของ Divi ที่สุดของทั้งสองโลก! ในบทช่วยสอนนี้ เราจะแสดงวิธีเพิ่มบล็อกเค้าโครง Divi CTA แบบอินไลน์แบบเคลื่อนไหวให้กับโพสต์ Gutenberg ของคุณ นอกจากนี้เรายังจะแชร์ไฟล์ JSON บล็อกเค้าโครง Divi CTA ฟรี!
Let 's go
ผลลัพธ์ที่เป็นไปได้
ก่อนที่เราจะดำน้ำในบทช่วยสอนเรามาดูผลลัพธ์ของขนาดหน้าจอที่แตกต่างกัน
การอิมพอร์ตบล็อกโครงร่าง JSON
ดาวน์โหลดเลย์เอาต์ในไลบรารี Divi
ในการนำเข้าไฟล์ JSON ที่คุณสามารถดาวน์โหลดได้ด้านบนให้ไปที่ไลบรารี Divi ของคุณในแบ็กเอนด์ของแดชบอร์ด WordPress แล้วคลิกที่ 'นำเข้าและส่งออก'
จากนั้นเลือกไฟล์ JSON ในโฟลเดอร์ดาวน์โหลดของคุณและคลิก "นำเข้าเลย์เอาต์ Divi Builder"
เพิ่ม Divi Block ใหม่ใน Gutenberg
เมื่อนำเข้าเค้าโครงของคุณแล้วคุณสามารถเข้าถึงข้อความ Gutenberg และเพิ่มบล็อกเค้าโครง Divi ใหม่
นำเข้าไฟล์ JSON จากงานนำเสนอที่บันทึกไว้
จากนั้นคลิกที่ "โหลดจากไลบรารี" ไปที่ "รูปแบบที่คุณบันทึกไว้" และเลือกเค้าโครงเพื่อนำเข้าบล็อกเค้าโครง Divi CTA ไปยังบล็อกโพสต์ของคุณ แค่นั้นแหละ!
เริ่มสร้างใหม่กันเถอะ!
ใช้เทมเพลตการประกาศสำหรับชุดรูปแบบที่สาม
ใช้ Pack Theme Builder ที่สาม
ถึงเวลาเริ่มสร้างตั้งแต่ต้น! ก่อนอื่นการออกแบบที่เราสร้างขึ้นใหม่นั้นสอดคล้องกับชุดการสร้างธีมที่สามที่เผยแพร่ในบล็อก Divi ไปที่บทความ และดาวน์โหลดไฟล์ JSON สำหรับชุดการสร้างธีมนี้
ไปที่ตัวสร้างธีม Divi
เมื่อคุณดาวน์โหลดชุดสร้างธีมที่สามแล้วคุณสามารถเข้าถึง Divi Theme Builder ได้
ดาวน์โหลดเทมเพลตสิ่งพิมพ์
ดาวน์โหลดเทมเพลตโพสต์ Theme Builder Pack โดยคลิกไอคอนที่มุมขวาบน
จากนั้นเลือกเทมเพลตโพสต์และคลิกที่ "นำเข้าเทมเพลต Divi Theme Builder" อย่าลืมบันทึกการเปลี่ยนแปลงในตัวสร้างธีมด้วย ณ จุดนี้เราได้กำหนดเทมเพลตบล็อกโพสต์จาก Theme Building Pack ให้กับโพสต์ทั้งหมดของเรา
เปิดสิ่งพิมพ์ Gutenberg ที่มีอยู่หรือสร้างขึ้นใหม่
ขั้นตอนต่อไปคือการเพิ่มบล็อกรูปแบบ Divi CTA ในโพสต์ Gutenberg ของเรา ในการดำเนินการนี้ให้เปิดบทความที่มีอยู่หรือสร้างใหม่
เพิ่มบล็อก Divi ใหม่ออนไลน์
เมื่ออยู่ในข้อความคุณสามารถเพิ่มบล็อกเค้าโครง Divi ใหม่ได้
สร้างเค้าโครงใหม่ภายในบล็อก Divi
จากนั้นคุณจะมีสองตัวเลือก เลือกตัวเลือก "สร้างเค้าโครงใหม่"
การตั้งค่ามาตรา
การเว้นวรรค
เมื่ออยู่ในตัวแก้ไขบล็อกเค้าโครง Divi คุณจะสังเกตเห็นส่วนหนึ่ง เปิดส่วนนี้และเพิ่มค่าระยะขอบที่กำหนดเองเพื่อสร้างพื้นที่รอบคอนเทนเนอร์ส่วน
- ขอบบน: 50px
- ขอบล่าง: 50px
- ขอบซ้าย: -10%
- ระยะขอบขวา: -10%
เพิ่มบรรทัด # 1
โครงสร้างคอลัมน์
เพิ่มแถวใหม่ต่อไปโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลเพิ่มเติมให้เปิดพารามิเตอร์บรรทัดและเพิ่มความกว้างและความกว้างสูงสุด
- ความกว้าง: 100%
- ความกว้างสูงสุด: 100%
เพิ่มตัวคั่น # 1 ลงในคอลัมน์
ความชัดเจน
ถึงเวลาเพิ่มโมดูลโดยเริ่มจากโมดูลแยก ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก“ แสดงตัวคั่น”
- แสดงตัวแยก: ใช่
ออนไลน์
สลับไปที่แท็บออกแบบโมดูลและเปลี่ยนการตั้งค่าแถวดังนี้:
- สีของเส้น: # fc526e
- สไตล์ไลน์: ทึบ
- ตำแหน่งเส้น: สูง
ปรับขนาด
เปลี่ยนพารามิเตอร์การปรับขนาดด้วย
- น้ำหนัก Divider: 3px
- ความกว้าง: 30%
- การจัดตำแหน่งของโมดูล: ขวา
- ความสูง: 3px
นิเมชั่น
และเปลี่ยนการตั้งค่าภาพเคลื่อนไหวตาม:
- รูปแบบภาพเคลื่อนไหว: สไลด์
- ทิศทางของภาพเคลื่อนไหว: ซ้าย
- ระยะเวลาการเคลื่อนไหว: 2000 มิลลิวินาที
- ความล่าช้าของภาพเคลื่อนไหว: 500 มิลลิวินาที
- ความเข้มของภาพเคลื่อนไหว: 100%
- ความทึบของภาพเคลื่อนไหวเริ่มต้น: 0%
เพิ่มตัวแบ่ง # 2 ลงในคอลัมน์
ความชัดเจน
ไปยังโมดูลการแยกถัดไป อีกครั้งตรวจสอบให้แน่ใจว่าตัวเลือก "แสดงตัวคั่น" เปิดอยู่
- แสดงตัวแยก: ใช่
ออนไลน์
จากนั้นไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าแถวดังนี้:
- สีของเส้น: # e1e3e8
- สไตล์ไลน์: ทึบ
- ตำแหน่งเส้น: สูง
ปรับขนาด
จากนั้นปรับเปลี่ยนพารามิเตอร์การปรับขนาดโมดูล
- น้ำหนัก Divider: 3px
- ความสูง: 3px
การเว้นวรรค
เพิ่มค่าระยะห่างที่กำหนดเอง
- ขอบซ้าย: 10%
- ระยะขอบขวา: -20%
นิเมชั่น
และดำเนินการตั้งค่าโมดูลให้สมบูรณ์โดยเปลี่ยนการตั้งค่าภาพเคลื่อนไหวดังนี้:
- รูปแบบภาพเคลื่อนไหว: สไลด์
- ทิศทางของภาพเคลื่อนไหว: ซ้าย
- ระยะเวลาการเคลื่อนไหว: 2000 มิลลิวินาที
- ความล่าช้าของภาพเคลื่อนไหว: 500 มิลลิวินาที
- ความเข้มของภาพเคลื่อนไหว: 100%
- ความทึบของภาพเคลื่อนไหวเริ่มต้น: 100%
คุณสามารถเพิ่มตัวคั่นได้มากเท่าที่คุณต้องการปรับแต่งอนิเมชั่นของคุณ
เพิ่มบรรทัด # 2
โครงสร้างคอลัมน์
เพิ่มแถวอื่นในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลเพิ่มเติมให้เปิดพารามิเตอร์ line และแก้ไขพารามิเตอร์การปรับขนาดดังนี้:
- ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 1
- ความกว้าง: 70%
- การจัดแนวบรรทัด: กึ่งกลาง
เพิ่มโมดูลข้อความ # 1 ถึงคอลัมน์
เพิ่มเนื้อหา H2
จากนั้นเพิ่มโมดูลข้อความแรกลงในคอลัมน์แถวด้วย เนื้อหา H2 ที่คุณเลือก
การตั้งค่าข้อความ H2
เปลี่ยนไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าข้อความ H2 ตาม:
- สีข้อความของรายการ 2: # fc526e
- ส่วนหัว 2 ขนาดตัวอักษร: 28px
การเว้นวรรค
จากนั้นเพิ่มค่าการเติมที่กำหนดเอง
- การเสริมด้านบน: 50px
- ช่องว่างภายในด้านล่าง: 50px
- ช่องว่างด้านซ้าย: 50px
ชายแดน
นอกจากนี้เรายังใช้เส้นขอบด้านซ้าย
- ความกว้างชายแดนด้านซ้าย: 2px
- สีเส้นขอบซ้าย: # fc526e
นิเมชั่น
และทำพารามิเตอร์โมดูลให้สมบูรณ์โดยการเพิ่มแอนิเมชั่นส่วนตัว
- รูปแบบภาพเคลื่อนไหว: พลิก
- ทิศทางของภาพเคลื่อนไหว: ตรงกลาง
- ความล่าช้าของภาพเคลื่อนไหว: 1500 มิลลิวินาที
เพิ่มโมดูลข้อความ # 2 ลงในคอลัมน์
เพิ่มเนื้อหา
เพิ่มโมดูลข้อความอื่นด้านล่างโมดูลก่อนหน้าด้วย เนื้อหา เดจาด Choix
การเว้นวรรค
ย้ายไปที่แท็บออกแบบของโมดูลและเปลี่ยนค่าการขยายตาม:
- การเสริมด้านบน: 50px
- ช่องว่างภายในด้านล่าง: 50px
- ช่องว่างภายในขวา: 50px
ชายแดน
จากนั้นเพิ่มเส้นขอบด้านบนและด้านขวา
- ขอบด้านบนและด้านขวา: 2 พิกเซล
- สีของเส้นขอบบนและขอบขวา: # fc526e
นิเมชั่น
และดำเนินการตั้งค่าโมดูลให้สมบูรณ์โดยเปลี่ยนการตั้งค่าภาพเคลื่อนไหวดังนี้:
- รูปแบบภาพเคลื่อนไหว: พลิก
- ทิศทางของภาพเคลื่อนไหว: ตรงกลาง
- ความล่าช้าของภาพเคลื่อนไหว: 1700 มิลลิวินาที
เพิ่มโมดูลปุ่มในคอลัมน์
เพิ่มสำเนา
โมดูลถัดไปและสุดท้ายที่เราต้องการในแถวนี้คือโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก
การตั้งค่าปุ่ม
เปลี่ยนไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าปุ่มดังต่อไปนี้:
- ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
- ขนาดข้อความของปุ่ม: 13px
- สีข้อความปุ่ม: #ffffff
- การไล่ระดับสี 1: # ff5b84
- การไล่ระดับสี 2: # f94857
- ประเภทการไล่ระดับสี: เชิงเส้น
- ทิศทางการไล่ระดับสี: 165deg
- ความกว้างเส้นขอบของปุ่ม: 0px
- รัศมีเส้นขอบของปุ่ม: 0px
- ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
- แบบอักษรของปุ่ม: มอนต์เซอร์รัต
- น้ำหนักแบบอักษรของปุ่ม: ตัวหนากึ่ง
- รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่
การเว้นวรรค
จากนั้นเพิ่มช่องว่างภายในและล่างที่กำหนดเอง
- การเสริมด้านบน: 16px
- ช่องว่างภายในด้านล่าง: 16px
นิเมชั่น
และกรอกพารามิเตอร์โมดูลโดยเพิ่มภาพเคลื่อนไหวต่อไปนี้:
- รูปแบบภาพเคลื่อนไหว: พลิก
- ความล่าช้าของภาพเคลื่อนไหว: 1900 มิลลิวินาที
โคลนบรรทัด # 1 และวางไว้ที่ด้านล่างของส่วน
เมื่อคุณทำบรรทัดแรกและบรรทัดที่สองเสร็จแล้วคุณสามารถโคลนบรรทัดแรกและวางสำเนาที่ด้านล่างของส่วน
เปลี่ยนลำดับของตัวคั่น
เปลี่ยนสถานที่สำหรับโมดูลการแยกครั้งแรกและครั้งสุดท้าย
คิดสุดท้าย
ในบทความนี้ เราได้แสดงวิธีใช้ประโยชน์จากการผสานรวม Gutenberg ใหม่ของ Divi และเพิ่มบล็อก Divi CTA pitch แบบอินไลน์และเคลื่อนไหวลงในบล็อกโพสต์ Gutenberg ของคุณ นี่เป็นวิธีที่ยอดเยี่ยมในการเน้นคำกระตุ้นการตัดสินใจที่คุณเลือกในขณะที่ ผู้เข้าชม อ่านเนื้อหาของโพสต์บล็อกของคุณ