Create calls-to-action (CTA)

Create calls-to-action (CTA)

Design a CTA

ปรับแต่งการออกแบบ CTA ในตัวแก้ไข CTA เพื่อดึงดูดผู้เยี่ยมชม 

• ในบัญชี HubSpot ของคุณ ไปที่การ Marketing > CTAs.
• คลิก Create ที่มุมขวาบน
• คุณสามารถสร้าง CTA ใหม่ตั้งแต่เริ่มต้นหรือจากเทมเพลตได้:
  • หากต้องการสร้าง CTA ใหม่จากเทมเพลต ในแผงด้านซ้าย ให้คลิก HubSpot Templates จากนั้นเลือก เทมเพลต (template) ที่ตรงกับเป้าหมายของคุณ 
  • หากต้องการสร้าง CTA ใหม่ตั้งแต่ต้น ในแผงด้านซ้าย ให้คลิก เริ่มตั้งแต่ต้น จากนั้นเลือกประเภท CTA:
    
    • Sticky Banner: แบนเนอร์ถาวรที่ติดอยู่ด้านบนหรือด้านล่างของเพจของคุณ แบนเนอร์จะยังคงอยู่เมื่อผู้เยี่ยมชมเลื่อนดูเพจของคุณ 
    • Pop-up box: Pop up boxที่ปรากฏขึ้นตามกำหนดเวลาที่กำหนด 
    • Slide-In: Banners ที่เลื่อนเข้ามาจากมุมหนึ่งของเว็บไซต์ของคุณ Banners จะยังคงอยู่เมื่อผู้เยี่ยมชมเลื่อนดูหน้าเว็บของคุณ 
    • Embedded: Banners ปุ่มเรียกร้องให้ดำเนินการ หรือปุ่มที่คุณสามารถใช้ในเนื้อหา HubSpot ของคุณเพื่อดึงดูดลูกค้าเป้าหมายไปยังเพจเฉพาะ
    • Embedded Image: รูปภาพที่คุณสามารถใช้ในเพจ HubSpot หรืออีเมลของคุณได้
    • Embedded : Button ที่คุณสามารถใช้ในเพจ HubSpot หรืออีเมลของคุณ
• ในแผงด้านซ้าย จาก แท็บ Add เพิ่ม Element และแก้ไขเค้าโครงสำหรับ CTA ของคุณ: 

• • หากต้องการเพิ่มเนื้อหาเพิ่มเติมลงใน CTA ให้คลิกและลาก Element ใหม่ โดยตรงไปยังแผงด้านขวาของตัวแก้ไข คุณสามารถเพิ่มองค์ประกอบวิดีโอลงใน CTA ของคุณได้เช่นกัน เรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกและข้อกำหนดเมื่อ เพิ่มวิดีโอลงใน CTA 
  • หากต้องการปรับเปลี่ยนเค้าโครง CTA ให้เลื่อนเมาส์ไปเหนือ Element แล้วคลิกและลากไปยังตำแหน่งใหม่
  • หากต้องการทำซ้ำองค์ประกอบ ให้เลื่อนเมาส์ไปเหนือ Element แล้วคลิก duplicate Clone Icon
  • หากต้องการลบ Element ให้เลื่อนเมาส์ไปเหนือ Element แล้วคลิก delete Delete Icon. 
  • หากต้องการแก้ไของค์ประกอบ ให้คลิก Element นั้น ในแผงด้านซ้าย คุณสามารถแก้ไขเนื้อหาและการออกแบบขององค์ประกอบนั้นได้
    
    

• ในแผงด้านซ้าย คลิก แท็บ เนื้อหา (Content) เพื่อจัดการองค์ประกอบของคุณ 
  • หากต้องการแก้ไของค์ประกอบ ให้คลิกที่ Name ขององค์ประกอบนั้น ในแผงด้านซ้าย คุณสามารถแก้ไขเนื้อหาและการออกแบบขององค์ประกอบได้ ใน องค์ประกอบ ข้อความที่มีรูปแบบหลากหลายคุณสามารถใช้ AI assistants เพื่อสร้างหรือปรับแต่งเนื้อหา CTA ของคุณ 
  • หากต้องการลบ Element ให้เลื่อนเมาส์ไปเหนือองค์ประกอบนั้นแล้วคลิก delete icon.  
• ในแผงด้านซ้าย คลิก แท็บ ออกแบบ (Design) เพื่อปรับแต่งและดูตัวอย่าง CTA ของคุณ
  • หากต้องการดูตัวอย่าง CTA บนหน้าเฉพาะเจาะจง ให้คลิก ดูตัวอย่างที่มุมขวาบนจากนั้นคลิก เมนูแบบเลื่อนลง Preview on specific page และเลือก HubSpot page เพื่อดูตัวอย่าง CTA 

• • หากต้องการปรับแต่งลักษณะของ CTA ให้เลือกหนึ่งในตัวเลือกต่อไปนี้ จากนั้นกำหนดค่าการเปลี่ยนแปลงของคุณในแผงด้านซ้าย 
    • Position: สำหรับ CTA แบบ Sticky Banner คุณสามารถเลือกตำแหน่งบนหรือล่างได้ สำหรับ CTA แบบสไลด์อิน คุณสามารถวางตำแหน่ง CTA ไว้ที่ด้านบนซ้าย ด้านล่างซ้าย ด้านบนขวา หรือด้านล่างขวาของหน้า 
    • Sizing: กำหนดความสูงของ CTA คุณสามารถสลับตัวเลือกเพื่อกำหนดความสูงโดยอัตโนมัติตามเนื้อหาใน CTA ของคุณได้เค้าโครง (Layout): กำหนดค่าเค้าโครงของ CTA คุณสามารถเพิ่มช่องว่างในเนื้อหา CTA ของคุณได้ นอกจากนี้ คุณยังสามารถเปิดใช้งานตัวเลือกเพื่อเปิดใช้งานเค้าโครงแบบตอบสนองได้อีกด้วย ด้วยเค้าโครงแบบตอบสนอง คอลัมน์ของ CTA จะเรียงซ้อนกันในแนวตั้งบนหน้าจอขนาดเล็ก
    • Styles: กำหนดรูปแบบสำหรับ CTA เช่น แบบอักษรหลัก ขอบ และเงาจาก CTA คุณสามารถใช้แบบอักษรที่กำหนดเองกับ CTA ของคุณได้ เรียนรู้เพิ่มเติมเกี่ยวกับการใช้ Custom fonts with your HubSpot content.
    • Background: ตั้งค่าพื้นหลังสำหรับ CTA คุณสามารถเลือกที่จะตั้งค่าสีพื้นหลังหรืออัปโหลดรูปภาพพื้นหลังได้
    • Close Option: สำหรับ CTA ของกล่องป็อปอัป คุณสามารถเปิดตัวเลือกเพื่อให้ผู้เยี่ยมชมปิด CTA ได้เมื่อคลิกที่ใดก็ตามนอกกล่องป็อปอัป เมื่อปิดตัวเลือกนี้ ผู้เยี่ยมชมจะสามารถปิด CTA ได้โดยใช้ไอคอนปิดเท่านั้น 

ออกแบบ CTA แบบ HTML

ในการสร้าง CTA HTML แบบฝังที่กำหนดเองและใช้ธีมหรือ CSS ที่กำหนดเองของคุณ:

• ในแผงด้านซ้าย คลิก Start from scratch.
• จากนั้นคลิกเพื่อขยาย ตัวเลือกขั้นสูง ( Advanced options ) และเลือก Embedded HTML.
• คลิก เมนูแบบเลื่อนลง Link to  และเลือกตัวเลือกสำหรับ CTA ที่จะเปลี่ยนเส้นทางไป:
  • ที่อยู่อีเมล ( Email address ) : สร้างลิงก์ mailto หากต้องการเปิดลิงก์นี้ในหน้าใหม่ ให้เลือกกล่องกาเครื่องหมาย  เปิดลิงก์ในแท็บใหม่ ( Open link in new tab )
  • ดาวน์โหลดไฟล์ ( File download ) : เชื่อมโยง CTA ของคุณกับไฟล์ในตัวจัดการไฟล์ เลือกไฟล์ที่มีอยู่หรืออัปโหลดไฟล์ใหม่ จากนั้นเลือก ช่องกาเครื่องหมาย Open link in new tab หากคุณต้องการให้ผู้เยี่ยมชมที่คลิกปุ่ม CTA ดูภาพในหน้าต่างเบราว์เซอร์ใหม่ 
  • ลิงก์การประชุม ( Meeting link ) :เชื่อมโยง CTA ของคุณกับลิงก์การประชุมของ HubSpot คลิก เมนูแบบเลื่อนลง choose a meeting link จากนั้นเลือก meeting link หากต้องการเปิดลิงก์นี้ในหน้าใหม่ ให้เลือกกล่องกาเครื่องหมาย Open link in new tab
  • หน้าใดหน้าหนึ่งของคุณ ( One of your pages ) : เชื่อมโยง CTA ของคุณกับหน้า HubSpot หรือโพสต์ในบล็อกของคุณ คลิกเมนูแบบเลื่อนลงหน้า จากนั้นเลือก หน้า ( Page ) หรือ โพสต์( Post ) ลิงก์ของปุ่ม CTA จะเชื่อมโยงกับ ID หน้า และการเปลี่ยนแปลงใดๆ ใน URL ของหน้าจะอัปเดตลิงก์ของปุ่ม CTA โดยอัตโนมัติ หากต้องการเปิดลิงก์นี้ในหน้าใหม่ ให้เลือกกล่องกาเครื่องหมาย  Open link in new tab
  • URL : เชื่อมโยง CTA ของคุณไปยังหน้าภายนอกของ HubSpot ใน ช่อง URL ของลิงก์ให้ป้อน website URL คุณต้องการนำผู้เยี่ยมชมไป หากต้องการเปิดลิงก์นี้ในหน้าใหม่ ให้เลือกกล่องกาเครื่องหมาย Open link in new tab 
  • CTA:ใช้ CTA แบบกำหนดเองเพื่อเรียกใช้แบนเนอร์ติดหนึบ กล่องป๊อปอัป หรือ CTA แบบสไลด์เข้า
• ใน ช่อง เนื้อหาปุ่มให้ป้อนข้อความ CTA ของ คุณ 
• หากต้องการปรับแต่งการออกแบบ CTA เพิ่มเติม ให้คลิกขั้นสูง

• ใน หน้า ขั้นสูงคุณสามารถเพิ่มคลาสหรือกฎ CSS แบบกำหนดเองได้:
  • คลาส CSS ที่กำหนดเอง ( Custom CSS Classes ) :ป้อนคลาสที่กำหนดเองสำหรับ CTA ของคุณ ใช้คลาสที่กำหนดเองเพื่อใช้รูปแบบการออกแบบ เช่น ตระกูลแบบอักษรกับ CTA ต่างๆ ในเว็บไซต์ของคุณ คลาส CSS ที่กำหนดเองใดๆ ควรรวมอยู่ในสไตล์ชีต CSS ที่ใช้ในหน้า HubSpot ของคุณ
  • กฎ CSS แบบกำหนดเอง ( Custom CSS Rules ) :เพิ่มกฎแบบกำหนดเองเพื่อใช้การจัดรูปแบบอินไลน์ที่เฉพาะเจาะจงกับ CTA ของคุณ
    • หากต้องการเพิ่มกฎ CSS ใหม่ ให้คลิกAdd one หรือ + Addและ กำหนดค่าตัวเลือกและรูปแบบของคุณ 
      • ตัวเลือก ( Selector ):ป้อนตัวเลือก CSS ค่านี้เป็นทางเลือกและจะรวมกับตัวเลือกของ CTA ตัวอย่างเช่น หากป้อนตัวเลือกเป็น:hoverตัวเลือกแบบรวมจะกลายเป็น${ctaSelector}:hover
      • รูปแบบ ( Style ):ป้อนกฎรูปแบบ CSS ที่กำหนดเองเพื่อใช้กับตัวเลือกที่กำหนดค่าไว้ คุณสามารถป้อนรูปแบบได้โดยไม่ต้องป้อนตัวเลือก ตัวอย่างcolor: yellow;เช่น

• หากต้องการแก้ไขกฎ CSS ที่มีอยู่ ให้เลื่อนเมาส์ไปเหนือกฎแล้วคลิก edit edit icon. 
• ในการโคลนกฎ CSS ให้เลื่อนเมาส์ไปเหนือกฎแล้วคลิก duplicate clone icon.

• ในการจัดการลำดับความสำคัญของกฎ CSS ให้คลิกและลาก Rule แต่ละข้อ เพื่อจัดเรียงตามลำดับความสำคัญ
• หากต้องการลบกฎ CSS ให้เลื่อนเมาส์ไปเหนือกฎแล้วคลิกdelete delete delete icon.  

• หากต้องการใช้ HTML และคลาสเดียวกันกับ CTA เช่นเดียวกับ CTA ดั้งเดิม ให้เลือก กล่องกาเครื่องหมาย Use Legacy Markup หากคุณมีแผ่นสไตล์ CSS บนเพจที่ใช้กำหนดสไตล์ CTA ดั้งเดิม การเลือกกล่องกาเครื่องหมายนี้จะทำให้ CTA ของ HTML สามารถนำสไตล์เดียวกันมาใช้ได้ 

• หากต้องการเสร็จสิ้นการตั้งค่าการออกแบบ CTA ของคุณ ให้คลิก  Save & Apply.

Customize where and when your sticky banner, pop-up box, or slide-in CTA displays

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

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

Customize your CTA options

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

• ที่ด้านบน คลิกแท็บ Options 
• สำหรับแบนเนอร์แบบติดหนึบ กล่องป๊อปอัป หรือ CTA แบบสไลด์อิน คุณสามารถซ่อน CTA บนหน้าจอขนาดเล็กได้ ใน ส่วน ขนาดหน้าจอขนาดเล็ก  ให้เลือกกล่องกาเครื่องหมาย Turn off on small screen sizes

• หากคุณมี การสมัครใช้งาน Marketing Hub Professional หรือEnterpriseคุณสามารถเชื่อมโยง CTA เข้ากับแคมเปญได้:
  • หากต้องการเชื่อมโยง CTA ของคุณกับแคมเปญที่มีอยู่ ให้คลิกเมนู แบบเลื่อนลง Campaign แล้วเลือก campaign
  • หากต้องการเชื่อมโยง CTA ของคุณกับแคมเปญใหม่ ให้คลิก เมนูแบบเลื่อนลง Campaign แล้วคลิก Create campaign จากนั้นดำเนินการตั้งค่าแคมเปญของคุณต่อ  ไป

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

• สำหรับแบนเนอร์ติดหนึบ กล่องป๊อปอัป หรือ CTA แบบสไลด์อิน คุณสามารถกำหนดเวลาที่ CTA จะแสดงได้ดังนี้:
  
  • หาก  ต้องการกำหนดเวลาให้ CTA เริ่มแสดง ให้เปิดสวิตช์ Schedule for later จากนั้นเลือก Start date และ Time. 
  • หาก  ต้องการกำหนดเวลาที่ CTA หยุดแสดง ให้เปิดสวิตช์ Set unpublish date and time จากนั้นเลือก End date และ Time

Publish your CTA 

เมื่อคุณตั้งค่า CTA เสร็จแล้ว ให้เผยแพร่ CTA เพื่อใช้งานจริง 

• คลิก Review and publish. ที่มุมขวาบน
• ในแผงด้านขวา ตรวจสอบ CTA ของคุณ จากนั้นคลิก Publish now. CTA จะถูกเผยแพร่ไปยังหน้าเป้าหมายโดยอัตโนมัติ 

ที่มา https://knowledge.hubspot.com/ctas/create-calls-to-action

วันที่เผยแพร่ : สิงหาคม 2567