คู่มือ อบรมการใช้งาน FLEXIContent นี้จัดทำเพื่อใช้ประกอบการอบรม การสร้างเว็บไซต์ด้วย Joomla! (เวอร์ชั่น 3) หลักสูตรขั้นสูง Joomla Advanced Content Management System โดย http://colorpack.co.th/

1. www.colorpack.co.th
อบรมการใช้งาน
Joomla Advanced Content Management
System

2. www.colorpack.co.th
พิศาล เชื้อชาติไชย (บู)
Project Manager - ColorPack Creations Co., Ltd.
www.facebook.com/chueachatchai
www.colorpack.co.th
www.joomlachannel.com
www.colorpackstore.com

3. www.colorpack.co.th
เป็นระบบจัดการเนื้อหา โดยสามารถ
สร้างชนิดของเนื้อหา (Type)ได้ โดย
สามารถเพิ่มช่องในการกรอกข้อมูลได้
หลายชนิด (CCK)
FLEXIContent คืออะไร
Content Construction Kit

4. www.colorpack.co.th
FLEXIContent ดีอย่างไร
- นำเนื้อหาจาก joomla content มาใช้ได้เลย
- ง่ายต่อการใช้งาน
- มีความยืดหยุ่นในการใช้งานสูง
- รองรับเนื้อหาจำนวนมากได้
- มีระบบ Workflow
- รองรับการทำงานหลายภาษาในหน้าเดียว

5. www.colorpack.co.th
ต่างกับ Joomla ปรกติอย่างไร

6. www.colorpack.co.th
ต่างกับ Joomla ปรกติอย่างไร

7. www.colorpack.co.th
การแสดงผล ชนิดของเนื้อหา

8. www.colorpack.co.th
ตัวอย่างเว็บที่ใช้ FLEXIContent

9. www.colorpack.co.th
FLEXIContent
เว็บหลัก : www.flexicontent.org
Github : https://github.com/
FLEXIcontent/flexicontent-cck

10. www.colorpack.co.th
ติดตั้ง FLEXIContent

11. www.colorpack.co.th
ติดตั้ง FLEXIContent

12. www.colorpack.co.th
ติดตั้ง FLEXIContent

13. www.colorpack.co.th
ติดตั้ง FLEXIContent

14. www.colorpack.co.th
เข้าใช้งาน FLEXIContent

15. www.colorpack.co.th
เตรียมความพร้อม FLEXIContent
คลิ๊กอัปเดต ให้หมดแล้ว คลิ๊ก
Refresh

16. www.colorpack.co.th
เตรียมความพร้อม FLEXIContent
คลิ๊ก Configuration

17. www.colorpack.co.th
เตรียมความพร้อม FLEXIContent
คลิ๊ก Save & Close

18. www.colorpack.co.th
เริ่มต้นใช้งาน FLEXIContent

19. www.colorpack.co.th
หน้าหลัก FLEXIContent
ส่วนรายงาน แจ้งเตือน
Quick Icons
เมนู

20. www.colorpack.co.th
ขั้นตอนการทำงาน
สร้าง
Templates
สร้าง Type
คิดรูปแบบการ
แสดงผล
สร้าง Fields
นำ Fields ไปแสดง
ในแทมเพลต
ตั้งค่า Type ให้ใช้
เทมเพลตที่สร้าง

21. www.colorpack.co.th
สร้าง Type

22. www.colorpack.co.th
Type คืออะไร
Type หรือ ชนิดของเนื้อหา เป็นการ
กำหนดการแสดงผลของเนื้อหาโดย
สามารถกำหนดช่องในการกรอกข้อมูล
และการแสดงผลให้แตกต่างกันได้

23. www.colorpack.co.th
ตัวอย่าง Type

24. www.colorpack.co.th
หน้ารวม Type
คลิ๊กเมนู Type
สร้าง Type ใหม่
รายการ Type

25. www.colorpack.co.th
สร้าง Type ใหม่
ใส่ชื่อ ของ Type
บันทึก

26. www.colorpack.co.th
หน้ารวม Type หลังจากบันทึก
เทมเพลตที่ใช้ชื่อ Type ที่เราสร้าง จำนวน Fields

27. www.colorpack.co.th
สร้าง Fields

28. www.colorpack.co.th
Fields คืออะไร
Fields หรือ เขตข้อมูล เป็นการสร้าง
ช่องในการกรอกข้อมูล หรือ ช่องในการ
ใส่ข้อมูล ซึ่งมีอยู่หลายชนิด เช่น
Fields File : ใช้ในการ Download ไฟล์
Fields Images : ใช้ในการ ใส่รูป
Fields Text : ใช้ในการ ใส่ข้อความ

29. www.colorpack.co.th
หน้ารวม Fields
Firlds เหล่านี้ ไม่
สามารถลบได้เนื่องจาก
เป็น ฟิลด์ บังคับที่ต้องมี
ทุก Type

30. www.colorpack.co.th
หน้ารวม Fields
คลิ๊กเมนู Fields
สร้าง Field ใหม่

31. www.colorpack.co.th
ขั้นตอนการสร้าง Fields
ใส่ชื่อ ฟิลด์
*ภาษาอังกฤษเท่านั้น
ใส่ป้าย ฟิลด์
เลือก ฟิลด์ ที่ต้องการ

32. www.colorpack.co.th
ขั้นตอนการสร้าง Fields
คลิ๊กเพื่อเลือก Type
ที่จะใช้ ฟิลด์ นี้
เมื่อบันทึก จะเห็น ฟิลด์ ที่เราสร้าง

33. www.colorpack.co.th
สร้าง Templates

34. www.colorpack.co.th
Templates คืออะไร
เทมเพลต เป็นพื้นที่ ที่เราจะเอา ฟิลด์ มา
วางเพื่อแสดงผล เป็น รูปแบบการแสดง
ผลของเนื้อหา ซึ่งแบ่งออกเป็นเทมเพลต
ของ Category และแทมเพลตของ item
หรือ type โดยการวาง ฟิลด์ ใช้การลาก
วาง ฟิลด์ ลงไปในตำแหน่งของเทมเพลต

35. www.colorpack.co.th
Templates
เมนู templates
ปุ่ม copy
templates
ปุ่ม จัดการ รูป
แบบ item
ปุ่ม จัดการ รูป
แบบ item
ปุ่ม จัดการ รูป
แบบ Category

36. www.colorpack.co.th
เทมเพลตรูปแบบต่างๆ

37. www.colorpack.co.th
Title
above-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
แสดงก่อน Description
nolabel หมายถึงไม่แสดง
ชื่อ ฟิลด์
แสดงหลัง Description
nolabel หมายถึงไม่แสดง
ชื่อ ฟิลด์
Templates Blog Category Layout

38. www.colorpack.co.th
Templates Blog Category Layout

39. www.colorpack.co.th
Title
fields_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

40. www.colorpack.co.th
Templates Blog Item Layout

41. www.colorpack.co.th
Templates Default Category Layout
Title Field 1 Field 2 Field 3
Table
ตำแหน่ง Table สามารถ
นำฟิลด์ที่ต้องการมาแสดง
ได้
ช่อง Title จะถูกกำหนด
ให้แสดง ชื่อเนื้อหาและลิงค์
ได้

42. www.colorpack.co.th
Templates Default Category Layout

43. www.colorpack.co.th
Templates Default Item Layout
Title
subtitle1
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

44. www.colorpack.co.th
Templates Default Item Layout

45. www.colorpack.co.th
Templates FAQ Category Layout
รายชื่อ ตำแหน่ง ของ
เทมเพลต โดย nolabel
หมายถึงไม่แสดงชื่อ ฟิลด์
Title
aftertitle
aftertitle_nolabel
aftertitle2
aftertitle_nolabel2
aftertitle3
aftertitle_nolabel3

46. www.colorpack.co.th
Templates FAQ Category Layout

47. www.colorpack.co.th
Templates FAQ Item Layout
Title
subtitle1
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

48. www.colorpack.co.th
Templates FAQ Item Layout

49. www.colorpack.co.th
Title ItemTitle Item
Templates items-tabbed Category Layout
รายชื่อ ตำแหน่ง ของ
เทมเพลต โดยจะมีตำแหน่ง
tab ซึ่งชื่อ tab จะตั้งค่าได้ที่
Type
Title Item
รูปแบบจะแสดงเนื้อหาแบบ Tap
Title
subtitle1
subtitle2
subtitle3
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

50. www.colorpack.co.th
Templates items-tabbed Category Layout
รูปแบบจะแสดงเนื้อหาแบบ Tap

51. www.colorpack.co.th
Templates Presentation Category Layout
Title
subtitle1
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 มาแสดง

52. www.colorpack.co.th
Templates Presentation Category Layout

53. www.colorpack.co.th
การนำ ฟิลด์มาแสดงในแทมเพลต
การนำ ฟิลด์มาแสดงในแทมเพลต ใช้วิธีลาก ฟิลด์
ด้านซ้ายมือ มาวางในตำแหน่งของเทมเพลตขวามือ

54. www.colorpack.co.th
การตั้งค่าใช้แทมเพลต ใน Type
ไปที่เมนู Type แล้วคลิ๊กที่
ชื่อของ Type
ด้านขวามือ ล่างสุดเลือก
Default item layout ที่
ต้องการ

55. www.colorpack.co.th
การตั้งค่าใช้แทมเพลต ใน Category

56. www.colorpack.co.th
การตั้งค่าใช้แทมเพลต ใน Category

57. www.colorpack.co.th
สร้าง Type Download
ใช้แสดง ข้อมูล ดาวน์โหลดไฟล์

58. www.colorpack.co.th
สร้าง Type Download
คลิ๊กเมนู Type
สร้าง Type ใหม่

59. www.colorpack.co.th
สร้าง Type Download
ใส่ชื่อของ Type
บันทึก

60. www.colorpack.co.th
คลิ๊กเมนู Fields
สร้าง Field ใหม่
สร้าง Fields Download

61. www.colorpack.co.th
สร้าง Fields Download
ใส่ป้ายชื่อฟิลด์
ใส่ชื่อ ฟิลด์
*ภาษาอังกฤษเท่านั้น
เลือก ฟิลด์ ที่ต้องการ

62. www.colorpack.co.th
สร้าง Fields Download
เลือก Type ที่จะใช้งาน

63. www.colorpack.co.th
สร้าง เทมเพลต Download
คลิ๊กเมนู Templates
คลิ๊กเพื่อ คัดลอก
เทมเพลต

64. www.colorpack.co.th
สร้าง เทมเพลต Download

65. www.colorpack.co.th
สร้าง เทมเพลต Download
คลิ๊กเพื่อเข้าไปแก้ไข Item Layout

66. www.colorpack.co.th
สร้าง เทมเพลต Download
ลาก ฟิลด์ ไฟล์ดาวน์โหลดด้านซ้ายมือ มาวางใน
ตำแหน่งของเทมเพลตขวามือแล้วบันทึก

67. www.colorpack.co.th
สร้าง เทมเพลต Download
คลิ๊กเพื่อเข้าไปแก้ไข Category Layout

68. www.colorpack.co.th
สร้าง เทมเพลต Download
ลาก ฟิลด์ ไฟล์ดาวน์โหลดด้านซ้ายมือ มาวางใน
ตำแหน่งของเทมเพลตขวามือแล้วบันทึก

69. www.colorpack.co.th
สร้าง Category Download
คลิ๊กเมนู Category
สร้าง Category ใหม่

70. www.colorpack.co.th
สร้าง Category Download
ใส่ชื่อ Category ใหม่
เลือกเทมเพลต

71. www.colorpack.co.th
แก้ไข Type ให้ใช้เทมเพลต Download
คลิ๊กเมนู Type
คลิ๊กชื่อ Type
Download เพื่อแก้ไข

72. www.colorpack.co.th
แก้ไข Type ให้ใช้เทมเพลต Download
เลือก Default Item layout เป็น เทมเพลต
Download แล้ว บันทึก

73. www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Download
คลิ๊กเมนู Item
คลิ๊กเพื่อสร้างเนื้อหาใหม่

74. www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Download
เมื่อคลิ๊กสร้าง Item ใหม่จะมีหน้าต่างมาให้เลือก
Type ให้เลือก Download

75. www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Download
ใส่ชื่อของเนื้อหา
เลือก Category

76. www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Download
คลิ๊ก Tap Item Type
ฟิลด์ ไฟล์ดาวน์โหลด ให้คลิ๊ก
Add File

77. www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Download
คลิ๊ก เลือกไฟล์จากเครื่อง
ใส่ชื่อไฟล์
ใส่รายละเอียด
ไฟล์
อัปโหลดไฟล์

78. www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Download
ไฟล์ดาวน์โหลดที่ถูกใช้งานแล้ว จะมีขีดและเป็นสีแดง

79. www.colorpack.co.th
สร้าง Menu ใหม่
* การสร้างเมนู จะนำไปไว้กลุ่มเมนูไหนขึ้นอยู่กับเจ้าของเว็บ ไม่จำเป็นต้องเป็น Mainmenu

80. www.colorpack.co.th
สร้าง Menu ใหม่

81. www.colorpack.co.th
สร้าง Menu ใหม่

82. www.colorpack.co.th
ด้านหน้าเว็บ Category Layout

83. www.colorpack.co.th
ด้านหน้าเว็บ Item Layout

84. www.colorpack.co.th
ตั้งค่า ฟิลด์ไฟล์ เพิ่มเติม

85. www.colorpack.co.th
สร้าง Type Gallery
เพื่อแสดงรูปภาพแบบแกลเลอรี

86. www.colorpack.co.th
สร้าง Type Gallery
คลิ๊กเมนู Type
สร้าง Type ใหม่

87. www.colorpack.co.th
สร้าง Type Gallery
ใส่ชื่อของ Type
บันทึก
Gallery

88. www.colorpack.co.th
คลิ๊กเมนู Fields
สร้าง Field ใหม่
สร้าง Fields Gallery

89. www.colorpack.co.th
สร้าง Fields Images Show แสดงหน้า Category
ฟิลด์นี้จะแสดงรูปเดียว

90. www.colorpack.co.th
สร้าง Fields Gallery
หากต้องการให้ใส่รูปได้หลายรูปเพื่อทำ Gallery ให้
คลิ๊กเลือก Acts as gallery เป็น Yes

91. www.colorpack.co.th
สร้าง เทมเพลต สำหรับ Gallery
คลิ๊กเมนู Templates
คลิ๊กเพื่อ คัดลอก
เทมเพลต

92. www.colorpack.co.th
สร้าง เทมเพลต Gallery
Gallery
Gallery

93. www.colorpack.co.th
สร้าง เทมเพลต Gallery
คลิ๊กเพื่อเข้าไปแก้ไข Item Layout

94. www.colorpack.co.th
สร้าง เทมเพลต Download
ลาก ฟิลด์ Galleryด้านซ้ายมือ มาวางในตำแหน่ง
ของเทมเพลตขวามือแล้วบันทึก

95. www.colorpack.co.th
สร้าง เทมเพลต Gallery
คลิ๊กเพื่อเข้าไปแก้ไข Category Layout

96. www.colorpack.co.th
สร้าง เทมเพลต Download
ลาก ฟิลด์ Images Show ด้านซ้ายมือ มาวางใน
ตำแหน่งของเทมเพลตขวามือแล้วบันทึก

97. www.colorpack.co.th
สร้าง Category Gallery
คลิ๊กเมนู Category
สร้าง Category ใหม่

98. www.colorpack.co.th
สร้าง Category Gallery
ใส่ชื่อ Category ใหม่
เลือกเทมเพลต

99. www.colorpack.co.th
แก้ไข Type ให้ใช้เทมเพลต Gallery
คลิ๊กเมนู Type
คลิ๊กชื่อ Type Gallery
เพื่อแก้ไข

100. www.colorpack.co.th
แก้ไข Type ให้ใช้เทมเพลต Gallery
เลือก Default Item layout เป็น เทมเพลต
Gallery แล้ว บันทึก

101. www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Gallery
คลิ๊กเมนู Item
คลิ๊กเพื่อสร้างเนื้อหาใหม่

102. www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Gallery
เมื่อคลิ๊กสร้าง Item ใหม่จะมีหน้าต่างมาให้เลือก
Type ให้เลือก Gallery

103. www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type Gallery
ใส่ชื่อของเนื้อหา
เลือก Category

104. www.colorpack.co.th
ใส่รูปลงในฟิลด์ Images Show

105. www.colorpack.co.th
ใส่รูปลงในฟิลด์ Images Show

106. www.colorpack.co.th
ใส่รูปลงในฟิลด์ Images Show
ช่องใส่คำอธิบายรูปควร
ใส่ทั้งสามช่องหากต้องการลบให้ติ๊ก
ช่องนี้แล้วบันทึก

107. www.colorpack.co.th
ใส่รูปลงในฟิลด์ Gallery
สังเกตว่าฟิลด์นี้ใส่รูปได้หลายรูปเพราะ Gallery จา
กการคลิ๊กเลือก Acts as gallery เป็น Yes ในฟิลด์

108. www.colorpack.co.th
ใส่รูปลงในฟิลด์ Gallery
เลือกอัพโหลดแบบ
Multiple Upload
เลือกไฟล์ได้ทีละหลายไฟล์

109. www.colorpack.co.th
ใส่รูปลงในฟิลด์ Gallery

110. www.colorpack.co.th
ใส่รูปลงในฟิลด์ Gallery
คลิ๊กเพื่อเพิ่ม
จากนั้นคลิ๊ก Select Images

111. www.colorpack.co.th
ใส่รูปลงในฟิลด์ Gallery
หลังจากใส่รูปไปแล้ว
ให้คลิ๊กบันทึก

112. www.colorpack.co.th
สร้าง Menu ใหม่
* การสร้างเมนู จะนำไปไว้กลุ่มเมนูไหนขึ้นอยู่กับเจ้าของเว็บ ไม่จำเป็นต้องเป็น Mainmenu

113. www.colorpack.co.th
สร้าง Menu ใหม่

114. www.colorpack.co.th
สร้าง Menu ใหม่

115. www.colorpack.co.th
ด้านหน้าเว็บ

116. www.colorpack.co.th
ปรับแต่งหน้าเว็บ Category Layout
ให้เข้าไปปรับแก้ ฟิลด์ Images show
กำหนด Display Label เป็น No
และเปลี่ยนขนาดของ Thumbnail in Category
View เป็น Medium

117. www.colorpack.co.th
ปรับแต่งหน้าเว็บ Item Layout
ให้เข้าไปปรับแก้ ฟิลด์ Images show
กำหนด Display Label เป็น No
และเปลี่ยนขนาดของ Medium thumbnails เป็น
200x150 หรือตามขนาดที่ต้องการ

118. www.colorpack.co.th
สร้าง Type Staff
เพื่อแสดงข้อมูลบุคลากร

119. www.colorpack.co.th
สร้าง Type Staff
คลิ๊กเมนู Type
สร้าง Type ใหม่

120. www.colorpack.co.th
สร้าง Type Staff
ใส่ชื่อของ Type
บันทึก
บุคลากร

121. www.colorpack.co.th
คลิ๊กเมนู Fields
สร้าง Field ใหม่
สร้าง Fields Staff

122. www.colorpack.co.th
สร้าง Fields แบบ Radio
เลือก Radio

123. www.colorpack.co.th
สร้าง Fields แบบ Checkbox
การใส่ข้อมูลจะต้องใส่
เป็นรูปแบบที่กำหนด
ข้อมูลที่เก็บลง
ฐานข้อมูล
ข้อมูลที่แสดงคั่นด้วย
::
ปิดด้วย
%%
เว้นวรรค

124. www.colorpack.co.th
สร้าง Fields แบบ Date
เลือก Date

125. www.colorpack.co.th
สร้าง Fields แบบ Select
เลือก Select

126. www.colorpack.co.th
สร้าง Fields แบบ Select
ข้อมูลที่เก็บลง
ฐานข้อมูล
ข้อมูลที่แสดงคั่นด้วย
::
ปิดด้วย
%%
เว้นวรรค
การใส่ข้อมูลจะต้องใส่
เป็นรูปแบบที่กำหนด
press_office::สำนักงบประมาณ%% fisheries_office::สำนักงาน
ประมง%% statistical_office::สำนักงานสถิติ%%
commercial_office::สำนักงานพาณิชย์%%

127. www.colorpack.co.th
สร้าง Fields แบบ Text
เลือก Text

128. www.colorpack.co.th
สร้าง Fields Images
เลือก images

129. www.colorpack.co.th
สร้าง เทมเพลต Staff Category
คลิ๊กเมนู Templates
คลิ๊กเพื่อ คัดลอก
เทมเพลต

130. www.colorpack.co.th
สร้าง เทมเพลต Staff Item
คลิ๊กเมนู Templates
คลิ๊กเพื่อ คัดลอก
เทมเพลต

131. www.colorpack.co.th
สร้าง เทมเพลต Staff Category
คลิ๊กเพื่อเข้าไปแก้ไข Category Layout

132. www.colorpack.co.th
สร้าง เทมเพลต Staff Category

133. www.colorpack.co.th
สร้าง เทมเพลต Staff Item
คลิ๊กเพื่อเข้าไปแก้ไข Items Layout

134. www.colorpack.co.th
สร้าง เทมเพลต Staff Item

135. www.colorpack.co.th
สร้าง Category บุคลากร
คลิ๊กเมนู Category
สร้าง Category ใหม่

136. www.colorpack.co.th
สร้าง Category บุคลากร
ใส่ชื่อ Category ใหม่
เลือกเทมเพลต

137. www.colorpack.co.th
แก้ไข Type ให้ใช้เทมเพลต staff-item
คลิ๊กเมนู Type
คลิ๊กชื่อ Type บุคลากร
เพื่อแก้ไข

138. www.colorpack.co.th
แก้ไข Type ให้ใช้เทมเพลต staff-item
เลือก Default Item layout เป็น เทมเพลต staff-
item แล้ว บันทึก

139. www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type บุคลากร
คลิ๊กเมนู Item
คลิ๊กเพื่อสร้างเนื้อหาใหม่

140. www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type บุคลากร
เมื่อคลิ๊กสร้าง Item ใหม่จะมีหน้าต่างมาให้เลือก
Type ให้เลือก บุคลากร

141. www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type บุคลากร
ใส่ชื่อของเนื้อหา
เลือก Category

142. www.colorpack.co.th
สร้าง Item ใหม่โดยใช้ Type บุคลากร
กรอกข้อมูลให้ครบถ้วน
แล้วบันทึก

143. www.colorpack.co.th
สร้าง Menu ใหม่
* การสร้างเมนู จะนำไปไว้กลุ่มเมนูไหนขึ้นอยู่กับเจ้าของเว็บ ไม่จำเป็นต้องเป็น Mainmenu

144. www.colorpack.co.th
สร้าง Menu ใหม่

145. www.colorpack.co.th
สร้าง Menu ใหม่

146. www.colorpack.co.th
ด้านหน้าเว็บ

147. www.colorpack.co.th
แก้ไขรูปแบบ Category ได้

148. www.colorpack.co.th
แก้ไขรูปแบบ การแสดงผลหน้า Item ได้ที่ type

149. www.colorpack.co.th
การใช้งาน โมดูล

150. www.colorpack.co.th
สร้างโมดูลใหม่

151. www.colorpack.co.th
สร้างโมดูลใหม่

152. www.colorpack.co.th
โมดูลของ Universal Content Module for
FLEXIcontent มี 4 แบบ

153. www.colorpack.co.th
โมดูล Layout Carousel

154. www.colorpack.co.th
โมดูล Layout News

155. www.colorpack.co.th
โมดูล Layout Select โมดูล Layout Default
โมดูล Layout

156. www.colorpack.co.th
โมดูล Layout Select
FeaturedFeatured
Intro items Intro items
โมดูล Layout Newsโมดูล Layout Carousel

157. www.colorpack.co.th
การกำหนด ขอบเขตข้อมูลที่จะนำมาแสดง
แท็บ Item List: Select Items จะเป็นที่กำหนด
ขอบเขตของข้อมูลว่าจะเอาข้อมูลจาก Category ไหน
มาแสดง

158. www.colorpack.co.th
การกำหนด ขอบเขตข้อมูลที่จะนำมาแสดง
Category scope จะเป็นที่กำหนดว่าจะนำ เอา
ข้อมูลจาก Category ไหนมาแสดง

159. www.colorpack.co.th
การกำหนด ฟิลด์ที่นำมาแสดง
Layout: Select fields จะเป็นที่กำหนดว่าจะนำ เส
นอขอ้มูลอย่าไร เช่น แสดง วันที่ กำหนดขนาดรูป
กำหนดความยาวชื่อ เป็นต้น

160. www.colorpack.co.th
การกำหนด ฟิลด์ที่นำมาแสดง
กำหนดการเปิดปิด รูป
แบบของ วันที่ได้

161. www.colorpack.co.th
กำหนดการเปิดปิดHits
และ Vote
การกำหนด ฟิลด์ที่นำมาแสดง

162. www.colorpack.co.th
สามารถเลือกรูปมา
แสดงได้ นอกจากนั้นยัง
กำหนดขนาดเองได้
การกำหนด ฟิลด์ที่นำมาแสดง

163. www.colorpack.co.th
การกำหนด รูปแบบของแต่ละ Layout
เมื่อเราเลือก Layout ใดๆ จะมีการตั้งค่าของแต่ละ
Layout

164. www.colorpack.co.th
การกำหนด รูปแบบของแต่ละ Layout

165. www.colorpack.co.th
การกำหนด รูปแบบของแต่ละ Layout
เมื่อเราเลือก Layout ใดๆ จะมีการตั้งค่าของแต่ละ
Layout

166. www.colorpack.co.th
การกำหนด รูปแบบของแต่ละ Layout

167. www.colorpack.co.th
รู้จักฟิลด์ แต่ละชนิด

168. www.colorpack.co.th
Field type - Radio : การใช้งาน
ฟิลด์ Radio จะเป็นแบบตัวเลือกซึ่งจะเลือกได้เพียง
ตัวเลือกเดียว

169. www.colorpack.co.th
Field type - Radio : การตั้งค่า
ข้อมูลที่เก็บลง
ฐานข้อมูล
ข้อมูลที่แสดงคั่นด้วย
::
ปิดด้วย
%%
เว้นวรรค

170. www.colorpack.co.th
Field type - Radio Images : การใช้งาน
ฟิลด์ Radio จะเป็นแบบตัวเลือกซึ่งจะเลือกได้เพียง
ตัวเลือกเดียว แต่จะใช้รูปมาเป็นตัวเลือกแทน

171. www.colorpack.co.th
Field type - Radio Images : การตั้งค่า
ข้อมูลที่เก็บลง
ฐานข้อมูล
ชื่อรูปคั่นด้วย
::
ปิดด้วย %
%
เว้นวรรค
ชื่อข้อมูล คั่นด้วย
::
สร้างโฟลเดอร์ใส่รูปแล้วนำ
รูปมาใส่ตามที่ตั้งค่า

172. www.colorpack.co.th
Field type - Checkbox : การใช้งาน
ฟิลด์ Radio จะเป็นแบบตัวเลือกซึ่งจะเลือกได้หลาย
ข้อ หรือหลายตัวเลือก

173. www.colorpack.co.th
Field type - Checkbox : การตั้งค่า
ข้อมูลที่เก็บลง
ฐานข้อมูล
ข้อมูลที่แสดงคั่นด้วย
::
ปิดด้วย
%%
เว้นวรรค

174. www.colorpack.co.th
Field type - Radio Images : การใช้งาน
ฟิลด์ Radio Images จะเป็นแบบตัวเลือกซึ่งจะ
เลือกได้หลายตัวเลือก แต่จะใช้รูปมาเป็นตัวเลือกแทน

175. www.colorpack.co.th
Field type - Radio Images : การตั้งค่า
ข้อมูลที่เก็บลง
ฐานข้อมูล
ชื่อรูปคั่นด้วย
::
ปิดด้วย %
%
เว้นวรรค
ชื่อข้อมูล คั่นด้วย
::
สร้างโฟลเดอร์ใส่รูปแล้วนำ
รูปมาใส่ตามที่ตั้งค่า

176. www.colorpack.co.th
Field type - Select : การใช้งาน
ฟิลด์ Select จะเป็นแบบตัวเลือกแบบหนึ่งตัวเลือก
เหมาะกับการใช้งานที่มีข้อมูลมากๆ เช่น ตัวเลือกจังหวัด

177. www.colorpack.co.th
Field type - Select : การตั้งค่า
ข้อมูลที่เก็บลง
ฐานข้อมูล
ข้อมูลที่แสดงคั่นด้วย
::
ปิดด้วย
%%
เว้นวรรค

178. www.colorpack.co.th
Field type - Select Multiple : การใช้งาน
ฟิลด์ Select จะเป็นแบบตัวเลือกแบบเลือกได้หลาย
ตัวเลือก เช่น ชอบรถอะไร

179. www.colorpack.co.th
Field type - Select Multiple : การตั้งค่า
ข้อมูลที่เก็บลง
ฐานข้อมูล
ข้อมูลที่แสดงคั่นด้วย
::
ปิดด้วย
%%
เว้นวรรค

180. www.colorpack.co.th
Field type - File : การใช้งาน
ฟิลด์ file จะเป็นฟิลด์ที่ใช้ทำระบบ ดาวน์โหลด โดย
สามารถอัปโหลดไฟล์ขึ้นไปหรือใส่ URLไฟล์ ก็ได้

181. www.colorpack.co.th
Field type - File : การใช้งาน
คลิ๊ก เลือกไฟล์จากเครื่อง
ใส่ชื่อไฟล์
ใส่รายละเอียด
ไฟล์
อัปโหลดไฟล์

182. www.colorpack.co.th
Field type - Image or Gallery : การใช้งาน
ฟิลด์ Image or Gallery จะเป็นฟิลด์ที่ใช้ ใส่รูป
หนึ่งรูปหรือใส่หลายรูปเพื่อทำ Gallery

183. www.colorpack.co.th
ใส่รูปลงในฟิลด์ Images แบบรูปเดียว

184. www.colorpack.co.th
ใส่รูปลงในฟิลด์ Images แบบหลายรูป
เลือกอัพโหลดแบบ
Multiple Upload
เลือกไฟล์ได้ทีละหลายไฟล์

185. www.colorpack.co.th
Field type - Mini Gallery : การใช้งาน
ฟิลด์ Mini Gallery จะเป็นฟิลด์ที่ใช้ ใส่รูป ใส่
หลายรูปเพื่อทำ Gallery

186. www.colorpack.co.th
Field type - Mini Gallery : การแสดงผล

187. www.colorpack.co.th
Field type - Shared Video : การใช้งาน
ฟิลด์ Shared Video
จะเป็นฟิลด์ที่ใช้ ใส่
วีดีโอจากเว็บต่างๆ
เช่น
YouTube,Vimeo,D
ailyMotion
โดยใส่ URL ลงไป
แล้วกด Fetch ข้อมูล
จะมาเอง

188. www.colorpack.co.th
Field type - Date : การใช้งาน
ฟิลด์ Date จะเป็นฟิลด์ที่ใช้ ใส่วันที่

189. www.colorpack.co.th
Field type - Text : การใช้งาน
ฟิลด์ Text จะเป็นช่องให้ใส่ข้อความสั้นๆ

190. www.colorpack.co.th
Field type - Text Area : การใช้งาน
ฟิลด์ Text Area จะเป็นช่องให้ใส่ข้อความขนาด
ใหญ่และใส่รูปภาพหรือ HTMLได้ หากอยากเปิดใช้
HTML Editor เปิดตามรูป

191. www.colorpack.co.th
Field type - Weblink : การใช้งาน
ฟิลด์ Weblink จะเป็นช่องให้ใส่ URL และสามารถ
ใส่ได้หลายช่อง โดยไปเปิดตามรูป

192. www.colorpack.co.th
Field type - Relation : การใช้งาน
ฟิลด์ Relation จะเป็นฟิลด์ที่จะแสดงรายชื่อบทความ
ที่เกี่ยวข้องโดยเราจะเป็นคนเลือกเอง โดยเลือก
บทความจากซ้ายมือ กด +

193. www.colorpack.co.th
ตั้งค่าปรับแต่งเพิ่มเติม

194. www.colorpack.co.th
ซ่อนการแสดง Maintext field
บาง Type เราจะไม่ได้ใช้ช่องใส่ข้อความ
ใหญ่ๆ เราสามารถไปปิดได้ที่ Type ดังรูป

195. www.colorpack.co.th
แก้ไข ป้าย Title
ปรกติจะเป็น Title
ต้องการเปลี่ยนเป็น ชื่อ-
นามสกุล ให้ไปเปลี่ยนที่
Type นั้นๆ

196. www.colorpack.co.th
ใส่ชื่อให้ Tab
ต้องการเปลี่ยนชื่อ Tab ให้
ไปเปลี่ยนที่ Type นั้นๆ