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

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

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

มาเริ่มกันเลย!

แอบมอง

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

ดาวน์โหลดเทมเพลตหน้า Divi เรียกร้องให้ดำเนินการแบบสไลด์ฟรี

ในการวางมือบนเทมเพลตของเพจจากบทช่วยสอนนี้ ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip และเพิ่มไฟล์ json ไฟล์ใดไฟล์หนึ่งลงใน Divi Theme Builder โดยใช้ตัวเลือก Theme Builder Portability

ไปที่บทช่วยสอนกันไหม

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

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

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

หลังจากนั้นคุณก็พร้อมที่จะไป

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

การสร้างเทมเพลตใหม่

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

กำหนดเทมเพลตให้กับเพจที่คุณต้องการให้แสดงแถบโปรโมชัน

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

จากนั้นเลือกตัวเลือก “สร้างตั้งแต่เริ่มต้น”

การสร้างส่วนเนื้อหาโพสต์

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

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

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

เพิ่มโมดูลเนื้อหาโพสต์

จากนั้นเพิ่มโมดูลเนื้อหาโพสต์ในแถว

การตั้งค่าแถว

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

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

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

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

เพิ่มมาตรา

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

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

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

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

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

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

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

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

• CSS คลาส: สไลด์ใน cta
• ดัชนี Z: 999

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

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

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

การตั้งค่าแถว

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

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

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

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

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

เนื้อหา

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

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

การตั้งค่าการออกแบบ (ข้อความ ปุ่ม และช่องว่างภายใน)

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

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

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

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

การตั้งค่า Blurb

อัปเดตการตั้งค่าการออกแบบต่อไปนี้

เนื้อหา

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

ออกแบบ

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

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

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

• คลาส CSS: slide-in_target

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

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

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

margin-bottom: 0px;

ผลลัพธ์

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

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

การสร้างคำกระตุ้นการตัดสินใจบนสไลด์บนขวา

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

มาตราซ้ำ

ปรับใช้โหมดมุมมองโครงร่างแล้วทำซ้ำส่วน CTA ด้านซ้ายบน

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

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

• ระยะขอบ: 320px ขวา
• ทิศทางของแอนิเมชั่น: ซ้าย

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

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

อัปเดตการตั้งค่าโมดูล Blurb

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

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

ผลลัพธ์

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

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

มาตราซ้ำ

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

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

จากนั้นเปิดการตั้งค่าส่วน อัปเดตองค์ประกอบหลัก CSS โดยแทนที่ "top: 80px" ด้วย "bottom: 0px" นี่คือตัวอย่างสุดท้าย:

position: fixed;
bottom: 0px;
left: -320px;

อัปเดตการตั้งค่าโมดูล Blurb

จากนั้นอัปเดต CSS องค์ประกอบหลักของโมดูล Blurb โดยแทนที่ "bottom: 0px" ด้วย "top: 0px" นี่คือตัวอย่างสุดท้าย:

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

ผลลัพธ์

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

การสร้างคำกระตุ้นการตัดสินใจในสไลด์ด้านล่างขวา

มาตราซ้ำ

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

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

เปิดการตั้งค่าส่วนและอัปเดตองค์ประกอบหลัก CSS โดยแทนที่ "top: 80px;" ด้วย “ด้านล่าง: 0px;” นี่คือตัวอย่างสุดท้าย:

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

อัปเดตการตั้งค่าโมดูล Blurb

จากนั้นเปิดการตั้งค่าโมดูลการนำเสนอและอัปเดตองค์ประกอบหลัก CSS โดยแทนที่ "bottom: 0px;" ด้วย “top: 0px;” นี่คือตัวอย่างสุดท้าย:

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

ผลลัพธ์

ตอนนี้ตรวจสอบคำกระตุ้นการตัดสินใจแบบเลื่อนเข้าที่ด้านล่างขวาบนหน้าสด

การเพิ่ม Custom jQuery และ CSS Code Snippets โดยใช้ Code Module

สำหรับขั้นตอนสุดท้าย เราต้องเพิ่ม 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 เหล่านั้นได้มากขึ้น อย่าลังเลที่จะเพิ่มการหน่วงเวลาของภาพเคลื่อนไหวสำหรับส่วน CTA เพื่อให้ผู้ใช้เห็นภาพเคลื่อนไหวแบบเลื่อนเข้าของ CTA ในภายหลัง (หรือเร็วกว่านั้น) เล็กน้อยหลังจากโหลดหน้าเว็บ คุณยังสามารถใช้ Divi ลีดและเปิดใช้งานการทดสอบแยกเพื่อปรับปรุงการแปลงของ CTA เหล่านั้น และค้นหาว่ามุมใดจะมีการแปลงที่ดีที่สุด

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

ไชโย!