8 แอนิเมชั่นปุ่มล่าช้าสำหรับ CTA ส่วนหัว Divi ที่กำหนดเองของคุณ

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

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

แอบมอง

นี่คือการดูภาพเคลื่อนไหวของปุ่มล่าช้า 8 ปุ่มที่เราจะเพิ่มลงใน CTA ส่วนหัวที่กำหนดเองใน Divi:

ดาวน์โหลดเค้าโครงแอนิเมชั่นปุ่มส่วนหัวล่าช้า 8 แบบฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

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

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

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

คุณจะต้องดาวน์โหลด Second Theme Builder Pack เนื่องจากเราจะใช้ Header แบบกำหนดเองบนเทมเพลตหน้า 404 จากแพ็คนั้นสำหรับบทช่วยสอนนี้

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

การนำเข้าเทมเพลตจาก Theme Builder Pack ที่สอง

จากแดชบอร์ด WordPress ให้ไปที่ Divi > Theme Builder ภายในตัวสร้างธีม ให้เลือกไอคอนการเคลื่อนย้ายที่ด้านบนขวาของหน้า ในป๊อปอัปการพกพา ให้เลือกแท็บการนำเข้า เลือกไฟล์ theme-builder-pack-2-404-page-template.json แล้วคลิกปุ่มนำเข้า (ไฟล์นำเข้านี้จะอยู่ในโฟลเดอร์ Second Theme Builder Pack)

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

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

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

8 แอนิเมชั่นปุ่มล่าช้าสำหรับ CTA . ส่วนหัวที่กำหนดเองของคุณ

แอนิเมชั่นปุ่มล่าช้า 8 แบบด้านล่างรวมตัวเลือกแอนิเมชั่น Divi ในตัวและคุณสมบัติ CSS เปอร์สเปคทีฟที่ไม่ซ้ำกัน คุณสมบัติเปอร์สเปคทีฟจะเพิ่มเอฟเฟกต์ 3 มิติเมื่อแอนิเมชั่นปุ่มมีเอฟเฟกต์พลิกหรือพับ สำหรับแอนิเมชั่นส่วนใหญ่ เราจะเพิ่มแอนิเมชั่นให้กับทั้งปุ่มและคอลัมน์หลักของปุ่ม เพื่อให้ได้การเคลื่อนไหวที่ซับซ้อนมากขึ้น

ที่นี่พวกเขา…

#1 Dropdown Bounce

การตั้งค่าปุ่ม:

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

• สไตล์แอนิเมชั่น: Bounce
• ทิศทางของแอนิเมชั่น: ลง
• ระยะเวลาแอนิเมชั่น: 1100ms
• ภาพเคลื่อนไหวล่าช้า: 1500ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

#2 พลิกแนวตั้ง 3 มิติ

ในการสร้างแอนิเมชั่นปุ่มหน่วงเวลาพลิกแนวตั้ง 3 มิติ คุณต้องเพิ่มคุณสมบัติเปอร์สเปคทีฟไปที่คอลัมน์หลักของปุ่ม (คอลัมน์ 2) ก่อน

การตั้งค่าคอลัมน์

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

perspective: 150px

การตั้งค่าปุ่ม:

• สไตล์แอนิเมชั่น: Flip
• ทิศทางของแอนิเมชั่น: ศูนย์
• ระยะเวลาแอนิเมชั่น: 1500ms
• ภาพเคลื่อนไหวล่าช้า: 1000ms
• ความเข้มของแอนิเมชั่น: 400%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

#3 พลิกแนวนอน 3 มิติ

แอนิเมชั่นปุ่มหน่วงเวลา 3D Horizontal Flip นั้นคล้ายกับการพลิกแนวตั้ง ความแตกต่างเพียงอย่างเดียวคือทิศทางของแอนิเมชั่น

การตั้งค่าคอลัมน์:

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

perspective: 150px

การตั้งค่าปุ่ม:

เปิดการตั้งค่าโมดูลปุ่มและอัปเดตสิ่งต่อไปนี้:

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

เพื่อให้แน่ใจว่าการพลิกแนวนอนอยู่กึ่งกลางด้วยคุณสมบัติเปอร์สเปคทีฟพาเรนต์

• สไตล์แอนิเมชั่น: พับ
• ทิศทางของแอนิเมชั่น: ศูนย์
• ระยะเวลาแอนิเมชั่น: 1000ms
• ภาพเคลื่อนไหวล่าช้า: 2000ms
• ความเข้มของแอนิเมชั่น: 400%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: เชิงเส้น

#4 Dropdown Bounce + 3D Vertical Flip

แอนิเมชั่นปุ่มล่าช้านี้ทำได้โดยการรวมแอนิเมชั่นการตีกลับ (เพิ่มในคอลัมน์) และแอนิเมชั่นพลิก (เพิ่มไปยังปุ่ม)

นี่คือวิธีการสร้าง

การตั้งค่าคอลัมน์:

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

• สไตล์แอนิเมชั่น: Bounce
• ทิศทางของแอนิเมชั่น: ลง
• ภาพเคลื่อนไหวล่าช้า: 2000ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

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

perspective: 150px;

การตั้งค่าปุ่ม:

หลังจากตั้งค่าคอลัมน์เรียบร้อยแล้ว ให้อัปเดตการตั้งค่าโมดูลปุ่มดังนี้:

• สไตล์แอนิเมชั่น: Flip
• ทิศทางของแอนิเมชั่น: ศูนย์
• ระยะเวลาแอนิเมชั่น: 1500ms
• ภาพเคลื่อนไหวล่าช้า: 1000ms
• ความเข้มของแอนิเมชั่น: 400%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

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

#5 โฉบลง (เลื่อนลง + หมุน)

เพื่อให้ได้แอนิเมชั่น "โฉบลงมา" สำหรับแอนิเมชั่นถัดไป เราจะต้องรวมแอนิเมชั่นสไลด์ (เพิ่มในคอลัมน์) และแอนิเมชั่นม้วน (เพิ่มในปุ่ม)

มาทำกัน

การตั้งค่าคอลัมน์:

เปิดการตั้งค่าแถวและอัปเดตการตั้งค่าคอลัมน์ 2 ดังนี้

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ลง
• ภาพเคลื่อนไหวล่าช้า: 1000ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

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

perspective: 150px

การตั้งค่าปุ่ม:

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

• สไตล์แอนิเมชั่น: Roll
• ทิศทางของแอนิเมชั่น: ลง
• ระยะเวลาแอนิเมชั่น: 1500ms
• ภาพเคลื่อนไหวล่าช้า: 1000ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

#6 ขยาย (ซูม + แปลงมาตราส่วน)

แอนิเมชั่นปุ่มที่ล่าช้านี้มีความพิเศษตรงที่มันเกี่ยวข้องกับการปรับขนาดปุ่มโดยใช้มาตราส่วนการแปลง จากนั้นเราเพิ่มแอนิเมชั่นการซูมไปที่ปุ่ม

นี่คือวิธีการทำ

การตั้งค่าปุ่ม:

เปิดการตั้งค่าโมดูลปุ่มและอัปเดตสิ่งต่อไปนี้:

• มาตราส่วนการแปลง: 175%
• สไตล์แอนิเมชั่น: Zoom
• ทิศทางของแอนิเมชั่น: ศูนย์
• ระยะเวลาแอนิเมชั่น: 1500ms
• ภาพเคลื่อนไหวล่าช้า: 1000ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

#7 พัลส์ (ซูมเข้า + ซูมออก)

แอนิเมชั่นพัลส์ที่ล่าช้านี้สร้างขึ้นโดยการรวมแอนิเมชั่นซูมออก (เพิ่มในคอลัมน์) และแอนิเมชั่นซูมเข้า (เพิ่มไปยังปุ่ม)

มาทำกัน

การตั้งค่าคอลัมน์:

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

• สไตล์แอนิเมชั่น: Zoom
• ทิศทางของแอนิเมชั่น: ศูนย์
• ระยะเวลาแอนิเมชั่น: 1000ms
• ภาพเคลื่อนไหวล่าช้า: 2000ms
• ความเข้มของแอนิเมชั่น: -100%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

โปรดสังเกตว่าเราได้เพิ่มค่าลบ (-100%) สำหรับความเข้มของภาพเคลื่อนไหว ซึ่งจะทำให้คอลัมน์มีผลตรงกันข้ามซึ่งจะย่อขนาดคอลัมน์/ปุ่ม (หรือซูมออก)

การตั้งค่าปุ่ม:

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

• สไตล์แอนิเมชั่น: Zoom
• ทิศทางของแอนิเมชั่น: ศูนย์
• ระยะเวลาแอนิเมชั่น: 1500ms
• ภาพเคลื่อนไหวล่าช้า: 1000ms
• ความเข้มของแอนิเมชั่น: 50%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

โปรดสังเกตว่าการหน่วงเวลาของภาพเคลื่อนไหวถูกตั้งค่าให้เกิดขึ้น 1,000 มิลลิวินาทีก่อนภาพเคลื่อนไหวของคอลัมน์ เพื่อให้ปุ่มซูมเข้าก่อนที่จะซูมออก

#8 เกลียว (เลื่อนซ้าย + หมุน)

แอนิเมชั่นปุ่มล่าช้าสุดท้ายนี้รวมแอนิเมชั่นสไลด์ (เพิ่มในคอลัมน์) และแอนิเมชั่นพลิก 720 องศา (เพิ่มไปยังปุ่ม)

นี่คือวิธีการทำ

การตั้งค่าคอลัมน์:

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

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ระยะเวลาของแอนิเมชั่น: 2000ms
• ภาพเคลื่อนไหวล่าช้า: 2000ms
• ความเข้มของแอนิเมชั่น: 100%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

การตั้งค่าปุ่ม:

จากนั้นอัปเดตการตั้งค่าโมดูลปุ่มดังนี้:

• สไตล์แอนิเมชั่น: Flip
• ทิศทางของแอนิเมชั่น: ศูนย์
• ระยะเวลาของแอนิเมชั่น: 2000ms
• ภาพเคลื่อนไหวล่าช้า: 2000ms
• ความเข้มของแอนิเมชั่น: 800%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

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

ผลลัพธ์สุดท้าย

มาดูภาพเคลื่อนไหวของปุ่มล่าช้า 8 ปุ่มกันเป็นครั้งสุดท้าย

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

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

มีที่ชื่นชอบ?

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

ไชโย!