การใช้เครื่องมือแก้ไข Rich Text สำหรับเนื้อหา

คุณสามารถใช้เครื่องมือแก้ไข Rich Text ของ Shopify เพื่อจัดรูปแบบและกำหนดสไตล์เนื้อหาที่ปรากฏในร้านค้าออนไลน์ของคุณได้

ในหน้านี้

ใช้เครื่องมือแก้ไข Rich Text ได้ที่ใดบ้าง

คุณสามารถใช้เครื่องมือแก้ไข Rich Text เพื่อเพิ่มหรือแก้ไขข้อความได้ในหลากหลายพื้นที่ในร้านคาของคุณ ดังนี้:

หากคุณใช้งานธีม Online Store 2.0 คุณสามารถเพิ่มส่วน Rich Text ไปยังหน้าหรือเทมเพลตของคุณด้วยตัวแก้ไขธีมได้

เพิ่มเนื้อหา HTML ด้วยเครื่องมือแก้ไข Rich Text

คุณสามารถใส่เนื้อหา HTML ในโพสต์บล็อก เพจ คำอธิบายสินค้า และคำอธิบายคอลเลกชันได้ด้วยเครื่องมือแก้ไข Rich Text

คลิกที่ปุ่ม “</> แสดง HTML” เพื่อดูโค้ด HTML สำหรับเนื้อหาภายในเครื่องมือแก้ไข Rich Text

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

ฝังวิดเจ็ตสื่อ

หากต้องการฝังวิดเจ็ตวิดีโอหรือเพลง อย่างแรก คุณต้องโฮสต์วิดเจ็ตบนบริการอย่าง Youtube Vimeo หรือ SoundCloud ก่อน บริการเหล่านี้จะสร้างโค้ดฝังตัวที่คุณสามารถคัดลอกและวางไปยังเครื่องมือแก้ไข Rich Text ในส่วนผู้ดูแล Shopify ของคุณได้

ขั้นตอน:

  1. ค้นหาโค้ดฝังตัวของสื่อที่คุณต้องการฝัง

  2. เลือกโค้ดฝังตัวทั้งหมดโดยคลิกและกด ctrl + A สำหรับ PC หรือ command + A สำหรับ Mac

  3. คัดลอกโค้ดฝังตัวโดยกด ctrl + C สำหรับ PC หรือ command + C สำหรับ Mac

  4. ในส่วนผู้ดูแล Shopify ของคุณ ให้คลิกปุ่มแสดง HTML บนเครื่องมือแก้ไข Rich Text สำหรับเนื้อหาที่คุณกำลังแก้ไข

  5. วางโค้ดฝังตัวโดยกด ctrl + V สำหรับ PC หรือ command + V สำหรับ Mac

  6. คลิกที่บันทึก

จัดรูปแบบข้อความด้วยเครื่องมือแก้ไข Rich Text

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

หากต้องการเลือกรูปแบบข้อความ ให้ไฮไลท์ข้อความแล้วคลิกปุ่มการจัดรูปแบบ

ตัวเลือกการจัดรูปแบบ

  • ย่อหน้า

  • หัวเรื่อง (1-6)

  • Blockquote

ข้อความตัวหนา

หากต้องการทำข้อความให้เป็นตัวหนา ให้ไฮไลท์ข้อความ จากนั้นคลิกที่ปุ่มตัวหนา

ข้อความตัวเอียง

หากต้องการทำข้อความให้เป็นตัวเอียง ให้ไฮไลท์ข้อความ จากนั้นคลิกที่ปุ่มตัวเอียง

ขีดเส้นใต้ข้อความ

หากต้องการขีดเส้นใต้ข้อความให้ไฮไลต์ข้อความแล้วคลิกปุ่มขีดเส้นใต้

สร้างรายการแบบหัวข้อ

หากต้องการสร้างรายการแบบหัวข้อ ให้คลิกปุ่มรายการแบบหัวข้อ

คุณสามารถพิมพ์เพื่อสร้างรายการสินค้าเป็นหัวข้อรายการแรก หากต้องการสร้างสินค้ารายการใหม่ ให้กดปุ่ม enter หรือ return เมื่อสร้างรายการเสร็จสิ้น ให้กดปุ่ม enter หรือ return สองครั้ง

สร้างรายการแบบระบุเลขลำดับ

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

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

ข้อความที่ย่อหน้า

การย่อหน้าจะเว้นพื้นที่ว่างทางด้านซ้าย หากต้องการย่อหน้า ให้คลิกปุ่มย่อหน้า

คืนค่าการย่อหน้าข้อความ

การยกเลิกย่อหน้าเดิมจะคืนค่าพื้นที่ว่างที่มี หากต้องการคืนค่าการย่อหน้าหรือ “ลบย่อหน้า” ให้คลิกที่ปุ่มลบย่อหน้า

จัดแนวข้อความ

หากต้องการจัดแนวข้อความ ให้เลือกข้อความ คลิกที่ปุ่มการจัดวาง จากนั้นเลือกจัดวางด้านซ้าย จัดวางตรงกลาง หรือจัดวางด้านขวา

เปลี่ยนสีข้อความด้วยเครื่องมือแก้ไข Rich Text

ขั้นตอน:

  1. ไฮไลต์ข้อความและคลิกปุ่ม “สี

  2. คลิกสีหรือป้อนรหัส hex เพื่อเปลี่ยนข้อความที่ไฮไลต์ให้เป็นสีนั้น

เปลี่ยนสีพื้นหลังข้อความ

ขั้นตอน:

  1. ไฮไลต์ข้อความและคลิกปุ่ม “สี

  2. คลิกแท็บ “พื้นหลัง

  3. คลิกสีหรือใส่รหัส hex เพื่อเปลี่ยนสีพื้นหลังของข้อความที่ไฮไลต์

ล้างการจัดรูปแบบในเครื่องมือแก้ไข Rich Text

หากต้องการลบการจัดรูปแบบของข้อความหรือรูปภาพ ให้ไฮไลต์เนื้อหา แล้วคลิกปุ่มล้างการจัดรูปแบบ

แทรกตารางด้วยเครื่องมือแก้ไข Rich Text

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

ขั้นตอน:

  1. คลิกปุ่มแทรกตารางในเครื่องมือแก้ไข Rich Text

  2. คลิก “แทรกตาราง” เพื่อใส่ตาราง การดำเนินการนี้จะสร้างตารางที่มี 1 แถว และ 1 คอลัมน์

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

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

ใส่ลิงก์ด้วยเครื่องมือแก้ไข Rich Text

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

ขั้นตอน:

  1. ไฮไลท์ข้อความหรือรูปภาพที่ต้องการเปลี่ยนเป็นลิงก์
  2. คลิกแทรกลิงก์
  3. ใส่ URL ปลายทางสำหรับลิงก์ในช่องเชื่อมต่อไปยัง:

    • หากต้องการลิงก์ออกไปยังเว็บไซต์ภายนอกที่อยู่ภายนอกร้านค้า Shopify ให้ใส่ https:// ตามด้วยที่อยู่เว็บไซต์ ตัวอย่างเช่น https://www.example.com
    • หากต้องการเชื่อมต่อเพจภายในร้านค้าออนไลน์ Shopify ของคุณ ให้ใส่ URL แบบย่อ เช่น /collections/summer-collection
    • หากต้องการสร้างลิงก์ที่เปิดข้อความอีเมล ให้ใส่ mailto: ตามด้วยอีเมล ตัวอย่างเช่น mailto:example@example.com
    • หากต้องการสร้างลิงก์ที่ใช้โทรติดต่อได้ ให้ใส่ tel: ตามด้วยเบอร์โทร เช่น tel:+0-123-456-7890
  4. ใส่คำอธิบายลิงก์สั้นๆ ในช่องชื่อลิงก์

  5. เลือกวิธีเปิดลิงก์ด้วยเมนูเปิดลิงก์นี้ใน:

    • หน้าต่างเดียวกัน: ลิงก์จะเปิดในแท็บหรือหน้าต่างเบราว์เซอร์ผู้ใช้เปิดไว้อยู่แล้ว
    • หน้าต่างใหม่: ลิงก์จะเปิดในแท็บหรือหน้าต่างเบราเซอร์ใหม่
  6. คลิกแทรกลิงก์เพื่อแปลงข้อความที่ไฮไลท์เป็นลิงก์

เพิ่มลิงก์ภายในและภายนอกด้วยเครื่องมือแก้ไข Rich Text

ลิงก์ที่ไปยังเพจภายในร้านค้า Shopify ของคุณเรียกว่าลิงก์ภายใน คุณสามารถใช้ URL อย่างสั้นเพื่อสร้างลิงก์ภายในได้ เช่น URL /collections จะชี้ทางไปยังหน้าคอลเลกชันของร้านค้าคุณ

หากต้องการเชื่อมต่อไปยังเพจใดเพจหนึ่งของร้านค้าออนไลน์ อย่างหน้าคอลเลกชัน หรือหน้าสินค้า ให้ใช้รูปแบบ URL /page-type/page-handle เช่น หากต้องการเชื่อมต่อไปยังคอลเลกชันที่คุณสร้างชื่อ Summer Collection ให้ใช้ URL /collections/summer-collection

ลิงก์ไปยังเว็บไซต์ที่อยู่นอกร้านค้า Shopify ของคุณเรียกว่าลิงก์ภายนอก โดยต้องใส่ลิงก์ภายนอกแบบสมบูรณ์และต้องเริ่มต้นด้วย http://

ลิงก์ไปยังไฟล์ในเนื้อหาเพจ

หลังจากอัปโหลดไฟล์ คุณสามารถเชื่อมไฟล์ดังกล่าวไปยังเนื้อหาในเครื่องมือแก้ไข Rich Text เพื่อเปิดใช้งานไฟล์สำหรับการดาวน์โหลดจากคำอธิบายสินค้าหรือคอลเลกชัน เว็บเพจ หรือโพสต์บล็อกได้

ขั้นตอน:

แทรกรูปภาพด้วยเครื่องมือแก้ไข Rich Text

วิธีแทรกรูปภาพโดยใช้เครื่องมือแก้ไข Rich Text มี 3 วิธี โดยคุณสามารถ:

อัปโหลดรูปภาพ

ขั้นตอน:

  1. คลิกปุ่มแทรกรูปภาพในเครื่องมือแก้ไข Rich Text

  2. ในกล่องโต้ตอบแทรกรูปภาพ ให้คลิกที่แท็บรูปภาพที่อัปโหลดแล้ว

  3. คลิกที่อัปโหลดไฟล์

  4. เลือกไฟล์รูปภาพรูปแบบ WebP, HEIC, SVG, GIF, JPEG หรือ PNG จากคอมพิวเตอร์ของคุณ

  5. คลิกรูปภาพที่อัปโหลดเพื่อเลือก

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

  7. คลิกแทรกรูปภาพเพื่อวางรูปภาพในเครื่องมือแก้ไข Rich Text

เลือกจากรูปภาพสินค้า

ขั้นตอน:

  1. คลิกปุ่มแทรกรูปภาพในเครื่องมือแก้ไข Rich Text

  2. ในกล่องโต้ตอบแทรกรูปภาพ ให้คลิกที่แท็บรูปภาพสินค้า

  3. คลิกรูปภาพที่ต้องการแทรก

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

  5. คลิกแทรกรูปภาพเพื่อวางรูปภาพสินค้าในเครื่องมือแก้ไข Rich Text

ใช้ URL รูปภาพ

วิธีแทรกรูปภาพโดยใช้ URL สาธารณะ:

  1. คลิกปุ่มแทรกรูปภาพในเครื่องมือแก้ไข Rich Text

  2. ในกล่องโต้ตอบแทรกรูปภาพ ให้คลิกที่แท็บURL

  3. ใส่ URL ของไฟล์รูปภาพของคุณที่สามารถเข้าถึงโดยสาธารณะ

  4. คลิกแทรกรูปภาพเพื่อแทรกรูปภาพในเครื่องมือแก้ไข Rich Text ด้วยขนาดดั้งเดิม

ย้ายหรือปรับขนาดรูปภาพด้วยเครื่องมือแก้ไข Rich Text

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

ขั้นตอน:

  1. ในส่วนผู้ดูแล Shopify ของคุณ คลิกที่สินค้า คอลเลกชัน เว็บเพจ หรือโพสต์บล็อกที่มีรูปภาพที่คุณต้องการย้ายหรือปรับขนาด
  2. คลิกที่รูปภาพในเครื่องมือแก้ไข Rich Text
  3. เลือกดำเนินการอย่างใดอย่างหนึ่งต่อไปนี้:

    • หากต้องการย้ายรูปภาพ ให้คลิกและลากไปยังตำแหน่งที่ตั้งอื่นในช่องเนื้อหา
    • หากต้องการปรับขนาดรูปภาพ คลิกและลากที่มุมใดมุมหนึ่งของรูปภาพ
  4. คลิกที่บันทึก

แก้ไขรูปภาพด้วยเครื่องมือแก้ไข Rich Text

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

ขั้นตอน:

  1. ดับเบิ้ลคลิกที่รูปภาพในเครื่องมือแก้ไข Rich Text เพื่อเปิดกล่องโต้ตอบแก้ไขรูปภาพ
  2. ใช้ตัวเลือกการกำหนดขนาดและการจัดวางเพื่อแก้ไขรูปภาพได้ ดังนี้:

    • หากต้องการเปลี่ยนขนาดของรูปภาพ ให้เลือกที่ตัวเลือกขนาด
    • หากต้องการปรับปรุง SEO ของร้านค้าออนไลน์ รวมถึงการเข้าถึงให้ดีขึ้น ให้เพิ่มหรือแก้ไขข้อความกำกับภาพ
    • หากต้องการเพิ่มระยะห่าง ให้ใส่เลขพิกเซลของพื้นที่ที่ต้องการในแต่ละด้าน
    • หากต้องการเปลี่ยนการจัดวางของรูปภาพ ให้เลือกจากไอคอนการจัดวางที่ระบุซ้าย กลาง หรือขวา
    • หากต้องการเพิ่มการตัดข้อความ ให้ทำเครื่องหมายเลือกตัดข้อความรอบรูปภาพ
  3. คลิกที่แก้ไขรูปภาพเพื่อบันทึกการเปลี่ยนแปลง

ใส่วิดีโอด้วยเครื่องมือแก้ไข Rich Text

คุณสามารถใส่หรือฝังวิดีโอในโพสต์ของบล็อก เพจ คำอธิบายสินค้า และคำอธิบายคอลเลกชันได้โดยใช้เครื่องมือแก้ไข Rich Text

หากต้องการฝังวิดีโอที่คุณสร้าง อันดับแรก คุณต้องอัปโหลดวิดีโอดังกล่าวไปยังเว็บไซต์วิดีโอสตรีมมิ่งอย่าง YouTube หรือ Vimeo ก่อน

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

ขั้นตอน:

  1. คัดลอก URL ของวิดีโอโดยกดปุ่ม ctrl + C บน PC หรือ command + C บน Mac
  1. เยี่ยมชม Embed Responsively Embed Responsively คือเครื่องมือที่มอบโค้ดฝังตัวที่ปรับปรุงแล้วสำหรับวิดีโอให้แก่คุณ
  1. ใน Embed Responsively ให้คลิกเลือกเว็บไซต์วิดีโอที่มีวิดีโอของคุณอยู่

  2. วาง URL วิดีโอที่คุณคัดลอกลงในกล่อง URL ของเพจ บน Embed Responsively โดยกดปุ่ม ctrl + V สำหรับ PC หรือ command + V สำหรับ Mac

  3. คลิกฝัง แล้ว Embed Responsively จะสร้างโค้ดฝังตัวให้แก่คุณ

  4. หากวิดีโอมาจาก YouTube และคุณต้องการแสดงเฉพาะวิดีโอที่เกี่ยวข้องจากช่อง YouTube เดียวกัน ให้หา URL ของวิดีโอในโค้ดฝังตัว คัดลอก ?rel=0 แล้ววางไว้ที่ส่วนท้ายภายในเครื่องหมายคำพูด

  5. คัดลอกโค้ดทั้งหมดในกล่องโค้ดฝังตัว

  6. ในส่วนผู้ดูแล Shopify คลิกที่ปุ่มใส่วิดีโอในเครื่องมือแก้ไข Rich Text

  7. วางโค้ดฝังตัวลงในช่องของกล่องโต้ตอบที่ระบุว่าใส่วิดีโอ

  8. คลิกที่ใส่วิดีโอ

  9. คลิกบันทึกเมื่อเสร็จสิ้น เพื่อบันทึกการเปลี่ยนแปลงในส่วนที่คุณแก้ไข

ใส่ไฟล์เสียงด้วยเครื่องมือแก้ไข Rich Text

คุณสามารถใช้เครื่องมือแก้ไข Rich Text เพื่อใส่หรือฝังไฟล์เสียงในโพสต์ของบล็อก เพจ คำอธิบายสินค้า และคำอธิบายคอลเลกชันได้

ขั้นตอน:

  1. จากส่วนผู้ดูแล Shopify ของคุณ ให้คลิกการตั้งค่า จากนั้นคลิกไฟล์
  2. คลิกอัปโหลดไฟล์เพื่ออัปโหลดไฟล์เสียงที่ต้องการใส่หรือฝังไปยังร้านค้าของคุณ
  3. จากส่วนร้านค้าออนไลน์ เปิดเครื่องมือแก้ไข Rich Text สำหรับเพจหรือโพสต์บล็อกที่คุณต้องการใส่ไฟล์เสียง
  4. คัดลอก <div id="player"><audio controls="controls"> แล้ววางโค้ดในเครื่องมือแก้ไข Rich Text เพื่อฝังเครื่องเล่นเสียงลงในเพจของคุณ
  5. คัดลอกโค้ดต่อไปนี้:

    • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
  6. วางโค้ดนี้ในเครื่องมือแก้ไข Rich Text ต่อจากโค้ดสำหรับเครื่องเล่นเสียง แล้วแทนที่ https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 ด้วย URL ที่คุณสร้างสำหรับไฟล์เสียงเมื่ออัปโหลดไปยัง Shopify คุณสามารถค้นหา URL ไฟล์เสียงของคุณได้ทุกเมื่อในหน้าไฟล์

  7. คลิกที่บันทึก

  8. คลิกดูเพื่อตรวจสอบให้แน่ใจว่าไฟล์เสียงของคุณเล่นได้อย่างสมบูรณ์

เพิ่มหรือย้ายความคิดเห็นภายในในเครื่องมือแก้ไข Rich Text

คุณสามารถใช้แท็กความคิดเห็น <!-- และ --> สำหรับข้อความภายในที่คุณไม่ต้องการเผยแพร่ในร้านค้าของคุณได้

ขั้นตอน:

  1. คลิกปุ่มแสดง HTML ในเครื่องมือแก้ไข Rich Text

  2. หากต้องการเพิ่มความคิดเห็นภายใน ให้แนบข้อความที่คุณต้องการซ่อนภายใน <!-- และ --> ตัวอย่างเช่น: <!--yourtext-->

  3. คลิกที่บันทึก

แท็ก HTML ที่แนบไว้ในแท็กความคิดเห็นจะถูกบันทึกเป็นข้อความภายใน หากต้องการให้แท็ก HTML ทำงานเป็นปกติ คุณต้องย้ายแท็กความคิดเห็นออก <!-- และ --> รอบๆ

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี