สำหรับร้านค้าออนไลน์ที่ต้องการปรับแต่งหน้าร้านให้สวยงาม ตรงกับภาพลักษณ์ของแบรนด์ และช่วยให้ลูกค้าใช้งานเว็บไซต์ได้ง่ายขึ้น คุณสามารถแก้ไขดีไซน์และเนื้อหาบนหน้าเว็บไซต์ได้ด้วยเครื่องมือ Lnw Editor Lite ซึ่งเป็นเครื่องมือสำหรับจัดการและปรับแต่งหน้าร้านบนระบบ LnwShop
บทความนี้จะพาคุณไปรู้จักเครื่องมือหลักที่ใช้ในการจัดการหน้าเว็บไซต์ พร้อมวิธีแก้ไขรูปภาพประจำร้าน เนื้อหา กล่องคอนเทนต์ ธีมสี และฟอนต์บนหน้าเว็บ
เลือกอ่านตามหัวข้อ Lnw Editor Lite
- เครื่องมือจัดการบนเว็บไซต์ LnwShop
- วิธีแก้ไขรูปภาพประจำร้าน
- วิธีแก้ไขเนื้อหาหน้าเว็บไซต์
- การสลับอุปกรณ์ โหมดทำงานพิเศษ และการเผยแพร่
เครื่องมือจัดการบนเว็บไซต์ LnwShop
คุณสามารถเข้าใช้งานเครื่องมือบนระบบ LnwShop ได้เพียง เข้าสู่ระบบหน้าเว็บไซต์ของร้านค้า โดยจะมีเครื่องมือหลักสำหรับจัดการข้อมูลร้านค้าและตกแต่งหน้าเว็บไซต์ ดังนี้
1. LnwStore – หลังร้าน ใช้สำหรับตั้งค่าข้อมูลร้านค้า รวมถึงจัดการรูปภาพประจำร้านค้า เช่น ภาพ Profile, Logo Brand, Banner หน้าร้าน และ Favicon
2. Design Studio ใช้สำหรับแก้ไขและจัดการคอนเทนต์บนหน้าเว็บไซต์ เช่น ข้อความ รูปภาพ Section ต่าง ๆ สี ฟอนต์ และองค์ประกอบการแสดงผลบนหน้าร้าน
วิธีแก้ไขรูปภาพประจำร้าน
รูปภาพประจำร้านเป็นส่วนสำคัญที่ช่วยสร้างภาพจำให้กับร้านค้า และทำให้หน้าร้านดูน่าเชื่อถือมากขึ้น โดยคุณสามารถแก้ไขรูปภาพเหล่านี้ได้จากหน้า LnwStore – หลังร้าน
ขั้นตอนการแก้ไขรูปภาพประจำร้าน
- ไปที่เครื่องมือ LnwStore – หลังร้าน
- เลือกเมนู ร้านค้า
- ไปที่เมนู รูปภาพประจำร้านรูปภาพประจำร้าน
- เลือกรูปภาพที่ต้องการแก้ไขหรืออัปโหลดใหม่
ในส่วนนี้ คุณสามารถเปลี่ยนรูปภาพสำคัญของร้านค้าได้ เช่น ภาพ Profile ร้านค้า, ภาพ Logo Brand, Banner หน้าร้าน และ Favicon หรือไอคอนประจำเว็บไซต์
ขนาดรูปภาพที่แนะนำ
- ภาพ Profile แนะนำให้อัปโหลดเป็นอัตราส่วน 1:1 เช่น 200 x 200 px
- ภาพ Logo Brand แนะนำให้อัปโหลดเป็นอัตราส่วน 1:1 เช่น 760 x 760 px
- Banner หน้าร้าน แนะนำให้อัปโหลดเป็นอัตราส่วน 4:1 เช่น 1,920 x 640 px
- Favicon แนะนำให้ใช้ขนาด 32 x 32 px ขึ้นไป โดย Google แนะนำให้ใช้ขนาดที่เพิ่มทีละ 48 px เช่น 48 x 48 px, 96 x 96 px หรือ 144 x 144 px เป็นต้น
Tips : คุณสามารถดู QR code ของร้านค้าคุณได้ที่ ปุ่มด้านล่างภาพ Profile ร้าน ซึ่งสามารถนำคิวอาร์โค้ดนี้ ไปแปะได้ในคอนเทนต์ต่าง ๆ ของร้าน เพื่อให้ลูกค้าสแกนมาซื้อสินค้าที่ร้านของคุณได้ง่าย ๆ
วิธีแก้ไขเนื้อหาหน้าเว็บไซต์
หากต้องการแก้ไขข้อความ หรือคอนเทนต์ต่าง ๆ บนหน้าเว็บไซต์ สามารถทำได้ผ่านเครื่องมือ Design Studio
ขั้นตอนการแก้ไขเนื้อหาหน้าเว็บไซต์
- ไปที่เครื่องมือ Design Studio
- เลือกคอนเทนต์หรือ Section ที่ต้องการแก้ไข
- ปรับข้อมูล รูปภาพ หรือข้อความตามต้องการ
- ตรวจสอบความถูกต้องก่อนเผยแพร่
เครื่องมือนี้จะช่วยให้คุณสามารถปรับแต่งเนื้อหาบนหน้าเว็บได้ง่ายขึ้น ไม่ว่าจะเป็นการเปลี่ยนข้อความ เพิ่มรูปภาพ แก้ไขหัวข้อ หรือปรับรูปแบบการแสดงผลของแต่ละ Section
วิธีแก้ไข/ปรับขยับตำแหน่งกล่องคอนเทนต์
กล่องคอนเทนต์ หรือ Section คือส่วนประกอบต่าง ๆ ที่แสดงอยู่บนหน้าเว็บไซต์ เช่น Banner, Feature Items, ข้อความแนะนำร้าน, สินค้าแนะนำ หรือข้อมูลโปรโมชันต่าง ๆ
ขั้นตอนการแก้ไขตำแหน่งกล่องคอนเทนต์
- เข้าสู่เครื่องมือ Design Studio
- คลิกเลือกกล่องคอนเทนต์หรือ Section ที่ต้องการแก้ไข
- ใช้เครื่องมือลูกศรขึ้น-ลง เพื่อเรียงลำดับการแสดงผลของ Section
- หากต้องการจัดการ Section เพิ่มเติม ให้กดที่เครื่องหมายจุด 3 จุด
- เลือกคำสั่งที่ต้องการ เช่น
- Hide เพื่อซ่อน Section
- Duplicate เพื่อทำซ้ำ Section
- Delete เพื่อลบ Section
การจัดเรียง Section ให้เหมาะสม จะช่วยให้หน้าเว็บไซต์ดูเป็นระเบียบ และช่วยให้ลูกค้าเข้าถึงข้อมูลสำคัญได้ง่ายขึ้น
วิธีแก้ไขหัวข้อกล่องคอนเทนต์
นอกจากการปรับตำแหน่ง Section แล้ว คุณยังสามารถแก้ไขหัวข้อและข้อความภายในกล่องคอนเทนต์ได้ด้วยเช่นกัน
ขั้นตอนการแก้ไขหัวข้อกล่องคอนเทนต์
- เข้าสู่เครื่องมือ Design Studio
- คลิกเลือกกล่องคอนเทนต์หรือ Section ที่ต้องการแก้ไข
- บริเวณด้านซ้ายมือจะแสดงเครื่องมือสำหรับปรับแก้ข้อมูลหัวข้อ
- แก้ไขข้อความที่ต้องการ เช่น
- Caption
- Title
- Description
นอกจากนี้ คุณยังสามารถตั้งค่ารูปแบบข้อความเพิ่มเติมได้ เช่น
- เลือกให้ข้อความแสดงเป็น Heading หรือ Paragraph
- ปรับข้อความให้เป็นตัวหนา
- เลือกขนาดฟอนต์ตัวอักษร
- ปรับรูปแบบการแสดงผลให้เหมาะกับดีไซน์ของร้าน
การแก้ไขหัวข้อและคำอธิบายให้ชัดเจน จะช่วยให้ลูกค้าเข้าใจข้อมูลในแต่ละ Section ได้ง่ายขึ้น และทำให้หน้าเว็บไซต์ดูเป็นมืออาชีพมากขึ้น
วิธีแก้ไข Feature Items
Feature Items คือกล่องคอนเทนต์ที่ใช้แสดงจุดเด่น ข้อมูลสำคัญ หรือรายการต่าง ๆ ที่ต้องการสื่อสารให้ลูกค้าเห็นอย่างชัดเจน เช่น จุดเด่นของสินค้า บริการของร้าน ขั้นตอนการสั่งซื้อ หรือโปรโมชัน
ขั้นตอนการแก้ไข Feature Items
- เข้าสู่เครื่องมือ Design Studio
- คลิกเลือกกล่องคอนเทนต์ Feature Items
- บริเวณด้านซ้ายมือจะแสดงเครื่องมือสำหรับปรับแก้ข้อมูล
- คลิกเลือกการ์ดข้อมูลที่ต้องการแก้ไข
ทั้งนี้ คุณสามารถกด +Add Feature Items เพิ่มคอนเทนต์ใหม่ในการ์ดนี้ได้ หรือกด +Images From Gallery เพื่อเพิ่มการแสดงภาพ
เมื่อกดเลือกการ์ดที่ต้องการแก้ไขแล้ว ระบบจะแสดงหัวข้อที่คุณสามารถปรับแก้ได้ ดังนี้
- Color Scheme เลือกโทนสีของฟีเจอร์นี้
- Media เลือกแสดงสื่อ เช่น รูปภาพ วิดีโอ หรือไอคอน รวมถึงสามารถเลือกขนาด และปรับแต่งสีไอคอนได้
- Text ปรับแก้ข้อความต่าง ๆ เช่น Caption, หัวข้อ หรือคำอธิบาย
- Link สามารถใส่ลิงก์ปลายทาง เพื่อพาลูกค้าไปยังหน้าอื่น ๆ บนเว็บไซต์ได้
- Buttons เลือกแสดงปุ่มสำหรับลิงก์ไปยังปลายทางอื่น เช่น หน้าสินค้า หน้าบทความ หรือหน้าโปรโมชัน
- Bullet Lists เลือกแสดงหัวข้อย่อย ในกรณีที่มีข้อมูลหลายรายการและต้องการจัดให้อ่านง่าย
- Images From Gallery เลือกแสดงภาพจากแกลอรี
นอกจากนี้ คุณยังสามารถเรียงลำดับการแสดงผลของแต่ละหัวข้อได้เอง โดยกดปุ่มลูกศรขึ้น-ลง และสามารถใช้คำสั่ง Duplicate เพื่อทำซ้ำข้อมูล ช่วยให้สร้างคอนเทนต์ใหม่ได้สะดวกยิ่งขึ้น
Tips : คุณสามารถปรับแต่งความสวยงามในการแสดงผลอย่างละเอียดได้เพิ่มเติมที่เมนู General, Card, Layout Grid, Bullet Lists, Button, Widget Settings และ Effect
วิธีเปลี่ยนธีมสีเว็บไซต์
ธีมสีของเว็บไซต์เป็นส่วนสำคัญที่ช่วยสร้างภาพจำให้กับแบรนด์ และทำให้หน้าร้านดูสวยงามสอดคล้องกันทั้งเว็บไซต์
ขั้นตอนการเปลี่ยนธีมสีเว็บไซต์
- เข้าสู่เครื่องมือ Design Studio
- คลิกเมนูรูปจานสีทางด้านซ้ายมือ
- เลือกปรับแต่งสีตามส่วนต่าง ๆ ที่ต้องการ
คุณสามารถตั้งค่าสีให้ใช้งานกับส่วนต่าง ๆ ของหน้าเว็บไซต์ได้ ด้วยเครื่องมือดังนี้
- หน้าหลักของ Theme แดชบอร์ดด้านบนคือ Theme ปัจจุบัน, Preview, Quick Actions และ Schemes
- Edit Style เลือกใช้งานพรีเซ็ต Theme สีเว็บไซต์
- Palette Color เปิดหน้า Theme Color Palette เพื่อดูสีแบรนด์รวมและจุดเริ่มต้นของโทนสี
- Color Scheme เปิด Color Scheme เพื่อดูวิธีนำ Palette ไปแมปเป็นสีใช้งานจริง
การเลือกชุดสีที่เหมาะสม จะช่วยให้เว็บไซต์ดูสวยงาม เป็นเอกลักษณ์ และสื่อถึงภาพลักษณ์ของร้านค้าได้ชัดเจนยิ่งขึ้น
วิธีเปลี่ยนฟอนต์บนหน้าเว็บ
ฟอนต์เป็นอีกหนึ่งองค์ประกอบที่ช่วยกำหนดบุคลิกของเว็บไซต์ ไม่ว่าจะเป็นความเรียบง่าย ความพรีเมียม ความสนุก หรือความเป็นมืออาชีพ
ขั้นตอนการเปลี่ยนฟอนต์บนหน้าเว็บ
- เข้าสู่เครื่องมือ Design Studio
- คลิกเมนูรูปจานสีทางด้านซ้ายมือ
- เลือกเมนู Fonts หรือ Typography
- ปรับตั้งค่าฟอนต์ตามต้องการ
ส่วนที่สามารถตั้งค่าได้
- Fonts Pairing เลือกพรีเซ็ตการจับคู่ฟอนต์ที่ระบบตั้งค่าไว้ให้ เพื่อให้ข้อความบนเว็บไซต์แสดงผลสวยงามและเข้ากัน
- Body Font Size ปรับขนาดตัวอักษรหลักบนเว็บไซต์
- Edit Fonts เลือกฟอนต์ที่ต้องการให้แสดงผลในแต่ละส่วน เช่น Heading, Paragraph และ Button โดยสามารถกดเข้าไปตั้งค่ารายละเอียดเพิ่มเติมได้
การเลือกฟอนต์ที่เหมาะสมจะช่วยให้เว็บไซต์อ่านง่ายขึ้น และทำให้ภาพรวมของหน้าร้านดูสวยงามตรงกับสไตล์ของแบรนด์
การสลับอุปกรณ์ โหมดทำงานพิเศษ และการเผยแพร่
ระหว่างการปรับแต่งหน้าเว็บไซต์ด้วย Design Studio คุณสามารถใช้งานแถบเครื่องมือด้านบน เพื่อดูตัวอย่างหน้าเว็บ สลับมุมมองการแสดงผลบนอุปกรณ์ต่าง ๆ เปิดใช้งานโหมดทำงานพิเศษ รวมถึงเผยแพร่หรือคืนค่าการแก้ไขได้ตามต้องการ
เครื่องมือในส่วนนี้จะช่วยให้คุณตรวจสอบความถูกต้องของหน้าเว็บไซต์ก่อนเผยแพร่จริง และช่วยให้การแก้ไขหน้าเว็บทำได้สะดวกมากยิ่งขึ้น
การสลับอุปกรณ์และการซูม
ในระหว่างที่กำลังปรับแต่งหน้าเว็บไซต์ คุณสามารถเปลี่ยนมุมมองการแสดงผล เพื่อเช็กหน้าตาเว็บไซต์บนอุปกรณ์ต่าง ๆ ได้ เช่น
- Mobile สำหรับดูตัวอย่างหน้าเว็บบนโทรศัพท์มือถือ
- Tablet สำหรับดูตัวอย่างหน้าเว็บไซต์บนแท็บเล็ต
- Desktop สำหรับดูตัวอย่างหน้าเว็บบนหน้าจอคอมพิวเตอร์
- Widescreen สำหรับดูหน้าเว็บแบบเต็มหน้าจอมอนิเตอร์
- Fullscreen สำหรับดูหน้าเว็บแบบเต็มหน้าจอ
นอกจากนี้ ยังสามารถปรับค่าการซูมหน้าเว็บให้เหมาะกับการแก้ไขได้ตามต้องการ ช่วยให้ตรวจสอบรายละเอียดของดีไซน์ การจัดวางคอนเทนต์ และระยะห่างขององค์ประกอบต่าง ๆ ได้ง่ายขึ้น
โหมดทำงานพิเศษ
Design Studio มีโหมดทำงานพิเศษที่ช่วยให้การปรับแต่งหน้าเว็บไซต์ยืดหยุ่นมากขึ้น โดยสามารถเลือกเปิดหรือปิดการใช้งานได้ตามรูปแบบการทำงานของคุณ
- Advance Mode โหมดปรับแต่งเต็มที่ เปิดตัวเลือกครบ (โหมดพื้นฐานจะซ่อนบางตัวเลือกให้แก้ง่าย)
- Token Mode สำหรับดีไซเนอร์/พาร์ตเนอร์: เห็นชื่อโทเค็น/ตัวแปรและ CSS variables พร้อมเครื่องมือภายใน
- Click Mode เปิดเพื่อเลือกคอมโพเนนต์บนพรีวิวแล้วแก้ไขทันที; ปิดเมื่ออยากคลิก/โฮเวอร์ลิงก์ในพรีวิวตามปกติ
- Preview Autoplay Mode เปิดเพื่อทดสอบให้วิดีโอในพรีวิวเล่นอัตโนมัติ และปิดเมื่ออยากให้ editor เบาและตอบสนองเร็ว
การพรีวิว / เผยแพร่ / คืนค่าการแก้ไข
เมื่อปรับแต่งหน้าเว็บไซต์เรียบร้อยแล้ว คุณสามารถตรวจสอบ แก้ไขย้อนหลัง หรือเผยแพร่หน้าเว็บไซต์ได้จากแถบเครื่องมือด้านบน โดยมีเครื่องมือที่ใช้งานได้ดังนี้
- Undo / Redo ใช้สำหรับย้อนกลับการแก้ไข หรือทำซ้ำการแก้ไขล่าสุด
- History Timeline เปิด History panel เพื่อดูไทม์ไลน์การแก้ไขที่ผ่านมา
- Revisions สลับไปยังแท็บ Revisions เพื่อตรวจสอบเวอร์ชันก่อนหน้า และเลือกโหลดเวอร์ชันที่ต้องการกลับมาใช้งานได้
- Preview ดูตัวอย่างหน้าเว็บไซต์ก่อนกด Publish เพื่อเช็กความถูกต้องของข้อมูล ดีไซน์ และการแสดงผลโดยรวม
- Publish เผยแพร่หน้าเว็บไซต์หลังจากตรวจสอบเรียบร้อยแล้ว เมื่อกด Publish การแก้ไขที่ทำไว้จะแสดงผลบนหน้าเว็บไซต์จริง
Tips : ทุกครั้งหลังแก้ไข ควรตรวจสอบหน้าเว็บไซต์ทั้งบน Desktop และ Mobile เพื่อให้มั่นใจว่าการแสดงผลถูกต้อง สวยงาม และใช้งานได้ดีในทุกอุปกรณ์
ทั้งนี้ หากร้านค้าร้านไหน มีข้อสงสัยเกี่ยวกับการตกแต่งหน้าร้านผ่าน Lnw Editor Lite หรือการใช้งานระบบจัดการร้านค้าออนไลน์ LnwShop ก็สามารถสอบถามเข้ามาได้ที่อีเมล Support@LnwShop.com ได้เลยนะคะ
