องค์ประกอบ

องค์ประกอบช่วยจัดโครงสร้างและนำเสนอเนื้อหาอย่างมีประสิทธิภาพ โดยมีตั้งแต่ส่วนประกอบที่เป็นข้อความ เช่น ชื่อเรื่อง รายการ และ:ref:การเน้นข้อความ <website/elements/text_highlights> ไปจนถึงส่วนที่เป็นแบบโต้ตอบ เช่น ปุ่ม และ:ref:ลิงก์ <website/elements/links> นอกจากนี้ยังสามารถเพิ่มองค์ประกอบภาพ เช่น รูปภาพ ไอคอน วิดีโอ และ:ref:แอนิเมชัน <website/elements/animations> เพื่อปรับปรุงการนำเสนอและการจัดระเบียบเนื้อหา

เพื่อเพิ่มหรือแก้ไของค์ประกอบเว็บไซต์:

1. ไปยังหน้าเว็บไซต์ที่เกี่ยวข้องและคลิก แก้ไข

2. คลิกส่วนบนหน้าที่คุณต้องการเพิ่มหรือแก้ไของค์ประกอบ

3. ทำการเปลี่ยนแปลงที่จำเป็น

4. คลิก บันทึก

Note

สไตล์เริ่มต้นสำหรับหัวเรื่อง ปุ่ม ลิงก์ และข้อความย่อหน้า เช่น ถูกกำหนดไว้ใน:doc:`แท็บธีม <themes>`ของตัวแก้ไขเว็บไซต์

ชื่อเรื่อง

ชื่อเรื่องกำหนดหัวข้อและจัดระเบียบเนื้อหาเว็บไซต์ออกเป็นระดับต่างๆ เพื่อความชัดเจนและโครงสร้าง ในการแทรกชื่อเรื่อง ให้พิมพ์ /title เลือกรูปแบบหัวเรื่อง (หัวเรื่อง 1 หัวเรื่อง 2 หรือ หัวเรื่อง 3) และพิมพ์ข้อความ

Tip

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

ปุ่ม

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

1. พิมพ์ /button

2. ป้อนป้ายกำกับของปุ่มในฟิลด์ ป้ายกำกับลิงก์

3. เพิ่ม URL หรืออีเมล พิมพ์ / เพื่อค้นหาหน้าและ # เพื่อเชื่อมโยงไปยังจุดยึด

4. ตั้งค่า สไตล์ ขนาด และ เค้าโครง เพื่อกำหนดรูปลักษณ์ของปุ่ม

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

6. คลิก นำไปใช้ เพื่อบันทึกการเปลี่ยนแปลง

Tip

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

รูปภาพ

การแทรกรูปภาพ:

1. พิมพ์ /image

2. ค้นหาในฐานข้อมูล Unsplash หรือคลิก:guilabel:`อัปโหลดรูปภาพ`เพื่อเลือกไฟล์จากรูปภาพในเครื่องของคุณ

3. คลิก:guilabel:เพิ่ม

4. หากต้องการปรับแต่งรูปภาพ ให้คลิกที่รูปภาพและแก้ไขตัวเลือกในส่วน:guilabel:`รูปภาพ`ของตัวแก้ไขุเว็บไซต์ เช่น:

   • :guilabel:`แทนที่`รูปภาพ

   • กำหนด alt tag ในฟิลด์:guilabel:คำอธิบาย

   • ป้อน title tag ในฟิลด์:guilabel:คำแนะนำเครื่องมือ ข้อความนี้จะปรากฏเมื่อผู้เยี่ยมชมเลื่อนเมาส์ไปเหนือรูปภาพ

   • เพิ่ม:guilabel:รูปร่าง รูปร่างบางแบบยังอนุญาตให้ปรับแต่งสีได้

   • ปรับ:guilabel:`ความกว้าง`ของรูปภาพ เช่น เพื่อปรับปรุงประสิทธิภาพ อาจแนะนำขนาดที่เล็กลงหากเพียงพอสำหรับการแสดงผล

   • ปรับขนาดรูปภาพโดยใช้เครื่องมือ:guilabel:แปลง

   • ปรับ:guilabel:`ช่องว่างภายใน`เพื่อเพิ่มพื้นที่ (เป็นพิกเซล) รอบรูปภาพ

   • ฯลฯ

วิดีโอ

การเพิ่มวิดีโอ ให้พิมพ์ /video แทรก URL และเปิดตัวเลือกที่ต้องการ:

• เล่นอัตโนมัติ: เพื่อเล่นวิดีโอโดยอัตโนมัติเมื่อเข้าถึงหน้า วิดีโอจะถูกปิดเสียงโดยอัตโนมัติตามค่าเริ่มต้น

• เล่นซ้ำ: เพื่อเล่นวิดีโอแบบวนซ้ำ

• ซ่อนตัวควบคุมเครื่องเล่น

• ซ่อนปุ่มเต็มหน้าจอ

• เริ่มที่: เพื่อกำหนด timestamp ที่วิดีโอควรเริ่ม ในรูปแบบ MM:SS

ไอคอน

การแทรกไอคอน ให้พิมพ์ /image ไปที่แท็บ:guilabel:ไอคอน เลือกไอคอน และคลิก:guilabel:เพิ่ม หากต้องการแก้ไขไอคอน ให้คลิกที่ไอคอนและใช้ส่วน:guilabel:ไอคอน`ของตัวแก้ไขเว็บไซต์เพื่อปรับแต่งตัวเลือก เช่น:guilabel:`สี ขนาด ภาพเคลื่อนไหว รูปร่าง เป็นต้น

ลิงก์

ลิงก์ใช้สำหรับเชื่อมต่อหน้าและทรัพยากรต่างๆ เพื่อแนะนำผู้เยี่ยมชมและปรับปรุงการนำทาง การเพิ่มลิงก์ ให้พิมพ์ /link จากนั้นในป๊อปอัปที่เปิดขึ้น ให้ป้อน:guilabel:ป้ายกำกับ`ของลิงก์และเพิ่ม:guilabel:`URL หรืออีเมล พิมพ์ / เพื่อค้นหาหน้าและ # เพื่อลิงก์ไปยัง:ref:จุดยึด <website/building_blocks/anchor>

Tip

ตามค่าเริ่มต้น ฟิลด์:guilabel:สไตล์`จะถูกตั้งค่าเป็น:guilabel:`ลิงก์ เลือกสไตล์อื่นเพื่อเปลี่ยนลิงก์เป็น:ref:ปุ่ม <website/elements/buttons>

รายการ

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

การเน้นข้อความ

สามารถเพิ่มการเน้นให้กับหัวเรื่องและข้อความได้โดยใช้ส่วน ข้อความในบรรทัด ของตัวแก้ไขเว็บไซต์ วิธีเพิ่มการเน้น:

1. เลือกข้อความหรือหัวเรื่องที่คุณต้องการเน้น

2. ในตัวแก้ไขเว็บไซต์ คลิก เน้น

3. เลือกรูปแบบการเน้น

4. ปรับเปลี่ยน สี

5. เลือก ความหนา

แอนิเมชั่น

ภาพเคลื่อนไหวใช้เพื่อเพิ่มการเคลื่อนไหวให้กับ บล็อกการสร้าง และองค์ประกอบของเว็บไซต์ เช่น รูปภาพและข้อความ มีภาพเคลื่อนไหวสามประเภท: เมื่อเลื่อน, เมื่อปรากฏ และ เมื่อชี้เมาส์ (สำหรับรูปภาพเท่านั้น)

วิธีเพิ่มภาพเคลื่อนไหวให้กับองค์ประกอบเว็บไซต์:

1. คลิกที่องค์ประกอบ

2. ในตัวแก้ไขเว็บไซต์ ไปที่ส่วนที่เกี่ยวข้องสำหรับองค์ประกอบนั้น (เช่น ปุ่ม, คอลัมน์, ข้อความในบรรทัด เป็นต้น)

3. ในฟิลด์ ภาพเคลื่อนไหว เลือกประเภทภาพเคลื่อนไหวที่ต้องการ

4. ปรับแต่งการตั้งค่าภาพเคลื่อนไหวตามต้องการ ตัวเลือกที่มีจะแตกต่างกันไปตามประเภทภาพเคลื่อนไหวที่เลือก

ภาพเคลื่อนไหวเมื่อเลื่อน

สำหรับภาพเคลื่อนไหวเมื่อเลื่อน สามารถ:

• เลือก เข้า เพื่อเพิ่มภาพเคลื่อนไหวเมื่อองค์ประกอบเข้ามาในหน้าจอ และ ออก เพื่อเพิ่มเมื่อออกจากหน้าจอ

• เลือก เอฟเฟกต์

• เลือก ทิศทาง ของเอฟเฟกต์

• ปรับ ความเข้ม ของเอฟเฟกต์

• กำหนด โซนการเลื่อน โดยค่าแรกแสดงถึงเปอร์เซ็นต์ของหน้าจอที่แสดงเมื่อเอฟเฟกต์เริ่มต้น และค่าที่สองแสดงถึงเปอร์เซ็นต์ของเอฟเฟกต์เมื่อสิ้นสุด

แอนิเมชั่นเมื่อปรากฏ

สำหรับแอนิเมชั่นเมื่อปรากฏ สามารถ:

• เลือกจากเอฟเฟกต์ต่างๆ

• เลือก ทิศทาง ของเอฟเฟกต์

• เลือกตัวเลือก ตัวกระตุ้น เพื่อกำหนดว่าแอนิเมชั่นจะเกิดขึ้นเมื่อใด: ครั้งแรกเท่านั้น หรือ ทุกครั้ง

• ปรับ ความเข้ม ของเอฟเฟกต์

• หากคุณต้องการให้แอนิเมชั่นเริ่มทำงานหลังจากผ่านไปจำนวนวินาทีหนึ่ง ให้กำหนดจำนวนวินาทีในฟิลด์ เริ่มหลังจาก

• เลือก ระยะเวลา ของแอนิเมชั่น

แอนิเมชั่นเมื่อวางเมาส์ (สำหรับรูปภาพเท่านั้น)

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

ดูเพิ่มเติม

โปรแกรมแก้ไข HTML ของ Odoo