คู่มือ อบรม flexi content
TRANSCRIPT
![Page 1: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/1.jpg)
www.colorpack.co.th
อบรมการใช้งาน
Joomla Advanced Content Management System
![Page 2: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/2.jpg)
www.colorpack.co.th
พิศาล เชื้อชาติไชย (บู) Project Manager - ColorPack Creations Co., Ltd.
www.facebook.com/chueachatchai www.colorpack.co.th www.joomlachannel.com www.colorpackstore.com
![Page 3: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/3.jpg)
www.colorpack.co.th
เป็นระบบจัดการเนื้อหา โดยสามารถสร้างชนิดของเนื้อหา (Type)ได้ โดยสามารถเพิ่มช่องในการกรอกข้อมูลได้
หลายชนิด (CCK)
FLEXIContent คืออะไร
Content Construction Kit
![Page 4: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/4.jpg)
www.colorpack.co.th
FLEXIContent ดีอย่างไร
- นำเนื้อหาจาก joomla content มาใช้ได้เลย - ง่ายต่อการใช้งาน - มีความยืดหยุ่นในการใช้งานสูง - รองรับเนื้อหาจำนวนมากได้ - มีระบบ Workflow - รองรับการทำงานหลายภาษาในหน้าเดียว
![Page 5: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/5.jpg)
www.colorpack.co.th
ต่างกับ Joomla ปรกติอย่างไร
![Page 6: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/6.jpg)
www.colorpack.co.th
ต่างกับ Joomla ปรกติอย่างไร
![Page 7: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/7.jpg)
www.colorpack.co.th
การแสดงผล ชนิดของเนื้อหา
![Page 8: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/8.jpg)
www.colorpack.co.th
ตัวอย่างเว็บที่ใช้ FLEXIContent
![Page 9: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/9.jpg)
www.colorpack.co.th
FLEXIContent
เว็บหลัก : www.flexicontent.org
Github : https://github.com/FLEXIcontent/flexicontent-cck
![Page 10: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/10.jpg)
www.colorpack.co.th
ติดตั้ง FLEXIContent
![Page 11: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/11.jpg)
www.colorpack.co.th
ติดตั้ง FLEXIContent
![Page 12: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/12.jpg)
www.colorpack.co.th
ติดตั้ง FLEXIContent
![Page 13: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/13.jpg)
www.colorpack.co.th
ติดตั้ง FLEXIContent
![Page 14: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/14.jpg)
www.colorpack.co.th
เข้าใช้งาน FLEXIContent
![Page 15: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/15.jpg)
www.colorpack.co.th
เตรียมความพร้อม FLEXIContent
คลิ๊กอัปเดต ให้หมดแล้ว คลิ๊ก Refresh
![Page 16: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/16.jpg)
www.colorpack.co.th
เตรียมความพร้อม FLEXIContent
คลิ๊ก Configuration
![Page 17: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/17.jpg)
www.colorpack.co.th
เตรียมความพร้อม FLEXIContent
คลิ๊ก Save & Close
![Page 18: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/18.jpg)
www.colorpack.co.th
เริ่มต้นใช้งาน FLEXIContent
![Page 19: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/19.jpg)
www.colorpack.co.th
หน้าหลัก FLEXIContent
ส่วนรายงาน แจ้งเตือน
Quick Icons
เมนู
![Page 20: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/20.jpg)
www.colorpack.co.th
ขั้นตอนการทำงาน
สร้าง Templates
สร้าง Typeคิดรูปแบบการแสดงผล
สร้าง Fields
นำ Fields ไปแสดงในแทมเพลต
ตั้งค่า Type ให้ใช้เทมเพลตที่สร้าง
![Page 21: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/21.jpg)
www.colorpack.co.th
สร้าง Type
![Page 22: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/22.jpg)
www.colorpack.co.th
Type คืออะไร
Type หรือ ชนิดของเนื้อหา เป็นการกำหนดการแสดงผลของเนื้อหาโดย
สามารถกำหนดช่องในการกรอกข้อมูลและการแสดงผลให้แตกต่างกันได้
![Page 23: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/23.jpg)
www.colorpack.co.th
ตัวอย่าง Type
![Page 24: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/24.jpg)
www.colorpack.co.th
หน้ารวม Typeคลิ๊กเมนู Type
สร้าง Type ใหม่
รายการ Type
![Page 25: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/25.jpg)
www.colorpack.co.th
สร้าง Type ใหม่
ใส่ชื่อ ของ Type
บันทึก
![Page 26: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/26.jpg)
www.colorpack.co.th
หน้ารวม Type หลังจากบันทึก
เทมเพลตที่ใช้ชื่อ Type ที่เราสร้าง จำนวน Fields
![Page 27: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/27.jpg)
www.colorpack.co.th
สร้าง Fields
![Page 28: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/28.jpg)
www.colorpack.co.th
Fields คืออะไร
Fields หรือ เขตข้อมูล เป็นการสร้าง ช่องในการกรอกข้อมูล หรือ ช่องในการ
ใส่ข้อมูล ซึ่งมีอยู่หลายชนิด เช่น
Fields File : ใช้ในการ Download ไฟล์ Fields Images : ใช้ในการ ใส่รูป Fields Text : ใช้ในการ ใส่ข้อความ
![Page 29: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/29.jpg)
www.colorpack.co.th
หน้ารวม Fields Firlds เหล่านี้ ไม่
สามารถลบได้เนื่องจากเป็น ฟิลด์ บังคับที่ต้องมี
ทุก Type
![Page 30: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/30.jpg)
www.colorpack.co.th
หน้ารวม Fields
คลิ๊กเมนู Fields
สร้าง Field ใหม่
![Page 31: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/31.jpg)
www.colorpack.co.th
ขั้นตอนการสร้าง Fields
ใส่ชื่อ ฟิลด์ *ภาษาอังกฤษเท่านั้น
ใส่ป้าย ฟิลด์
เลือก ฟิลด์ ที่ต้องการ
![Page 32: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/32.jpg)
www.colorpack.co.th
ขั้นตอนการสร้าง Fields
คลิ๊กเพื่อเลือก Type ที่จะใช้ ฟิลด์ นี้
เมื่อบันทึก จะเห็น ฟิลด์ ที่เราสร้าง
![Page 33: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/33.jpg)
www.colorpack.co.th
สร้าง Templates
![Page 34: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/34.jpg)
www.colorpack.co.th
Templates คืออะไร
เทมเพลต เป็นพื้นที่ ที่เราจะเอา ฟิลด์ มาวางเพื่อแสดงผล เป็น รูปแบบการแสดงผลของเนื้อหา ซึ่งแบ่งออกเป็นเทมเพลตของ Category และแทมเพลตของ item หรือ type โดยการวาง ฟิลด์ ใช้การลากวาง ฟิลด์ ลงไปในตำแหน่งของเทมเพลต
![Page 35: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/35.jpg)
www.colorpack.co.th
Templates
เมนู templates
ปุ่ม copy templates
ปุ่ม จัดการ รูปแบบ item
ปุ่ม จัดการ รูปแบบ item
ปุ่ม จัดการ รูปแบบ Category
![Page 36: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/36.jpg)
www.colorpack.co.th
เทมเพลตรูปแบบต่างๆ
![Page 37: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/37.jpg)
www.colorpack.co.th
Titleabove-description-line1
above-description-line1-nolabel
above-description-line2
above-description-line2-nolabel
Description
under-description-line1
under-description-line1-nolabel
under-description-line2
under-description-line2-nolabel
แสดงก่อน Descriptionnolabel หมายถึงไม่แสดง
ชื่อ ฟิลด์
แสดงหลัง Descriptionnolabel หมายถึงไม่แสดง
ชื่อ ฟิลด์
Templates Blog Category Layout
![Page 38: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/38.jpg)
www.colorpack.co.th
Templates Blog Category Layout
![Page 39: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/39.jpg)
www.colorpack.co.th
Titlefields_top
before-description
Description
after-description
fields_bottom
แสดงก่อน Descriptionโดย fields_top จะถูกกำหนดให้แสดงฟิลด์
Author name ,Created date, Revisor name, Revised date and time, Categories, rating
favourites
สามารถไปตั้งค่า เปิดปิดได้ ที่ Type
แสดงหลัง Descriptionโดย fields_top จะถูกกำหนดให้แสดงฟิลด์Categories และ tag
สามารถไปตั้งค่า เปิดปิดได้ ที่ Type
Templates Blog Item Layout
![Page 40: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/40.jpg)
www.colorpack.co.th
Templates Blog Item Layout
![Page 41: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/41.jpg)
www.colorpack.co.th
Templates Default Category Layout
Title Field 1 Field 2 Field 3
Table
ตำแหน่ง Table สามารถนำฟิลด์ที่ต้องการมาแสดง
ได้
ช่อง Title จะถูกกำหนดให้แสดง ชื่อเนื้อหาและลิงค์
ได้
![Page 42: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/42.jpg)
www.colorpack.co.th
Templates Default Category Layout
![Page 43: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/43.jpg)
www.colorpack.co.th
Templates Default Item LayoutTitlesubtitle1
subtitle2
subtitle3
bottom
subtitle_tab1 subtitle_tab2 subtitle_tab3 subtitle_tab4 subtitle_tab5 subtitle_tab6
bottom_tab1 bottom_tab2 bottom_tab3 bottom_tab4 bottom_tab5 bottom_tab6
Images Top
Description
รายชื่อ ตำแหน่ง ของเทมเพลต โดยจะมีตำแหน่ง tab ซึ่งชื่อ tab จะตั้งค่าได้ที่
Type
![Page 44: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/44.jpg)
www.colorpack.co.th
Templates Default Item Layout
![Page 45: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/45.jpg)
www.colorpack.co.th
Templates FAQ Category Layout
รายชื่อ ตำแหน่ง ของเทมเพลต โดย nolabel หมายถึงไม่แสดงชื่อ ฟิลด์
Titleaftertitle
aftertitle_nolabel
aftertitle2
aftertitle_nolabel2
aftertitle3
aftertitle_nolabel3
![Page 46: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/46.jpg)
www.colorpack.co.th
Templates FAQ Category Layout
![Page 47: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/47.jpg)
www.colorpack.co.th
Templates FAQ Item LayoutTitlesubtitle1
subtitle2
subtitle3
bottom
subtitle_tab1 subtitle_tab2 subtitle_tab3 subtitle_tab4 subtitle_tab5 subtitle_tab6
bottom_tab1 bottom_tab2 bottom_tab3 bottom_tab4 bottom_tab5 bottom_tab6
Images Top
Description
รายชื่อ ตำแหน่ง ของเทมเพลต โดยจะมีตำแหน่ง tab ซึ่งชื่อ tab จะตั้งค่าได้ที่
Type
![Page 48: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/48.jpg)
www.colorpack.co.th
Templates FAQ Item Layout
![Page 49: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/49.jpg)
www.colorpack.co.th
Title Item Title Item
Templates items-tabbed Category Layout
รายชื่อ ตำแหน่ง ของเทมเพลต โดยจะมีตำแหน่ง tab ซึ่งชื่อ tab จะตั้งค่าได้ที่
Type
Title Item รูปแบบจะแสดงเนื้อหาแบบ TapTitlesubtitle1subtitle2subtitle3
bottom
subtitle_tab subtitle_tab subtitle_tab subtitle_tab subtitle_tab subtitle_tab
bottom_tab1 bottom_tab2 bottom_tab3 bottom_tab4 bottom_tab5 bottom_tab6
Images Top
Description
![Page 50: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/50.jpg)
www.colorpack.co.th
Templates items-tabbed Category Layout
รูปแบบจะแสดงเนื้อหาแบบ Tap
![Page 51: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/51.jpg)
www.colorpack.co.th
Templates Presentation Category LayoutTitlesubtitle1
subtitle2
subtitle3
bottom
subtitle_tab1 subtitle_tab2 subtitle_tab3 subtitle_tab4 subtitle_tab5 subtitle_tab6
bottom_tab1 bottom_tab2 bottom_tab3 bottom_tab4 bottom_tab5 bottom_tab6
Images Top
Description
เทมเพลตนี้จะนำเอารูปแบบของ Item มาแสดง
![Page 52: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/52.jpg)
www.colorpack.co.th
Templates Presentation Category Layout
![Page 53: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/53.jpg)
www.colorpack.co.th
การนำ ฟิลด์มาแสดงในแทมเพลต
การนำ ฟิลด์มาแสดงในแทมเพลต ใช้วิธีลาก ฟิลด์ด้านซ้ายมือ มาวางในตำแหน่งของเทมเพลตขวามือ
![Page 54: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/54.jpg)
www.colorpack.co.th
การตั้งค่าใช้แทมเพลต ใน Type
ไปที่เมนู Type แล้วคลิ๊กที่ชื่อของ Type
ด้านขวามือ ล่างสุดเลือก Default item layout ที่
ต้องการ
![Page 55: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/55.jpg)
www.colorpack.co.th
การตั้งค่าใช้แทมเพลต ใน Category
![Page 56: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/56.jpg)
www.colorpack.co.th
การตั้งค่าใช้แทมเพลต ใน Category
![Page 57: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/57.jpg)
www.colorpack.co.th
สร้าง Type Download ใช้แสดง ข้อมูล ดาวน์โหลดไฟล ์
![Page 58: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/58.jpg)
www.colorpack.co.th
สร้าง Type Download
คลิ๊กเมนู Type
สร้าง Type ใหม่
![Page 59: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/59.jpg)
www.colorpack.co.th
สร้าง Type Download
ใส่ชื่อของ Type
บันทึก
![Page 60: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/60.jpg)
www.colorpack.co.th
คลิ๊กเมนู Fields
สร้าง Field ใหม่
สร้าง Fields Download
![Page 61: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/61.jpg)
www.colorpack.co.th
สร้าง Fields Download
ใส่ป้ายชื่อฟิลด์
ใส่ชื่อ ฟิลด์ *ภาษาอังกฤษเท่านั้น
เลือก ฟิลด์ ที่ต้องการ
![Page 62: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/62.jpg)
www.colorpack.co.th
สร้าง Fields Download
เลือก Type ที่จะใช้งาน
![Page 63: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/63.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Download
คลิ๊กเมนู Templates
คลิ๊กเพื่อ คัดลอกเทมเพลต
![Page 64: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/64.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Download
![Page 65: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/65.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Download
คลิ๊กเพื่อเข้าไปแก้ไข Item Layout
![Page 66: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/66.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Download
ลาก ฟิลด์ ไฟล์ดาวน์โหลดด้านซ้ายมือ มาวางในตำแหน่งของเทมเพลตขวามือแล้วบันทึก
![Page 67: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/67.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Download
คลิ๊กเพื่อเข้าไปแก้ไข Category Layout
![Page 68: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/68.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Download
ลาก ฟิลด์ ไฟล์ดาวน์โหลดด้านซ้ายมือ มาวางในตำแหน่งของเทมเพลตขวามือแล้วบันทึก
![Page 69: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/69.jpg)
www.colorpack.co.th
สร้าง Category Download
คลิ๊กเมนู Category
สร้าง Category ใหม่
![Page 70: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/70.jpg)
www.colorpack.co.th
สร้าง Category Download
ใส่ชื่อ Category ใหม่
เลือกเทมเพลต
![Page 71: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/71.jpg)
www.colorpack.co.th
แก้ไข Type ให้ใช้เทมเพลต Download
คลิ๊กเมนู Type
คลิ๊กชื่อ Type Download เพื่อแก้ไข
![Page 72: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/72.jpg)
www.colorpack.co.th
แก้ไข Type ให้ใช้เทมเพลต Download
เลือก Default Item layout เป็น เทมเพลต Download แล้ว บันทึก
![Page 73: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/73.jpg)
www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Download
คลิ๊กเมนู Item
คลิ๊กเพื่อสร้างเนื้อหาใหม่
![Page 74: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/74.jpg)
www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Download
เมื่อคลิ๊กสร้าง Item ใหม่จะมีหน้าต่างมาให้เลือก Type ให้เลือก Download
![Page 75: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/75.jpg)
www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Download
ใส่ชื่อของเนื้อหา
เลือก Category
![Page 76: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/76.jpg)
www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Download
คลิ๊ก Tap Item Type
ฟิลด์ ไฟล์ดาวน์โหลด ให้คลิ๊ก Add File
![Page 77: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/77.jpg)
www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Download
คลิ๊ก เลือกไฟล์จากเครื่อง
ใส่ชื่อไฟล์ ใส่รายละเอียดไฟล์
อัปโหลดไฟล์
![Page 78: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/78.jpg)
www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Download
ไฟล์ดาวน์โหลดที่ถูกใช้งานแล้ว จะมีขีดและเป็นสีแดง
![Page 79: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/79.jpg)
www.colorpack.co.th
สร้าง Menu ใหม่
* การสร้างเมนู จะนำไปไว้กลุ่มเมนูไหนขึ้นอยู่กับเจ้าของเว็บ ไม่จำเป็นต้องเป็น Mainmenu
![Page 80: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/80.jpg)
www.colorpack.co.th
สร้าง Menu ใหม่
![Page 81: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/81.jpg)
www.colorpack.co.th
สร้าง Menu ใหม่
![Page 82: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/82.jpg)
www.colorpack.co.th
ด้านหน้าเว็บ Category Layout
![Page 83: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/83.jpg)
www.colorpack.co.th
ด้านหน้าเว็บ Item Layout
![Page 84: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/84.jpg)
www.colorpack.co.th
ตั้งค่า ฟิลด์ไฟล์ เพิ่มเติม
![Page 85: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/85.jpg)
www.colorpack.co.th
สร้าง Type Gallery เพื่อแสดงรูปภาพแบบแกลเลอรี
![Page 86: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/86.jpg)
www.colorpack.co.th
สร้าง Type Gallery
คลิ๊กเมนู Type
สร้าง Type ใหม่
![Page 87: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/87.jpg)
www.colorpack.co.th
สร้าง Type Gallery
ใส่ชื่อของ Type
บันทึก
Gallery
![Page 88: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/88.jpg)
www.colorpack.co.th
คลิ๊กเมนู Fields
สร้าง Field ใหม่
สร้าง Fields Gallery
![Page 89: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/89.jpg)
www.colorpack.co.th
สร้าง Fields Images Show แสดงหน้า Category
ฟิลด์นี้จะแสดงรูปเดียว
![Page 90: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/90.jpg)
www.colorpack.co.th
สร้าง Fields Gallery
หากต้องการให้ใส่รูปได้หลายรูปเพื่อทำ Gallery ให้คลิ๊กเลือก Acts as gallery เป็น Yes
![Page 91: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/91.jpg)
www.colorpack.co.th
สร้าง เทมเพลต สำหรับ Gallery
คลิ๊กเมนู Templates
คลิ๊กเพื่อ คัดลอกเทมเพลต
![Page 92: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/92.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Gallery
Gallery
Gallery
![Page 93: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/93.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Gallery
คลิ๊กเพื่อเข้าไปแก้ไข Item Layout
![Page 94: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/94.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Download
ลาก ฟิลด์ Galleryด้านซ้ายมือ มาวางในตำแหน่งของเทมเพลตขวามือแล้วบันทึก
![Page 95: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/95.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Gallery
คลิ๊กเพื่อเข้าไปแก้ไข Category Layout
![Page 96: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/96.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Download
ลาก ฟิลด์ Images Show ด้านซ้ายมือ มาวางในตำแหน่งของเทมเพลตขวามือแล้วบันทึก
![Page 97: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/97.jpg)
www.colorpack.co.th
สร้าง Category Gallery
คลิ๊กเมนู Category
สร้าง Category ใหม่
![Page 98: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/98.jpg)
www.colorpack.co.th
สร้าง Category Gallery
ใส่ชื่อ Category ใหม่
เลือกเทมเพลต
![Page 99: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/99.jpg)
www.colorpack.co.th
แก้ไข Type ให้ใช้เทมเพลต Gallery
คลิ๊กเมนู Type
คลิ๊กชื่อ Type Gallery เพื่อแก้ไข
![Page 100: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/100.jpg)
www.colorpack.co.th
แก้ไข Type ให้ใช้เทมเพลต Gallery
เลือก Default Item layout เป็น เทมเพลต Gallery แล้ว บันทึก
![Page 101: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/101.jpg)
www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Gallery
คลิ๊กเมนู Item
คลิ๊กเพื่อสร้างเนื้อหาใหม่
![Page 102: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/102.jpg)
www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Gallery
เมื่อคลิ๊กสร้าง Item ใหม่จะมีหน้าต่างมาให้เลือก Type ให้เลือก Gallery
![Page 103: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/103.jpg)
www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Gallery
ใส่ชื่อของเนื้อหา
เลือก Category
![Page 104: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/104.jpg)
www.colorpack.co.th
ใส่รูปลงในฟิลด์ Images Show
![Page 105: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/105.jpg)
www.colorpack.co.th
ใส่รูปลงในฟิลด์ Images Show
![Page 106: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/106.jpg)
www.colorpack.co.th
ใส่รูปลงในฟิลด์ Images Show
ช่องใส่คำอธิบายรูปควรใส่ทั้งสามช่องหากต้องการลบให้ติ๊ก
ช่องนี้แล้วบันทึก
![Page 107: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/107.jpg)
www.colorpack.co.th
ใส่รูปลงในฟิลด์ Gallery
สังเกตว่าฟิลด์นี้ใส่รูปได้หลายรูปเพราะ Gallery จากการคลิ๊กเลือก Acts as gallery เป็น Yes ในฟิลด์
![Page 108: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/108.jpg)
www.colorpack.co.th
ใส่รูปลงในฟิลด์ Gallery
เลือกอัพโหลดแบบ Multiple Upload
เลือกไฟล์ได้ทีละหลายไฟล์
![Page 109: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/109.jpg)
www.colorpack.co.th
ใส่รูปลงในฟิลด์ Gallery
![Page 110: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/110.jpg)
www.colorpack.co.th
ใส่รูปลงในฟิลด์ Gallery
คลิ๊กเพื่อเพิ่ม
จากนั้นคลิ๊ก Select Images
![Page 111: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/111.jpg)
www.colorpack.co.th
ใส่รูปลงในฟิลด์ Gallery
หลังจากใส่รูปไปแล้ว ให้คลิ๊กบันทึก
![Page 112: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/112.jpg)
www.colorpack.co.th
สร้าง Menu ใหม่
* การสร้างเมนู จะนำไปไว้กลุ่มเมนูไหนขึ้นอยู่กับเจ้าของเว็บ ไม่จำเป็นต้องเป็น Mainmenu
![Page 113: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/113.jpg)
www.colorpack.co.th
สร้าง Menu ใหม่
![Page 114: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/114.jpg)
www.colorpack.co.th
สร้าง Menu ใหม่
![Page 115: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/115.jpg)
www.colorpack.co.th
ด้านหน้าเว็บ
![Page 116: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/116.jpg)
www.colorpack.co.th
ปรับแต่งหน้าเว็บ Category Layout
ให้เข้าไปปรับแก้ ฟิลด์ Images show กำหนด Display Label เป็น No
และเปลี่ยนขนาดของ Thumbnail in Category View เป็น Medium
![Page 117: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/117.jpg)
www.colorpack.co.th
ปรับแต่งหน้าเว็บ Item Layout
ให้เข้าไปปรับแก้ ฟิลด์ Images show กำหนด Display Label เป็น No
และเปลี่ยนขนาดของ Medium thumbnails เป็น 200x150 หรือตามขนาดที่ต้องการ
![Page 118: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/118.jpg)
www.colorpack.co.th
สร้าง Type Staff เพื่อแสดงข้อมูลบุคลากร
![Page 119: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/119.jpg)
www.colorpack.co.th
สร้าง Type Staff
คลิ๊กเมนู Type
สร้าง Type ใหม่
![Page 120: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/120.jpg)
www.colorpack.co.th
สร้าง Type Staff
ใส่ชื่อของ Type
บันทึก
บุคลากร
![Page 121: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/121.jpg)
www.colorpack.co.th
คลิ๊กเมนู Fields
สร้าง Field ใหม่
สร้าง Fields Staff
![Page 122: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/122.jpg)
www.colorpack.co.th
สร้าง Fields แบบ Radio
เลือก Radio
![Page 123: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/123.jpg)
www.colorpack.co.th
สร้าง Fields แบบ Checkbox
การใส่ข้อมูลจะต้องใส่เป็นรูปแบบที่กำหนด
ข้อมูลที่เก็บลงฐานข้อมูล
ข้อมูลที่แสดงคั่นด้วย ::
ปิดด้วย %% เว้นวรรค
![Page 124: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/124.jpg)
www.colorpack.co.th
สร้าง Fields แบบ Date
เลือก Date
![Page 125: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/125.jpg)
www.colorpack.co.th
สร้าง Fields แบบ Select
เลือก Select
![Page 126: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/126.jpg)
www.colorpack.co.th
สร้าง Fields แบบ Select
ข้อมูลที่เก็บลงฐานข้อมูล
ข้อมูลที่แสดงคั่นด้วย ::
ปิดด้วย %% เว้นวรรค
การใส่ข้อมูลจะต้องใส่เป็นรูปแบบที่กำหนด
press_office::สำนักงบประมาณ%% fisheries_office::สำนักงานประมง%% statistical_office::สำนักงานสถิติ%% commercial_office::สำนักงานพาณิชย์%%
![Page 127: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/127.jpg)
www.colorpack.co.th
สร้าง Fields แบบ Text
เลือก Text
![Page 128: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/128.jpg)
www.colorpack.co.th
สร้าง Fields Images
เลือก images
![Page 129: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/129.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Staff Category
คลิ๊กเมนู Templates
คลิ๊กเพื่อ คัดลอกเทมเพลต
![Page 130: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/130.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Staff Item
คลิ๊กเมนู Templates
คลิ๊กเพื่อ คัดลอกเทมเพลต
![Page 131: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/131.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Staff Category
คลิ๊กเพื่อเข้าไปแก้ไข Category Layout
![Page 132: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/132.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Staff Category
![Page 133: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/133.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Staff Item
คลิ๊กเพื่อเข้าไปแก้ไข Items Layout
![Page 134: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/134.jpg)
www.colorpack.co.th
สร้าง เทมเพลต Staff Item
![Page 135: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/135.jpg)
www.colorpack.co.th
สร้าง Category บุคลากร
คลิ๊กเมนู Category
สร้าง Category ใหม่
![Page 136: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/136.jpg)
www.colorpack.co.th
สร้าง Category บุคลากร
ใส่ชื่อ Category ใหม่
เลือกเทมเพลต
![Page 137: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/137.jpg)
www.colorpack.co.th
แก้ไข Type ให้ใช้เทมเพลต staff-item
คลิ๊กเมนู Type
คลิ๊กชื่อ Type บุคลากร เพื่อแก้ไข
![Page 138: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/138.jpg)
www.colorpack.co.th
แก้ไข Type ให้ใช้เทมเพลต staff-item
เลือก Default Item layout เป็น เทมเพลต staff-item แล้ว บันทึก
![Page 139: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/139.jpg)
www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type บุคลากร
คลิ๊กเมนู Item
คลิ๊กเพื่อสร้างเนื้อหาใหม่
![Page 140: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/140.jpg)
www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type บุคลากร
เมื่อคลิ๊กสร้าง Item ใหม่จะมีหน้าต่างมาให้เลือก Type ให้เลือก บุคลากร
![Page 141: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/141.jpg)
www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type บุคลากร
ใส่ชื่อของเนื้อหา
เลือก Category
![Page 142: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/142.jpg)
www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type บุคลากร
กรอกข้อมูลให้ครบถ้วน แล้วบันทึก
![Page 143: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/143.jpg)
www.colorpack.co.th
สร้าง Menu ใหม่
* การสร้างเมนู จะนำไปไว้กลุ่มเมนูไหนขึ้นอยู่กับเจ้าของเว็บ ไม่จำเป็นต้องเป็น Mainmenu
![Page 144: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/144.jpg)
www.colorpack.co.th
สร้าง Menu ใหม่
![Page 145: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/145.jpg)
www.colorpack.co.th
สร้าง Menu ใหม่
![Page 146: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/146.jpg)
www.colorpack.co.th
ด้านหน้าเว็บ
![Page 147: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/147.jpg)
www.colorpack.co.th
แก้ไขรูปแบบ Category ได้
![Page 148: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/148.jpg)
www.colorpack.co.th
แก้ไขรูปแบบ การแสดงผลหน้า Item ได้ที่ type
![Page 149: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/149.jpg)
www.colorpack.co.th
การใช้งาน โมดูล
![Page 150: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/150.jpg)
www.colorpack.co.th
สร้างโมดูลใหม่
![Page 151: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/151.jpg)
www.colorpack.co.th
สร้างโมดูลใหม่
![Page 152: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/152.jpg)
www.colorpack.co.th
โมดูลของ Universal Content Module for FLEXIcontent มี 4 แบบ
![Page 153: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/153.jpg)
www.colorpack.co.th
โมดูล Layout Carousel
![Page 154: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/154.jpg)
www.colorpack.co.th
โมดูล Layout News
![Page 155: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/155.jpg)
www.colorpack.co.th
โมดูล Layout Select โมดูล Layout Default
โมดูล Layout
![Page 156: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/156.jpg)
www.colorpack.co.th
โมดูล Layout Select
FeaturedFeatured
Intro items Intro items
โมดูล Layout Newsโมดูล Layout Carousel
![Page 157: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/157.jpg)
www.colorpack.co.th
การกำหนด ขอบเขตข้อมูลที่จะนำมาแสดง
แท็บ Item List: Select Items จะเป็นที่กำหนดขอบเขตของข้อมูลว่าจะเอาข้อมูลจาก Category ไหน
มาแสดง
![Page 158: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/158.jpg)
www.colorpack.co.th
การกำหนด ขอบเขตข้อมูลที่จะนำมาแสดง
Category scope จะเป็นที่กำหนดว่าจะนำ เอา ข้อมูลจาก Category ไหนมาแสดง
![Page 159: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/159.jpg)
www.colorpack.co.th
การกำหนด ฟิลด์ที่นำมาแสดง
Layout: Select fields จะเป็นที่กำหนดว่าจะนำ เสนอขอ้มูลอย่าไร เช่น แสดง วันที่ กำหนดขนาดรูป
กำหนดความยาวชื่อ เป็นต้น
![Page 160: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/160.jpg)
www.colorpack.co.th
การกำหนด ฟิลด์ที่นำมาแสดง
กำหนดการเปิดปิด รูปแบบของ วันที่ได้
![Page 161: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/161.jpg)
www.colorpack.co.th
กำหนดการเปิดปิดHits และ Vote
การกำหนด ฟิลด์ที่นำมาแสดง
![Page 162: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/162.jpg)
www.colorpack.co.th
สามารถเลือกรูปมาแสดงได้ นอกจากนั้นยังกำหนดขนาดเองได้
การกำหนด ฟิลด์ที่นำมาแสดง
![Page 163: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/163.jpg)
www.colorpack.co.th
การกำหนด รูปแบบของแต่ละ Layout
เมื่อเราเลือก Layout ใดๆ จะมีการตั้งค่าของแต่ละ Layout
![Page 164: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/164.jpg)
www.colorpack.co.th
การกำหนด รูปแบบของแต่ละ Layout
![Page 165: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/165.jpg)
www.colorpack.co.th
การกำหนด รูปแบบของแต่ละ Layout
เมื่อเราเลือก Layout ใดๆ จะมีการตั้งค่าของแต่ละ Layout
![Page 166: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/166.jpg)
www.colorpack.co.th
การกำหนด รูปแบบของแต่ละ Layout
![Page 167: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/167.jpg)
www.colorpack.co.th
รู้จักฟิลด์ แต่ละชนิด
![Page 168: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/168.jpg)
www.colorpack.co.th
Field type - Radio : การใช้งาน
ฟิลด์ Radio จะเป็นแบบตัวเลือกซึ่งจะเลือกได้เพียง ตัวเลือกเดียว
![Page 169: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/169.jpg)
www.colorpack.co.th
Field type - Radio : การตั้งค่า
ข้อมูลที่เก็บลงฐานข้อมูล
ข้อมูลที่แสดงคั่นด้วย ::
ปิดด้วย %% เว้นวรรค
![Page 170: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/170.jpg)
www.colorpack.co.th
Field type - Radio Images : การใช้งาน
ฟิลด์ Radio จะเป็นแบบตัวเลือกซึ่งจะเลือกได้เพียง ตัวเลือกเดียว แต่จะใช้รูปมาเป็นตัวเลือกแทน
![Page 171: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/171.jpg)
www.colorpack.co.th
Field type - Radio Images : การตั้งค่า
ข้อมูลที่เก็บลงฐานข้อมูล ชื่อรูปคั่นด้วย
::ปิดด้วย %
% เว้นวรรคชื่อข้อมูล คั่นด้วย ::
สร้างโฟลเดอร์ใส่รูปแล้วนำรูปมาใส่ตามที่ตั้งค่า
![Page 172: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/172.jpg)
www.colorpack.co.th
Field type - Checkbox : การใช้งาน
ฟิลด์ Radio จะเป็นแบบตัวเลือกซึ่งจะเลือกได้หลายข้อ หรือหลายตัวเลือก
![Page 173: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/173.jpg)
www.colorpack.co.th
Field type - Checkbox : การตั้งค่า
ข้อมูลที่เก็บลงฐานข้อมูล
ข้อมูลที่แสดงคั่นด้วย ::
ปิดด้วย %% เว้นวรรค
![Page 174: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/174.jpg)
www.colorpack.co.th
Field type - Radio Images : การใช้งาน
ฟิลด์ Radio Images จะเป็นแบบตัวเลือกซึ่งจะเลือกได้หลายตัวเลือก แต่จะใช้รูปมาเป็นตัวเลือกแทน
![Page 175: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/175.jpg)
www.colorpack.co.th
Field type - Radio Images : การตั้งค่า
ข้อมูลที่เก็บลงฐานข้อมูล ชื่อรูปคั่นด้วย
::ปิดด้วย %
% เว้นวรรคชื่อข้อมูล คั่นด้วย ::
สร้างโฟลเดอร์ใส่รูปแล้วนำรูปมาใส่ตามที่ตั้งค่า
![Page 176: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/176.jpg)
www.colorpack.co.th
Field type - Select : การใช้งาน
ฟิลด์ Select จะเป็นแบบตัวเลือกแบบหนึ่งตัวเลือก เหมาะกับการใช้งานที่มีข้อมูลมากๆ เช่น ตัวเลือกจังหวัด
![Page 177: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/177.jpg)
www.colorpack.co.th
Field type - Select : การตั้งค่า
ข้อมูลที่เก็บลงฐานข้อมูล
ข้อมูลที่แสดงคั่นด้วย ::
ปิดด้วย %% เว้นวรรค
![Page 178: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/178.jpg)
www.colorpack.co.th
Field type - Select Multiple : การใช้งาน
ฟิลด์ Select จะเป็นแบบตัวเลือกแบบเลือกได้หลายตัวเลือก เช่น ชอบรถอะไร
![Page 179: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/179.jpg)
www.colorpack.co.th
Field type - Select Multiple : การตั้งค่า
ข้อมูลที่เก็บลงฐานข้อมูล
ข้อมูลที่แสดงคั่นด้วย ::
ปิดด้วย %% เว้นวรรค
![Page 180: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/180.jpg)
www.colorpack.co.th
Field type - File : การใช้งาน
ฟิลด์ file จะเป็นฟิลด์ที่ใช้ทำระบบ ดาวน์โหลด โดยสามารถอัปโหลดไฟล์ขึ้นไปหรือใส่ URLไฟล์ ก็ได้
![Page 181: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/181.jpg)
www.colorpack.co.th
Field type - File : การใช้งาน
คลิ๊ก เลือกไฟล์จากเครื่อง
ใส่ชื่อไฟล์ ใส่รายละเอียดไฟล์
อัปโหลดไฟล์
![Page 182: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/182.jpg)
www.colorpack.co.th
Field type - Image or Gallery : การใช้งาน
ฟิลด์ Image or Gallery จะเป็นฟิลด์ที่ใช้ ใส่รูป หนึ่งรูปหรือใส่หลายรูปเพื่อทำ Gallery
![Page 183: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/183.jpg)
www.colorpack.co.th
ใส่รูปลงในฟิลด์ Images แบบรูปเดียว
![Page 184: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/184.jpg)
www.colorpack.co.th
ใส่รูปลงในฟิลด์ Images แบบหลายรูป
เลือกอัพโหลดแบบ Multiple Upload
เลือกไฟล์ได้ทีละหลายไฟล์
![Page 185: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/185.jpg)
www.colorpack.co.th
Field type - Mini Gallery : การใช้งาน
ฟิลด์ Mini Gallery จะเป็นฟิลด์ที่ใช้ ใส่รูป ใส่หลายรูปเพื่อทำ Gallery
![Page 186: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/186.jpg)
www.colorpack.co.th
Field type - Mini Gallery : การแสดงผล
![Page 187: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/187.jpg)
www.colorpack.co.th
Field type - Shared Video : การใช้งาน
ฟิลด์ Shared Video จะเป็นฟิลด์ที่ใช้ ใส่วีดีโอจากเว็บต่างๆ
เช่น YouTube,Vimeo,D
ailyMotionโดยใส่ URL ลงไปแล้วกด Fetch ข้อมูล
จะมาเอง
![Page 188: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/188.jpg)
www.colorpack.co.th
Field type - Date : การใช้งาน
ฟิลด์ Date จะเป็นฟิลด์ที่ใช้ ใส่วันที่
![Page 189: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/189.jpg)
www.colorpack.co.th
Field type - Text : การใช้งาน
ฟิลด์ Text จะเป็นช่องให้ใส่ข้อความสั้นๆ
![Page 190: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/190.jpg)
www.colorpack.co.th
Field type - Text Area : การใช้งาน
ฟิลด์ Text Area จะเป็นช่องให้ใส่ข้อความขนาดใหญ่และใส่รูปภาพหรือ HTMLได้ หากอยากเปิดใช้
HTML Editor เปิดตามรูป
![Page 191: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/191.jpg)
www.colorpack.co.th
Field type - Weblink : การใช้งาน
ฟิลด์ Weblink จะเป็นช่องให้ใส่ URL และสามารถใส่ได้หลายช่อง โดยไปเปิดตามรูป
![Page 192: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/192.jpg)
www.colorpack.co.th
Field type - Relation : การใช้งาน
ฟิลด์ Relation จะเป็นฟิลด์ที่จะแสดงรายชื่อบทความ ที่เกี่ยวข้องโดยเราจะเป็นคนเลือกเอง โดยเลือก
บทความจากซ้ายมือ กด +
![Page 193: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/193.jpg)
www.colorpack.co.th
ตั้งค่าปรับแต่งเพิ่มเติม
![Page 194: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/194.jpg)
www.colorpack.co.th
ซ่อนการแสดง Maintext field
บาง Type เราจะไม่ได้ใช้ช่องใส่ข้อความใหญ่ๆ เราสามารถไปปิดได้ที่ Type ดังรูป
![Page 195: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/195.jpg)
www.colorpack.co.th
แก้ไข ป้าย Title
ปรกติจะเป็น Title
ต้องการเปลี่ยนเป็น ชื่อ-นามสกุล ให้ไปเปลี่ยนที่
Type นั้นๆ
![Page 196: คู่มือ อบรม Flexi content](https://reader038.vdocuments.net/reader038/viewer/2022102604/55a616141a28ab0a338b47d9/html5/thumbnails/196.jpg)
www.colorpack.co.th
ใส่ชื่อให้ Tab
ต้องการเปลี่ยนชื่อ Tab ให้ไปเปลี่ยนที่ Type นั้นๆ