ธีมทั่วไป

Odoo มีตัวเลือก:ref:การปรับแต่ง <website/themes/page-layouts>`ธีมหลากหลายเพื่อกำหนด:ref:`สี <website/themes/colors>`และ:ref:`แบบอักษร <website/themes/fonts>`ของเว็บไซต์ และลักษณะของ:ref:`ย่อหน้าและหัวข้อ <website/themes/paragraphs-headings> ปุ่ม ลิงก์ และ:ref:ฟิลด์ป้อนข้อมูล <website/themes/input-fields> นอกจากนี้ยังมี:ref:`การตั้งค่าขั้นสูง <website/themes/advanced>`เพิ่มเติมด้วย

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

Note

หากคุณออกโดยไม่เลือกธีม เว็บไซต์จะถูกสร้างด้วยธีมเริ่มต้น

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

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

  • เพิ่ม ภาษา สำหรับเว็บไซต์

  • เลือก เค้าโครงหน้า เพื่อเปลี่ยนการแสดงผลโดยรวมและระยะห่างของบล็อกการสร้างและองค์ประกอบเว็บไซต์บนหน้า

  • ปรับแต่ง พื้นหลัง ของเค้าโครงโดย:

    • เลือก สี

    • เพิ่ม รูปภาพ

    • ใช้รูปภาพที่เลือกใน ลวดลาย หรือ

    • เลือก ไม่มี

คลิก บันทึก เพื่อนำการเปลี่ยนแปลงไปใช้กับเว็บไซต์

สี

โปรแกรมแก้ไขเว็บไซต์ของ Odoo มีสีหลักสองประเภท: สีธีม และ สีสถานะ

ธีมสี

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

เพื่อแก้ไขสีของเว็บไซต์ ให้ไปที่ส่วน สี ของแท็บ ธีม จากนั้น:

  • Click the color you want to change, then select a predefined Solid color or click Custom to pick a specific color tone manually (or add its #HEX or RGBA code). Click (Reset) to remove the color selection.

  • คลิกไอคอนพาเลตสีและเลือกพาเลตสี ผลลัพธ์คือการปรับแต่งสีทั้งหมดจะถูกรีเซ็ต

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

Tip

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

Note

การเปลี่ยนค่าที่ตั้งไว้ของสีจะอัปเดตสีของทั้งค่าที่ตั้งไว้เริ่มต้นและบล็อกการสร้างที่ใช้สีนั้นโดยอัตโนมัติ

สีสถานะ

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

Example

ข้อมูลที่เกี่ยวข้องกับการดำเนินการที่สำเร็จบนเว็บไซต์จะปรากฏเป็นสี เขียว

การเลือกสีสถานะ ป๊อปอัปสำเร็จ

แบบอักษร

Odoo ช่วยให้คุณปรับแต่งตระกูลฟอนต์และขนาดฟอนต์ขององค์ประกอบเว็บไซต์ รวมถึง ย่อหน้าและหัวเรื่อง, ปุ่ม, และ ช่องป้อนข้อมูล

  • ขนาดฟอนต์: ในส่วน ย่อหน้า, หัวเรื่อง, ปุ่ม, และ ช่องป้อนข้อมูล, ใช้ช่อง ขนาดฟอนต์ เพื่อกำหนดขนาดเริ่มต้น คลิกไอคอน (สลับตัวเลือกเพิ่มเติม) เพื่อขยายส่วนและกำหนดขนาดที่กำหนดเอง (เช่น ตามระดับหัวเรื่อง, ขนาดปุ่ม, ฯลฯ)

  • แบบอักษร: ในส่วน ย่อหน้า, หัวเรื่อง และ ปุ่ม ให้เลือกแบบอักษรจากเมนูแบบเลื่อนลง

    Note

    เมื่อเลือก ฟอนต์ระบบ, Odoo จะใช้ฟอนต์ดั้งเดิมที่ติดตั้งอยู่แล้วในระบบปฏิบัติการของผู้เข้าชม ตัวอย่างเช่น Android ใช้ Roboto เป็นฟอนต์ระบบเริ่มต้น

แบบอักษรที่กำหนดเอง

หากต้องการเพิ่มฟอนต์ที่กำหนดเองที่ไม่มีให้ใช้งานโดยค่าเริ่มต้นใน Odoo, คลิกเมนูแบบเลื่อนลง ตระกูลฟอนต์ และเลือก เพิ่มฟอนต์ที่กำหนดเอง ที่ด้านล่าง ในหน้าต่างป๊อปอัป เพิ่มฟอนต์ Google หรืออัปโหลดฟอนต์ที่กำหนดเอง:

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

  • หากต้องการอัปโหลด ฟอนต์ที่กำหนดเอง จากคอมพิวเตอร์ของคุณ, คลิก เลือกไฟล์

เมื่อเสร็จแล้ว คลิก บันทึกและโหลดใหม่

Tip

ตัวอย่าง ของฟอนต์ที่เลือกจะแสดงทางด้านขวาของหน้าต่าง

รูปแบบ

รูปลักษณ์ขององค์ประกอบเว็บไซต์สามารถปรับแต่งเพิ่มเติมได้ ตัวอย่างเช่น คุณสามารถปรับแต่ง ย่อหน้าและหัวเรื่อง, ปุ่ม, ลิงก์, และ ช่องป้อนข้อมูล

ย่อหน้าและหัวเรื่อง

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

  • ปรับเปลี่ยน การตั้งค่าฟอนต์

  • ปรับ ความสูงของบรรทัด เพื่อกำหนดระยะห่างระหว่างบรรทัดของข้อความ

  • ปรับ ระยะขอบ เพื่อกำหนดระยะห่างรอบย่อหน้าและหัวเรื่อง

ปุ่ม

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

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

  • ปรับเปลี่ยน การตั้งค่าฟอนต์

  • ปรับ ระยะห่างภายใน เพื่อเปลี่ยนระยะห่างรอบป้ายกำกับของปุ่ม

  • ใช้ตัวเลือก มุมโค้ง เพื่อปรับรัศมีเส้นขอบของปุ่ม

  • เพิ่มภาพเคลื่อนไหวเมื่อคลิกปุ่มในเมนูแบบเลื่อนลง เอฟเฟ็กต์เมื่อคลิก

ปุ่มหลักและปุ่มรอง

Tip

เมื่อต้องการกำหนดขนาด เล็ก และ ใหญ่ ที่กำหนดเองสำหรับ ระยะห่าง ขนาดตัวอักษร และ มุมโค้ง ของปุ่ม ให้คลิกไอคอน (สลับตัวเลือกเพิ่มเติม) จากนั้นใช้ฟิลด์ที่เกี่ยวข้อง

ช่องป้อนข้อมูล

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

  • ปรับ ระยะห่าง เพื่อเปลี่ยนระยะห่างรอบ ๆ ช่อง

  • ปรับเปลี่ยน การตั้งค่าฟอนต์

  • ปรับแต่ง ความหนาของเส้นขอบ รอบช่อง

  • กำหนด รัศมีขอบ เพื่อทำให้มุมของช่องโค้งมน

  • เลือก พื้นหลัง สี เพื่อเติมในช่อง

การตั้งค่าขั้นสูง

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

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

  1. ไปที่ บัญชี Google ของคุณ

  2. เปิดใช้งาน Maps Static API Maps JavaScript API และ Places API

    Important

  3. สร้างคีย์ API และคัดลอก

  4. ในตัวแก้ไขเว็บไซต์ของ Odoo ให้ไปที่แท็บ ธีม และในส่วน ขั้นสูง ให้คลิก คีย์ที่กำหนดเอง ถัดจาก Google Map

  5. วางคีย์ API ที่สร้างขึ้นลงในช่อง API Key

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