วิธีกำหนดเป้าหมายรถเข็นที่ถูกละทิ้งใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

เผยแพร่แล้ว: 2021-10-14

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

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

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของป๊อปอัปโปรโมชันที่เราจะสร้างในบทช่วยสอนนี้

ป๊อปอัปโปรโมชันนี้จะแสดงบนหน้าหากผู้ใช้เพิ่มสินค้าลงในรถเข็นและเข้าชมหน้าชำระเงิน

ดาวน์โหลดเค้าโครงป๊อปอัปโปรโมชั่นรถเข็นที่ถูกละทิ้งที่กำหนดเป้าหมายใหม่ฟรี

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

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

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

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

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

กล่องแจ้งเตือน Divi

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

การทำความเข้าใจแนวคิด

ก่อนที่จะเข้าสู่กระบวนการสร้างที่สำคัญของบทช่วยสอน มันอาจจะช่วยให้เข้าใจแนวคิดพื้นฐานของสิ่งที่เรากำลังจะสร้าง แนวคิดคือการใช้ Divi Builder เพื่อสร้างป๊อปอัปโปรโมชันบนหน้า Landing Page ที่มีอยู่ เมื่อสร้างส่วนป๊อปอัปโปรโมชันแล้ว เราต้องการเพิ่มตัวเลือกเงื่อนไขที่จะแสดงส่วนดังกล่าวเมื่อตรงตามเงื่อนไขทั้งสองต่อไปนี้

  1. ผู้ใช้มีเนื้อหาในรถเข็น
  2. ผู้ใช้ได้เยี่ยมชมหน้าชำระเงิน

ซึ่งสามารถทำได้โดยใช้ตัวเลือกเงื่อนไขในตัวของ Divi เมื่อแก้ไขส่วน (หรือองค์ประกอบ Divi ใดๆ)

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

  1. ผู้ใช้เข้าชมหน้า Landing Page โดยไม่แสดงป๊อปอัปโปรโมชัน
  2. ผู้ใช้เพิ่มเนื้อหาลงในรถเข็น (ตามเงื่อนไข #1)
  3. ผู้ใช้เข้าสู่หน้าเช็คเอาต์ (ตามเงื่อนไข #2) แต่ด้วยเหตุผลใดก็ตาม ผู้ใช้ไม่ดำเนินการชำระเงินให้เสร็จสิ้นและออกจากระบบ
  4. หลังจากนั้น ผู้ใช้จะกลับไปที่หน้า Landing Page ซึ่งขณะนี้แสดงป๊อปอัปโปรโมชัน ซึ่งจะเปลี่ยนเส้นทางไปยังขั้นตอนการชำระเงินพร้อมส่วนลด

ของเด็ดเพียบ! เมื่อคุณเข้าใจแนวคิดแล้ว ไปที่บทช่วยสอนกันไหม

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

ขยายแท็บมุม

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

  1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
  2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
  3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

กำหนดเป้าหมายรถเข็นที่ถูกละทิ้งใหม่ด้วยป๊อปอัปโปรโมชั่นโดยใช้ตัวเลือกเงื่อนไขของ Divi

ส่วนที่ 1: การอัปโหลดหน้า Landing Page ที่สร้างไว้ล่วงหน้า

สำหรับบทช่วยสอนนี้ เราจะเพิ่มป๊อปอัปโปรโมชันในหน้า Landing Page ของเว็บไซต์ Divi เพื่อเริ่มต้นกระบวนการนี้ เราจะนำเข้าเลย์เอาต์ Perfumery Landing Page จากภายใน Divi Builder

ในการดำเนินการนี้ ให้เปิดเมนูการตั้งค่าแล้วคลิกไอคอนเพิ่มจากไลบรารี จากนั้นค้นหาและค้นหา Perfumery Layout Pack และคลิกเพื่อใช้ Perfumery Layout Page Layout

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

ส่วนที่ 2: การสร้างส่วนคงที่เป็นคอนเทนเนอร์ป๊อปอัปโปรโมชัน

เมื่อโหลดหน้า Landing Page แล้ว เลื่อนไปที่ด้านล่างของหน้าและเพิ่มส่วนปกติใหม่ด้านล่างส่วนท้ายของหน้า

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

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

ความกว้างและช่องว่างภายใน

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

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

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

ชายแดน

จากนั้นให้ส่วนเส้นขอบ

  • ความกว้างของเส้นขอบ: 15px
  • สีเส้นขอบ: #f6f4f2

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

กล่องเงา

เมื่อวางเส้นขอบแล้ว ให้เพิ่มเงาของกล่องในส่วนนั้นเพื่อให้มีความลึกเล็กน้อย:

  • กล่องเงา: ดูภาพหน้าจอ
  • ความชัดเจนของเงากล่อง: 38px
  • เงาสี: rgba(203,146,116,0.6)

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

แอนิเมชั่น

หากต้องการให้ป๊อปอัปมีแอนิเมชั่นล่าช้า ให้อัปเดตสไตล์แอนิเมชันดังนี้:

  • สไตล์แอนิเมชั่น: Flip
  • ทิศทางของแอนิเมชั่น: ซ้าย
  • ระยะเวลาแอนิเมชั่น: 3000ms

นี่จะแสดงส่วนป๊อปอัป 3 วินาทีหลังจากการโหลดหน้าด้วยแอนิเมชั่นพลิกที่ดี

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

ตำแหน่ง

ใต้แท็บขั้นสูง ให้อัปเดตตำแหน่งเพื่อให้ส่วนนั้นคงที่ที่ด้านล่างซ้ายของหน้าต่างเบราว์เซอร์

  • ตำแหน่ง: คงที่
  • ตำแหน่ง: ล่างซ้าย

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

CSS Class

ในที่สุด เราจะเพิ่มไอคอน "X" ที่สามารถคลิกได้ ที่จะปิด/ซ่อนป๊อปอัป เราจำเป็นต้องเพิ่มคลาส CSS ที่กำหนดเองลงในส่วนเพื่อกำหนดเป้าหมายด้วย jQuery

ป้อนคลาส CSS ต่อไปนี้:

  • CSS Class: et-promo-popup

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

ส่วนที่ 3: การเพิ่มตัวเลือกเงื่อนไขให้กับ Section

เมื่อสร้างส่วน (คอนเทนเนอร์ป๊อปอัปของเรา) แล้ว เราก็พร้อมที่จะเพิ่มตัวเลือกเงื่อนไขที่จะแสดงส่วนนั้นเมื่อตรงตามเงื่อนไขทั้งสองต่อไปนี้

  1. ผู้ใช้มีเนื้อหาในรถเข็น
  2. ผู้ใช้ได้เยี่ยมชมหน้าชำระเงิน

เงื่อนไขการแสดงผล 1: สินค้าในรถเข็น

ขั้นแรก เราจะเพิ่มเงื่อนไขการแสดงผลที่จะแสดงส่วน/ป๊อปอัปเมื่อใดก็ตามที่ผู้ใช้มีเนื้อหาในรถเข็น

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

ในเมนูดรอปดาวน์ ให้เลือกเงื่อนไขสินค้าใน รถเข็น

ในป๊อปอัปการตั้งค่าเนื้อหาในรถเข็น ตรวจสอบให้แน่ใจว่าได้ตั้งค่าตัวเลือก แสดงเฉพาะเมื่อรถเข็นของผู้ใช้ ถูกตั้งค่าเป็น “มีสินค้า”

จากนั้นบันทึกการเปลี่ยนแปลง

หมายเหตุ: เงื่อนไขนี้เป็นเงื่อนไขเฉพาะสำหรับไซต์ Divi ที่ใช้ WooCommerce

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

เงื่อนไขการแสดงผล 2: การเยี่ยมชมเพจ

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

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

ในเมนูดรอปดาวน์ เลือกเงื่อนไขการ เยี่ยมชมเพจ

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

จากนั้นบันทึกการเปลี่ยนแปลง

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

แสดงว่าเงื่อนไขทั้งหมดเป็นจริง

เนื่องจากเรามีเงื่อนไขหลายข้อในการเล่น เราสามารถเลือกให้แสดงส่วนนั้นได้หากมีเงื่อนไข ใด หรือ ทั้งหมด เป็นจริง

ในกรณีนี้ การแสดงป๊อปอัปโปรโมชั่นเมื่อเงื่อนไขทั้งหมดเป็นจริง (ผู้ใช้มีเนื้อหาในรถเข็นและได้เข้าชมหน้าชำระเงินแล้ว) เป็นเรื่องที่สมเหตุสมผล

ภายใต้เงื่อนไขการแสดงผล ให้เลือกดังต่อไปนี้:

  • แสดงว่าเงื่อนไขทั้งหมดเป็นจริง

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

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

ส่วนที่ 4: การสร้างเนื้อหาป๊อปอัปโปรโมชัน

ในการสร้างเนื้อหาสำหรับป๊อปอัปโปรโมชั่น เราจะเพิ่มสี่โมดูล:

  1. โมดูลประกาศพร้อมไอคอน X ที่คลิกได้ เพื่อให้ผู้ใช้สามารถปิดป๊อปอัปได้
  2. โมดูลข้อความสำหรับชื่อเรื่องและข้อความเนื้อหา
  3. โมดูลข้อความอื่นสำหรับรหัสโปรโมชั่น
  4. และโมดูลปุ่มที่จะเปลี่ยนเส้นทางไปยังหน้าชำระเงินเพื่อให้ผู้ใช้สามารถดำเนินการซื้อให้เสร็จสิ้นได้

การสร้างไอคอน "X" เพื่อปิดป๊อปอัป

แถวสำหรับไอคอน

ก่อนที่เราจะเพิ่มคำประกาศไอคอน "X" ให้เพิ่มแถวหนึ่งคอลัมน์ใหม่ในส่วน

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

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

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

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

จากนั้นกำหนดตำแหน่งที่แน่นอนให้กับแถวด้วยดัชนี z ที่สูงกว่าดังนี้:

  • ตำแหน่ง: Absolute
  • ดัชนี Z: 12

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

ดิ ไอคอน

ในการสร้างไอคอน "X" เพื่อปิดป๊อปอัป ให้เพิ่มโมดูลการนำเสนอใหม่ภายในแถว

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

นำชื่อเรื่องหรือข้อความเนื้อหาเริ่มต้นออกจากเนื้อหาการนำเสนอ จากนั้นคลิกเพื่อใช้ไอคอน X สำหรับการนำเสนอ

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

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

  • สีไอคอน: #ddd
  • ขนาดตัวอักษรของไอคอน: 40px

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

  • ความกว้าง: 40px
  • การจัดตำแหน่งโมดูล: right
  • ส่วนสูง: 40px

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

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

  • CSS Class: et-close-popup-icon

เราจะต้องกำหนดเป้าหมายคลาสนี้ด้วย jQuery ของเราในภายหลัง

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

การสร้างชื่อเรื่องและข้อความเนื้อหาสำหรับป๊อปอัป

โมดูลอื่น ๆ ที่เราจะเพิ่มจะต้องแยกแถว เพิ่มแถวหนึ่งคอลัมน์ใหม่ภายใต้แถวก่อนหน้าที่มีไอคอนประกาศ

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

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

  • ความกว้างของรางน้ำ: 1
  • ความกว้าง: 100%
  • ช่องว่างภายใน: 0px บน, 20px ล่าง, 40px ซ้าย, 40px ขวา

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

ในการเพิ่มเนื้อหาชื่อเรื่องและเนื้อหา ให้เพิ่มโมดูลข้อความใหม่ภายในแถวใหม่

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

อัปเดตเนื้อหาภายในพื้นที่ร่างกายด้วย HTML ต่อไปนี้:

<h2>Get 20% Off!</h2>
Use the following coupon code during checkout to get 20% off your perfume order when you buy today! This offer is only available for a limited time.

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

ใต้แท็บออกแบบ ให้อัปเดตสไตล์ข้อความดังนี้:

  • น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
  • ขนาดข้อความ: 18px
  • ความสูงของบรรทัดข้อความ: 1.8em
  • การจัดตำแหน่งข้อความ: กึ่งกลาง
  • แบบอักษรของประเภทที่ 2: Cormorant Garamond
  • ส่วนหัว 2 น้ำหนักแบบอักษร: ปานกลาง
  • หัวเรื่อง 2 สีข้อความ: #000
  • ขนาดข้อความของหัวเรื่อง 2: 54px (เดสก์ท็อป), 38px (แท็บเล็ตและโทรศัพท์)

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

การสร้างรหัสโปรโมชั่นสำหรับป๊อปอัป

หากต้องการสร้างรหัสโปรโมชัน ให้เพิ่มโมดูลข้อความใหม่ภายใต้โมดูลก่อนหน้า

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

อัพเดทพื้นที่ร่างกายด้วยข้อความ “Code: Perfumeoff”

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

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

  • น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
  • สีข้อความ: #cb9274
  • ขนาดข้อความ: 16px
  • ระยะห่างของตัวอักษรข้อความ: 2px
  • การจัดตำแหน่งข้อความ: กึ่งกลาง

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

  • ขอบ: บน 15px, ล่าง 15px
  • ช่องว่างภายใน: บน 15px, ด้านล่าง 15px
  • ความกว้างของเส้นขอบ: 4px
  • สีเส้นขอบ: #f4e8dc
  • สไตล์เส้นขอบ: ประ

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

การสร้างปุ่มสำหรับป๊อปอัป

ในการสร้างปุ่ม ให้คัดลอกโมดูลปุ่มของปุ่มที่มีอยู่บนเลย์เอาต์ที่สร้างไว้ล่วงหน้า

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

จากนั้นวางโมดูลปุ่มใต้โมดูลข้อความรหัสโปรโมชัน

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

อัปเดตข้อความปุ่มและการจัดตำแหน่งดังนี้:

  • ข้อความปุ่ม: ใช้คูปองเมื่อชำระเงิน
  • การจัดตำแหน่งปุ่ม: กึ่งกลาง

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

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

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

รหัสที่กำหนดเองเพื่อปิดป๊อปอัปเมื่อคลิกไอคอน "X"

สำหรับขั้นตอนสุดท้าย เราต้องเพิ่มข้อมูลโค้ดสั้นๆ ของ CSS และ jQuery เพื่อปิดป๊อปอัปเมื่อคลิกไอคอน "X"

หากต้องการเพิ่มโค้ด ให้เพิ่มโมดูลโค้ดใหม่ใต้ปุ่ม

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

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

.et-close-popup-icon:hover {
  cursor: pointer;
}

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

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

(function ($) {
  $(document).ready(function () {
    $(".et-close-popup-icon").on("click", function() {
      $(".et-promo-popup").slideUp("slow");
    })
  });
})(jQuery);

กำหนดเป้าหมายรถเข็นที่ถูกทิ้งร้างใหม่ด้วยป๊อปอัปโปรโมชันโดยใช้ตัวเลือกเงื่อนไขของ Divi

ผลสุดท้าย

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

นี่คือลักษณะของป๊อปอัปโปรโมชันเมื่อเข้าสู่หน้าหลังจากปฏิบัติตามเงื่อนไข

นี่คือป๊อปอัปบนมือถือ

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

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

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

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

ไชโย!