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

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

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

เข้าสู่ระบบจัดการเว็บไซต์ 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