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

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

ขอเริ่มต้น!

การสำรวจ

ต่อไปนี้เป็นภาพรวมของ CTA ที่แทรก XNUMX รายการซึ่งเราจะเพิ่มลงในมุมทั้งสี่ของเทมเพลตเพจ แน่นอนว่าคุณไม่จำเป็นต้องปรับใช้ทั้งสี่อย่างพร้อมกัน สังเกตว่าแต่ละรายการสามารถปิดได้อย่างไรโดยคลิกที่ไอคอน "x" จากนั้นคุณสามารถเลือกที่จะเปิดใช้งาน CTA อีกครั้งโดยคลิกที่ไอคอน "บวก"

สิ่งที่คุณต้องเริ่มต้น

ในการเริ่มต้นคุณจะต้อง เพื่อติดตั้งและเปิดใช้งานธีม Divi . ตรวจสอบให้แน่ใจว่าคุณมี Divi เวอร์ชันล่าสุด

คุณจะต้องมีอย่างน้อยหนึ่งเพจที่สร้างด้วย Divi Builder เพื่อวัตถุประสงค์ในการทดสอบเพื่อกำหนดเทมเพลตใหม่ให้กับเพจนี้เพื่อแสดงผลลัพธ์

การสร้างคำกระตุ้นการตัดสินใจแบบเลื่อนพร้อมเทมเพลตเพจใน Divi

การสร้างโมเดลใหม่

จากแดชบอร์ด WordPress ไปที่ Divi> Theme generator จากนั้นคลิกที่ช่อง "เพิ่มเทมเพลตใหม่" เพื่อสร้างเทมเพลตใหม่

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

ในโมเดลใหม่ให้คลิกที่พื้นที่ "เพิ่มเนื้อหาที่กำหนดเอง" จากนั้นเลือก "สร้างเนื้อหาที่กำหนดเอง"

จากนั้นเลือกตัวเลือก“ สร้างจาก Scratch”

การสร้างส่วนเนื้อหาสิ่งพิมพ์

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

เพิ่มแถวลงในคอลัมน์

ในการเริ่มต้นเพิ่มแถวของคอลัมน์ไปยังส่วนปกติ

เพิ่มโมดูลเนื้อหาการประกาศ

จากนั้นเพิ่มโมดูล เนื้อหา สิ่งพิมพ์ไปยังบรรทัด

การตั้งค่าสาย

หลังจากนั้นอัพเดตพารามิเตอร์บรรทัดดังนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ

การสร้างคำกระตุ้นการตัดสินใจบนซ้าย

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

เพิ่มส่วน

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

เพิ่มส่วนปกติใหม่ลงในเค้าโครงแม่แบบ

เพิ่มแถวลงในคอลัมน์

จากนั้นให้ส่วนนั้นเป็นแถวของคอลัมน์

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

ลาก (หรือย้าย) ส่วนด้านบนส่วนเนื้อหาโพสต์และอัปเดตการตั้งค่าส่วนดังนี้:

• การไล่ระดับสีพื้นหลังด้านซ้าย:
• การไล่ระดับสีพื้นหลังด้านขวา:
• แสดงการไล่ระดับสีเหนือรูปภาพ: ใช่
• ภาพพื้นหลัง: [แทรกรูปภาพ]
• ความกว้าง: 320px
• กำไร: เหลือ 320px
• ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ
• รูปแบบภาพเคลื่อนไหว: สไลด์
• ทิศทางของภาพเคลื่อนไหว: ขวา
• ความล่าช้าของภาพเคลื่อนไหว: 2000 มิลลิวินาที

จากนั้นข้ามไปที่แท็บขั้นสูงและเพิ่มคลาส CSS และดัชนี Z ต่อไปนี้:

• คลาส CSS: slide-in-cta
• ดัชนี Z: 999

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

position: fixed;top: 80px;left: -320px;

จำเป็นต้องมีคลาส CSS เพื่อให้เราสามารถกำหนดเป้าหมายส่วนด้วยโค้ดได้ในภายหลัง Custom CSS จะวางตำแหน่งส่วนบนซ้ายของเทมเพลตเพจในตำแหน่งคงที่ (หรือติดหนึบ) ตำแหน่ง "ซ้าย: -320 พิกเซล" ควรย้ายทั้งส่วน (ซึ่งกว้าง 320 พิกเซล) ออกไปนอกหน้าต่างเบราว์เซอร์ (ให้ออกจากมุมมองของเรา) แต่เรามีขอบด้านซ้าย 320 พิกเซลเพื่อนำกลับมาดู เหตุผลที่สร้างด้วยวิธีนี้คือเราสามารถเปิดหรือปิดค่าระยะขอบเมื่อคุณคลิกที่ไอคอน "x" สิ่งนี้จะทำให้ CTA เลื่อนเข้าและออกจากสายตา

การตั้งค่าสาย

ตอนนี้อัพเดตพารามิเตอร์บรรทัดดังนี้:

• ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ

เพิ่มโมดูลคำกระตุ้นการตัดสินใจ

ภายในแถวเพิ่มโมดูลการเรียกร้องให้ดำเนินการ

การตั้งค่าคำกระตุ้นการตัดสินใจ

จากนั้นอัปเดตการตั้งค่าคำกระตุ้นการตัดสินใจ

เนื้อหา

• ชื่อเรื่อง: [ป้อนข้อความที่คุณเลือก]
• ปุ่ม: [ป้อนข้อความที่คุณเลือก]
• ร่างกาย: [ป้อนข้อความที่คุณเลือก]
• URL ลิงก์ของปุ่ม: [ป้อน URL จริงหรือ #]

จากนั้นลบสีพื้นหลังเริ่มต้นเพื่อแสดงพื้นหลังของส่วนที่เราเพิ่มไว้ก่อนหน้านี้

พารามิเตอร์การออกแบบ (ข้อความปุ่มและเติม)

บนแท็บออกแบบอัพเดตสิ่งต่อไปนี้:

• แบบอักษรของชื่อ: Lato
• น้ำหนักแบบอักษรของชื่อเรื่อง: หนัก
• ความสูงของบรรทัดหัวเรื่อง: 1,3 em
• ตำรวจเมือง: Lato
• น้ำหนักตัวอักษร: หนา
• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 15px
• ความกว้างเส้นขอบของปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
• แบบอักษรของปุ่ม: Lato
• น้ำหนักแบบอักษรของปุ่ม: หนัก
• รูปแบบตัวอักษรของปุ่ม: TT
• ปุ่มเสริม: 12 พิกเซลที่ด้านบน, 12 พิกเซลที่ด้านล่าง, 32 พิกเซลทางด้านซ้าย, 32 พิกเซลทางด้านขวา
• การขยาย: 40 พิกเซลที่ด้านบน, 40 พิกเซลที่ด้านล่าง, 40 พิกเซลทางด้านซ้าย, 40 พิกเซลทางด้านขวา

เพิ่มไอคอนเปิดและปิดด้วยโมดูล Blurb

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

การตั้งค่าข้อความนำเสนอ

อัพเดตพารามิเตอร์การออกแบบต่อไปนี้

เนื้อหา

• ลบชื่อและข้อความเริ่มต้น
• ใช้ไอคอน: ใช่
• ไอคอน: เพิ่มเติม (ดูภาพหน้าจอ)

ความคิด

• ไอคอนสี: # 000000
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 40 พิกเซล
• ความกว้าง: 40px
• ความสูง: 40px
• มุมโค้งมน: 50%
• เปลี่ยนการหมุนแกน Z: 135 องศา

การตั้งค่าขั้นสูง

ภายใต้แท็บขั้นสูงเพิ่มคลาส CSS ต่อไปนี้:

• คลาส CSS: slide-in_target

จากนั้นเพิ่ม CSS ที่กำหนดเองนี้ในองค์ประกอบหลัก

position: absolute;bottom: 0px;right: -40px;

เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในภาพ Blurb

margin-bottom: 0px;

ผล

นี่คือผลลัพธ์จนถึงตอนนี้

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

การสร้างคำกระตุ้นการตัดสินใจที่ด้านขวาบน

ด้วยคำกระตุ้นการตัดสินใจแรกในตัวเราสามารถเร่งกระบวนการสร้าง CTA ที่เหลือได้โดยการทำซ้ำส่วนที่สร้างไว้แล้ว ต่อไปเราจะสร้างสไลด์คำกระตุ้นการตัดสินใจสำหรับมุมขวาบน

ส่วนที่ซ้ำกัน

ปรับใช้โหมดการแสดงผลแบบ wireframe จากนั้นทำซ้ำส่วน CTA ที่ด้านซ้ายบน

อัปเดตการตั้งค่าส่วน

จากนั้นอัพเดตพารามิเตอร์ส่วนใหม่ดังนี้:

• ขอบ: ขวา 320px
• ทิศทางการเคลื่อนไหว: ซ้าย

จากนั้นอัปเดต CSS ที่กำหนดเองในองค์ประกอบหลักโดยแทนที่ "ซ้าย" ด้วย "ขวา" นี่คือข้อความที่ตัดตอนมาทั้งหมด:

position: fixed;top: 80px;right: -320px;

อัพเดตพารามิเตอร์ของโมดูล Blurb

จากนั้นเปิดการตั้งค่าโมดูลการแจ้งเตือนและอัปเดตข้อมูลโค้ด CSS ที่กำหนดเองในองค์ประกอบหลักโดยแทนที่ "ขวา" ด้วย "ซ้าย" นี่คือข้อความที่ตัดตอนมาทั้งหมด:

position: absolute;bottom: 0px;left: -40px;

ผล

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

ดำเนินการเดียวกันกับส่วนที่เหลือของส่วน“ ขวาล่าง”,“ ซ้ายล่าง” คุณจะต้องปรับโค้ด CSS สำหรับแต่ละโมดูลเพื่อให้ได้ผลลัพธ์ที่คล้ายกันดังต่อไปนี้

การเพิ่มตัวอย่าง jQuery และ CSS ที่กำหนดเองโดยใช้โมดูลโค้ด

ในขั้นตอนสุดท้ายเราต้องเพิ่ม jQuery และ CSS ที่กำหนดเองเพื่อที่เราจะได้รับฟังก์ชันการเปิดและปิด CTA แต่ละสไลด์

เพิ่มโมดูลรหัส

เพิ่มโมดูลโค้ดในส่วนใดส่วนหนึ่งของงานนำเสนอ

วางรหัส

จากนั้นเปิดการตั้งค่ารหัสและวางรหัสต่อไปนี้ลงในพื้นที่รหัส

<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target  {transform: none !important;background: rgba(0,0,0,0.2);}  .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); });    });})( jQuery );   </script>

คิดสุดท้าย

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