คู่มือการใช้งานversion 8ตกแต่งเว็บไซต์

การใช้งาน Image Element

เพิ่มความน่าสนใจให้เว็บไซต์ได้ง่าย ๆ จากระบบการใช้งาน Image Element

K
KetShopWeb Team
2022-12-14 10:40:29
การใช้งาน Image Element

Image Element 

คือ Element ที่ใช้ในการอัปโหลดรูปภาพ โดยสามารถใช้งานได้ภายใต้ Custom Layout Element 

การใช้งาน Image Element ในการใช้งาน Image Element จำเป็นต้องเพิ่ม Section ก่อน 

เข้าสู่ระบบจัดการเว็บไซต์ Ketshopweb

(ตำแหน่งที่ 1) คลิกที่แท็บ "ปรับแต่ง" 

(ตำแหน่งที่ 2)คลิกที่เมนู "Page Layouts" 

(ตำแหน่งที่ 3) "ปรับแต่งเนื้อหา" 


การใช้งาน Image Element


(ตำแหน่งที่ 4) "Add section" 


การใช้งาน Image Element


เซ็คชั่นที่สามารใช้งานได้คือ Video Background, Content, Background Image และ Background Parallax โดยในตัวอย่างจะเลือกใช้เซ็คชั่น Background image 

(ตำแหน่งที่ 5) เลือก Background image จากนั้น คลิกง "Add Section"


การใช้งาน Image Element


หลังจากได้ Background image แล้ว

(ตำแหน่งที่ 6) คลิก พื้นที่ว่างในกรอบ


การใช้งาน Image Element


(ตำแหน่งที่ 7) คลิกที่ปุ่ม "Add Element"  


การใช้งาน Image Element


(ตำแหน่งที่ 8) เลือก "Custom layout" แล้วคลิก "Add Element"


การใช้งาน Image Element


(ตำแหน่งที่ 9) คลิก "ไอคอนรูปน็อต" เพื่อ "ตั้งค่า"

การใช้งาน Image Element


การตั้งค่า Image ดังนี้

(ตำแหน่งที่ 1) เลือกไฟล์ภาพที่ต้องการเพิ่ม

(ตำแหน่งที่ 2) กรอกรายละเอียดของภาพ

(ตำแหน่งที่ 3) ใส่ลิงก์ให้รูปภาพ

  • Default คือ ไม่สามารถคลิกที่รูปได้
  • Show Image คือ เมื่อคลิกที่รูป จะแสดงรูปนั้น
  • Open link new tab คือ เมื่อคลิกที่รูป จะเปิดลิงก์ที่เชื่อมไว้ในแท็บใหม่
  • Open link current tab คือ เมื่อคลิกที่รูป จะเปิดลิงก์ที่เชื่อมไว้ในหน้าเดิม

(ตำแหน่งที่ 4) การ Effect ให้รูปภาพ

(ตำแหน่งที่ 5) ใส่ลิงก์ Url ให้รูปภาพ

(ตำแหน่งที่ 6) การแสดงขนาดของรูปภาพ

(ตำแหน่งที่ 7) การตั้งค่าตำแหน่งของรูปภาพ

(ตำแหน่งที่ 8) คลิก "OK" เบื่อบันทึกการตั้งค่า


การใช้งาน Image Element



Ketshopweb | ระบบร้านค้าออนไลน์ ขายคล่อง ส่งสะดวก ครบในที่เดียว

www.ketshopweb.com

เรายินดีให้คำปรึกษาการทำเว็บไซต์ฟรี ไม่มีค่าใช้จ่าย

ติดต่อมาที่ 02-038-5588 , email : sales@ketshopweb.com

คู่มือการใช้งานversion 8ตกแต่งเว็บไซต์KetShopWebE-commerce
แชร์: