Webflow: จะสร้างปุ่ม CTA นอกเมนูได้อย่างไร

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

เหตุใดจึงวางปุ่ม CTA ไว้นอกเมนู

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

ข้อดีของการวางปุ่ม CTA นอกเมนู ได้แก่:

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

ขั้นตอนในการสร้างปุ่ม CTA นอกเมนูใน Webflow

Webflow นำเสนออินเทอร์เฟซที่ใช้งานง่ายสำหรับการสร้างเว็บไซต์โดยไม่จำเป็นต้องเขียนโค้ดใดๆ ทำตามขั้นตอนเหล่านี้เพื่อเพิ่มปุ่ม CTA นอกเมนูในโปรเจ็กต์ Webflow ของคุณ:

1. ตั้งค่าโครงการ Webflow ของคุณ

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

• ขั้นตอนที่ 1.1 : เปิดโปรเจ็กต์ Webflow ของคุณแล้วไปที่หน้าที่คุณต้องการเพิ่มปุ่ม CTA
• ขั้นตอนที่ 1.2 : ในโหมดนักออกแบบ ตรวจสอบให้แน่ใจว่าเค้าโครงหน้าของคุณพร้อม โดยมีเมนูนำทางอยู่ในตำแหน่ง (หรือที่ใดก็ตามที่คุณต้องการเพิ่มปุ่ม)

2. สร้างปุ่ม CTA ใหม่

หากต้องการสร้างปุ่ม CTA ใหม่นอกเมนู คุณจะต้องวางตำแหน่งปุ่มนั้นอย่างมีกลยุทธ์บนหน้า

• ขั้นตอนที่ 2.1 : จากแผงด้านซ้าย ลากและวางองค์ประกอบ Button จากเพิ่มแผงลงบนผืนผ้าใบ
• ขั้นตอนที่ 2.2 : ปรับแต่งข้อความปุ่มให้ตรงกับการกระทำที่คุณต้องการให้ผู้ใช้ดำเนินการ (เช่น "เริ่มต้นใช้งาน" "ลงทะเบียน" "เรียนรู้เพิ่มเติม")
• ขั้นตอนที่ 2.3 : จัดสไตล์ปุ่มตามการตั้งค่าการออกแบบของคุณ คุณสามารถปรับแบบอักษร ขนาด สี พื้นหลัง และรัศมีเส้นขอบเพื่อให้เข้ากับความสวยงามของแบรนด์ของคุณได้

3. วางตำแหน่งปุ่ม CTA ไว้ด้านนอกเมนู

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

ตัวเลือกที่ 1: ปุ่ม CTA แบบลอย

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

• ขั้นตอนที่ 3.1 : เลือกปุ่มที่คุณสร้างขึ้นและไปที่การตั้ง Position ในแผงสไตล์ทางด้านขวามือ
• ขั้นตอนที่ 3.2 : ตั้งค่าตำแหน่งเป็น Fixed เพื่อให้แน่ใจว่าปุ่มจะคงอยู่กับที่บนหน้าจอในขณะที่ผู้ใช้เลื่อน
• ขั้นตอนที่ 3.3 : ปรับตำแหน่งโดยการตั้งค่า Top , Right , Bottom หรือ Left เพื่อวางปุ่มในตำแหน่งที่คุณต้องการบนหน้าจอ (เช่น มุมล่างขวาหรือมุมบนซ้าย)
• ขั้นตอนที่ 3.4 : เพิ่มค่าดัชนี z เพื่อให้แน่ใจว่าปุ่มจะปรากฏเหนือองค์ประกอบอื่นๆ เช่น เมนู คุณสามารถตั้งค่าดัชนี z ให้มีค่าสูงขึ้น เช่น 10 หรือ 100 เพื่อให้แน่ใจว่าดัชนีจะอยู่ด้านบนสุด

ตัวเลือกที่ 2: ตำแหน่งในส่วนหัว

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

• ขั้นตอนที่ 3.1 : ไปที่แผง Navigator และค้นหาส่วนหัวของคุณ
• ขั้นตอนที่ 3.2 : สร้าง Div Block ใหม่เพื่อใช้เป็นคอนเทนเนอร์สำหรับปุ่ม CTA ของคุณ ซึ่งจะช่วยในการวางตำแหน่งปุ่มให้สัมพันธ์กับองค์ประกอบอื่นๆ
• ขั้นตอนที่ 3.3 : ลากปุ่มลงในคอนเทนเนอร์ Div Block
• ขั้นตอนที่ 3.4 : ใช้การตั้งค่า Margin หรือ Padding ในแผง Style เพื่อย้ายปุ่มไปยังตำแหน่งที่ต้องการภายในส่วนหัว (เช่น นอกเมนูหลักแต่ยังคงสอดคล้องกับส่วนหัว)

ตัวเลือกที่ 3: ปุ่ม CTA บน Sticky Navbar

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

• ขั้นตอนที่ 3.1 : เลือกองค์ประกอบแถบนำทางและตั้ง Position เป็น Sticky ในแผงสไตล์
• ขั้นตอนที่ 3.2 : เพิ่ม Div Block ใหม่ถัดจากรายการเมนูที่คุณต้องการให้ปุ่มปรากฏ
• ขั้นตอนที่ 3.3 : วางปุ่มภายใน Div Block นี้ และปรับตำแหน่งโดยใช้ระยะขอบหรือช่องว่างภายใน

4. ทำให้ปุ่มโต้ตอบ

เมื่อวางปุ่มแล้ว คุณสามารถเพิ่มการโต้ตอบเพื่อให้น่าสนใจยิ่งขึ้นได้

• ขั้นตอนที่ 4.1 : เลือกปุ่มและไปที่แผง Interactions ใน Webflow
• ขั้นตอนที่ 4.2 : เพิ่มการโต้ตอบแบบโฮเวอร์ เช่น การเปลี่ยนสีพื้นหลัง หรือปรับขนาดปุ่มเล็กน้อยเมื่อผู้ใช้โฮเวอร์เหนือปุ่ม
• ขั้นตอนที่ 4.3 : ตั้งค่าลิงค์สำหรับปุ่ม คุณสามารถเชื่อมโยงไปยังหน้าอื่นหรือ URL ภายนอก หรือตั้งค่าการดำเนินการ เช่น การเปิดโมดอลหรือแบบฟอร์ม

5. ดูตัวอย่างและเผยแพร่

หลังจากตั้งค่าปุ่ม CTA แล้ว สิ่งสำคัญคือต้องดูตัวอย่างลักษณะการทำงานของปุ่มบนเพจ

• ขั้นตอนที่ 5.1 : คลิกปุ่ม Preview ที่มุมขวาบนเพื่อดูว่าปุ่มมีลักษณะและทำงานอย่างไรบนหน้าเว็บ
• ขั้นตอนที่ 5.2 : ทดสอบการตอบสนองบนหน้าจอขนาดต่างๆ เพื่อให้แน่ใจว่าอยู่ในตำแหน่งที่ถูกต้อง
• ขั้นตอนที่ 5.3 : เมื่อคุณพอใจกับผลลัพธ์แล้ว คลิก Publish เพื่อทำให้ปุ่มใช้งานได้บนเว็บไซต์ของคุณ

แนวทางปฏิบัติที่ดีที่สุดสำหรับปุ่ม CTA นอกเมนู

แม้ว่าการวางปุ่ม CTA นอกเมนูจะมีประสิทธิภาพสูง แต่ก็ต้องปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเพื่อให้แน่ใจว่าปุ่มจะทำงานได้ดี:

1. Keep it Simple : อย่าทำให้เพจแน่นเกินไปด้วยปุ่ม CTA มากเกินไป มุ่งเน้นไปที่การดำเนินการหลักเพียงอย่างเดียวเพื่อผลลัพธ์ที่ดีที่สุด
2. ตรวจสอบให้แน่ใจว่ามองเห็นได้ชัดเจน : ตรวจสอบให้แน่ใจว่าปุ่มตัดกันอย่างดีกับพื้นหลังเพื่อดึงดูดสายตาของผู้ใช้
3. วางตำแหน่งอย่างมีกลยุทธ์ : วางปุ่มในบริเวณที่ผู้ใช้มีแนวโน้มที่จะสังเกตเห็น เช่น มุมขวาบนหรือลอยอยู่ด้านข้าง
4. ทดสอบบนอุปกรณ์ต่างๆ : ตรวจสอบให้แน่ใจว่าปุ่ม CTA ของคุณดูดีบนอุปกรณ์เคลื่อนที่ แท็บเล็ต และเดสก์ท็อป

บทสรุป

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