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

การใช้งาน Custom layout element

09 ก.ย. 2019, 17:19
null

Custom Layout

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


เริ่มต้นการเพิ่ม Custom layout element คลิก ปรับแต่ง ในตำแหน่งที่ 1 และเลือก Page Layouts ในตำแหน่งที่ 2 จากนั้น Add Section ในตำแหน่งที่ 3  


เมื่อเข้าสู่หน้า Add Sections แล้ว จากนั้นเลือก Sections ที่ต้องการ โดยตัวอย่างจะเลือก Content จากนั้นคลิก OK

ลำดับต่อไปคือการ Add Elemnet ลงใน Sections ที่ผู้ใช้งานเลือก โดยคลิกตำแหน่งที่ 1 จากนั้น คลิก Add Element ตำแนห่งที่ 2


เมื่อเข้าสู่หน้า Add Sections แล้ว จากนั้นเลือก Custom layout แล้วกด “OK


หลังจากนั้น Custom layout จะถูกเพิ่มมาใหม่  


ผู้ใช้งานสามารถ Add element ลงใน Custom layout ตามที่ต้องการ โดยการคลิกที่รูปบวก


จากนั้นเลือก element  ที่ต้องการ โดยตัวอย่างจะเลือก Image แล้วกด Ok


ผลที่ได้คือ Custom layout จะประกอบไปด้วย Image และ Text area อยู่ด้วยกัน


ลำดับถัดไปคือการตั้งค่า Custom layout


ตำแหน่งที่ 1  เป็นการตั้งค่าทั้งหมดใน Element

 ปุ่มตั้งค่าสามารถจัดการหน้าตั้งค่าได้

 ปุ่มเพิ่มคอลัมน์


ตำแหน่งที่ 2 เป็นการตั้งค่าของ Columns

ปุ่มย้าย columns

 ปุ่มตั้งค่า columns

 ปุ่มเพิ่มแถว

  ปุ่มโคลนคอลัมน์ เป็นการคัดลอกคอลัมน์เพิ่มโดยมีเนื้อหาละรายเอียดเหมือนกัน

 คือ ปุ่มลบเนื้อหารายละเอียดคอลัมน์นั้นๆ


ตำแหน่งที่ 3 เป็นการตั้งค่าเฉพาะ Element นั้นๆ

 ปุ่มย้าย Element

 ปุ่มตั้งค่า Element

 ปุ่มเพิ่มแถว

 ปุ่มโคลนคอลัมน์ เป็นการคัดลอกคอลัมน์เพิ่มโดยมีเนื้อหาละรายเอียดเหมือนกัน 

 คือ ปุ่มลบเนื้อหารายละเอียดคอลัมน์นั้นๆ


การกำหนดระยะห่างใน Styling

Padding คือ ระยะห่างของตัวอักษรภายในภาพกับกรอบนอกสุด แต่เป็นการปรับทั้ง4ด้านพร้อมกัน สามารถกดที่ปุ่ม  เพื่อปรับในส่วนของแต่ละด้านได้


Margin คือ ระยะห่างของภาพพื้นหลังกับกรอบนอกสุด แต่เป็นการปรับทั้ง4ด้านพร้อมกัน สามารถกดที่ปุ่ม เพื่อปรับในส่วนของแต่ละด้านได้


Cornor คือ ความโค้งมนมุมของขอบภาพพื้นหลัง แต่เป็นการปรับทั้ง 4 ด้านพร้อมกัน สามารถกดที่ปุ่ม เพื่อปรับในส่วนของแต่ละด้านได้


Border คือ กรอบของรูปภาพ แต่เป็นการปรับทั้ง 4 ด้านพร้อมกัน สามารถกดที่ปุ่ม เพื่อปรับในส่วนของแต่ละด้านได้


Shadow คือ การใส่เงา ผู้ใช้งานสามารถปรับตำแหน่งเงา ความเข็ม ความเบลอ ของเงาได้


การตั้งค่าภาพพื้นหลังใน Background


Image คือการใส่พื้นหลัง


Color คือการใส่สีให้พื้นหลัง สามารถปรับความเข้มด้วย Opacit

Blur คือการปรับความเบลอขอพื้นหลัง





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

www.ketshopweb.com

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

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


เปิดร้านค้าออนไลน์ง่าย ๆ ด้วยตัวคุณเอง
logo ketshopweb svg
ทดลองใช้งานฟรี ไม่มีค่าใช้จ่าย
สนใจปรึกษา สำหรับคำแนะนำแพ็คเกจที่เหมาะสมกับธุรกิจของคุณ
เพื่อต่อยอดการขาย และขยายฐานลูกค้า ฟรี! ไม่มีค่าใช้จ่าย
โทร. 02-038-5588
เฉพาะวันทำการ ตั้งแต่เวลา 9:30 - 18:30 น.