บทความนี้ จะแนะนำ STUDIO เครื่องมือตกแต่งหน้าเว็บรุ่นใหม่ ของ LnwX, LnwShop ในส่วนที่ใช้งานได้ง่าย แต่ให้ผลลัพธ์ที่เห็นได้ชัดเจน

ลักษณะของเทมเพลตนี้
ตัวอย่างเว็บไซต์ต่างๆ จะใช้เทมเพลตที่แตกต่างกัน สำหรับเทมเพลตที่เป็นตัวตั้งต้นของ demo-creator-lite จะมีลักษณะดังข้อด้านล่าง เพื่อให้ท่านตัดสินใจเลือกใช้งานได้ง่ายยิ่งขึ้น
-- มีส่วนโค้ง
-- เหมาะกับทั้งสินค้าที่มีพื้นหลัง หรือไม่มีพื้นหลัง (รูปสินค้าแบบดายคัท) สินค้าที่ไม่มีพิ้นหลัง จะใส่สีอ่อนรองพื้นให้ สามารถเอาออกได้
-- สามารถรองพื้นหลังให้มีลักษณะเป็นชั้นเหมือนการ์ดได้ โดยใช้ ColorScheme พื้นฐานที่มีให้ (จะกล่าวถึงวิธีการใช้งานในหัวข้อด้านล่าง)
-- ระยะห่างต่างๆ ค่อนข้างเป็นกลาง ไม่มากไป ไม่น้อยไป ทำให้ใช้งานกับรูปแบบเว็บได้หลากหลาย
-- โทนสีเด่น จะมีสีเดียว (เช่น เด่นส้ม เด่นเขียว เด่นน้ำเงิน) ใช้งานง่าย และมี preset ของ โทนสีให้เลือกใช้งานหลากหลายเฉด เหมาะสำหรับท่านที่เพิ่งเริ่มต้น

คำแนะนำการใช้งาน STUDIO เพื่อปรับแต่งเทมเพลตเบื้องต้น

1. Color Palette
คือจานสี สำหรับใช้ซ้ำในเทมเพลต สะดวกเวลาจิ้มเลือกสี และให้เทมเพลตมีสีไปในทิศทางเดียวกัย ในแต่ละธีม จะมี Palette Preset เริ่มต้นมาให้จำนวนหนึ่ง

ท่านสามารถเลือกจาก preset ที่ใกล้เคียงกำสีแบรนด์ของท่าน แล้วมาปรับเปลี่ยนเพียงบางสีให้ตรงกับแบรนด์ (ส่วนมากจะปรับแค่ BrandAltColor 5 สีก็เพียงพอ)

2. Color Scheme
สกีม หรือ ชุดสี ที่เพิ่มความสะดวกในการตกแต่งเทมเพลตของท่าน มาจากการเลือกใช้ ColorPalette มาใช้กับส่วนต่างๆ ที่ Scheme มีให้กำหนด
ในแต่ละธีมจะมีขั้นต่ำ 2 ชุด คือ
Scheme Main พื้นหลังสว่าง Text สีเข้ม
Scheme Inverse พื้นหลังเข้ม Text สีสว่าง
ซึ่ง Colore Scheme สามารถใช้งานได้ทุกจุด คือ Section Row Col Widget

ภาพตัวอย่างมี
main,
inverse,
inverse-1 ต่างจาก inverse แค่สี Background
main-1 ต่างจาก main แค่สี Background

ในตัวอย่างนี้ จะทดลองใช้ชุดสี กับ Section (กรอบเขียว) และ Widget (กรอบน้ำเงิน)

ตย. 1 Section ใช้ Scheme Main / Widget ไม่เลือกชุดสี จะถือว่าใช้ Scheme Main เหมือน Section

ตย. 2 Section ใช้ Scheme Inverse / Widget ไม่เลือกชุดสี จะถือว่าใช้ Scheme Inverse เหมือน Section

ตย. 3 Section ใช้ Scheme Main 1 / Widget ไม่เลือกชุดสี จะถือว่าใช้ Scheme Main1 เหมือน Section

ตย. 4 Section ใช้ Scheme Main 1 / Widget ใช้ Scheme Main จะเห็นว่า Background ของ Widget นั้นมีสีขาวตาม Scheme ที่เลือก
ทั้งนี้หากมี Element อื่นๆ เช่น ปุ่ม หัวข้อ ก็จะเปลี่ยนสีตาม Scheme ที่กำหนดไว้

รูปด้านล่าง เป็นตัวอย่างการสร้างความหลากหลาย จาก Color Scheme

3. การเลือกใช้ง่าน Font
สามารถเปลี่ยน Font อย่างรวดเร็วได้ด้วย Font Paring คือ ชุดฟ้อนต์ที่ Studio จัดมาให้ มีหลายรูปแบบ ทั้งแบบทางการ แบบสนุกสนาน ท่านสามารถกดเลือก แล้วดูการแสดงผลทางด้านขวาได้เลย

รูปตัวอย่างด้านล่าง แสดงการเลือก Font Paring ที่มีให้ กับการแสดงผลให้เห็นทาง preview ด้านขวา

ทั้งนี้ หากท่านอยากปรับเปลี่ยนฟ้อนต์ สามารถกดตามภาพด้านล่าง สามารถเปลี่ยนได้ทั้ง Font / ขนาด / น้ำหนัก ฯลฯ โดยเปลี่ยนได้ทั้งหัวข้อ คำบรรยาย และ ปุ่ม
ซึ่ง Font ที่มีให้เลือกจาก Studio จะมีจำนวนหนึ่ง หรือท่านสามารถพิมพ์ชื่อ Font ใน Google ฟ้อนต์ เพื่อนำมาใช้ได้

หากมีข้อสงสัยเพิ่มเติม สามารถส่ง email มาได้ที่ support@LnwShop.com
ขอบพระคุณทุกท่านที่ใช้บริการเทพช็อปค่ะ

สินค้าที่เกี่ยวข้อง

บnความที่เกี่ยวข้อง