ธีมทั่วไป¶
NightPOS offers various options to shape your website’s theme, including its colors, fonts, and layout.
เมื่อตั้งค่าเว็บไซต์ของคุณเป็นครั้งแรก คุณจะได้รับการแจ้งให้เลือกธีม เลื่อนเมาส์ไปเหนือธีมต่างๆ เพื่อดูตัวอย่างแบบขยายของแต่ละธีม คลิกที่ธีมเพื่อเลือก
Note
หากคุณออกโดยไม่เลือกธีม เว็บไซต์ของคุณจะถูกสร้างโดยใช้ธีมเริ่มต้น
คุณสามารถ สลับธีมภายหลัง ได้หากจำเป็น
ในโปรแกรมสร้างเว็บไซต์ แท็บ ธีม มีตัวเลือกต่างๆ ในการปรับแต่งธีมทั่วไปของเว็บไซต์ของคุณ ในการเข้าถึง ให้คลิก แก้ไข และไปที่แท็บ ธีม
เมื่อคุณทำการเปลี่ยนแปลงที่ต้องการเสร็จแล้ว ให้คลิกที่ บันทึก เพื่อยืนยันและนำไปใช้กับเว็บไซต์ของคุณ
ธีม¶
ในส่วน เว็บไซต์ ให้คลิกที่ สลับธีม เพื่อเปิดตัวเลือกธีม เลื่อนเมาส์ไปเหนือธีมต่างๆ เพื่อดูตัวอย่างแบบขยายของแต่ละธีม คลิกที่ธีมเพื่อนำไปใช้กับเว็บไซต์ของคุณ
สี¶
NightPOS's website editor features two main types of colors: theme colors and status colors.
ธีมสี¶
สีของธีมหมายถึงชุดของสีที่แสดงในทุกหน้าของเว็บไซต์ของคุณ ซึ่งประกอบด้วยสีทั้งหมด 5 สี ได้แก่ สีหลัก 3 สีและสีอ่อนและสีเข้ม 2 สี
หากต้องการแก้ไขสีของเว็บไซต์ ให้ไปที่ส่วน สี ในตัวแก้ไขเว็บไซต์ จากนั้น:
คลิกที่จุดสีที่คุณต้องการเปลี่ยน จากนั้นเลือกสี ทึบ หรือคลิกที่ กำหนดเอง เพื่อเลือกโทนสีเฉพาะด้วยตนเอง (หรือเพิ่มรหัส #HEX หรือ RGBA)
คลิกที่ไอคอนพาเลตสีและเลือกชุดสี ซึ่งจะทำให้การปรับแต่งสีทั้งหมดถูกรีเซ็ต คลิกที่จุดสีเพื่อเปลี่ยนสีเฉพาะ
NightPOS automatically creates Color Presets for your chosen palette. These are predefined color combinations applied to different elements of your website to provide a structured and visually appealing design. When you select a color palette, its presets define how those colors are distributed across different elements from a building block, such as buttons, backgrounds, and text. If you want to modify them, click on Color Presets and click on a preset to customize it further. Each color preset contains colors for your building block’s background, text, headings, links, primary buttons, and secondary buttons.
หากต้องการใช้ชุดสีที่ตั้งไว้ล่วงหน้ากับบล็อกการสร้างบนไซต์ของคุณ ให้เลือกบล็อกการสร้าง ไปที่แท็บ ปรับแต่ง คลิกที่จุดสีที่อยู่ถัดจาก พื้นหลัง และเลือก ธีม
Note
การเปลี่ยนชุดสีที่ตั้งไว้ล่วงหน้าจะอัปเดตสีของทั้งชุดที่ตั้งไว้ล่วงหน้าเริ่มต้นและบล็อกการสร้างที่ใช้ชุดสีนั้นโดยอัตโนมัติ
สีสถานะ¶
สีสถานะใช้เพื่อระบุสถานะของการดำเนินการบางอย่าง (เช่น สำเร็จ, คำเตือน เป็นต้น) ใช้ในข้อความป๊อปอัปที่ปรากฏเพื่อให้ข้อเสนอแนะแก่ผู้ใช้และผู้เยี่ยมชมเว็บไซต์ หากต้องการปรับแต่ง สีสถานะ ของเว็บไซต์ของคุณ ให้เลื่อนลงไปที่ส่วน ขั้นสูง และคลิกที่จุดเพื่อเปลี่ยนสี
Example
เค้าโครงหน้า¶
ตัวเลือก เค้าโครงหน้า ในส่วน เว็บไซต์ ช่วยให้คุณสามารถเปลี่ยนการแสดงผลโดยรวมและระยะห่างของบล็อกการสร้างและองค์ประกอบเว็บไซต์บนหน้าต่างๆ คลิกที่เมนูแบบเลื่อนลงและเลือกเค้าโครงที่ต้องการ ภายใต้ เค้าโครงหน้า ให้ปรับแต่ง พื้นหลัง ของคุณโดยเลือก รูปภาพ ใช้รูปภาพที่เลือกในรูปแบบ ลวดลาย หรือเว้นว่างไว้
แบบอักษร¶
NightPOS allows you to customize the font family and size for specific elements on your website, including paragraphs, headings, buttons, and input fields.
แบบอักษร: ในส่วน ย่อหน้า, หัวเรื่อง และ ปุ่ม ให้เลือกแบบอักษรจากเมนูแบบเลื่อนลง
ขนาดตัวอักษร: ในส่วน ย่อหน้า, หัวเรื่อง, ปุ่ม และ ฟิลด์ป้อนข้อมูล ให้ใช้ฟิลด์ ขนาดตัวอักษร เพื่อตั้งค่าขนาดเริ่มต้น คลิกที่ไอคอน (ลูกศร) เพื่อขยายส่วนและกำหนดขนาดที่กำหนดเอง (เช่น ตามระดับหัวเรื่อง ขนาดปุ่ม เป็นต้น)
นอกจากนี้ แต่ละส่วนเฉพาะองค์ประกอบยังมีตัวเลือกการจัดรูปแบบเพิ่มเติม เช่น ความสูงของบรรทัด และ ระยะขอบ สำหรับการปรับแต่งเพิ่มเติม
แบบอักษรที่กำหนดเอง¶
It is possible to use fonts on your website that are not offered by default in NightPOS. To add a custom font, click the dropdown menu related to the Font Family field and select Add a Custom Font at the bottom of the dropdown menu. In the pop-up window:
หากต้องการเพิ่มแบบอักษร Google ให้คลิกที่ เลือกแบบอักษร Google และคลิกที่แบบอักษรที่ต้องการในรายการ ปิดสวิตช์ ให้บริการแบบอักษรจากเซิร์ฟเวอร์ Google หากเว็บไซต์ของคุณดำเนินการจากสถานที่ที่กฎระเบียบกำหนดให้ปฏิบัติตามกฎหมาย เช่น แต่ไม่จำกัดเพียง GDPR ของสหภาพยุโรป ซึ่งจะทำให้แบบอักษร Google ถูกจัดเก็บบนเซิร์ฟเวอร์ของเว็บไซต์ของคุณแทนที่จะเป็นของ Google
เมื่อต้องการอัปโหลดแบบอักษรที่กำหนดเองจากคอมพิวเตอร์ของคุณ ให้คลิกที่ เลือกไฟล์
เมื่อเสร็จแล้ว ให้คลิกที่ บันทึกและโหลดใหม่
สไตล์ปุ่ม¶
หากต้องการปรับแต่งสไตล์ของปุ่มหลักและปุ่มรองของเว็บไซต์ของคุณ ให้ไปที่ส่วน ปุ่ม ในตัวแก้ไขเว็บไซต์และแก้ไขตัวเลือกที่เกี่ยวข้อง:
คลิกลูกศรถัดจากฟิลด์ สไตล์หลัก หรือ สไตล์รอง และเลือกหนึ่งในสไตล์ที่มีสำหรับแต่ละประเภทปุ่ม: เติม, เส้นขอบ หรือ แบน เมื่อเลือก เส้นขอบ ตัวเลือก ความกว้างเส้นขอบ จะปรากฏด้านล่าง ช่วยให้คุณสามารถปรับความกว้างของเส้นขอบปุ่มได้
ปรับ ช่องว่างภายใน เพื่อเปลี่ยนขนาดของช่องว่าง (เป็นพิกเซล) รอบป้ายกำกับปุ่ม
ปรับแต่งรัศมีขอบของปุ่มโดยใช้ตัวเลือก มุมโค้ง
เพิ่มภาพเคลื่อนไหวเมื่อคลิกปุ่มในเมนูแบบเลื่อนลง เอฟเฟ็กต์เมื่อคลิก
Tip
คุณสามารถกำหนดขนาด เล็ก และ ใหญ่ ที่กำหนดเองสำหรับ ช่องว่างภายใน, ขนาดแบบอักษร และ มุมโค้ง ของปุ่ม: คลิกที่ไอคอน (ลูกศร) และใช้ฟิลด์ที่เกี่ยวข้อง
สไตล์ลิงก์¶
ในส่วน ลิงก์ ให้คลิกที่ สไตล์ลิงก์ เพื่อเลือกรูปลักษณ์ของลิงก์บนเว็บไซต์ของคุณ เลือก ไม่มีเส้นใต้, ขีดเส้นใต้เมื่อชี้เมาส์ หรือ ขีดเส้นใต้เสมอ ในเมนูแบบเลื่อนลง