สั่งซื้อเทมเพลตคลิปวิดีโอนี้เป็น EP.17 ของซีรีส์สอน Page Builder CK (2022) ซึ่งอธิบายถึงการตั้งค่าและการใช้งานฟังก์ชัน Responsive เพื่อให้หน้าเว็บไซต์ที่สร้างขึ้นสามารถแสดงผลได้อย่างสวยงามบนทุกอุปกรณ์ ไม่ว่าจะเป็นคอมพิวเตอร์ แท็บเล็ต หรือมือถือครับ [00:30]
สรุปเนื้อหาและขั้นตอนสำคัญได้ดังนี้:
1. การทำความเข้าใจขนาดหน้าจอ (Device Width) [02:40]
ผู้สอนแนะนำให้เข้าใจขนาดพื้นฐานที่นิยมใช้ในการตั้งค่า Responsive ดังนี้: [05:44]
- PC / Notebook: ความกว้างประมาณ 1366px - 1920px [03:00]
- Tablet (แนวนอน): เช่น iPad ประมาณ 1024px [04:18]
- Tablet (แนวตั้ง): ประมาณ 768px [04:43]
- Mobile: เช่น iPhone ประมาณ 390px - 480px [05:22]
2. การตั้งค่าขนาด Breakpoint ใน Page Builder CK [06:50]
ก่อนเริ่มออกแบบ ควรไปกำหนดค่ามาตรฐานของแต่ละอุปกรณ์ก่อน: [07:05]
- ไปที่เมนู Components > Page Builder CK > Page Library > Options
- เลือกแท็บ Responsive และกำหนดขนาดความกว้างที่ต้องการให้ระบบเริ่มเปลี่ยนการแสดงผล (เช่น Tablet = 1024px, Phone = 480px) [07:55]
- กด Save & Close เพื่อนำไปใช้งาน [09:11]
3. การจัดการ Element ในหน้าออกแบบ [11:17]
ในหน้าแก้ไขเนื้อหา คุณสามารถคลิกที่ไอคอน Responsive Setting (รูปมือถือ/หน้าจอ) เพื่อปรับแต่งเฉพาะเจาะจงได้: [11:17]
- การซ่อน/แสดง (Show/Hide): สามารถเลือกได้ว่าในหน้าจอมือถือจะ "ซ่อน" เนื้อหาบางส่วนที่ยาวเกินไป หรือทำให้เว็บโหลดช้าหรือไม่ [11:31]
- การจัดเรียง (Ordering): ปรับจากการแสดงผลแบบ 3 คอลัมน์ในหน้าจอคอมพิวเตอร์ ให้กลายเป็นแถวเดียวเรียงต่อกันลงมาในหน้าจอมือถือ เพื่อไม่ให้เนื้อหาถูกบีบจนอ่านยาก [14:54]
- การปรับระยะห่าง (Padding/Margin): สามารถเพิ่มระยะห่างระหว่างบล็อกข้อความในเวอร์ชันมือถือ เพื่อให้ดูโปร่งและสวยงามขึ้น [15:35]
4. วิธีการตรวจสอบผลลัพธ์ (Testing) [16:28]
- ใช้เครื่องมือ Inspect ของ Google Chrome (กด F12) [03:21]
- เลือกโหมด Device Toolbar เพื่อจำลองการแสดงผลบนอุปกรณ์รุ่นต่างๆ เช่น iPad หรือ iPhone เพื่อเช็คความเรียบร้อยก่อนใช้งานจริง [17:15]
ฟังก์ชัน Responsive นี้จะช่วยให้เว็บไซต์ของคุณดูเป็นมืออาชีพและใช้งานได้ง่ายบนทุกหน้าจอครับ [18:52]
