ใช้โมดูลตัวเลื่อนภาพ

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

เพิ่มและแก้ไขสไลด์ในโมดูลตัวเลื่อนภาพ

• ไปที่เนื้อหาของคุณ:

  • หน้าเว็บไซต์: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > หน้าเว็บไซต์
  • หน้า Landing Page: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > หน้าแลนดิ้ง
  • บล็อก: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > บล็อก
• วางเมาส์เหนือเนื้อหาของคุณแล้วคลิก แก้ไข
• ในเครื่องมือแก้ไขเนื้อหาให้คลิกไอคอนadd เพิ่มในแถบด้านซ้าย 
• คลิกเพื่อขยายหมวดหมู่สื่อจากนั้นคลิกโมดูลตัวเลื่อนภาพและลากไปยังตำแหน่ง 
• ในแถบด้านข้างซ้ายเลื่อนเมาส์ไปที่สไลด์และคลิกไอคอนedit แก้ไขเพื่อเพิ่มภาพลงในสไลด์นั้น: 
  
  • ในส่วนรูปภาพให้คลิกอัปโหลดเพื่อเลือกรูปภาพจากคอมพิวเตอร์ของคุณหรือเรียกดูรูปภาพเพื่อเลือกรูปภาพจากเครื่องมือไฟล์ 
  • ในช่องคำอธิบายภาพให้ป้อนคำอธิบายภาพที่จะปรากฏใต้ภาพของคุณ หากต้องการแสดงภาพโดยไม่มีคำอธิบายภาพให้ลบข้อความเริ่มต้น 
  
  • วิธีเพิ่มลิงก์ไปยังสไลด์:
    • คลิกที่ลิงก์ไปยังเมนูแบบเลื่อนลงแล้วเลือกประเภทลิงก์
    • ระบุปลายทางลิงก์ในช่องที่ปรากฏ เรียนรู้เพิ่มเติมเกี่ยวกับการทำงานกับลิงก์ใน HubSpot 
    • หากต้องการเปิดเนื้อหาของคุณไว้และเปิดลิงก์ในหน้าต่างใหม่ให้คลิกเพื่อเปิดลิงก์เปิดในสวิตช์หน้าต่างใหม่  
    • หากต้องการระบุปลายทางลิงก์ที่ไม่ใช่ส่วนหนึ่งของเว็บไซต์ของคุณไปยังเครื่องมือค้นหาให้เลือกช่องทำเครื่องหมายไม่ปฏิบัติตาม  
  • คลิกนำการเปลี่ยนแปลงไปใช้เพื่อบันทึกการเปลี่ยนแปลงในสไลด์นี้ 
• ที่ด้านบนของตัวแก้ไขแถบด้านข้างให้คลิกแถบเลื่อนรูปภาพเพื่อกลับไปที่ภาพรวมของโมดูล 

• หากต้องการเพิ่มสไลด์ให้วางเมาส์เหนือสไลด์อื่นแล้วคลิกไอคอนedit แก้ไข
• หากต้องการดำเนินการเปลี่ยนแปลงให้เสร็จสิ้นให้คลิกใช้การเปลี่ยนแปลง 

แก้ไขการตั้งค่าสำหรับโมดูลตัวเลื่อนภาพ

• ไปที่เนื้อหาของคุณ:

  • หน้าเว็บไซต์: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > หน้าเว็บไซต์
  • หน้า Landing Page: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > หน้าแลนดิ้ง
  • บล็อก: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > บล็อก
• วางเมาส์เหนือเนื้อหาของคุณแล้วคลิก แก้ไข
• ในเครื่องมือแก้ไขเนื้อหาให้คลิกโมดูลตัวเลื่อนภาพ 
• ในตัวแก้ไขแถบด้านข้างให้คลิกการตั้งค่าเพื่อแก้ไขการตั้งค่าของโมดูล 
• คลิกเพื่อขยายส่วนสไลด์เพื่อแก้ไขตัวเลือกสไลด์:
  • ในช่องสไลด์ต่อหนึ่งหน้าให้ป้อนจำนวนสไลด์ที่จะปรากฏในแถบเลื่อนภาพของคุณ คุณสามารถแสดงสไลด์ได้สูงสุด 5 สไลด์ต่อครั้ง เมื่อเลือกหลายสไลด์ในแต่ละครั้งคำอธิบายภาพและภาพขนาดย่อจะไม่ปรากฏขึ้น 
  • ในส่วนการปรับขนาดภาพให้เลือกตัวเลือกอัตราส่วนภาพ โดยค่าเริ่มต้นภาพจะปรากฏโดยใช้อัตราส่วนภาพของตัวเอง หากต้องการปรับอัตราส่วนภาพเดียวให้เป็นมาตรฐานในทุกภาพให้เลือกบังคับอัตราส่วนภาพ ซึ่งอาจทำให้ภาพบางภาพผิดเพี้ยนได้ 

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

แก้ไขสไตล์สำหรับโมดูลแกลเลอรีรูปภาพ

• ไปที่เนื้อหาของคุณ:

  • หน้าเว็บไซต์: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > หน้าเว็บไซต์
  • หน้า Landing Page: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > หน้าแลนดิ้ง
  • บล็อก: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > บล็อก
• วางเมาส์เหนือเนื้อหาของคุณแล้วคลิก แก้ไข
• ในเครื่องมือแก้ไขเนื้อหาให้คลิกโมดูลตัวเลื่อนภาพ 
• ในเครื่องมือแก้ไขแถบด้านข้างให้คลิกแท็บสไตล์ 
• หากต้องการตั้งค่าว่ามุมของภาพของคุณโค้งมนเพียงใดให้คลิกสไลด์จากนั้นคลิกเพื่อขยายส่วน รูปภาพ  ป้อนค่าพิกเซลในช่องรัศมีมุม  ยิ่งค่าสูงมุมโค้งมนก็จะยิ่งปรากฏมากขึ้น
  • หากต้องการเพิ่มมาร์จิ้นด้านบนหรือด้านล่างคำอธิบายภาพของคุณให้คลิกเพื่อขยายส่วนพื้นหลังจากนั้นป้อนค่าพิกเซลในช่องมาร์จิ้นด้านบนและมาร์จิ้นด้านล่าง
  • หากต้องการเพิ่ม padding ลงในคำอธิบายภาพให้ป้อนค่าพิกเซลในช่อง Padding  หากต้องการเพิ่มค่าแยกกันสำหรับแต่ละด้านให้คลิกแก้ไขแยกกันจากนั้นป้อนค่าพิกเซลในฟิลด์
  • หากต้องการเพิ่มสีพื้นหลังให้กับคำอธิบายภาพของคุณให้ป้อนค่าฐานสิบหกในช่องแรกในส่วนสีหรือคลิกตัวเลือกสีแล้วเลือกสี สามารถเพิ่มสีที่กำหนดเองได้จากแท็บขั้นสูง
  • หากต้องการตั้งค่าความโปร่งใสของสีพื้นหลังให้ป้อนค่าเปอร์เซ็นต์ในช่องที่สองในส่วน สี  ความโปร่งใส 100% จะทึบแสงในขณะที่ความโปร่งใส 0% จะไม่ปรากฏให้เห็น 
  
   
  • หากต้องการแก้ไขแบบอักษรของคำอธิบายภาพของคุณให้คลิกเพื่อขยายส่วนข้อความจากนั้นคลิกเมนูแบบเลื่อนลงเลือกแบบอักษรแล้วเลือกแบบอักษร 
  • หากต้องการเปลี่ยนขนาดแบบอักษรให้คลิกเมนูแบบเลื่อนลงขนาดแล้วเลือกขนาดแบบอักษร 
  • หากต้องการเปลี่ยนสีแบบอักษรให้คลิกตัวเลือกสีแล้วเลือกสี สามารถเพิ่มสีที่กำหนดเองได้จากแท็บขั้นสูง
  • หากต้องการเปลี่ยนน้ำหนักแบบอักษรให้คลิกไอคอนbold น้ำหนักแบบอักษรตัวหนาสำหรับข้อความตัวหนาตัวเอียงหรือขีดเส้นใต้หากต้องการแก้ไขลักษณะที่ปรากฏของคำอธิบายภาพให้คลิกสไลด์จากนั้นคลิกคำอธิบายภาพ:
• วิธีแก้ไขลักษณะที่ปรากฏของลูกศรตัวเลื่อน:
  • คลิกการนำทาง
  • คลิกเพื่อขยายส่วนลูกศรเลื่อน
  • หากต้องการตั้งค่าสีพื้นหลังของไอคอนซ้ายและขวาให้ป้อนค่า hex ในช่องแรกในส่วนสีพื้นหลังหรือคลิกตัวเลือกสีแล้วเลือกสี สามารถเพิ่มสีที่กำหนดเองได้จากแท็บขั้นสูง
  • หากต้องการตั้งค่าความโปร่งใสของสีพื้นหลังให้ป้อนค่าเปอร์เซ็นต์ในช่องที่สองในส่วนสีพื้นหลัง ความโปร่งใส 100% จะทึบแสงในขณะที่ความโปร่งใส 0% จะไม่ปรากฏให้เห็น 
  • หากต้องการแทนที่ไอคอนที่ใช้สำหรับลูกศรซ้ายและขวาให้คลิกแทนที่เหนือไอคอนซ้ายและฟิลด์ไอคอนขวา  ในแผงด้านขวาให้เลือกไอคอน
   
  
  • หากต้องการตั้งค่าสีของไอคอนซ้ายและขวาให้ป้อนค่า hex ในช่องแรกในส่วนสี ไอคอนหรือคลิกตัวเลือกสีแล้วเลือกสี สามารถเพิ่มสีที่กำหนดเองได้จากแท็บขั้นสูง
  • หากต้องการตั้งค่าความโปร่งใสของสีพื้นหลังให้ป้อนค่าเปอร์เซ็นต์ในช่องที่สองในส่วนสีไอคอน ความโปร่งใส 100% จะทึบแสงในขณะที่ความโปร่งใส 0% จะไม่ปรากฏให้เห็น 
• วิธีเปลี่ยนลักษณะที่ปรากฏของจุดใต้ภาพและปุ่มเล่นอัตโนมัติ:
  • คลิกการนำทาง
  • คลิกเพื่อขยายส่วนปุ่มจุดและเล่นอัตโนมัติ
  • ป้อนค่า hex ในช่องแรกในส่วนสีหรือคลิกตัวเลือกสีแล้วเลือก สี สามารถเพิ่มสีที่กำหนดเองได้จากแท็บขั้นสูง
• วิธีเปลี่ยนลักษณะที่ปรากฏของการนำทางภาพขนาดย่อ:
  • คลิกการนำทาง
  • คลิกเพื่อขยายส่วนการนำทางภาพขนาดย่อ

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

• วิธีแก้ไขระยะห่างของแถบเลื่อน:
  • คลิกแถบเลื่อน 
  • คลิกเพื่อขยายส่วนระยะห่าง
  • หากต้องการเพิ่มมาร์จิ้นด้านบนและด้านล่างแถบเลื่อนให้ป้อนค่าพิกเซลในช่องมาร์จิ้นด้านบนและมาร์จิ้นด้านล่าง  
  • หากต้องการเพิ่ม padding ลงในแถบเลื่อนให้ป้อนค่าพิกเซลในช่อง Padding  หากต้องการเพิ่มค่าแยกกันสำหรับแต่ละด้านให้คลิกแก้ไขแยกกันจากนั้นป้อนค่าพิกเซลในฟิลด์