ทำหน้า WordPress แบบ Full Width เต็มความกว้างได้อย่างไร

ทำหน้า WordPress แบบ Full Width ได้โดยเลือกเทมเพลตเต็มความกว้างของธีม หรือปรับ Layout ของหน้าและบล็อกให้แสดงกว้างขึ้น ตัวเลือกที่มีขึ้นอยู่กับธีมและเครื่องมือสร้างหน้าเว็บที่ใช้ บางธีมมีเทมเพลต Full Width ให้เลือก ส่วนธีมแบบบล็อกอาจใช้ Site Editor และการจัดแนวบล็อกแบบกว้างหรือเต็มความกว้าง

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

❶ Full Width คืออะไร

Full Width คือรูปแบบหน้าเว็บที่ขยายพื้นที่แสดงผลให้กว้างกว่าคอนเทนเนอร์ปกติ อาจใช้กับทั้งหน้า หรือเฉพาะบางส่วน เช่น ภาพปก วิดีโอ หรือแถบสีพื้นหลัง

① Full Width ทั้งหน้า

ใช้เมื่ออยากให้หน้าไม่มี Sidebar หรือมีพื้นที่จัดวางเนื้อหามากขึ้น เหมาะกับหน้า Landing Page หน้าพอร์ตโฟลิโอ และหน้าที่ออกแบบเป็นส่วน ๆ

② Full Width เฉพาะบางบล็อก

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

❷ ตรวจว่าธีมรองรับเทมเพลตเต็มความกว้างหรือไม่

ก่อนสร้างหน้า ให้ตรวจตัวเลือกของธีม เพราะ WordPress ไม่ได้แสดงเทมเพลต Full Width เหมือนกันทุกเว็บไซต์

① ตรวจ Template ในหน้าแก้ไข

1. ไปที่ หน้า > หน้าทั้งหมด
2. เปิดหน้าที่ต้องการปรับ
3. เปิดแถบตั้งค่าด้านข้าง แล้วเลือกส่วน หน้า หรือ Template
4. ตรวจว่ามีเทมเพลตชื่อ Full Width, No Sidebar หรือชื่อใกล้เคียงหรือไม่
5. เลือกเทมเพลตและดูตัวอย่างก่อนอัปเดต

ชื่อเทมเพลตขึ้นอยู่กับธีม หากไม่มีตัวเลือกนี้ ให้ตรวจการตั้งค่า Layout ของธีมหรือ Site Editor

② ตรวจตัวเลือกของธีม

ธีมแบบคลาสสิกอาจมีการตั้งค่าความกว้างใน รูปแบบเว็บ > ปรับแต่ง หรือหน้าตั้งค่าเฉพาะของธีม มองหาคำว่า Layout, Container, Sidebar หรือ Content Width

หากธีมมีการตั้งค่า Sidebar แยกต่างหาก ให้ตรวจด้วยว่าเลือกให้หน้าแสดงแบบไม่มี Sidebar แล้วหรือยัง

❸ ทำหน้า Full Width ด้วยธีมแบบบล็อก

ธีมแบบบล็อกใช้ Site Editor และบล็อกเพื่อควบคุมโครงสร้างหน้าและเทมเพลต

① เลือกหรือแก้ Template

ไปที่ รูปแบบเว็บ > ตัวแก้ไข > Templates แล้วเลือกเทมเพลตที่หน้ากำลังใช้ หากธีมมีเทมเพลตแบบไม่มี Sidebar ให้เลือกใช้ หรือแก้ Layout ของเทมเพลตตามตัวเลือกที่มี

ก่อนบันทึก ให้ตรวจว่าเทมเพลตนั้นใช้กับหน้าเดียวหรือหลายหน้า หากแก้เทมเพลตร่วม หน้าอื่นที่ใช้เทมเพลตเดียวกันอาจเปลี่ยนตามไปด้วย

② ตั้งค่าบล็อกให้กว้าง

เลือกบล็อกที่ต้องการ เช่น Cover, Image หรือ Group แล้วใช้ตัวเลือกการจัดแนว Wide Width หรือ Full Width หากธีมรองรับ

หากตัวเลือกไม่ปรากฏ อาจเป็นเพราะธีมไม่ได้เปิดใช้การจัดแนวชนิดนั้น หรือบล็อกที่เลือกไม่รองรับ ให้ตรวจการตั้งค่าธีมหรือเลือกบล็อกที่เหมาะสม

③ ปรับความกว้างเนื้อหา

หากหน้าเต็มความกว้างแล้วแต่เนื้อหายังอยู่ในกรอบแคบ ให้ตรวจค่า Layout หรือ Content Width ของธีม และตรวจว่ามีกลุ่มบล็อกหรือคอนเทนเนอร์ครอบเนื้อหาอยู่หรือไม่

❹ ทำหน้า Full Width ด้วยธีมแบบคลาสสิก

① ใช้ Page Template ของธีม

เปิดหน้าแก้ไข แล้วเลือก Template แบบ Full Width หรือ No Sidebar หากธีมมีให้ จากนั้นอัปเดตหน้าและตรวจผลบนเว็บไซต์จริง

② ใช้ตัวเลือก Layout ของแต่ละหน้า

บางธีมมีแผงตั้งค่าในตัวแก้ไขหน้า ให้เลือกเลย์เอาต์แบบเต็มความกว้างหรือปิด Sidebar เฉพาะหน้านั้น วิธีนี้เหมาะเมื่อหน้าอื่นยังต้องใช้รูปแบบเดิม

③ ใช้ Page Builder ที่มีอยู่

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

❺ จัดเนื้อหาอย่างไรเมื่อใช้ Full Width

การขยายพื้นที่ควรทำให้หน้าใช้งานง่ายขึ้น ไม่ใช่ทำให้ทุกส่วนกว้างเท่ากัน

① ใช้ความกว้างเต็มกับส่วนที่ต้องการความโดดเด่น

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

② จำกัดความกว้างของข้อความยาว

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

③ จัดคอลัมน์ให้ปรับบนมือถือ

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

❻ ตรวจสอบหน้า Full Width ก่อนเผยแพร่

• หน้าใช้เทมเพลตหรือ Layout ที่ต้องการแล้ว
• Sidebar ถูกนำออกเฉพาะหน้าที่ต้องการ
• ภาพและพื้นหลังขยายเต็มพื้นที่ตามต้องการ
• ข้อความไม่กว้างจนอ่านยาก
• บล็อกไม่ล้นออกด้านข้าง
• หน้ายังแสดงผลดีบนโทรศัพท์
• ตรวจว่าการแก้ Template ไม่กระทบหน้าอื่น

❼ ปัญหาที่พบบ่อย

• ไม่พบตัวเลือก Full Width: ธีมอาจไม่มีเทมเพลตดังกล่าว ให้ตรวจตัวเลือก Layout หรือเครื่องมือของธีม
• เลือกแล้วแต่ยังมีกรอบขอบ: อาจมี Container หรือ Group ครอบเนื้อหาอยู่ ให้ตรวจบล็อกแม่และความกว้างของคอนเทนเนอร์
• ภาพไม่เต็มจอ: ตรวจการจัดแนวบล็อกและการตั้งค่าของธีม
• หน้าอื่นเปลี่ยนตาม: อาจแก้ Template ที่ใช้ร่วมกัน ให้คืนค่าหรือใช้เทมเพลตเฉพาะหน้า
• มือถือมีแถบเลื่อนแนวนอน: ตรวจภาพ ตาราง และบล็อกที่กว้างเกินหน้าจอ

❽ สรุป

ทำหน้า WordPress แบบ Full Width ได้ด้วยเทมเพลตของธีม การตั้งค่า Layout, Site Editor หรือ Page Builder ที่ใช้อยู่ ตัวเลือกแตกต่างกันไปตามธีม จึงควรตรวจเครื่องมือของเว็บไซต์ก่อนเริ่ม

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