คู่มือการใช้งานversion 8ตกแต่งเว็บไซต์

เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน

การตั้งค่า ปรับแต่ง Menu Display และการจัดเรียงเมนูรูปแบบใหม่ มีรูปแบบเมนูใหม่ ๆ ให้ใช้งาน 3 รูปแบบ สามารถปรับแต่งเมนูได้หลากหลายตามสไตล์ และธีมของร้านค้า

K
KetShopWeb Team
2025-05-23 09:20:05
เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน

เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน

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


เข้าสู่ระบบจัดการเว็บไซต์ Ketshopweb

(ตำแหน่งที่ 1) คลิก 'ปรับแต่ง'

(ตำแหน่งที่ 2) คลิก 'Menu'


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


(ตำแหน่งที่ 3) เปรียบเทียบ UI หน้าตั้งค่าการแสดงผล Menu


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน

เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


การแสดงผลในหน้า Menu แบบใหม่ จะแบ่งออกเป็น 2 ส่วน

1. Menu Display : แท็บหน้าตั้งค่ารูปแบบการแสดงผลเมนู ที่ต้องการแสดงบนแถบเมนู  

2. Page List : แท็บหน้าต่าง ๆ บนเว็บไซต์ ที่ไม่แสดงบนแถบเมนูหน้าบ้าน ซึ่งทุกครั้งที่มีการสร้างหน้าใหม่จะเข้ามาที่ Page List ก่อนเสมอ


เปรียบเทียบตำแหน่ง UI การตั้งค่าการแสดงผล เก่า → ใหม่  

ภาพรวมการปรับตำแหน่ง UI Menu Display การตั้งค่าการแสดงผลเมนู (แสดงในแถบเมนู Header) 

(รูปที่ 1.1) ตัวอย่างการแสดงผลหน้าเว็บแต่ละ Layer


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


(รูปที่ 1.2) ตัวอย่างการแสดงผลหน้าเว็บแต่ละ Layer


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน



การปรับตำแหน่ง UI Menu Display แต่ละ Layer 

(รูปที่ 2.1) ตำแหน่งตั้งค่าเมนู Layer 1  

เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


(รูปที่ 2.2) ตำแหน่งตั้งค่าเมนู Layer 2  

เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


(รูปที่ 2.3) ตำแหน่งตั้งค่าเมนู Layer 3

เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


Page List การแสดงผลของ "Page List" เดิม ถูกย้ายไปอยู่ในแท็บใหม่ชื่อว่า Page List

สำหรับเมนูที่มีเมนูย่อย (เมื่อแสดงผลใน UI แบบใหม่ เมนูย่อยจะถูกแยกออกเป็นรายการแต่ละรายการ โดยไม่รวมอยู่ในเมนูหลักเหมือนเดิม)


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน



การสร้างเมนู

เข้าสู่ระบบจัดการเว็บไซต์ Ketshopweb

(ตำแหน่งที่ 1) คลิก 'ปรับแต่ง'

(ตำแหน่งที่ 2) คลิก 'Menu'


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


(ตำแหน่งที่ 3) คลิกปุ่ม 'สร้างเมนู'


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


(ตำแหน่งที่ 4) เลือกรูปแบบหน้าเมนูที่ต้องการสร้าง จากตัวอย่างเลือกหน้าเพจใหม่ 

(ตำแหน่งที่ 5) คลิก  'หน้าเพจใหม่'


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


(ตำแหน่งที่ 6) ระบุชื่อเมนู จากนั้นคลิก 'OK'


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


เมนูใหม่ที่สร้างจะอยู่ที่แท็บ Page List ก่อนเสมอ

(ตำแหน่งที่ 7) คลิก 'Page List'


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


(ตำแหน่งที่ 8) เมนูที่ถูกสร้างขึ้นมาใหม่


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน



ตั้งค่าเปิด/ปิด การใช้งานเมนู

(ตำแหน่งที่ 9) คลิกเพื่อเปิด หรือปิดการใช้งานเมนู

○ On ก็ต่อเมื่อต้องการให้เมนูนั้น แสดงผลหน้าเว็บไซต์

○ Off ก็ต่อเมื่อต้องการให้เมนูนั้น ๆ ไม่แสดงผลบนหน้าเว็บ หรือเพื่อปิดการใช้งานเมนู  


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน



แก้ไขชื่อเมนู

(ตำแหน่งที่ 10) คลิกไอคอน 'ดินสอ' เพื่อแก้ไข


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


(ตำแหน่งที่ 11) แก้ไขข้อมูลของเมนูตามต้องการ จากนั้นคลิกปุ่ม 'ตกลง'


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน



การลบเมนู

(ตำแหน่งที่ 12) คลิกไอคอน 'ถังขยะ' ของเมนูที่ต้องการลบ


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


(ตำแหน่งที่ 13) จากนั้น คลิก 'Yes'


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


การตั้งค่าการแสดงผล Menu Display

เข้าสู่ระบบจัดการเว็บไซต์ Ketshopweb

(ตำแหน่งที่ 1) คลิก 'ปรับแต่ง'

(ตำแหน่งที่ 2) คลิก 'Menu'


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


การเพิ่มหัวข้อเมนูหลัก

(ตำแหน่งที่ 3) คลิก คลิกไอคอน เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน เพื่อเพิ่มเมนูหลัก

(ตำแหน่งที่ 4) จากนั้น จะมีหน้าต่างป๊อปอัปแสดงรายการเมนู (Page List) ขึ้นมา เลือกเมนูที่ต้องการเพิ่ม แล้วคลิก ‘Add Menu

เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


(ตำแหน่งที่ 5) คลิกที่หัวข้อเมนูหลัก เพื่อเลือกรูปแบบการแสดงผลที่ต้องการ โดยในที่นี้จะเลือกตั้งค่าที่เมนู 'Product'

(ตำแหน่งที่ 6) คลิกเลือกรูปแบบการแสดงผลเป็น 'List'


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


(ตำแหน่งที่ 7) คลิกเพื่อเลือกรูปแบบการแสดงผลเมนูย่อย


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


การเพิ่มหัวข้อเมนูย่อยใน Layer 2

(ตำแหน่งที่ 8) คลิกที่ปุ่ม 'Add New Menu' เพื่อเพิ่มเมนูย่อยใหม่ 

(ตำแหน่งที่ 9) จากนั้น จะมีหน้าต่างป๊อปอัปแสดงรายการเมนู (Page List) ขึ้นมา เลือกเมนูที่ต้องการเพิ่ม แล้วคลิก ‘Add Menu

เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


การเพิ่มหัวข้อเมนูย่อยใน Layer 3

(ตำแหน่งที่ 10) คลิกเลือกหัวข้อเมนูย่อยที่ต้องการ เพิ่มเมนูย่อยระดับถัดไป โดยในที่นี้เลือกหัวข้อ “เสื้อผ้าสำหรับผู้ชาย” 

(ตำแหน่งที่ 11) คลิกที่ปุ่ม 'Add New Menu' เพื่อเพิ่มเมนูย่อยระดับถัดไป

(ตำแหน่งที่ 12) จากนั้น จะมีหน้าต่างป๊อปอัปแสดงรายการเมนู (Page List) ขึ้นมา เลือกเมนูที่ต้องการเพิ่ม แล้วคลิก ‘Add Menu


เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน



ตัวอย่างการแสดงผล

การแสดงผลหลังบ้าน

เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน


การแสดงผลหน้าเว็บไซต์

เมนูแบบใหม่ ดีกว่าเดิมอย่างไร? มาดูความแตกต่างกัน



การตั้งค่าการแสดงผล Menu Display 

Link : https://ketshopweb.com/รายละเอียดบทความ/การย้ายตำแหน่ง-layer-menu




Ketshopweb | เครื่องมือร้านค้าออนไลน์ ขายคล่อง ส่งสะดวก ครบในที่เดียว

http://www.ketshopweb.com

เรายินดีให้คำปรึกษาการทำเว็บไซต์ฟรี ไม่มีค่าใช้จ่าย

ติดต่อมาที่ 02-038-5588 , email : sales@ketshopweb.com

คู่มือการใช้งานversion 8ตกแต่งเว็บไซต์KetShopWebE-commerce
แชร์: