การสร้าง CTA “เริ่มต้นใช้งาน” ที่แสดงตัวเลือกหลายตัวบน Hover

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

ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้าง CTA “เริ่มต้นใช้งาน” ที่จะเปิดเผยตัวเลือก “เริ่มต้นใช้งาน” หลายตัวเมื่อวางเมาส์เหนือ เมื่อใช้ Divi เราจะออกแบบส่วนให้ปรากฏเป็นปุ่มขนาดใหญ่ จากนั้นเมื่อวางเมาส์เหนือปุ่ม ตัวเลือกต่างๆ จะปรากฏเหมือนกับตัวเลื่อนแนวตั้งที่จะแสดงสไลด์ถัดไป

การออกแบบดูสง่างามและฟังก์ชันการทำงานมีประโยชน์หลายอย่าง

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

แอบมอง

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

ดาวน์โหลด "เริ่มต้นใช้งาน" CTA Divi Layout ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

การใช้การออกแบบ CTA “เริ่มต้นที่นี่” ใน Divi

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

เริ่มจากส่วนกันก่อน

การสร้างมาตรา

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

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

สีพื้นหลัง:#2b87da
ความกว้าง: 90%
ความกว้างสูงสุด: 1100px
การจัดตำแหน่งส่วน: ศูนย์
Margin: บน 6vw ล่าง 6vw (เพื่อให้มีพื้นที่หายใจเล็กน้อย)
Padding (เดสก์ท็อป): บน 300px, 0px ด้านล่าง
ช่องว่างภายใน (แท็บเล็ต): 0px บน, 15% ล่าง

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

มุมโค้งมน: 140px (เดสก์ท็อป), 20px (โฮเวอร์), 10px (แท็บเล็ต)

จากนั้นให้เงากล่อง (ดูภาพหน้าจอ)

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

การสร้างแถวแรกของเนื้อหา

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

ความกว้าง: 100%
ช่องว่างภายใน: 0px บน, 0px ล่าง, 5% ซ้าย, 5% ขวา

ภายในแถวคอลัมน์เดียว ให้เพิ่มโมดูลข้อความ

จากนั้นเพิ่มหัวข้อ h2 ต่อไปนี้ไปยังเนื้อหาในร่างกาย

<h2>Get Started Here...</h2>

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

หัวข้อ 2 แบบอักษร: Nunito
ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
หัวเรื่อง 2 สีข้อความ: #ffffff
หัวเรื่อง 2 ขนาดข้อความ: 78px (เดสก์ท็อปและแท็บเล็ต), 46px (โทรศัพท์)
ความกว้างสูงสุด: 500px
ความสูง: 300px (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)
ขอบ: -300px ด้านบน (เดสก์ท็อป), 0px ด้านบน (แท็บเล็ตและโทรศัพท์)
เบาะ: 7% ท๊อป

ความสูง 300px และระยะขอบด้านบน -300px จะทำให้โมดูลข้อความขึ้นเพื่อเติมช่องว่างด้านบน 300px ของส่วน ต่อมาเมื่อใดก็ตามที่เราลบช่องว่างภายในส่วนบนออกเมื่อโฮเวอร์ โมดูลข้อความจะเลื่อนขึ้นเหนือส่วนนั้น

การสร้างแถวที่สองของเนื้อหา

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

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

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

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

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

นำข้อความเนื้อหาเริ่มต้นออกและปล่อยให้ชื่อ

จากนั้นเพิ่มไอคอนรูปภาพ (90 X 90) หรือคุณสามารถใช้ไอคอน Divi ปกติได้หากต้องการ

เพิ่มพื้นหลังและอัปเดตการออกแบบของข้อความชื่อ

สีพื้นหลัง: #ffffff
แบบอักษรของชื่อเรื่อง: Nunito
น้ำหนักแบบอักษรของชื่อเรื่อง: Ultra Bold
รูปแบบตัวอักษรของชื่อเรื่อง: TT
การจัดตำแหน่งข้อความชื่อเรื่อง: Center
ชื่อเรื่อง สีข้อความ: #2b87da
ขนาดข้อความชื่อเรื่อง: 14px

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

ความกว้างของเนื้อหา: 200px (เดสก์ท็อป), 250px (แท็บเล็ต)
ความกว้าง: 250px (เดสก์ท็อป), 300px (แท็บเล็ต)
การจัดตำแหน่งโมดูล: ศูนย์
ความสูง: 250px (เดสก์ท็อป), 300px (แท็บเล็ต)
ขอบ: 25px บน, 0px ล่าง
ช่องว่างภายใน: ด้านบน 50px (เดสก์ท็อป), ด้านบน 75px (แท็บเล็ตและโทรศัพท์)

เพื่อให้การออกแบบวงกลมสมบูรณ์ ให้การนำเสนอเป็นมุมมนและเงาของกล่อง

มุมโค้งมน: 50%
กล่องเงา: ดูภาพหน้าจอ

ที่ดูแลการประกาศแจ้งครั้งแรกของเรา เพื่อสร้างสองต่อไป คัดลอกประกาศและวางลงในคอลัมน์ 2 และคอลัมน์ 3 จากนั้นอัปเดตไอคอนรูปภาพสำหรับแต่ละรายการ ควรมีลักษณะดังนี้:

สัมผัสสุดท้ายกับมาตรา

เพื่อให้การออกแบบ CTA "เริ่มต้นใช้งาน" เสร็จสมบูรณ์ เราจำเป็นต้องอัปเดตส่วนนี้อีกเล็กน้อย อัปเดตการตั้งค่าส่วนต่อไปนี้:

ความสูง: 300px (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)
แนวนอนล้น: ซ่อน
ล้นแนวตั้ง: ซ่อน

การทำเช่นนี้จะทำให้ส่วนสูงเท่ากันกับเนื้อหาในแถวที่ 1 และแถวที่ 2 การซ่อนส่วนที่เกินจะทำให้เนื้อหาในแถวที่ 2 ถูกซ่อนไว้จนกว่าเราจะนำมาแสดงบนโฮเวอร์

ในการนำเนื้อหาแถวที่ 2 มาแสดง เราจำเป็นต้องนำช่องว่างด้านบนสุดของส่วนที่วางเมาส์เหนือออก

ช่องว่างภายใน (โฮเวอร์): 0px ด้านบน

ตอนนี้ตรวจสอบผลลัพธ์จนถึงตอนนี้ เนื้อหาจะเลื่อนขึ้นเพื่อแสดงเนื้อหาในแถวที่ 2 ซึ่งจะแสดงตัวเลือก CTA สามตัวเลือก

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

มาตราส่วนการแปลง (เดสก์ท็อป): 70%
สเกลการแปลง (โฮเวอร์): 100%
Transform Scale (แท็บเล็ต): 100%

ตอนนี้เพิ่มกราฟิกภาพพื้นหลัง (500 X 500) เพื่อให้ได้ขนาดที่เหมาะสมของส่วน

ภาพพื้นหลัง: แทรกรูปภาพ
ขนาดภาพพื้นหลัง: ขนาดจริง
ตำแหน่งภาพพื้นหลัง: กลางขวา (เดสก์ท็อป), ขวาบน (แท็บเล็ต), ซ้ายบน (โทรศัพท์)

การเพิ่ม URL ของลิงก์ไปยัง Blurbs และปรับขนาดบน Hover

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

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

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

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

แค่นั้นแหละ!

ผลสุดท้าย

มาดูการออกแบบขั้นสุดท้ายของ CTA “เริ่มต้นใช้งาน”

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

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

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

อย่าลังเลที่จะแบ่งปันความคิดของคุณในความคิดเห็นด้านล่าง

ฉันหวังว่าจะได้ยินจากคุณ.

ไชโย!