สั่งซื้อเทมเพลตคลิปวิดีโอนี้เป็น EP.15 ของซีรีส์สอน Page Builder CK (2022) ซึ่งแนะนำเทคนิคการปรับแต่ง Row (แถว) ให้แสดงผลแบบ Full Width หรือเต็มความกว้างหน้าจอ เพื่อช่วยให้เว็บไซต์ดูทันสมัยและแบ่งสัดส่วนเนื้อหาได้สวยงามยิ่งขึ้นครับ [00:52]
สรุปสาระสำคัญและเทคนิคจากคลิปได้ดังนี้:
1. การทำ Full Width (เต็มหน้าจอ) [01:02]
- โดยปกติ เนื้อหาในหน้าเว็บจะถูกจำกัดความกว้างตามเทมเพลต (มีพื้นที่ว่างด้านซ้าย-ขวา) แต่เราสามารถปลดล็อกให้ Row แสดงผลเต็มพื้นที่หน้าจอได้ [02:45]
- วิธีตั้งค่า: คลิกที่เมนูของ Row เลือกหัวข้อ Full Width แล้วเปลี่ยนจาก Standard เป็น Javascript [04:41]
- ผลลัพธ์จะทำให้พื้นหลังหรือเนื้อหาในแถวนั้นขยายจากขอบซ้ายสุดไปถึงขอบขวาสุดของหน้าจอทันที [05:33]
2. เทคนิคการจัดเนื้อหาให้อยู่ตรงกลาง (Padding & Columns) [06:50]
- เมื่อเราทำ Full Width แล้ว บางครั้งเนื้อหาอาจจะไปชิดขอบจอเกินไป ผู้สอนแนะนำเทคนิคการ เพิ่มคอลัมน์เปล่า ไว้ด้านซ้ายและขวา (เช่น แบ่งเป็น 5 คอลัมน์ โดยคอลัมน์ที่ 1 และ 5 ปล่อยว่างไว้ประมาณ 10%) เพื่อบีบให้เนื้อหาหลักอยู่ตรงกลางอย่างสวยงาม [07:05]
- การปรับ Padding (ระยะห่างภายใน): แนะนำให้ใส่ Padding บน-ล่าง เป็นหน่วยเปอร์เซ็นต์ (เช่น 5% หรือ 10%) เพื่อให้แถวดูโปร่งและเห็นพื้นหลังชัดเจนขึ้น [11:01]
3. การใส่พื้นหลัง (Background) [08:54]
- ใส่สี: สามารถเลือกสีพื้นหลังหรือทำสีไล่ระดับ (Gradient) เพื่อคั่นเนื้อหาแต่ละส่วนให้ดูแตกต่างกัน [12:24]
- ใส่รูปภาพ: สามารถเลือกรูปภาพเป็นพื้นหลัง และตั้งค่าเป็น Cover (ให้รูปคลุมเต็มพื้นที่) และเลือกแบบ Fixed เพื่อให้รูปอยู่กับที่เวลาเราเลื่อนหน้าจอ (Parallax Effect แบบง่ายๆ) [09:24]
4. การรองรับบนมือถือ (Responsive) [10:07]
- ผู้สอนยืนยันว่าการตั้งค่า Full Width ด้วย Page Builder CK นั้นรองรับการแสดงผลบนมือถือได้ดี ระบบจะทำการย่อส่วนและจัดเรียงเนื้อหาให้พอดีกับหน้าจอสมาร์ทโฟนโดยอัตโนมัติ [10:17]
เทคนิคนี้จะช่วยให้คุณสามารถสร้างเว็บไซต์ที่มีลูกเล่นเหมือนเว็บระดับโปร โดยใช้เพียงการตั้งค่าพื้นฐานใน Page Builder CK ครับ [13:30]
