วิธีออกแบบหน้าเว็บไซต์ Joomla โดยไม่เขียนโค้ด

คุณออกแบบหน้าเว็บไซต์ Joomla โดยไม่เขียนโค้ดได้ด้วยเครื่องมือในหลังบ้าน เช่น ตัวแก้ไขบทความ เมนู โมดูล และตัวเลือกของเทมเพลต เริ่มจากวางโครงหน้าให้ชัด แล้วนำเนื้อหาและโมดูลมาจัดตามตำแหน่งที่เทมเพลตรองรับ หากต้องการลากวางองค์ประกอบได้อิสระมากขึ้น ค่อยพิจารณา Page Builder เพิ่มเติม

❶ วางแผนหน้าเว็บก่อนเริ่มจัดวาง

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

① เขียนโครงหน้าเป็นลำดับ

ร่างส่วนต่าง ๆ ของหน้าไว้ก่อน เช่น

1. ส่วนหัวและเมนูหลัก
2. หัวข้อหรือข้อความแนะนำ
3. เนื้อหาหรือบริการสำคัญ
4. ข่าว ภาพ หรือข้อมูลประกอบ
5. ปุ่มหรือช่องทางติดต่อ
6. ส่วนท้ายเว็บไซต์

ไม่จำเป็นต้องมีทุกส่วนในทุกหน้า เลือกเฉพาะองค์ประกอบที่ช่วยให้ผู้เข้าชมเข้าใจเนื้อหาและไปต่อได้สะดวก

② เตรียมเนื้อหาและรูปภาพ

รวบรวมหัวข้อ ข้อความ รูปภาพ และปุ่มที่ต้องใช้ก่อนเข้าหลังบ้าน ตั้งชื่อไฟล์ภาพให้เข้าใจง่าย และปรับขนาดให้เหมาะกับตำแหน่งที่จะแสดง เพื่อให้ทำงานจัดหน้าได้ต่อเนื่อง

③ เลือกเทมเพลตและตรวจตำแหน่งโมดูล

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

❷ สร้างหน้าและจัดเนื้อหาด้วยเครื่องมือ Joomla

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

① สร้างบทความหรือหน้าเนื้อหา

ไปที่ Content → Articles แล้วเลือก New ใส่ชื่อและเนื้อหาโดยใช้ตัวแก้ไขที่ติดตั้งไว้ แบ่งเนื้อหาด้วยหัวข้อ ย่อหน้า รายการ และภาพตามความเหมาะสม จากนั้นบันทึกและเลือกสถานะเผยแพร่

หากเนื้อหาประเภทเดียวกันมีหลายหน้า เช่น ข่าวหรือบริการ ให้จัดหมวดหมู่ไว้เพื่อดูแลและนำไปแสดงเป็นรายการได้ง่าย

② เพิ่มหน้าเข้าเมนู

ไปที่ Menus แล้วเลือกเมนูที่ต้องการสร้างรายการใหม่ จากนั้นเลือกชนิดรายการที่ตรงกับหน้า เช่น Single Article สำหรับบทความเดียว หรือ Category Blog สำหรับแสดงบทความจากหมวดหมู่

เลือกบทความหรือหมวดหมู่ที่ต้องการ ตั้งชื่อรายการเมนู แล้วบันทึก ทดสอบจากหน้าเว็บไซต์ว่ากดแล้วไปยังหน้าที่ถูกต้อง

③ ปรับตัวเลือกการแสดงผลของหน้า

ในตัวเลือกของรายการเมนูหรือบทความ ตรวจการแสดงชื่อหน้า วันที่ ผู้เขียน และรายละเอียดอื่น ๆ ที่เทมเพลตหรือ Joomla ให้เลือก ใช้ตัวเลือกที่มีอยู่ก่อนเพิ่มเครื่องมือใหม่

❸ ใช้โมดูลเพิ่มส่วนประกอบโดยไม่เขียนโค้ด

โมดูลช่วยแสดงองค์ประกอบต่าง ๆ เช่น เมนู ข่าวล่าสุด ข้อความติดต่อ หรือภาพแบนเนอร์ โดยเลือกตำแหน่งและกำหนดหน้าที่ต้องการแสดงได้จากหลังบ้าน

① สร้างโมดูลที่ต้องใช้

ไปที่ Content → Site Modules แล้วเลือก New เลือกชนิดโมดูลตามงาน เช่น Menu, Articles หรือ Custom จากนั้นใส่ข้อมูลและบันทึก

② เลือกตำแหน่งและหน้าที่จะแสดง

ในหน้าแก้ไขโมดูล เลือก Position จากตำแหน่งที่เทมเพลตมีให้ แล้วเปิดแท็บ Menu Assignment เพื่อกำหนดให้แสดงทุกหน้าหรือเฉพาะรายการเมนูที่เลือก

หากไม่ทราบว่าตำแหน่งใดอยู่ตรงไหน ให้เปิดการแสดงตำแหน่งโมดูลของเทมเพลตและดูแผนผังบนหน้าเว็บก่อนเลือก

③ จัดลำดับโมดูลและตรวจหน้าเว็บ

หากมีหลายโมดูลในตำแหน่งเดียวกัน ให้จัดลำดับจากหน้ารายการโมดูล ตรวจว่าชื่อโมดูลควรแสดงหรือไม่ และทดสอบหน้าเว็บว่าการจัดวางเป็นไปตามแผน

❹ ปรับหน้าตาและตรวจผลก่อนเผยแพร่

เมื่อเนื้อหา เมนู และโมดูลพร้อมแล้ว ให้ปรับตัวเลือกของเทมเพลตและตรวจการใช้งานจริงก่อนประกาศหน้าเว็บ

① ใช้ตัวเลือกของเทมเพลต

ไปที่ System → Site Templates → Styles แล้วเปิดสไตล์ที่ใช้งาน ตรวจตัวเลือกที่มี เช่น โลโก้ สี รูปแบบส่วนหัว และรายละเอียดหน้า ตัวเลือกจะแตกต่างกันตามเทมเพลต

② ทดสอบบนมือถือและคอมพิวเตอร์

เปิดหน้าเว็บบนหน้าจอหลายขนาด ตรวจหัวข้อ รูปภาพ เมนู ปุ่ม และแบบฟอร์มว่ามองเห็นและกดใช้งานได้สะดวก สำหรับหน้าเว็บของ ComSiam ควรตรวจหน้าที่มีผู้เข้าชมบ่อยก่อน แล้วค่อยไล่ตรวจหน้าอื่น

③ แก้ทีละจุดและบันทึกการเปลี่ยนแปลง

หากบางส่วนไม่ตรงตามต้องการ ให้แก้เนื้อหา ตำแหน่งโมดูล หรือตัวเลือกเทมเพลตทีละอย่าง แล้วโหลดหน้าเว็บใหม่ การแก้ทีละส่วนช่วยให้รู้ว่าอะไรทำให้รูปแบบเปลี่ยน

การออกแบบหน้า Joomla โดยไม่เขียนโค้ดทำได้ด้วยการจัดบทความ เมนู โมดูล และตัวเลือกของเทมเพลตให้ทำงานร่วมกัน เริ่มจากโครงหน้าที่ชัดเจน ใช้ตำแหน่งที่เทมเพลตรองรับ และทดสอบบนมือถือก่อนเผยแพร่