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

Let 's go

ผลลัพธ์ที่เป็นไปได้

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

การนำเสนอแอนิเมชั่น Divi

การอิมพอร์ตบล็อกโครงร่าง JSON

ดาวน์โหลดเลย์เอาต์ในไลบรารี Divi

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

นำเข้า Divi

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

นำเข้า json divi 1

เพิ่ม Divi Block ใหม่ใน Gutenberg

เมื่อนำเข้าเค้าโครงของคุณแล้วคุณสามารถเข้าถึงข้อความ Gutenberg และเพิ่มบล็อกเค้าโครง Divi ใหม่

เพิ่มเค้าโครง Divi

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

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

โหลดเค้าโครง Divi
เลือกเค้าโครง Divi ส่วนภาพเคลื่อนไหว

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

ใช้เทมเพลตการประกาศสำหรับชุดรูปแบบที่สาม

ใช้ Pack Theme Builder ที่สาม

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

แพ็ค wordpress ธีม Divi

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

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

เมนู Divi ตัวสร้างธีม

ดาวน์โหลดเทมเพลตสิ่งพิมพ์

ดาวน์โหลดเทมเพลตโพสต์ Theme Builder Pack โดยคลิกไอคอนที่มุมขวาบน

การพกพาโมดูล Divi

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

สกรีนช็อต wordpress.go 2020.02.05 14 58 38

เปิดสิ่งพิมพ์ Gutenberg ที่มีอยู่หรือสร้างขึ้นใหม่

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

การสร้างสิ่งพิมพ์บน Gutenberg

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

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

เพิ่มเค้าโครง Divi

สร้างเค้าโครงใหม่ภายในบล็อก Divi

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

สร้างเค้าโครง Divi ใหม่

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

การเว้นวรรค

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

  • ขอบบน: 50px
  • ขอบล่าง: 50px
  • ขอบซ้าย: -10%
  • ระยะขอบขวา: -10%
กำหนดค่าระยะห่างของส่วนบน Divi

เพิ่มบรรทัด # 1

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

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

เลือกคอลัมน์ Divi

ปรับขนาด

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

  • ความกว้าง: 100%
  • ความกว้างสูงสุด: 100%
กำหนดค่าขนาดเส้น Divi

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

ความชัดเจน

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

  • แสดงตัวแยก: ใช่
แสดงตัวคั่น Divi

ออนไลน์

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

  • สีของเส้น: # fc526e
  • สไตล์ไลน์: ทึบ
  • ตำแหน่งเส้น: สูง
กำหนดค่าสไตล์ตัวคั่น Divi

ปรับขนาด

เปลี่ยนพารามิเตอร์การปรับขนาดด้วย

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

นิเมชั่น

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

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

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

ความชัดเจน

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

  • แสดงตัวแยก: ใช่
เพิ่มตัวคั่น Divi ใหม่

ออนไลน์

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

  • สีของเส้น: # e1e3e8
  • สไตล์ไลน์: ทึบ
  • ตำแหน่งเส้น: สูง
เพิ่มสาย Divi ใหม่

ปรับขนาด

จากนั้นปรับเปลี่ยนพารามิเตอร์การปรับขนาดโมดูล

  • น้ำหนัก Divider: 3px
  • ความสูง: 3px
น้ำหนักของตัวแบ่งตัวแบ่ง

การเว้นวรรค

เพิ่มค่าระยะห่างที่กำหนดเอง

  • ขอบซ้าย: 10%
  • ระยะขอบขวา: -20%
กำหนดค่าระยะห่างระหว่างโมดูลตัวคั่น Divi

นิเมชั่น

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

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

คุณสามารถเพิ่มตัวคั่นได้มากเท่าที่คุณต้องการปรับแต่งอนิเมชั่นของคุณ

เพิ่มบรรทัด # 2

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

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

เพิ่มโมดูล divi บรรทัด 2

ปรับขนาด

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

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

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

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

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

เพิ่มข้อความในคอลัมน์ divi

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

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

  • สีข้อความของรายการ 2: # fc526e
  • ส่วนหัว 2 ขนาดตัวอักษร: 28px
ส่วนข้อความ Divi

การเว้นวรรค

จากนั้นเพิ่มค่าการเติมที่กำหนดเอง

  • การเสริมด้านบน: 50px
  • ช่องว่างภายในด้านล่าง: 50px
  • ช่องว่างด้านซ้าย: 50px
ปรับแต่งส่วนข้อความ Divi

ชายแดน

นอกจากนี้เรายังใช้เส้นขอบด้านซ้าย

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

นิเมชั่น

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

  • รูปแบบภาพเคลื่อนไหว: พลิก
  • ทิศทางของภาพเคลื่อนไหว: ตรงกลาง
  • ความล่าช้าของภาพเคลื่อนไหว: 1500 มิลลิวินาที
พารามิเตอร์ข้อความโมดูล Divi

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

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

เพิ่มโมดูลข้อความอื่นด้านล่างโมดูลก่อนหน้าด้วย เนื้อหา เดจาด Choix

เพิ่มข้อความโมดูล Divi ใหม่

การเว้นวรรค

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

  • การเสริมด้านบน: 50px
  • ช่องว่างภายในด้านล่าง: 50px
  • ช่องว่างภายในขวา: 50px
กำหนดค่าการขยายโมดูลข้อความ Divi

ชายแดน

จากนั้นเพิ่มเส้นขอบด้านบนและด้านขวา

  • ขอบด้านบนและด้านขวา: 2 พิกเซล
  • สีของเส้นขอบบนและขอบขวา: # fc526e
การกำหนดค่าเส้นขอบโมดูลข้อความ Divi

นิเมชั่น

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

  • รูปแบบภาพเคลื่อนไหว: พลิก
  • ทิศทางของภาพเคลื่อนไหว: ตรงกลาง
  • ความล่าช้าของภาพเคลื่อนไหว: 1700 มิลลิวินาที
ปรับแต่งโมดูลข้อความ Divi ของภาพเคลื่อนไหว

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

เพิ่มสำเนา

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

เพิ่มปุ่ม Divi

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

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

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

การเว้นวรรค

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

  • การเสริมด้านบน: 16px
  • ช่องว่างภายในด้านล่าง: 16px
กำหนดค่าระยะห่างโมดูลปุ่ม Divi

นิเมชั่น

และกรอกพารามิเตอร์โมดูลโดยเพิ่มภาพเคลื่อนไหวต่อไปนี้:

  • รูปแบบภาพเคลื่อนไหว: พลิก
  • ความล่าช้าของภาพเคลื่อนไหว: 1900 มิลลิวินาที
Divi CTA layout block

โคลนบรรทัด # 1 และวางไว้ที่ด้านล่างของส่วน

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

โมดูล Divi แถวที่ 1 ของคอลัมน์

เปลี่ยนลำดับของตัวคั่น

เปลี่ยนสถานที่สำหรับโมดูลการแยกครั้งแรกและครั้งสุดท้าย

การเปลี่ยนลำดับของสิ่งต่างๆ divi

คิดสุดท้าย

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