Template คู่มือการใช้งาน ระบบ

           Helix3 Framework เป็นเครื่องมือหนึ่งที่ช่วยในการจัดการ Joomla Template สามารถปรับแต่งได้ตั้งแต่ Theme โทนสีพื้นหลัง, สีหลัก, สีตัวอักษร, Logo, Menu, Footer, รูปแบบตัวอักษร, จัด  Layoutl แล้วกำหนด position เพื่อให้ Component, Module และ plug-in เรียกใช้ได้ ทั้งนี้บาง Template ยังมี Component ให้เราได้ใช้ปรับแต่งได้อีกด้วย เช่น Virtuemart เป็นส่วนแสดงรายการสินค้าระบบ e-Commerce, Blog เป็นต้น บทความนี้จะมาแนะนำวิธีการใช้งานของ Helix3 Framework เพื่อนำมาปรับแต่งหน้าเว็บไซต์ของเรา

           เริ่มแรก ให้เข้าด้วยฝั่ง Administrator > ไปที่เมนู Extension > Templates > Style > เข้าไปที่ Template ที่เราปรับแต่ง จากตัวอย่างจะเป็นของ Megadeal II ซึ่งจะมี Helix3 Framework ในตัว Template นี้อยู่

หน้าตั้งค่าการใช้งานปรับ Template ของ Helix3 Framwork

เมื่อเข้ามาแล้วจะแสดงส่วนการทำงานของ Helix3 Framework ซึ่งจะแนะนำแต่ละ Tab ว่ามีส่วนตั้งค่าอย่างไรบ้าง ดังนี้

1. Basic เป็นส่วนตั้งค่าเบื้องต้นของหน้าเว็บไซต์ เช่น

• HEADER สามารถใส่รูป Favicon ที่แท๊ปของ Browser
• BOXED LAYOUT เป็นการปรับหน้าเว็บให้กว้างแบบเต็มจอหรือมีขอบด้านข้าง
• LOGO การใส่ logo ของ website มีให้เลือกทั้ง 2 แบบคือรูปภาพหรือข้อความก็ได้
• FOOTER เป็นการกำหนดตำแหน่งการแสดง Footer และข้อความที่แสดง

2. Preset เป็นการกำหนด Theme โทนสีที่ใช้อย่าง Background, ข้อความ, สีที่ใช้หลัก (เช่น สีขอบกรอบ, link เป็นต้น)

3. Layout เป็นส่วนกำหนดพื้นที่การทำงานเป็น Section > layout แบบ Bootstrap > position 

• เมื่อเราจะให้แสดง content ก็สามารถใช้ Module หรือ plug-in ในการแสดงแล้วกำหนด position ที่จะไปแสดงในนั้นได้
• การแบ่ง Layout นั้นจะใช้การแบ่งแบบ Bootstrap (เข้าใจหลักง่ายๆ คือใน 1 row = 12 column) 

4. Menu เป็นการกำหนดกลุ่มของเมนูว่าเว็บไซต์เราจะใช้เมนูใดบ้าง

• Select Menu : เลือกกลุ่มเมนูสามารถกำหนดได้ที่เมนู Menu ของ Joomla เองได้
• Menu Type : กำหนดให้เป็น Menu ด้านบนหรือ Off Canvas เป็นเมนูซ่อนเอาไว้ได้
• Dropdown Width : เป็นการกำหนดขนาดของเมนูย่อยเวลาเอา mouse เข้าไปชี้
• Dropdown Animation : กำหนดลูกเล่นเมื่อแสดงเมนูย่อย

5. Typography เป็นการตั้งค่า Font ชุดมาตราฐานที่จะใช้งานของเว็บไซต์ และสามารถนำ font เพิ่มเติมได้จาก Google font หรือกำหนดเองได้โดยการเปิด CUSTOM FONT 

6. CUSTOM CODE หากจะต้องมีการปรับ CSS, Javascript ในส่วนของ header กับ Body ก็สามารถใส่ได้ (แต่แนะนำให้ทำเป็นแบบ Override ของ Template เองน่าจะดีกว่า)

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

8. Blog เป็นส่วนตั้งค่าหน้าเว็บที่เป็นประเภท Blog (บทความ) เช่น การแชร์ Blog, รูปแบบของ Blog รวมไปถึงการแสดงรูปภาพในบทความ

9. VIRTURMART เป็นตัวช่วยเสริมเกี่ยวข้องระบบ e-Commerce ที่จัดการแสดงสินค้าและการขายของออนไลน์ของ Template นี้ 

สามารถตั้งค่าการแสดงข้อมูลเกี่ยวกับรายการและข้อมูลของสินค้าเบื้องต้นได้ 

10. Update Setting เป็นการกำหนด E-mail และ License Key ของ Joomla ที่เราใช้

11. Assignment เป็นหน้ากำหนดว่า Menu ไหนใช้การตั้งค่าด้วย Helix บ้าง

            จะเห็นได้ว่า Helix3 เป็นอีกเครื่องมือหนึ่งที่ช่วยในการปรับแต่ง Template สำหรับนักพัฒนาเว็บไซต์ได้สะดวกและง่าย โดยเฉพาะในส่วนของกำหนด Layout เพื่อให้เราสามารถนำ Component, Module และ Plug-in ที่เราต้องการแสดงเพียงกำหนด Position ที่จะให้ปรากฏขึ้นได้ อีกทั้งตัว layout สามารถกำหนดแบ่งพื้นที่ของ Position ด้วย Style ของ Bootstrap ทำให้เว็บไซต์เราเป็น Responsive คือสามารถเปิดได้ทั้งบนคอมพิวเตอร์และอุปกรณ์เคลื่อนที่ได้อย่างสวยงาม ทั้งนี้การทำปรับแต่ง Template ยังสามารถทำได้เพิ่มเติมในสิ่งที่ Helix3 ไม่มีด้วยการทำ Override ให้กับตัว Template ได้อีกด้วย 

อ้างอิง

• รู้จักกับ helix3 Template, [ออนไลน์], เข้าถึง https://www.mindphp.com/forums/viewtopic.php?f=142&t=58182
• คู่มือ การติดตั้ง สร้างเว็บ ขายของ eCommerce ด้วย Joomla virtuemart, [ออนไลน์], เข้าถึง https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/34-joomla/272-%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD-%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%95%E0%B8%B4%E0%B8%94%E0%B8%95%E0%B8%B1%E0%B9%89%E0%B8%87-%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A-%E0%B8%82%E0%B8%B2%E0%B8%A2%E0%B8%82%E0%B8%AD%E0%B8%87-eCommerce-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-Joomla-virtuemart.html
• ขั้นตอนการ Override Template (โอเวอร์ไลด์ เทมเพลต) ใน Joomla (จูมล่า), [ออนไลน์], เข้าถึง https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/34-joomla/4518-override-template-joomla.html
• What is Helix3 ?, [ออนไลน์], เข้าถึง https://www.joomshaper.com/documentation/helix-framework/helix3/how-to-tips
• HELIX MANAGER, [ออนไลน์], เข้าถึง https://www.unitemplates.com/documentation/template-frameworks/helix-3