วิธีสร้าง CTA ที่สะดุดตาใน Divi ด้วยเอฟเฟกต์โฮเวอร์ง่ายๆ

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

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

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

แอบมอง

นี่คือภาพรวมของเอฟเฟกต์โฮเวอร์ CTA ที่สะดุดตาที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงเอฟเฟกต์ CTA Hover ที่สะดุดตาฟรี

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

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

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

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

ดาวน์โหลด

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

สมัครสมาชิกช่อง Youtube ของเรา

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

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

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

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

1. ธีม Divi ติดตั้งและใช้งานอยู่
2. หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นที่ส่วนหน้า (ตัวสร้างภาพ)
3. ภาพพื้นหลังที่จะใช้ในการสร้างการออกแบบ ฉันจะใช้ Veterinarian Layout Pack สำหรับบทช่วยสอนนี้

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

การใช้เอฟเฟกต์ CTA Hover ที่สะดุดตาใน Divi

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

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

การสร้างส่วนและแถว

ขั้นแรก สร้างส่วนปกติด้วยแถวหนึ่งคอลัมน์

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

เพิ่มภาพพื้นหลังที่มีจุดโฟกัสของภาพอยู่ทางด้านขวาเพื่อให้มองเห็นได้เมื่อเพิ่มโมดูลของเราทางด้านซ้าย

• ความกว้างสูงสุด: 1080px
• การจัดตำแหน่งส่วน: ศูนย์

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

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

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• เบาะ: 5% บน, 5% ล่าง, 35% ขวา

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

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

ตอนนี้เราพร้อมที่จะสร้างโมดูลการเรียกร้องให้ดำเนินการซึ่งจะเป็นจุดสนใจหลักของ CTA ที่สะดุดตาของเรา

ไปข้างหน้าและเพิ่มโมดูลการเรียกร้องให้ดำเนินการในแถวหนึ่งคอลัมน์

จากนั้นอัปเดตการตั้งค่าโมดูลการเรียกร้องให้ดำเนินการดังนี้:

เนื้อหา

• หัวข้อ: ส่วนลดการเข้าชมครั้งแรก
• ปุ่ม: นัดหมาย
• URL ลิงก์ของปุ่ม: #

ออกแบบ

• สีพื้นหลัง: #ffffff
• สีข้อความ: Dark
• แบบอักษรของชื่อเรื่อง: Nunito
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ขนาดข้อความชื่อเรื่อง: 36px

• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #154c87
• ความกว้างของขอบปุ่ม: 0px
• ความกว้างสูงสุด: 500px
• การจัดตำแหน่งโมดูล: ศูนย์
• มุมกลม: 10px

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

• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งเงาของกล่อง: 30px
• ความชัดเจนของกล่องเงาเบลอ: 100px
• ความแรงของการกระจายเงาของกล่อง: -30px

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

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

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

• Padding (โฮเวอร์): 0% right

จากนั้นปรับ padding สำหรับการแสดงผลบนมือถือ:

• Padding (แท็บเล็ต): 0% right
• Padding (โทรศัพท์): เหลือ 5%, 5% ขวา

หากต้องการขยาย CTA ให้เพิ่มคุณสมบัติการแปลงต่อไปนี้ในแถวเมื่อวางเมาส์เหนือ:

• มาตราส่วนการแปลง (โฮเวอร์): 110%

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

การแสดงละคร CTA บนโฮเวอร์ด้วยตัวแบ่งส่วน

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

นี่คือสิ่งที่ต้องทำ

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

ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

• สไตล์ตัวแบ่งด้านบน (เดสก์ท็อป): ดูภาพหน้าจอ
• รูปแบบตัวแบ่งด้านบน (แท็บเล็ตและโทรศัพท์): none
• ตัวแบ่งสีด้านบน: rgba(21,76,135,0.61)
• ความสูงของตัวแบ่งด้านบน (ค่าเริ่มต้น): 0%
• ความสูงของตัวแบ่งด้านบน (โฮเวอร์): 120%
• พลิกตัวแบ่งด้านบน: แนวนอน

• สไตล์ตัวแบ่งด้านล่าง (เดสก์ท็อป): ดูภาพหน้าจอ
• รูปแบบตัวแบ่งด้านล่าง (แท็บเล็ตและโทรศัพท์): ไม่มี
• ตัวแบ่งสีด้านล่าง: rgba(21,76,135,0.61)
• ความสูงของตัวแบ่งด้านล่าง (ค่าเริ่มต้น): 0%
• ความสูงของตัวแบ่งด้านล่าง (โฮเวอร์): 120%
• พลิกตัวแบ่งด้านล่าง: แนวนอน

เพื่อให้แน่ใจว่าตัวแบ่งไม่แสดงนอกส่วน ให้อัปเดตตัวเลือกโอเวอร์โฟลว์ในแนวตั้งและแนวนอนเป็นซ่อน

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

ตอนนี้เรามาดูผลลัพธ์สุดท้ายกัน

ผลสุดท้าย

และนี่คือการออกแบบบนแท็บเล็ตและโทรศัพท์

การเปลี่ยนตำแหน่งของ CTA

หากคุณต้องการเปลี่ยนตำแหน่งเริ่มต้นของโมดูลการเรียกร้องให้ดำเนินการก่อนสถานะโฮเวอร์ คุณสามารถอัปเดตระยะห่างแถวได้อย่างง่ายดาย

จากด้านขวา

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

• ช่องว่างภายใน: เหลือ 35%
• Padding (โฮเวอร์): 0% ซ้าย

คุณจะต้องอัปเดตรูปภาพให้มีจุดโฟกัสด้านซ้าย หลังจากนั้นนี่คือผลลัพธ์

จากด้านล่าง

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

เปิดการตั้งค่าส่วนและกำหนดความสูงสูงสุดของส่วนและตั้งค่าโอเวอร์โฟลว์เป็นซ่อน

• ความสูงสูงสุด (เดสก์ท็อป): 415px
• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

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

• Padding (เดสก์ท็อป): 25% บน, 5% ด้านล่าง
• Padding (โฮเวอร์): 5% ท๊อป

นี่คือผลลัพธ์…

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

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

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

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

ไชโย!