การใช้งาน Image Element

วิธีเพิ่มและตั้งค่า Image Element

Image Element คือ Element ที่ใช้อัปโหลดรูปภาพลงในหน้าเว็บไซต์  ใช้งานได้ภายใต้ Custom Layout Element บทความนี้จะพาไปดูวิธีเพิ่มและตั้งค่า Image Element แบบทีละขั้นตอน

การใช้งาน Image Element

ในการใช้งาน Image Element จำเป็นต้องเพิ่ม Section ก่อน โดยเริ่มจากการเข้าสู่ระบบจัดการเว็บไซต์ Ketshopweb แล้วทำตามขั้นตอนดังนี้

คลิก "ปรับแต่ง" → "Page Layouts" → "ปรับแต่งเนื้อหา"

4 คลิก "Add Section"

คลิก "Add Section" เพื่อเพิ่ม Section ใหม่

Section ที่สามารถใช้งานได้คือ Video Background, Content, Background Image และ Background Parallax 

ในตัวอย่างนี้เลือกใช้ Section Background Image

5 เลือก "Background image" จากนั้นคลิก "Add Section"

เลือก "Background image" แล้วคลิก "Add Section"

หลังจากได้ Background Image แล้ว  6 คลิกที่พื้นที่ว่างในกรอบ

คลิกที่พื้นที่ว่างในกรอบ Section

7 คลิกที่ปุ่ม "Add Element"

คลิก "Add Element" เพื่อเพิ่ม Element ใหม่

8 เลือก "Custom Layout" แล้วคลิก "Add Element"

เลือก "Custom Layout" แล้วคลิก "Add Element"

9 คลิก "ไอคอนฟันเพือง" เพื่อเข้าสู่การตั้งค่า Image Element

คลิกไอคอนรูปน็อตเพื่อเข้าสู่หน้าตั้งค่า Image Element

การตั้งค่า Image Element

เมื่อเข้ามายังหน้าการตั้งค่า Image สามารถตั้งค่าได้ดังนี้

• 1 เลือกไฟล์ภาพ: เลือกภาพที่ต้องการเพิ่ม
• 2 รายละเอียดของภาพ: กรอกคำอธิบายหรือรายละเอียดของรูปภาพ
• 3 ลิงก์ของรูปภาพ: กำหนด action เมื่อคลิกที่รูป มีตัวเลือกดังนี้
  • Default — ไม่สามารถคลิกที่รูปได้
  • Show Image — เมื่อคลิกที่รูป จะแสดงรูปนั้นแบบขยาย
  • Open link new tab — เมื่อคลิกที่รูป จะเปิดลิงก์ที่เชื่อมไว้ในแท็บใหม่
  • Open link current tab — เมื่อคลิกที่รูป จะเปิดลิงก์ที่เชื่อมไว้ในหน้าเดิม
• 4 Effect ของรูปภาพ: เลือกเอฟเฟกต์ให้กับรูปภาพ
• 5 ลิงก์ URL ของรูปภาพ: ใส่ลิงก์ URL ที่ต้องการให้รูปภาพเชื่อมโยงไป
• 6 ขนาดของรูปภาพ: กำหนดการแสดงขนาดของรูปภาพ
• 7 ตำแหน่งของรูปภาพ: ตั้งค่าตำแหน่งการวางของรูปภาพ
• 8 บันทึกการตั้งค่า: คลิก "OK" เพื่อบันทึกการตั้งค่า

รายละเอียดตัวเลือก 1-8 ในหน้าตั้งค่า Image Element