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

ในบทช่วยสอนนี้ เราจะดูวิธีการเพิ่ม ฟอร์ม สมัครสมาชิกโพสต์บล็อก Gutenberg โดยใช้บล็อกเลย์เอาต์ Divi

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

ผลสุดท้าย divi

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

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

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

นำเข้า Divi

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

นำเข้า json divi 1

เพิ่ม Divi Block ใหม่ในโพสต์ Gutenberg

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

การออกแบบ Divi

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

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

กรอกแบบฟอร์มบน gutenberg
การสมัครอีเมลเค้าโครง Divi

และนั่นคือทั้งหมด!

ใส่โมดูลฟอร์ม Divi

มาดูบทแนะนำกันดีไหม

เพิ่มโมดูลอีเมล Optin ลงในโพสต์บล็อก Gutenberg ของคุณ

สร้างหรือแก้ไขโพสต์บล็อก

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

การออกแบบรายการ

เพิ่มบล็อกเลย์เอาต์ Divi ออนไลน์

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

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

เพิ่มบล็อกการออกแบบ Divi

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

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

ออกแบบการออกแบบ Divi ใหม่

การออกแบบส่วน

ในตัวแก้ไขเค้าโครงเราสามารถเริ่มออกแบบตัวเลือกอีเมลที่จะรวมไว้ในโพสต์ของเราได้ ทุกสิ่งที่เราออกแบบในตัวแก้ไขนี้จะแสดงในพื้นที่ Divi Layout Block ของโพสต์

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

สำหรับเลย์เอาต์เราจะเลือกเลย์เอาต์สองคอลัมน์

เลือกเค้าโครง Divi

จากนั้นเราจะเพิ่มโมดูล Email Optin ลงในคอลัมน์ใดคอลัมน์หนึ่งฉันปล่อยให้คุณเลือกคอลัมน์

โมดูลอีเมล Optin Divi

ต่อไปเราจะปรับแต่งพื้นหลังของส่วน คุณสามารถเปลี่ยนค่าต่างๆเพื่อให้การออกแบบของคุณไม่เหมือนใคร อย่างไรก็ตามเราใช้ค่าต่อไปนี้:

  • พื้นหลัง: # ff6100
  • ตัวคั่นบนและล่าง: ตัวที่ 13 นับจากด้านบน
ตัวคั่นโมดูล Divi
  • ความกว้างขององค์ประกอบตัวแบ่ง: 40px (บนและล่าง)

ตอนนี้เราจะเพิ่มข้อความในคอลัมน์ตรงข้าม ที่นี่ คุณจะใช้ข้อความจูงใจเพื่อนำมา ผู้มาเยือน เพื่อติดตาม.

โมดูลข้อความ Divi

จากนั้นคุณจะต้องทำการแก้ไขต่าง ๆ :

  • ข้อความตัวอักษร: มอนต์เซอร์รัต
  • สีตัวอักษร: #FFF
  • ข้อความอักษรคำบรรยาย H2: มอนต์เซอร์รัต
  • ข้อความบรรยายขนาด H2: 2.5em
  • สีข้อความคำบรรยาย H2: #FFF
การปรับแต่งชื่อ Divi

อย่าลืมกำหนดค่าระบบอีเมลที่คุณจะใช้ คุณควรรู้ว่า Gutenberg เข้ากันได้กับ MailChimp.

คิดสุดท้าย

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