โลโก้ด้านบน (Logo) - ShopUp · 2017-11-01 ·...

โลโกดานบน (Logo)

คลก “ตงคาขอมลทวไปของเวบไซต”ระบบจะพาไปยงหนาอพโหลด Logo

1.1 คลก ไอคอนเฟองสสม ระบบจะแสดงรายการใหเลอกแกไข

1.2 คลกแกไข "โลโกดานบน" ทไอคอนดนสอ

1.3 คลก อพโหลด Logo เรยบรอยแลวทาการคลกป มบนทก

เมนดานบน (Top Menu)1.1 คลก ไอคอนเฟองสสม ระบบจะแสดงรายการใหเลอกแกไข

1.2 คลกแกไข "เมนดานบน" ทไอคอนดนสอ หรอคลกป ม

ระบบจะพาเขาหนา แกไขกาหนดคา แบบเดยวกน

11

คลก “เพมเมน” ระบบจะพาไปยงหนาระบบเมน

ตวอยางระบบม 2 กลมเมน คอ เมน

ดานบน ,เมนดานขาง

โดยสามารถเพมกลมใหมไดเอง ดงน

-- กรอกชอกลมเมน กด บนทก

หรอแกไขชอเมนจากตวอยางระบบ

(หนาถดไป)

(ตอ) เมนดานบน (Top Menu)แกไขชอเมนจากตวอยางระบบ คลกตรงสญลกษณ 3 ขด เพอคลเมนในกลม ตามภาพ

จะแสดงเมนในกลมทม สามารถเพมเมนใหม หรอ แกไขชอจากเมนตวอยางไดเลย ดงน

-- เพมเมนใหม

-กรอกชอเมน

-เลอกประเภทลงก : --ลงกภายในระบบ เลอกเชอมกบระบบภายใน

จากชอง “เมนภายใน”--ลงกภายนอกระบบ ระบบจะแสดงชองใหกรอก

url ลงกออกไปเวบภายนอก

-กาหนดรปแบบลงก : -- คาเรมตน : เปดอยในหนาตางเดม

-- เปดหนาใหม : เปดแสดงหนาตาง tabใหม

-สถานะไอคอน : ไมแสดง / แสดงดานซาย /แสดงดานขวา

-จดการไอคอน : เพมไอคอนไวในเมน ซาย/ขวา เลอกไดเองจากสถานะไอคอน

(ตอ) เมนดานบน (Top Menu)จะแสดงเมนในกลมทม สามารถเพมเมนใหม หรอ แกไขชอจากเมนตวอยางไดเลย ดงน

--แกไขชอเมน

สามารถแกไขชอเมน กาหนดคาเมนไดเอง แบบเดยวกบ เพมเมนใหม

เปด/ปด แกไข คดลอก แปลภาษา link ลบ

เปด/ปด : เปด-ปด การแสดงเมนหนาเวบ

แกไข : แกไขชอเมน

คดลอก : คดลอกเมน ทาซาเมน

แปลภาษา : แปลไปยงภาษาอน เมอใชงานมากกวา 1 ภาษา โดยเลอกภาษาทตองการแปล กรอกขอ

ขอความตามภาษานน แลว บนทก เชน หนาหลก เลอกแปลไป English กกรอก Home เปนตน

Link : url link สามารถนาไปใชงานเชอมกบขอความ ภาพได

ลบ : ลบเมน

แบนเนอรหลก (Main Banner)1.1 คลก ไอคอนเฟองสสม ระบบจะแสดงรายการใหเลอกแกไข

1.2 คลกแกไข "แบนเนอรหลก" ทไอคอนดนสอ หรอคลกป ม

ระบบจะพาเขาหนา แกไขกาหนดคา แบบเดยวกน

1.3 เลอกหมวดหมแบนเนอรทสรางไว การจดเรยง และ จานวนแสดงผล ตามลาดบ และ คลก

Save changes

แบนเนอรหลก (Main Banner)กรณยงไมไดอพโหลดภาพ ในระบบแบนเนอร

--เพมแบนเนอร ดงน

ระบบพาไปยง ระบบแบนเนอร เพอทาการสราง หมวดหมแบนเนอรกอน เมอเรยบรอยแลว บนทก

ตามภาพ

ระบชอหมวดแบนเนอร

ระบคาอธบาย หรอไมระบกได

(ตอ) แบนเนอรหลก (Main Banner)หลงจากสรางหมวดหมเรยบรอยแลว คลก จดการแบนเนอร เพอ เพมแบนเนอร ลงในหมวดหมทสรางไวกอนหนาน เรยบรอยแลว บนทก

1

ชอแบนเนอร

คาอธบายแบนเนอร

url link ถาม

เลอกหมวดทสรางไว

ระบบแสดงขนาดของแบนเนอร ไมสามารถปรบขนาดจากสวนนได

หลงจากอพโหลดภาพเขาระบบแบนเนอรแลว กสามารถกลบไปยงหนา ปรบแตงเวบไซต

เพอเลอกขอมลมาแสดง ดงขอ 1.3 ไดเลย

เนอหาหลก (Content)คลกไอคอนเฟองสสม ระบบจะแสดงรายการ

ทงหมดของเนอหาหลก (Content)

คลก +เพมเนอหาใหม แถบบารสเขยว

ระบบจะแสดงวดเจต (Widget) ดงน

Product , Article , Clip , Gallery ,

Event , HTML

คลกเลอกสนคาอยางใดอยางหนง

จากทงหมด 4 รปแบบ ดงน

สนคาสไลด , สนคา 2 คอลมน ,

สนคา 3 คอลมน , สนคา 4 คอลมน

เมอเลอกรปแบบไดแลว ใหกรอกชอหวขอ/เลอกไอคอน , เลอกขอมลมาแสดง

, ตาแหนงการแสดง ตามลาดบ และ ทาการคลก Save changes

จากภาพเลอกรปแบบ สนคาสไลด

(ตอ) เนอหาหลก (Content)

เมอสนคาเปลยนตามทเลอกขอมลมาแสดงแลว ใหทาการคลกอพเดทหนาเวบไซตป มสเขยว บรเวณดานบนขวามอ

เพยงเทานสนคากจะแสดงทหนาเวบแลว

หมายเหต : วดเจต (Widget) = Article , Clip , Gallery , Event , HTML จดการลกษณะเดยวกนกบ Product

(ตอ) ตวอยางการเพม HTML

- เมอกลอง HTML ปรากฏขนมาแลว

คลกบรเวณทตองการแกไข

ระบบจะแสดง กลองเครองมอ

(Text Editor) ขนมา

- เมอใสขอมลตามทตองการเรยบรอย

แลว คลก Save ทไอคอนแผนดสก

และ คลกอพเดทหนาเวบไซตป มส

เขยว บรเวณดานบนขวามอ เพยง

เทาน HTMLกจะแสดงทหนาเวบแลว

ตวอยางการเพม HTML

- คลกเฟองสสม และ คลก +เพมเนอหาใหม แถบบารสเขยว

- เลอกวดเจต (Widget) : HTML และ รปแบบของ HTML

(ตวอยางเลอก HTML 1 Column)

- เลอกตาแหนงการแสดงผล และ Save changes

กลองเครองมอ(Text Editor) HTML 1 Column

(ตอ) เนอหาหลก (Content)

การจดเรยงลาดบการแสดงผลของเนอหาหลก (ภาพท 1)

- คลกไอคอนเฟองสสม ระบบจะแสดงรายการทงหมดของเนอหาหลก (Content)

- คลกซายคางไวทรายการใดรายการหนง และลากไปยงตาแหนงทตองการ เชน ตองการให HTML 1 Column ไปอยลาดบบนสด

ใหทาการคลกซายคางไวและลากขนไปยงบนสด หากไดตาแหนงทตองการแลว ใหปลอยมอ เพยงเทานกสามารถเรยงลาดบไดแลว

HTML 1 Column

สนคา สไลด

HTML 1 Column

สนคา สไลด

เมอจดเรยงลาดบการแสดงผลของเนอหาหลกเรยบรอยแลว คลกอพเดทหนาเวบไซตป มสเขยว บรเวณดานบนขวามอ

เพยงเทานหนาเวบจะแสดงเนอหาตามทจดเรยงแลว (ภาพท 2)

ภาพท 2

ภาพท 1

ตาแหนง footer (ดานลาง)คลกบรเวณเนอหา จะปรากฏกลองเครองมอ Text Editor ขนมา ตามภาพ

เครองมอ Text Editor

สามารถคลกตาแหนงขอความ ภาพ แกไขเนอหาใหมไดเลย โดยใชเครองมอดงน

อธบายเครองมอคราวๆ ดงน

1.เลอกปรบฟอนต ขนาดตวอกษรไดตามระบบ

2.Icons เลอกไอคอนสาหรบวางหนาขอความ หลงขอความ หรอตามตองการใน

editor3.รปโซ insert/edit link สาหรบเชอมลงค ขอความ ภาพ หรอป ม เพอใหคลกแลวไปยงลงคทตองการ

4.อพโหลดภาพ insert/edit image อพโหลดภาพจากเครอง หรอดงจากจดการไฟล ตามภาพ

คลกป มตรงชอง source ตามภาพ

ระบบจะรนไป จดการไฟล เพอทาการอพโหลด

ภาพจากคอมเขาในระบบ และดงไปใชงาน

คลกป ม upload files ตามภาพ

ตาแหนง footer (ดานลาง)อธบายเครองมอ Text Editor คราวๆ ตามภาพ

5.อพโหลดคลป สามารถนาคลปจากลงคยทปมาวาง ในชอง insert/edit video ไดเลย

(*หากคลปสวนตว แนะนาอพโหลดขนยทปแลวนา url link มาใชงาน*)

6.อพโหลดภาพ *องตามขอ 4. insert/edit image7.รปโซ insert/edit link สาหรบเชอมลงค ขอความ ภาพ หรอป ม เพอใหคลกแลวไปยงลงคทตองการ *องตามขอ 3.

8.การสรางตาราง ใชเครองมอ table คลก insert table เลอกขอมลตาราง --แนวนอน เรยกวา คอลมน

--แนวตง เรยกวา แถว

*เลอก insert คอลมน กบแถวไดตามตองการ ตามภาพ

ตวอยาง

ตาราง 5 คอลมน 3 แถว