Template Guide - Hitztheme

Special-Day Guide

เป็น Template แบบ หน้าเดียว ที่ไว้แสดงวันสำคัญต่างๆ มี Options เพิ่มข้อมูลและลิงค์ได้ที่ตัว Template สะดวก ง่ายต่อการใช้งาน และอาศัย Boostrap 5 เป็นตัวกำหนดโครงสร้าง สำหรับรองรับมือถือ

แนะนำตำแหน่งในเทมเพลต

ตำแหน่ง IMAGE หลัก (ID = #image): แสดงรูปภาพหลักของหน้าวันสำคัญ
ตำแหน่ง INTRO (ID = #intro): แสดงข้อความเพิ่มเติมของหน้าวันสำคัญ
ตำแหน่ง LINK 1 (ID = #link1): แสดงปุ่มลิงค์ที่ 1 ของหน้าวันสำคัญ
ตำแหน่ง LINK 2 (ID = #link2): แสดงปุ่มลิงค์ที่ 2 ของหน้าวันสำคัญ
ตำแหน่ง FOOTER (ID = #footer): แสดงข้อความเพิ่มเติมล่างสุดของหน้าวันสำคัญ

ท่านสามารถแก้ไขข้อมูลต่างๆจากในเทมเพลตได้โดยตรง ไม่ต้องใช้ Content หรือ Module มาแสดงผลในหน้านี้

ปรับแต่งเทมเพลต

มี Options ปรับโครงสร้างได้ง่ายๆ
กำหนดใช่ Redirect Page ได้
เลือกฟอร์นไทยจาก Google ได้
กำหนด FAVICON ได้
กำหนด Page Title และลูกเล่นได้
กำหนด IMAGE หลักได้
กำหนดปุ่มหลักได้ 2 ลิงค์
กำหนดสีฟอนต์
กำหนดสีลิงค์
กำหนดความกว้างของหน้าได้ (Center Page)
แยกกำหนดขนาดส่วน H Tag
กำหนดสีส่วน H Tag
สีพื้นหลัง เว็บไซต์
เมนูทั้งหมดเป็น ภาษาไทย

OPTION TAB

รายละเอียดภาพรวมหน้า วันสำคัญ
ตัวอักษรและลิงค์
ข้อมูลนำเสนอ
กำหนดปุ่มลิงค์
ปรับ CSS แบบกำหนดเอง
ปรับ Responsive แบบกำหนดเอง
เพิ่ม CODE ส่วน Head และ Body
Serial Code

สิ่งที่ได้รับ

ชุดไฟล์ Special-Day_TemplateKit.zip เมื่อแตกไฟล์ออกมาคุณจะได้รับ

doc 1

special-day.zip ไฟล์ Zip ไว้สำหรับติดตั้งเป็น Template หน้าแรก (กรณี J4 จะเป็ชื่อไฟล์ special-dayJ4.zip)
special-day_UserGuide.pdf เอกสารแนะนำเบื้องต้น และ User + Password เข้าสู่หลังบ้านของ Administrator

ขั้นตอนการใช้งาน

1.ติดตั้ง JCE EDITOR ก่อน เพื่อใช้ในการเพิ่มข้อมูลตัวอักษรในเทมเพลต (Template) ดูการติดตั้ง JCE ได้จาก https://www.youtube.com/watch?v=FmSpL10VANQ&t=806s

sd 1

2.ตั้งค่า Default Editor ให้เป็น JCE Editor

3.ติดตั้ง Template special-day.zip หรือ special-dayJ4.zip ตามเวอร์ชั่น Joomla ที่ลูกค้าซื้อ ติดตั้งที่เมนู Extensions > Manage > Install

4.ใส่ Serial Code ที่ได้รับ ในเทมเพลต ที่แท็บ Serial Code

5.ตั้งค่ารายละเอียดต่างๆในเทมเพลต และกำหนดรูปภาพและข้อมูลที่ต้องการ ตาม Tab ต่างๆ ให้เรียบร้อย แล้วทำการ save

6.จากนั้นไปที่เมนู สร้างเมนูใหม่ขึ้นมา โดยกำหนดคร่าวๆ ดังนี้

6.1 Menu Title ตั้งชื่อเมนูเป็น วันสำคัญ และ Alias คือ special-day

6.2 เลือกเมนูเป็นแบบ Featured Articles ที่ Menu Item Type* เลือกที่ Select > Article > Featured Articles

6.3 กำหนด Template Style เลือกเป็น Special-Day - Default

6.4 ไปที่แท็บ Link Type ที่หัวข้อ Display in Menu เลือกเป็น No

และ

จากนั้น ทำการ save เราจะได้เมนู วันสำคัญ ไว้ใช้งาน

การใช้งาน หน้าแรก Template Special-Day

1.หากใกล้ถึงวันสำคัญก็ให้ทำการมาที่เมนูดังกล่าว แล้วสลับ Default เมนูที่ วันสำคัญ

เราก็จะได้หน้าแรกเป็นวันสำคัญ

คู่มือการใช้งานในการกำหนดการแสดงผลของตำแหน่ง Module ต่างๆ ผ่านทาง Positions ต่างๆ ที่ได้กำหนดไว้ใน Template โปรดศึกษาและทำความเข้าใจในการกำหนดการแสดงผล เพื่อการปรับเปลี่ยนหรือเพิ่มเติม Module ตามที่คุณต้องการได้ในอนาคต

Sabuy School Positions

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

ดูคลิปอื่นๆ ที่เกี่ยวข้อง

1.ตำแหน่ง Positions ในหน้าแรก

Position : promote

ID CSS : #promote

ประเภท Module : Page Builder CK Module หรือ อื่นๆ

รายละเอียด : ใช้แบ่งคอลัมน์ แสดงข้อมูลต่างๆ

หน้า : แสดงทุกหน้า

รายละเอียดของแต่ละ Positions

Position : logo

ID Css : #logo

ประเภท Module : Module Custom

รายละเอียด : ใช้การเพิ่มรูป Logo และใส่ลิงค์เป็น index.php

หน้า : แสดงทุกหน้า

Position : menu

ID Css : #menu

ประเภท Module : Gruemenu หรืออื่นๆ

รายละเอียด : ปรับแต่งสีของเมนูตามสีพื้นหลัง

หน้า : แสดงทุกหน้า

Position : lang

ID CSS : #lang

ประเภท Module : Module Gtranslate

รายละเอียด : แสดงปุ่มสลับภาษา

หน้า : แสดงทุกหน้า

Position : social

ID Css : #social

ประเภท Module : Addtoany หรืออื่นๆ

รายละเอียด : เพิ่มลิงค์ social ตามตัวอย่าง

หน้า : แสดงทุกหน้า

Position : slide

ID Css : #slide

ประเภท Module : Slideshow CK หรืออื่นๆ

รายละเอียด : สร้างรูปภาพสไลด์

หน้า : แสดงเฉพาะหน้าแรก

Position : slide

ID CSS : #slide

ประเภท Module : Page Builder CK Module

รายละเอียด : ใช้แยก คอลัมน์

หน้า : แสดงเฉพาะหน้าแรก

Position : news1

ID CSS : โมดูลลอย ไม่มีตำแหน่งตายตัว

ประเภท Module : Page Builder CK Module หรืออื่นๆ

รายละเอียด : จัดรูปแบบข้อมูลที่ต้องการแสดงผล ดึงมาแสดงในตำแหน่ง slide

หน้า : แสดงทุกหน้า

Position : position-1

ID CSS : #position-1

ประเภท Module : BT Content Slider Module

รายละเอียด : แสดงบทความตามหมวดหมู่ที่เลือก

หน้า : แสดงเฉพาะหน้าแรก

Position : position-2

ID CSS : #position-2

ประเภท Module : Page Builder CK Module หรืออื่นๆ

รายละเอียด : จัดรูปแบบข้อมูลที่ต้องการแสดงผล

หน้า : แสดงเฉพาะหน้าแรก

Position : position-3

ID CSS : #position-3

ประเภท Module : Page Builder CK Module หรืออื่นๆ

รายละเอียด : จัดรูปแบบข้อมูลที่ต้องการแสดงผล

หน้า : แสดงเฉพาะหน้าแรก

Position : news2

ID CSS : โมดูลลอย ไม่มีตำแหน่งตายตัว

ประเภท Module : Custom Module หรืออื่นๆ

รายละเอียด : แสดง google calendar ดึงมาแสดงใน position-3

หน้า : แสดงทุกหน้า

Position : news2

ID CSS : โมดูลลอย ไม่มีตำแหน่งตายตัว

ประเภท Module : 2Bros Facebook Like Box หรืออื่นๆ

รายละเอียด : แสดง Facebook ดึงมาแสดงใน position-3

หน้า : แสดงทุกหน้า

Position : position-4

ID CSS : #position-4

ประเภท Module : Custom Module หรืออื่นๆ

รายละเอียด : ดึง Code แกลอรี่รูปภาพมาแสดง

หน้า : แสดงเฉพาะหน้าแรก

Position : position-5

ID CSS : #position-5

ประเภท Module : DJ-ImageSlider หรืออื่นๆ

รายละเอียด : แสดงรูปภาพเล็กแบบสไลด์

หน้า : แสดงเฉพาะหน้าแรก

Position : footer

ID CSS : #footer

ประเภท Module : Page Builder CK Module

รายละเอียด : ทำ 5 คอลัมน์ ใส่ข้อมูลและลิงค์

หน้า : แสดงทุกหน้า

Position : copyright

ID CSS : #copyright

ประเภท Module : Joomla Footer Module หรืออื่นๆ

รายละเอียด : แสดง ลิขสิทธิ์ และ Joomla License

หน้า : แสดงทุกหน้า

2.ตำแหน่ง Positions หน้าอื่นๆ

รายละเอียดของแต่ละ Positions

Position : breadcrumbs

ID Css : #breadcrumbs

ประเภท Module : breadcrumbs Module

รายละเอียด : กำหนดพาทการแสดงผลของ Link

หน้า : แสดงทุกหน้า ยกเว้นหน้าแรก

Position : content-top

ID CSS : #content-top

ประเภท Module : ไม่จำกัด

รายละเอียด : แสดงรูปหรือข้อความ

หน้า : แสดงทุกหน้า ยกเว้นหน้าแรก

Position : content-under

ID CSS : #content-under

ประเภท Module : ไม่จำกัด

รายละเอียด : แสดงรูปหรือข้อความ

หน้า : แสดงทุกหน้า ยกเว้นหน้าแรก

Position : right-module

ID Css : #right-module

ประเภท Module : ไม่จำกัด

รายละเอียด : ใช่รวมกันหลาย Module

หน้า : แสดงทุกหน้า ยกเว้นหน้าแรก หรือไม่แสดงในหน้าที่ไม่ต้องการ right-module

3.ตำแหน่ง Positions หน้าติดต่อเรา

เป็นการสร้างหน้าด้วย Page Builder CK แล้วทำการแยกคอลัมน์ และดีง Module มาแสดงใน Content

รายละเอียดของแต่ละ Positions

Position : map

ID CSS : โมดูลลอย ไม่มีตำแหน่งตายตัว

ประเภท Module : โมดูลลอย ไม่จำกัด

รายละเอียด : ใช้ดึงมาแสดงในบทความหรือส่วนอื่นๆ

หน้า : แสดงทุกหน้า

Position : contact-form

ID CSS : โมดูลลอย ไม่มีตำแหน่งตายตัว

ประเภท Module : โมดูลลอย ไม่จำกัด

รายละเอียด : ใช้ดึงมาแสดงในบทความหรือส่วนอื่นๆ

หน้า : แสดงทุกหน้า