เรื่องที่ 33 การใส่ข้อมูลรูปแบบร้านออนไลน์

การใส่ข้อมูลรูปแบบร้านออนไลน์

สำหรับผู้ที่ใช้งานระบบเว็บและร้านออนไลน์ของ “ปลานิล” สามารถสร้างสีสันให้กับเว็บและร้านออนไลน์ของท่านได้

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

เค้าโครงส่วนประกอบของหน้าเว็บ มี 3 ส่วนสำคัญ ได้แก่
Header คือส่วนหัว อยู่ในตำแหน่งตอนบนสุดของหน้าเว็บ ซึ่งผู้เข้าเยี่ยมชมเว็บไซต์จะมองเห็นก่อนบริเวณอื่น จึงเป็นตำแหน่งที่เหมาะสำหรับการแสดงเนื้อหาเพื่อดึงดูดความสนใจและสร้างความประทับใจแก่ผู้เยี่ยมชมเว็บไซต์ ในตำแหน่งนี้ส่วนใหญ่นิยมวางโลโก้ ชื่อเว็บไซต์ และเมนูหลัก (main menu) หรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์

Body คือส่วนเนื้อหา อยู่ในตำแหน่งตอนกลางหน้า ประกอบด้วย ส่วนที่เป็นเนื้อหา และส่วนที่เป็น Sidebar
+ เนื้อหา : เป็นส่วนที่ใช้แสดงเนื้อหาของเว็บ เช่น ข้อความ ตารางข้อมูล ภาพ วิดีโอ สำหรับการแสดงสินค้า หรือบทความที่เกี่ยวข้อง เป็นต้น
แต่ในบางเว็บไซต์ก็อาจมีการวางเมนูหลักหรือเมนูเฉพาะกลุ่มไว้ในส่วนนี้ด้วย โดยมักวางไว้ด้านหน้าซ้ายมือสุดเพราะผู้เข้าชมสามารถมองเห็นได้ง่าย
+ sidebar : เป็นส่วนที่ใช้บรรจุ Widget ชุดคำสั่งต่าง ๆ ซึ่ง sidebar อาจจะอยู่ด้านซ้ายมือหรือขวามือ หรือทั้งสองด้านก็ได้ หรืออาจจะไม่มีเลยก็ได้

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

ทั้งนี้ เว็บไซต์โดยทั่วไปมักจะกำหนดส่วน Header และ Footer ให้เหมือนกันทุกหน้า

รูปส่วนประกอบของหน้าเว็บร้านออนไลน์

Untitled-062

 

เมื่อรู้จักกับหน้าตาส่วนประกอบของเว็บไซต์เรียบร้อยแล้ว ในการเข้าตกแต่งร้านออนไลน์ จะเห็นว่าในแถบเมนูเครื่องมือ “แต่งร้านออนไลน์” มีเครื่องมือย่อยประกอบด้วย
1.1 HEADER (ส่วนหัว)
1.2 FOOTER (ส่วนท้าย)
1.3 ADS (โฆษณา)
1.4 LAYOUT SETTINGS (การตั้งค่า Layout)
1.5 MISC (เบ็ดเตล็ด)

 
 

1.1 HEADER เป็นเมนูเครื่องมือสำหรับการจัดการตกแต่ง HEADER ของเว็บหรือร้านออนไลน์
Header คือส่วนหัว อยู่ในตำแหน่งตอนบนสุดของหน้าเว็บ ซึ่งผู้เข้าเยี่ยมชมเว็บไซต์จะมองเห็นก่อนบริเวณอื่น จึงเป็นตำแหน่งที่เหมาะสำหรับการแสดงเนื้อหาเพื่อดึงดูดความสนใจและสร้างความประทับใจแก่ผู้เยี่ยมชมเว็บไซต์ ในตำแหน่งนี้ส่วนใหญ่นิยมวางโลโก้ ชื่อเว็บไซต์ และเมนูหลัก (main menu) หรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์

การตกแต่ง HEADER มีขั้นตอนดังนี้
(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “Header” (ดังรูปด้านล่าง)
Untitled-063

(3) จากนั้นให้ระบุรายละเอียด ในหัวข้อดังต่อไปนี้
1. Header style
2. Top MENU (black one)
3. Main MENU
4. Logo
5. iOS Bookmarklet

 
 

1.1.1 การตกแต่ง HEADER STYLE เป็นการจัดการรูปแบบของหัวเรื่องของเว็บหรือร้านออนไลน์ มีขั้นตอนดังนี้
(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “Header” (ดังรูปด้านล่าง)
Untitled-063

(3) จากนั้นให้เลือกรูปแบบของ Header โดยเลือกจากรูปแบบการจัดเรียงหัวเรื่องที่กำหนดไว้ 6 รูปแบบ ได้แก่
+ Style 1 : (logo + menu)
+ Style 2 : (text logo + ad) + menu
+ Style 3 : (full width logo) + menu
+ Style 4 : menu + (logo + ad)
+ Style 5 : menu + (text logo + ad)
+ Style 6 : menu + (full width logo)
TRANSPARENT HEADER : สำหรับการจัดการหัวข้อเรื่องให้ไม่มีพื้นหลัง
HEADER ALIGNMENT UP/DOWN : สำหรับการจัดวางแนวของเมนูว่าจะให้อยู่ในระดับใด จะให้เลื่อนขึ้นข้างบนหรือลงข้างล่างในสัดส่วนเท่าใด
เมื่อดำเนินการเสร็จแล้ว ให้คลิ๊ก “SAVE SETTINGS”


 
 

1.1.2 Top MENU (black one) เป็นการจัดการเมนูที่อยู่แถวบนสุดของหน้าเว็บหรือร้านออนไลน์ มีขั้นตอนดังนี้

(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “Top MENU (black one)” (ดังรูปด้านล่าง)
Untitled-064

(3) จากนั้นให้ระบุรายละเอียด โดยเลือกดำเนินการดังนี้
+ TOP MENU : สำหรับเลือกที่จะแสดงหรือไม่แสดง Top menu
+ TOP MENU : สำหรับเลือกรูปแบบของ Top menu
+ SHOW DATE : สำหรับเลือกที่จะแสดงหรือไม่แสดงวันที่
+ DATE FORMAT : สำหรับเลือกรูปแบบของการแสดงวันที่
เมื่อดำเนินการเสร็จแล้ว ให้คลิ๊ก “SAVE SETTINGS”

 
 

1.1.3 Main MENU เป็นเมนูเครื่องมือสำหรับการจัดการเมนูหลักของเว็บหรือร้านออนไลน์ มีขั้นตอนดังนี้

(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “Main MENU” (ดังรูปด้านล่าง)
Untitled-065

(3) จากนั้นให้ระบุรายละเอียดดังนี้
+ HEADER MENU (MAIN): สำหรับเลือกเมนู main header section
+ SWITCH MENU ICONS COLOR : สำหรับการปรับเปลี่ยนสีของ menu icons เป็นสีขาวหรือดำ
+ STICKY MENU : สำหรับกำหนดการแสดงหน้า header menu
เมื่อดำเนินการเสร็จแล้ว ให้คลิ๊ก “SAVE SETTINGS”

 
 

1.1.4 Logo เป็นเมนูเครื่องมือสำหรับการจัดการโลโก้ของเว็บหรือร้านออนไลน์ โดยสามารถอัพโหลดรูปภาพโลโก้ และเขียนคำแสดงคุณลักษณะของโลโก้ได้ มีขั้นตอนดังนี้

(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “Logo” (ดังรูปด้านล่าง)
Untitled-066

(3) จากนั้นให้ระบุรายละเอียดดังนี้
+ LOGO UPLOAD : สำหรับอัพโหลดรูปโลโก้ขนาด 300 x 100px >> ภาพขนาดนี้เป็นขนาดมาตรฐานใช้สำหรับการแสดงในอุปกรณ์ทั่วไป
+ RETINA LOGO UPLOAD : สำหรับอัพโหลดรูปโลโก้ขนาด 600 x 200px >> ภาพขนาดนี้เป็นขนาดที่ใช้สำหรับการแสดงในอุปกรณ์ที่มีความละเอียดสูง อย่างอุปกรณ์ในตระกูล Apple
+ FAVICON : สำหรับอัพโหลดรูปโลโก้ขนาด 16 x 16px >> ภาพขนาดเล็กนี้จะใช้บน Favicon (favicon คือ Icon ขนาดเล็ก ที่วางอยู่ในตำแหน่งด้านหน้าของ Address bar/Tab ของ Browser การใส่โลโก้บน favicon จะทำให้ผู้ใช้งานบ่อย ๆ คุ้นเคย สร้างการรับรู้และจดจำได้เป็นอย่างดี)
+ LOGO ALT ATTRIBUTE : สำหรับใส่คำอธิบายโลโก้ หรือแสดงคำอธิบายรูปโลโก้ ซึ่งคำอธิบายในส่วนนี้จะปรากฏขึ้นเมื่อไม่มีการแสดงรูปโลโก้ หรือกรณีมีปัญหาไม่สามารถแสดงรูปโลโก้ได้
+ LOGO TITLE ATTRIBUTE : สำหรับใส่คำอธิบายโลโก้ ซึ่งคำอธิบายในส่วนนี้จะปรากฎขึ้นเมื่อมีการวางเม้าส์บนรูปโลโก้

เมื่อดำเนินการเสร็จแล้ว ให้คลิ๊ก “SAVE SETTINGS”

 
 

1.1.5 iOS Bookmarklet เป็นเมนูเครื่องมือสำหรับการอัพโหลดรูปภาพขนาดต่างๆ เพื่อใช้ในการสร้าง Icon เว็บและร้านออนไลน์บน Home Screen ของอุปกรณ์ IOS มีขั้นตอนดังนี้

(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “iOS Bookmarklet” (ดังรูปด้านล่าง)
Untitled-067

(3) จากนั้นให้อัพโหลดไฟล์รูปภาพขนาดต่าง ๆ ดังต่อไปนี้ (ควรไฟล์รูปภาพประเภทนามสกุล PNG (*.png) เพื่อให้ได้ Icon ที่มีคุณภาพที่ดี)
รูปภาพขนาด 76px X 76px
รูปภาพขนาด 114px X 114px
รูปภาพขนาด 120px X 120px
รูปภาพขนาด 144px X 144px
รูปภาพขนาด 152px X 152px
เมื่อดำเนินการเสร็จแล้ว ให้คลิ๊ก “SAVE SETTINGS”

(4) หลังจากนั้น ก็จะเป็นขั้นตอนในการสร้าง Icon บนอุปกรณ์ IOS โดยให้ดำเนินการบนอุปกรณ์ IOS ดังนี้
+ เปิดบราวเซอร์ Safari ขึ้นมา และเข้าไปที่เว็บหรือร้านออนไลน์ของท่าน
+ จากนั้นแตะที่ปุ่มลูกศรสำหรับแชร์ (แถบด้านล่างของ Safari) เลือก “Add to Home Screen”
+ ตั้งชื่อ Icon จากนั้นแตะ Add (เพิ่ม)
เพียงเท่านี้ เว็บหรือร้านออนไลน์ของท่าน ก็จะมี Icon อยู่ในหน้า Home Screen ของอุปกรณ์ IOS เพื่อการเรียกใช้งานที่ง่ายดาย สะดวก และรวดเร็วมากยิ่งขึ้น

 
 

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

การตกแต่ง FOOTER มีขั้นตอนดังนี้
(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “FOOTER” (ดังรูปด้านล่าง)
Untitled-068

(3) จากนั้นให้ระบุรายละเอียดดังต่อไปนี้
+ LAYOUT : สำหรับกำหนด layout ของ Footer
+ FOOTER COPYRIGHT TEXT : สำหรับกำหนดข้อความแสดงลิขสิทธิ์
+ COPYRIGHT SYMBOL : สำหรับกำหนดการแสดงหรือไม่แสดงสัญลักษณ์แสดงลิขสิทธิ์
+ FOOTER MUNU : สำหรับเลือกรูปแบบเมนู Footer

 
 

1.3 ADS เป็นเมนูเครื่องมือสำหรับการจัดการโฆษณา

การตกแต่ง ADS มีขั้นตอนดังนี้
(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “ADS”
Untitled-069

(3) จากนั้นให้ระบุรายละเอียดดังต่อไปนี้
+ Header ad : สำหรับการจัดการ Header ad (ดังรูปด้านล่าง)
Untitled-069

+ Sidebar ad : สำหรับการจัดการ Sidebar ad (ดังรูปด้านล่าง)
Untitled-069


 
 

1.4 BACKGROUND เป็นเมนูสำหรับการจัดการ Background

การตั้งค่า BACKGROUND มีขั้นตอนดังนี้
(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “BACKGROUND”(ดังรูปด้านล่าง)
Untitled-078

(3) จากนั้นให้ระบุรายละเอียด ได้แก่
+ SITE BACKGROUND
+ REPEAT
+ POSITION
+ BACKGROUND ATTACHMENT
+ STRETCH BACKGROUND
เมื่อดำเนินการเสร็จแล้ว ให้คลิ๊ก “SAVE SETTINGS”

 
 

1.5 TRANSLATIONS เป็นเมนูสำหรับการจัดการคำแปล เพื่อระบุคำแปลของหัวข้อเรื่องที่ปรากฏบนหน้าเว็บไซต์ง

การตั้งค่า TRANSLATIONS มีขั้นตอนดังนี้
(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “TRANSLATIONS”(ดังรูปด้านล่าง)
Untitled-080

(3) จากนั้นให้ระบุรายละเอียด TRANSLATIONS
เมื่อดำเนินการเสร็จแล้ว ให้คลิ๊ก “SAVE SETTINGS”

 
 

5.1.6 THEME COLORS เป็นเมนูสำหรับการตกแต่งเพิ่มเติมสีสันให้กับเว็บหรือร้านออนไลน์ด้วยธีมสีต่างๆ

การตั้งค่า THEME COLORS มีขั้นตอนดังนี้
(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “THEME COLORS” (ดังรูปด้านล่าง)
Untitled-081

(3) จากนั้นให้ระบุรายละเอียด ได้แก่
+ THEME COLOR
+ BACKGROUND COLOR
+ TOP MENU COLOR
+ HEADER COLOR
+ LOGO TEXT COLOR
+ MENU BACKGROUND COLOR
+ LINK COLOR
+ LINK HOOVER COLOR
+ FOOTER COLOR
+ FOOTER TEXT COLOR
+ FOOTER BOTTOM COLOR
+ FOOTER BOTTOM TEXT COLOR
เมื่อดำเนินการเสร็จแล้ว ให้คลิ๊ก “SAVE SETTINGS”

 
 

1.7 CUSTOM CSS เป็นเมนูสำหรับจัดการเกี่ยวกับการแสดงผลบนเว็บไซต์

การตั้งค่า CUSTOM CSS มีขั้นตอนดังนี้
(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “CUSTOM CSS” (ดังรูปด้านล่าง)
Untitled-083

(3) จากนั้นให้ระบุรายละเอียด ได้แก่
+ Custom CSS
+ Advanced CSS
เมื่อดำเนินการเสร็จแล้ว ให้คลิ๊ก “SAVE SETTINGS”

หมายเหตุ : CSS ย่อมาจาก Cascading Style Sheet เรียกโดยย่อว่า “สไตล์ชีท” คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML
โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ (หรือ “Style”) ของเนื้อหาในเอกสาร

 
 

1.8 ANALYTICS เป็นเมนูสำหรับจัดการ Analytics สำหรับโค๊ดของ Google
Google Analytic เป็นเครื่องมือที่ใช้ในการเก็บสถิติและวิเคราะห์ข้อมูลผู้เข้าชมเว็บไซต์

การตั้งค่า ANALYTICS มีขั้นตอนดังนี้
(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “ANALYTICS”(ดังรูปด้านล่าง)
Untitled-084

(3) จากนั้นให้ใส่ CODE ANALYTICS ในช่องที่กำหนดไว้
เมื่อดำเนินการเสร็จแล้ว ให้คลิ๊ก “SAVE SETTINGS”

 
 

1.9 RESPONSIVE SETTINGS เป็นเมนูสำหรับจัดการ Responsive settings หรือการตั้งค่าการตอบสนองต่อหน้าจออุปกรณ์

การตั้งค่า RESPONSIVE SETTINGS มีขั้นตอนดังนี้
(1) ในหน้าควบคุม ให้วางเม้าส์บนเมนู “รูปแบบร้านออนไลน์” >> และคลิ๊กที่หัวข้อ “แต่งร้านออนไลน์” (ดังรูปด้านล่าง)
Untitled-059

(2) คลิ๊กหัวข้อ “RESPONSIVE SETTINGS” (ดังรูปด้านล่าง)
Untitled-085

(3) จากนั้นให้เลือกระบุ
+ Full responsive (1170px)
+ Full responsive (980px)
+ 980px fixed layout
+ 1107px fixed layout
เมื่อดำเนินการเสร็จแล้ว ให้คลิ๊ก “SAVE SETTINGS”