วิธีเพิ่ม CTA ของคุณด้วยเอฟเฟกต์การเลื่อน “Winning Spin”

มันสนุกเสมอที่จะได้รับรางวัล นั่นคือเหตุผลที่บริษัทต่างๆ ทำการตลาดผลิตภัณฑ์และบริการของตนทางออนไลน์โดยแจกของฟรี อาจเป็นคูปองสำหรับของหวานฟรีเมื่อสั่งครั้งแรก หรือ e-book ฟรีเมื่อคุณสมัครรับรายชื่ออีเมล แต่บางครั้ง แม้แต่ของสมนาคุณฟรีก็อาจถูกละเลยบนเว็บได้ การเพิ่มเอฟเฟกต์การเลื่อน "การหมุนที่ชนะ" ที่สวยงามอาจเป็นวิธีที่ดีในการให้ความสนใจ CTA ของคุณในขณะที่สร้างปฏิสัมพันธ์ที่น่าดึงดูดสำหรับผู้เยี่ยมชม

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

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

แอบมอง

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

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

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

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

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

หลังจากนั้น คุณก็พร้อมที่จะเริ่มสร้าง CTA ด้วยเอฟเฟกต์การเลื่อน "ชนะการหมุน" ใน Divi

ส่วนที่ 1: การสร้างเอฟเฟกต์การเลื่อน “Winning Spin”

ในการเริ่มต้น ปรับใช้มุมมองเลเยอร์จากเมนูการตั้งค่าด้านล่างภายใน Divi Builder ซึ่งจะช่วยให้จัดการองค์ประกอบการออกแบบของเราได้ดียิ่งขึ้น

เพิ่มส่วน แถว และคอลัมน์

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

ภายในส่วน ให้เพิ่มแถวสองคอลัมน์

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

ก่อนเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 94%
• ช่องว่างภายใน: บน 10px, ด้านล่าง 10px
• ความกว้างของเส้นขอบ: 1px
• สีของเส้นขอบ: rgba(0,0,0,0.12)

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

display:flex;
align-items: center;

คอลัมน์ 1 เส้นขอบ

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

• ความกว้างของขอบขวา: 1px
• สีขอบขวา: rgba(0,0,0,0.12)

การสร้าง Spinner Arrow และ Text โดยใช้โมดูลการนำเสนอ

ต่อไปเราจะสร้างลูกศรหมุนและข้อความที่จะทำหน้าที่เป็นลูกศรที่ชี้ไปยังการเลือกที่ชนะ

เพิ่มโมดูล Blurb

เพิ่มโมดูลการนำเสนอใหม่ในคอลัมน์ด้านซ้าย

เนื้อหานำเสนอ

จากนั้นอัปเดตเนื้อหาการนำเสนอด้วยชื่อและไอคอนใหม่

• ชื่อเรื่อง: You Win a
• ไอคอน: ลูกศรขวา (ดูภาพหน้าจอ)

การออกแบบ Blurb

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

• ไอคอนสี: #a06d51
• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• ขนาดตัวอักษรของไอคอน: 80px (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
• Title Font: Patua One
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ขนาดข้อความของชื่อเรื่อง: 40px (เดสก์ท็อป), 25px (แท็บเล็ต), 20px (โทรศัพท์)
• ระยะห่างของตัวอักษรชื่อเรื่อง: 1px
• ความสูงของบรรทัดหัวเรื่อง: 2em

นำเสนอ CSS ที่กำหนดเอง

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

direction: rtl !important;

จากนั้นนำช่องว่างภายในเริ่มต้นออกภายใต้ชื่อประกาศโดยเพิ่ม CSS ที่กำหนดเองนี้ในชื่อ Blurb:

padding-bottom: 0px

การสร้างการเลือกรางวัลด้วยการนำเสนอหลายรายการ

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

การสร้าง Blub 1

ในการสร้างการนำเสนอครั้งแรกของเราในคอลัมน์ 2 ให้ทำซ้ำการนำเสนอจากคอลัมน์ 1 แล้วลากลงในคอลัมน์ 2

เปิดการตั้งค่าสำหรับการนำเสนอที่ซ้ำกันในคอลัมน์ 2 และนำ CSS ที่กำหนดเองสำหรับองค์ประกอบหลักออก:

ซึ่งจะทำให้ไอคอนของเรากลับมาทางซ้าย

อัปเดตชื่อและรูปภาพ

จากนั้นอัปเดตชื่อและรูปภาพดังนี้:

• ชื่อเรื่อง : คุกกี้ฟรี!
• รูปภาพ: อัปโหลดรูปภาพ (ประมาณ 100px คูณ 100px)

การออกแบบ Blurb 1

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

• ความกว้างของรูปภาพ: 80px (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
• ความกว้างของเนื้อหา: 92%
• ความกว้าง: 100%

เปลี่ยนกำเนิด

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

อัปเดตต้นทางการแปลงสำหรับการนำเสนอดังนี้:

• กำเนิดการแปลง: ศูนย์ขวา

คุณควรนำภาพเคลื่อนไหวของรูปภาพ/ไอคอนออกด้วย

ตำแหน่งที่แน่นอน

ภายใต้แท็บขั้นสูง ให้ประกาศและตำแหน่งที่แน่นอนดังนี้:

• ตำแหน่ง: Absolute
• ที่ตั้ง: right center

การสร้าง Blub 2

ในการสร้างการนำเสนอครั้งที่สอง ให้ทำซ้ำคำประกาศ 1

หมุน Blurb 2

จากนั้นเพิ่มการหมุนการแปลงดังนี้:

• เปลี่ยนการหมุนแกน Z: 25deg

คุณจะเห็นว่าขณะนี้การนำเสนอถูกหมุนออกจากพื้นที่ดูของแถว

การสร้างและหมุน Blurb 3

ในการสร้างการนำเสนอครั้งที่สาม ให้ทำซ้ำคำชี้แจง 2 จากนั้นอัปเดตการหมุนการแปลงดังนี้:

• เปลี่ยนการหมุนแกน Z: 50deg

การสร้างและหมุน Blurb 4

ในการสร้างการนำเสนอที่สี่ ให้ทำซ้ำคำประกาศ 3 จากนั้นอัปเดตการหมุนการแปลงดังนี้:

• เปลี่ยนการหมุนแกน Z: 75deg

อัปเดตชื่อและรูปภาพของ Blurb

เมื่อคุณเพิ่มคำประกาศ 4 คำเสร็จแล้ว ให้กลับไปและอัปเดตชื่อและรูปภาพสำหรับแต่ละรายการตามต้องการ

การหมุนเลื่อนคอลัมน์

ในการเพิ่มเอฟเฟกต์การเลื่อน เราจะหมุนทั้งคอลัมน์ที่มีข้อความแจ้งที่หมุน 4 รายการ

เปิดการตั้งค่าสำหรับคอลัมน์ 2 และอัปเดตสิ่งต่อไปนี้:

• กำเนิดการแปลง: ศูนย์ขวา

ภายใต้แท็บขั้นสูง เปิดแท็บเอฟเฟกต์การเลื่อนแบบหมุนและอัปเดตสิ่งต่อไปนี้:

• เปิดใช้งานการหมุน: ใช่
• การหมุนเริ่มต้น: -75% (ที่ 15%)

จากนั้นอัปเดตทริกเกอร์เอฟเฟกต์การเคลื่อนไหวเป็น "ด้านบนขององค์ประกอบ"

อัปเดตแถวด้วย Hidden Overflow

กลับไปที่การตั้งค่าแถวและซ่อนเนื้อหาที่ล้นโดยอัปเดตการตั้งค่าแถวต่อไปนี้:

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

ส่วนที่ 2: การสร้างรางวัล CTA

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

เพิ่มแถว

ในการเริ่มต้น ให้เพิ่มแถวหนึ่งคอลัมน์ใต้แถวที่เราเพิ่งสร้างขึ้นโดยตรง

เพิ่มโมดูลข้อความ

ในการเพิ่มเนื้อหาของ CTA เราจะคัดลอกโมดูลข้อความจากเค้าโครงที่สร้างไว้ล่วงหน้าบนหน้า ค้นหาและคัดลอกโมดูลข้อความที่มีชื่อ "ร้านค้าออนไลน์"

จากนั้นวางลงในแถวที่คุณเพิ่งสร้างขึ้น

การออกแบบข้อความ

ปรับปรุงการออกแบบข้อความดังนี้:

• แบบอักษรข้อความ: PT Sans
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• ขนาดข้อความ: 16px
• ความสูงของบรรทัดข้อความ: 2em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

เพิ่มปุ่ม CTA

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

จากนั้นวางโดยตรงภายใต้โมดูลข้อความ

เอฟเฟกต์การเลื่อนแถว

หากต้องการแสดง CTA หลังจาก “การหมุนที่ชนะ” เลือกรางวัล ให้เปิดการตั้งค่าแถวและอัปเดตเอฟเฟกต์การเลื่อนต่อไปนี้:

ใต้แท็บ Fading in and Out…

• เปิดใช้งานการเฟดเข้าและออก: ใช่
• ความทึบเริ่มต้น: 0% (ที่ 50%)
• ความทึบปานกลาง: 100% (ที่ 55%)

ผลสุดท้าย

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

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

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

ไชโย!