สั่งซื้อเทมเพลตคลิปวิดีโอนี้เป็น EP.8 ของซีรีส์สอน Page Builder CK (2021) ซึ่งจะเน้นไปที่การใช้งานเครื่องมือ Image (รูปภาพ) และการเพิ่มลูกเล่นให้น่าสนใจด้วยปลั๊กอินเสริมครับ [00:28]
สรุปเนื้อหาสำคัญและเทคนิคจากคลิปได้ดังนี้:
1. การใช้งาน Single Image พื้นฐาน [00:48]
- วิธีการนำรูปภาพมาแสดงผลโดยใช้ Element Image ลากมาวางในตำแหน่งที่ต้องการแล้วเลือกรูปภาพจากระบบ [01:02]
- สามารถกำหนดการจัดวาง (ชิดซ้าย, กลาง, ขวา) และใส่ Alt Text เพื่ออธิบายรูปภาพ (ส่งผลดีต่อ SEO) ได้ [01:36]
2. การเพิ่ม Hover Effect ด้วย Image Effects CK [01:58]
ผู้สอนแนะนำให้ติดตั้งปลั๊กอินเสริมชื่อ Image Effects CK เพื่อสร้างลูกเล่นเวลาเอาเมาส์ไปวางบนรูป (Hover) [02:15]
- วิธีใช้: ใส่ Title และ Description ในช่องที่กำหนด โดยใช้เครื่องหมาย :: คั่นกลาง [03:55]
- การใส่ Class: เลือกรูปแบบเอฟเฟกต์ที่ต้องการจากเว็บไซต์ผู้พัฒนา แล้วนำชื่อ CSS Class (เช่น imgeffectck-apollo) มาใส่ในช่อง CSS Class ของรูปภาพนั้นๆ [04:48]
- ผลลัพธ์จะทำให้รูปภาพมีการเคลื่อนไหวหรือแสดงข้อความขึ้นมาเมื่อเมาส์เลื่อนผ่าน [05:09]
3. การทำรูปภาพแบบ Pop-up (Light Box) [06:44]
แนะนำปลั๊กอิน Media Box CK เพื่อให้รูปภาพสามารถคลิกแล้วขยายใหญ่ขึ้นมาเป็นหน้าต่าง Pop-up [07:06]
- Group Image: หากมีรูปภาพหลายรูปในแถวเดียวกันและตั้งค่าให้อยู่กลุ่มเดียวกัน (Group) ผู้ใช้จะสามารถคลิกปุ่ม Next/Previous เพื่อดูรูปภาพทั้งหมดในรูปแบบ Gallery ได้ทันทีโดยไม่ต้องสร้างอัลบั้มแยก [08:53]
4. ข้อควรระวังและเทคนิคเพิ่มเติม [11:14]
- ปัญหา Hosting: ผู้สอนแชร์ประสบการณ์ว่าบางครั้งเมื่อย้ายเว็บขึ้น Hosting จริง รูป Pop-up อาจไม่แสดงผลเนื่องจากเส้นทาง (Path) ของรูปภาพผิดพลาด วิธีแก้คือให้ลองลบลิงก์เดิมออกแล้วตั้งค่าใหม่บน Hosting [11:42]
- สไตล์อื่นๆ: รูปภาพสามารถตั้งค่าระยะห่าง (Margin), เส้นขอบ (Border) และเงา (Shadow) ได้เหมือน Element อื่นๆ เพื่อความสวยงาม [10:48]
การใช้เครื่องมือเหล่านี้ร่วมกันจะช่วยให้รูปภาพบนเว็บไซต์ของคุณดูเป็นมืออาชีพและมีปฏิสัมพันธ์กับผู้ใช้งานได้ดียิ่งขึ้นครับ [13:20]
