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

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

ในบทช่วยสอนนี้ เราจะพูดถึงวิธีการเพิ่ม Divi Email Optin ที่สวยงามให้กับ Gutenberg Blog Post โดยใช้ Divi 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 ไปยังโพสต์ในบล็อกของคุณ แค่นั้นแหละ!

และนั่นแหล่ะ!

ไปกวดวิชากันเถอะ

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

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

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

เพิ่มบล็อกเค้าโครง Divi แบบอินไลน์

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

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

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

เมื่อเลือก Divi Layout Block แล้ว เราจะมีตัวเลือก "สร้างเค้าโครงใหม่" หรือ "โหลดจากไลบรารี" เนื่องจากเราต้องสร้าง optin อีเมลตั้งแต่เริ่มต้น ให้เลือกตัวเลือก "สร้างเค้าโครงใหม่"

การออกแบบมาตรา

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

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

พื้นหลังไล่โทนสี

จากนั้นเพิ่มการไล่ระดับสีพื้นหลังดังนี้:

• พื้นหลังไล่ระดับสีซ้าย: #ff9945
• การไล่สีพื้นหลังด้านขวา: #f86a4c

วงเวียน

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

• สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
• ตัวแบ่งสีด้านบน: #f86a4c
• ตัวแบ่งแนวนอนด้านบนซ้ำ: 0.8x

• สไตล์ตัวแบ่งด้านล่าง: ดูภาพหน้าจอ
• ตัวแบ่งสีด้านล่าง: #ff9945
• ตัวแบ่งแนวนอน ทำซ้ำแนวนอน: 0.8x
• Bottom Divider Flip: แนวนอนและแนวตั้ง

ขอบและขอบ

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

• ขอบ: บน 20px ล่าง 20px
• มุมโค้งมน: 30px
• ความกว้างของเส้นขอบ: 2px
• สีเส้นขอบ: #ff9945
• สไตล์แอนิเมชั่น: Flip

เพิ่มคอลัมน์และตั้งค่าความกว้างของแถว

เมื่อส่วนนี้เสร็จสมบูรณ์แล้ว ให้เพิ่มโครงสร้างแบบหนึ่งคอลัมน์ในแถว

จากนั้นอัปเดตการตั้งค่าแถวดังนี้:

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

สร้างอีเมล Optin

เพิ่มโมดูล Optin อีเมล

ถัดไป เพิ่มโมดูล optin อีเมลในแถว

เนื้อหา Optin อีเมล

สำหรับการตั้งค่าเนื้อหาการเลือกใช้อีเมล ให้อัปเดตสิ่งต่อไปนี้:

• หัวข้อ: “รับเคล็ดลับฟรีทุกสัปดาห์!”
• เนื้อหา: [เก็บเนื้อหาจำลองเริ่มต้น]
• รายการ Mailchimp: [เพิ่มรายการ]
• ใช้ฟิลด์ชื่อเดียว: ใช่
• ใช้สีพื้นหลัง: NO

การออกแบบ Optin อีเมล

ทุ่งนา

ข้ามไปที่แท็บออกแบบและออกแบบฟิลด์ optin อีเมลโดยอัปเดตข้อมูลต่อไปนี้:

• เลย์เอาต์: ร่างกายอยู่ด้านขวา แบบฟอร์มด้านซ้าย
• ฟิลด์สีพื้นหลัง: #f86a4c
• สีข้อความของฟิลด์: #ffffff
• ฟอนต์ฟิลด์: IBM Plex Sans
• ขนาดข้อความของฟิลด์: 18px
• ฟิลด์ ระยะห่างของตัวอักษร: 2px
• ฟิลด์ ความสูงของบรรทัด: 2em

ชื่อ

อัปเดตการตั้งค่าข้อความชื่อเรื่องดังนี้:

• แบบอักษรของชื่อเรื่อง: IBM Plex Sans Condensed
• น้ำหนักแบบอักษรของชื่อเรื่อง: กึ่งหนา
• สีข้อความของชื่อเรื่อง: #ffffff
• ขนาดข้อความของชื่อเรื่อง: 60px (เดสก์ท็อป), 30px (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 1.2em (เดสก์ท็อป), 1.6 (โทรศัพท์)

ปุ่ม

สำหรับปุ่ม ให้อัปเดตสิ่งต่อไปนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #ff9945
• ปุ่มไล่ระดับสีพื้นหลังซ้าย: #ff9945
• ปุ่มไล่ระดับสีพื้นหลังด้านขวา: #ffffff
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งสุดท้าย: 34%
• ความกว้างของขอบปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
• แบบอักษรของปุ่ม: IBM Plex Sans
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: TT
• ปุ่ม Padding: บน 15px, ด้านล่าง 15px

การขยายความ

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

• ช่องว่างภายใน: 5% ซ้าย 5% ขวา

ผลสุดท้าย

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

นี่คือแอนิเมชั่นเล็กๆ น้อยๆ ของอีเมล Optin เมื่อคุณเลื่อนลงมาตามโพสต์

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!