สร้างหน้าเว็บไม่เหมือนใครด้วยฟีเจอร์ HTML Builder

ในบทความนี้เราจะสอนการใช้งานฟีเจอร์ HTML Builder ที่จะช่วยให้ผู้ใช้งานสร้างหน้าเว็บไซต์ได้ในสไตล์ที่ไม่เหมือนใครเลยทีเดียว อีกทั้งยังมีการใช้งานที่ง่าย ปรับแต่งได้หลายอย่าง ได้ตามใจผู้ใช้งาน

HTML Builder

HTML Builder เป็นระบบที่ทางบริษัทพัฒนาขึ้นมาเพื่อช่วยเหลือให้ผู้ใช้งานสร้างหน้าเว็บไซต์ของผู้ใช้งานได้ตามใจผู้ใช้งาน ทำให้หน้าเว็บของผู้ใช้งานไม่เหมือนใคร

เริ่มต้นใช้งาน HTML Builder

ผู้ใช้สามารถเริ่มต้นใช้งาน HTML Builder โดยการคลิกเข้าไปที่เมนู  002 ซึ่งเป็นเมนู ทางแถบใช้งานด้านซ้าย

001

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

003

* ซึ่งหากผู้ใช้งานเห็นการแสดงผลที่แตกต่างไป ก็ไม่ต้องตกใจอย่างใด เพราะข้อมูลต่าง ๆ ที่ผู้ใช้งานเพิ่มอาจมีแตกต่างกัน

ปรับแต่งเว็บไซต์อย่างรวดเร็ว

         การปรับหน้าเว็บไซต์โดยการใช้งาน HTML Builder นั้น มีทั้งหมด 9 หน้าด้วยกันคือหน้า Home, Product, Search, Cart, Checkout, Blog, FAQ, Contact, Sitemap

         เริ่มจากการกดไปที่รูปเฟือง004  ทางด้านมุมบนด้านซ้ายของหน้าเว็บ เมื่อคลิกรูปเฟืองแล้ว แถบเมนูด้านข้างจะสไลด์ออกมาให้เราปรับแต่ง

005

         ในส่วนแรกนี้จะเป็นหน้าแต่ละหน้าที่เราสามารถปรับแต่งได้ ส่วนในส่วนด้านล่างที่เขียนว่า THEMES นั้น จะช่วยให้เราไม่ต้องเสียเวลามานั่งปรับแต่ละส่วนเอง คือเมื่อเราคลิกที่ปุ่ม Themes แล้ว จะแสดงสไลด์เลื่อนออกมาและมี Theme ให้เลือก ซึ่งในเบื้อต้นนี้เรามีให้เลือกเพียง 1 Theme ( ทางทีมงานกำลังพัฒนา Theme อื่น ๆ ขึ้นมาเพิ่มเติม เพื่ออำนวยความสะดวกแก่ผู้ใช้งาน)

007

ผู้ใช้งานสามารถลาก Theme ที่แสดงเข้าไปใส่ในส่วนของเนื้อหาแล้ววาง แล้วรอสักครู่หนึ่ง ระบบจะแสดง Theme ที่ทางทีมงานได้ตั้งค่าไว้เรียบร้อยแล้ว ให้กับเว็บไซต์ของผู้ใช้งาน ซึ่งก่อนจะนำไปใช้งานได้นั้น ต้องกดที่ปุ่ม 008 ก่อน เพื่อที่จะให้ระบบบันทึกข้อมูลที่ตั้งค่า ใส่ในหน้าเว็บไซต์ของผู้ใช้งาน ซึ่งเมื่อบันทึกเรียบร้อยแล้ว ปุ่ม Save Changes(!)  จะเปลี่ยนเป็น 009   และหากต้องการเข้าไปดูหน้าที่ปรับแต่ง ให้เลือกไปที่  010

ปรับแต่งเว็บไซต์ สไตล์เรา

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

011

ซึ่งในส่วนนี้จะแบ่งเป็น 3 ส่วนด้วยกัน คือ Dynamic, Static, Integration เราจะมาขยายความเกี่ยวกับ 3 ส่วนนี้กัน เพื่อให้ผู้ใช้งานมองเห็นภาพรวม และเข้าใจในการปรับแต่งมากยิ่งขึ้น

  • Dynamic คือ ส่วนที่ผู้ใช้งานไม่สามารถปรับแต่งเพิ่มเติมได้ ทำได้เพียงเลือก Theme ที่กำหนดให้ไว้ โดยข้อมูลที่แสดงนั้นจะเป็นค่าที่ถูกตั้งค่าไว้ในระบบจัดการเว็บไซต์ ในส่วนนี้จะมีเป็นส่วนดังนี้ คือ Header, Slidebox, Showcase, Floor, As seen, Footers โดยในแต่ละส่วนจะลากใส่ได้เพียงแค่อันเดียวเท่านั้นคือ Header มีได้ 1 อัน Slidebox มีได้ 1 อัน เป็นต้น
  • Static คือ ส่วนที่ผู้ใช้งานสามารถปรับแต่งค่าต่าง ๆ เองได้ เช่น เปลี่ยนคำที่แสดง ปรับขนาดของตัวอักษร ปรับสีตัวอักษร เปลี่ยนรูป เป็นต้น ซึ่งมีส่วนดังนี้คือ Content Sections, Dividers, Portfolios, Pricing Tables, Contact โดย ผู้ใช้งานจะลากใส่กี่อันก็ได้ ไม่มีจำกัด
  • Integration คือ ส่วนที่ผู้ใช้งานสามารถปรับแต่งได้ ซึ่งคล้ายกับ Static แต่สามารถใส่ได้เพียงแค่อันเดียว ในส่วนนี้เบื้องต้นมีเพียงแค่ Subscribe เท่านั้น

Dynamic

         ผู้ใช้งานสามารถคลิกที่ปุ่ม 012 เพื่อลบข้อมูลในส่วนนั้น ๆ ออก หรือ สามารถลบด้วยวิธีการเอาเม้าส์ไปวางเหนือส่วนของตัวเนื้อหาของข้อมูลที่ต้องการลบ จะแสดงดังภาพ

013

ผู้ใช้งานสามารถคลิกที่ปุ่ม 014 เพื่อลบข้อมูลในส่วน นั้น ๆ ได้เช่นกัน ซึ่งเมื่อเราลบข้อมูล จะมี Dialog แสดงขึ้นมาเพื่อให้ยืนยันว่าต้องการลบข้อมูลในส่วนนั้นจริง ๆ ดังภาพด้านล่าง

015

ซึ่งหากผู้ใช้งานต้องการลบข้อมูลส่วนนั้นจริง ๆ ให้คลิกที่ปุ่ม 016 ซึ่งเมื่อคลิกแล้วจะเห็นได้ว่า แถบเมนูด้านข้างหายไป เช่นจากตัวอย่างจะเป็นการลบในส่วนของ Header

017

จากภาพจะเห็นว่าคำว่า Remove หายไปในส่วนของ Headers ที่เราลบไปแล้ว และในส่วนของเนื้อหาก็จะไม่พบ Headers แสดงอยู่เช่นกัน

  • Header

เราสามารถเลือก Theme ของ Header เข้ามาใส่ได้โดยการคลิกไปที่ ปุ่ม Headers ซึ่งเมื่อคลิกแล้วจะแสดงดังภาพด้านล่าง

019

จะเห็นได้ว่ามี Header ให้เลือกอยู่ 2 Theme ซึ่งจะมีภาพตัวอย่างแสดงให้เห็นแต่ละ Theme ว่ามีลักษณะอย่างไร ผู้ใช้งานสามารถใช้เม้าส์ลาก Theme ไปใส่ใน Content ได้เลย เมื่อลากไปวางใน Content จะเห็นเส้นประอยู่รอบ ๆ ที่ ๆ จะวาง เมื่อเราปล่อยเม้าส์ Header ที่เลือกจะถูกนำมาใส่ใน Content ดังภาพด้านล่าง

020

ซึ่งเราสามารถปรับตำแหน่งได้โดยการคลิกเม้าส์ค้างแล้วลาก ที่ Header ส่วนนั้นแล้วเลื่อนไปยังตำแหน่งที่ต้องการ ตัวอย่างเราจะเลื่อน Header ให้อยู่ใน Showcase ซึ่งเมื่อลากแล้วจะแสดงดังภาพด้านล่าง

021

จากภาพจะเห็นว่า Header ลงมาอยู่ใต้ Showcase ซึ่งผ่านจากการลากย้ายตำแหน่ง ที่กล่าวไปก่อนหน้านี้ หากเราพอใจแล้วก็ให้กด Save Changes ที่เคยกล่าวไว้ก่อนหน้านี้ได้เลย เพื่อให้การปรับของเราแสดงผลในหน้าเว็บไซต์จริง

  • Slidebox

เราสามารถเลือก Slidebox เข้ามาใส่ได้ โดยการคลิกที่ปุ่ม Slidebox ทางเมนูด้านข้าง ซึ่งเมื่อคลิกแล้วจะแสดงดังภาพด้านล่าง

022

จะเห็นว่ามี Theme ของ Slide ให้เลือกมากมายหลายแบบ ผู้ใช้งานก็สามารถลากที่รูปที่แสดง ไปใส่ได้ในตำแหน่งที่ต้องการ เช่นเดียวกับการทำ Header ที่อธิบายไว้ข้างต้น การตั้งค่ารูปสไลด์ต่าง ๆ ผู้ใช้งานสามารถอ่านเพิ่มเติมได้ที่หัวข้อ Slideshow – PC

  • Showcase

เราสามารถเลือก Showcase มาแสดงในหน้าเว็บได้ โดยการคลิกที่ปุ่ม Showcase ทางด้านเมนูด้านซ้ายมือ ดังภาพตัวอย่างด้านล่าง

023

หากผู้ใช้งานคลิกแล้วไม่ขึ้น ให้ลองสังเกตุว่ามีปุ่ม Remove อยู่หรือเปล่า ถ้าหากมีปุ่ม Remove แสดงอยู่แสดงว่าในเว็บมี Showcase อยู่แล้วให้ลบ Showcase อันเก่าออกก่อน จากภาพจะเห็นได้ว่า Showcase มี 2 Theme ดังภาพที่แสดงด้านบน ผู้ใช้งานสามารถลาก Theme ไปวางได้เช่นตัวอย่างก่อนหน้าที่กล่าวมา ข้อมูลที่โชว์เคสนำมาแสดงนั้น เป็นข้อมูลที่ถูกตั้งค่าจากในหน้า Product ทางฝั่ง Backend ผู้ใช้งานสามารถอ่านข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าแสดงโชว์เคสได้ที่หัวข้อ Product – PC

  • Floor

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

024

จะเห็นได้ว่ามี Theme ให้ใช้งานอยู่ 2 แบบ ผู้ใช้งานสามารถเลือก Theme ที่ต้องการแล้วลากไปใส่ในส่วนของเนื้อหาเหมือนในตัวอย่างก่อนหน้า ผู้ใช้งานสามารถอ่านการตั้งค่า Floor เพิ่มเติมได้จากหัวข้อ Categories – PC และหัวข้อ Product – PC

  • As seen

As seen จะคล้าย ๆ กับ Slideshow คือเป็น Slide แต่ใช้ในส่วนเกี่ยวกับข้อมูลของ Partner เสียมากกว่า เช่น ใส่รูป Logo ของ Partner หรือ ใส่รูป Logo บริษัทที่เป็นลูกค้าของสินค้าของเรา ผู้ใช้งานสามารถเลือก As seen ได้โดยการคลิกที่เมนู As seen   เมื่อคลิกแล้วจะแสดงข้อมูลดังภาพด้านล่าง

025จะเห็นได้ว่ามี Theme ให้เลือกทั้งหมดอยู่ 3 Theme ผู้ใช้งานก็สามารถลากไปใส่ในส่วนของเนื้อหาได้ เช่นเดียวกับตัวอย่างก่อนหน้านี้ เมื่อลากไปใส่แล้วจะเห็นได้ว่าในส่วนของเนื้อหานั้นจะแสดง As seen ที่ลากไปใส่ขึ้นมา ผู้ใช้งานสามารถอ่านข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่า As seen ได้ในหัวข้อ As seen – PC

  • Footers

Footer เป็นส่วนที่จำเป็นอย่างมากในหน้าเว็บของเรา เพราะถ้าหากไม่มี Footer หรือ Header แล้วจะไม่สามารถบันทึกข้อมูลในส่วน HTML Builder ได้ ดังนั้น การใช้งาน HTML Builder สิ่งที่ต้องมีจริง ๆ คือ Header และ Footer

ลองสังเกตดูว่าในเมนู Footer มีเขียนว่า Remove หรือเปล่า ถ้าหากว่ามีเขียน Remove อยู่ข้าง ๆ แถบ Footer แสดงว่ามี Footer อยู่แล้ว หากเราต้องการเอา Footer อันอื่น ให้กดที่ Remove เพื่อลบ Footer ที่มีอยู่แล้วออกก่อน เมื่อลบและคลิกที่ Footer แล้วจะแสดงข้อมูลดังภาพ

026

จะเห็นได้ว่า Footer มีให้เลือกทั้งหมด 6 Theme ด้วยกัน การใช้งานก็เหมือนตัวอย่างก่อนหน้านี้ คือหากผู้ใช้งานต้องการใช้งาน Footer Theme ไหน ก็ให้ลาก Theme นั้นไปใส่ในส่วนของ Content

การทำงานข้างต้นที่กล่าวมาทั้งหมด จะแสดงผลก็ต่อเมื่อผู้ใช้งานนั้นกด Save Change(!) แล้ว เว็บไซต์ของผู้ใช้งานจึงจะเปลี่ยนได้ตามที่ตั้งค่าใน HTML Builder ไว้

Static

         ในส่วนของ Static นั้นจะแตกต่างจาก Dynamic ตรงที่เราสามารถลากใส่เท่าไรก็ได้ และสามารถปรับแต่งข้อมูลต่าง ๆ ได้เอง ไม่ว่าจะเป็นปรับภาพ ปรับสีของตัวหนังสือ ปรับขนาดตัวหนังสือ เป็นต้น

027

ในส่วนที่เป็น Static มีทั้งหมดด้วยกัน 6 อัน

  • Content Sections

    ส่วนนี้จะเป็นส่วนเกี่ยวกับเนื้อหาต่าง ๆ ซึ่งใน Content Sections จะมี Theme เนื้อหาหลายรูปแบบ ผู้ใช้งานสามารถลองลากไปใส่ในเนื้อหาของผู้ใช้งานได้ ทั้งยังปรับเปลี่ยนข้อมูลต่าง ๆ ได้ตามที่ผู้ใช้งานต้องการ

028

  • Dividers

    ในส่วนนี้ จะเป็นส่วนที่เกี่ยวข้องกับเส้นคั่นแต่ละส่วน เช่นหากผู้ใช้งานมีส่วนหลาย ๆ ส่วนและอยากให้มีตัวแบ่งแต่ละส่วนชัดเจน ผู้ใช้งานสามารถลาก Dividers มาใส่ได้ หรือใช้เป็นหัวข้อสำหรับที่จะอธิบายในส่วนล่างได้ แล้วแต่การประยุกต์ของผู้ใช้งาน

029

  • Portfolios

    ในส่วนนี้จะมี Theme ที่เกี่ยวกับ Portfolios ซึ่งผู้ใช้งานอาจนำไปประยุกต์ใช้โดยการใส่รูปภาพของผลงาน หรือผลิตภัณฑ์ของบริษัทของผู้ใช้งาน ซึ่งในตอนนี้เรามีให้ใช้งานอยู่ 3 รูปแบบ

030

  • Team

    ในส่วน Team นี้ หากในหน้าเว็บไซต์ของผู้ใช้งานต้องการให้แสดงคนในทีมว่ามีใคร และทำอะไรบ้าง เพื่อให้น่าเว็บไซต์ของผู้ใช้งานดูมีความน่าเชื่อถือ และน่าสนใจ ผู้ใช้งานก็สามารถเลือก Theme ในส่วนของ Team ไปใช้งานได้ ปรับแค่รูปเป็นรูปคนใน ทีมของผู้ใช้งาน และปรับตำแหน่ง

031

  • Pricing Tables

    ในส่วนของ Pricing Tables นั้นเราสร้างขึ้นมาเพื่อให้ครอบคลุมกับผุ้ใช้งานทุกอย่าง ซึ่งผู้ใช้งานบางท่านอาจไม่ต้องการใช้งานในส่วนนี้ แต่ก็มีอีกหลายท่านที่ต้องการใช้งานในส่วนนี้ โดย Pricing Tables เป็นตารางอธิบายราคาว่าราคานี้ ลูกค้าของผู้ใช้งานสมัครแล้วจะได้อะไร ดีกว่าอันอื่นอย่างไร เป็นต้น

032

  • Contact

    ในส่วน Contact นั้นเป็นส่วนที่เกี่ยวกับการติดต่อเรา ถ้าอยากให้ลูกค้าของผู้ใช้งานติดต่อก็สามารถลากในส่วนนี้ไปวางในเนื้อหาในหน้าเว็บของผู้ใช้งานได้ ซึ่งเมื่อลูกค้าของผู้ใช้งานมีการติดต่อผู้ใช้งาน โดยผ่านในส่วน Contact ที่ผู้ใช้งานลากไปใส่ในหน้าเว็บไซต์แล้ว ข้อมูลจะถูกส่งไปที่ Email ของผู้ใช้งาน ที่ตั้งค่าไว้ในส่วน Backend ผู้ใช้งาน สามารถอ่านข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าระบบได้ที่หัวข้อ System – PC

033

Integration

         Integration จะเป็นการผสมระหว่าง Static กับ Dynamic คือ สามารถปรับแต่งเนื้อหาได้ (บางอันที่เป็น Dialog ไม่สามารถปรับแต่งได้) และลากใส่ได้แค่อันเดียวเท่านั้น ในปัจจุบันมีแค่ Subscribe ที่อยู่ในส่วนนี้

  • Subscribe

    Subscribe นี้เป็นเหมือนระบบให้ลูกค้าติดตามข่าวสารของเว็บไซต์ของผู้ใช้งาน โดยในปัจจุบันมีให้เลือกอยู่ 2 Theme หากผู้ใช้งานลาก Theme ไปใส่ในส่วนของเนื้อหาแล้ว หาไม่พบว่าอยู่ในส่วนไหนของเนื้อหา (ลากวางแล้วหายไป แต่ในส่วนของ Subscribe ขึ้น Remove) ดังภาพ 034แสดงว่า Subscribe ที่ลากมานั้นเป็น Dialog ผู้ใช้งานจะไม่สามารถปรับแต่งค่าได้ การใช้งาน Subscribe ระบบจะเชื่อมกับระบบ Email หรือ ESP ของ cloud.pushthetraffic.com ผู้ใช้งานต้องเปิดใช้งาน ESP ก่อน จึงจะใช้งาน Subscribe ได้อย่างสมบูรณ์ ผู้ใช้งานสามารถอ่านข้อมูลเพิ่มเติมเกี่ยวกับการใช้งาน ESP ได้ในหัวข้อ ESP

การปรับแต่งเนื้อหาและรูปแบบต่าง ๆ

ผู้ใช้งานสามารถปรับเนื้อหาต่าง ๆ ได้ โดยเนื้อหาที่สามารถปรับได้นั้นต้องเป็นข้อมูลในส่วนที่เป็น Static หรือ Integration ที่ลากมาใส่ในเนื้อหา ที่ได้กล่าวไปในข้างต้นนี้ ให้สังเกตด้านบนของหน้าเว็บที่ปรับแต่งนั้นจะพบดังภาพ

036

  • Drag ในโหมด Drag นั้นเป็นโหมดที่ใช้สำหรับการลากวางเนื้อหาที่ได้กล่าวไปในตอนต้น หากผู้ใช้งานสังเกต เมื่อเรา Drag ส่วนต่าง ๆ ข้างต้น Mode จะเป็นสีเขียวที่ส่วน Drag ดังภาพข้างต้น
  • Content ในโหมด Content นี้ เมื่อเลือกโหมดนี้แล้ว คลิกไปในส่วนของเนื้อหาที่เป็น Static แล้วจะมีกรอบสีแดงขึ้นมาล้อมรอบ  ดังภาพด้านล่าง

037

ซึ่งเมื่อเราคลิกที่กรอบสีแดง จะมีกล่องแก้ไขข้อความ Slide ออกมาด้านข้าง ดังภาพด้านล่าง เราสามารถแก้ไขข้อความที่ต้องการแล้วกด Save & Close ที่ปุ่มเขียวเพื่อดูการเปลี่ยนแปลง

038

  • Details ในโหมด Details นี้จะเป็นโหมดที่ใช้ในการปรับแต่ง Style ต่าง ๆ อาทิเช่นสีของข้อความ ปรับรูปภาพ ปรับขอบของรูปภาพ เป็นต้น การใช้งานโดยการคลิกไปที่ปุ่มที่เขียนว่า Details จากนั้นให้ลองเอาเม้าส์ไปวางในส่วนเนื้อหาที่เป็น Static หรือ Integration หากมีสีแดงล้อมกรอบขึ้นมาเหมือนตัวอย่างที่แล้วให้คลิก จะเห็นว่า มีแถบเลื่อนสไลด์ออกมา ดังภาพด้านล่าง

100-3

หากในเครื่องผู้ใช้งานแสดงไม่ตรงตามภาพก็ไม่ต้องตกใจแต่อย่างใด ให้ผู้ใช้งานลองปรับค่าต่าง ๆ แล้วลองกด Apply Changes จะเห็นการเปลี่ยนแปลง เราจะมาดูรายละเอียดกันว่ามีอะไรบ้าง จะมีด้วยกัน 4 ส่วน คือ Style, Link, Image, Icon

  • Style

    เป็นการปรับ style ของตัวหนังสือนั้น ๆ หรือรูปภาพเพื่อให้ดูมีความน่าสนใจ แต่ตามความต้องการของผู้ใช้งานมากที่สุด

– font-size จะเป็นการปรับขนาดของตัวอักษรซึ่งผู้ใช้งานสามารถลองเลื่อนแถบและกด Apply Changes เพื่อดูการเปลี่ยนแปลง

– font-family เป็นการปรับรูปแบบตัวอักษรว่าจะใช้ font ของอะไร ต้องกด Apply Changes เพื่อดูการเปลี่ยนแปลง

– border-radius เป็นการปรับความมนของขอบ ยิ่งมีค่ามากยิ่งมนมาก ต้องกด Apply Changes เพื่อดูการเปลี่ยนแปลง

– border-top-left-radius เป็นการปรับความมนของขอบบนด้านซ้าย ยิ่งมีค่ามากยิ่งมนมาก ต้องกด Apply Changes เพื่อดูการเปลี่ยนแปลง

– border-top-right-radius เป็นการปรับความมนของขอบบนด้านขวา ยิ่งมีค่ามากยิ่งมนมาก ต้องกด Apply Changes เพื่อดูการเปลี่ยนแปลง

– border-bottom-left-radius เป็นการปรับความมนของขอบล่างด้านซ้าย ยิ่งมีค่ามากยิ่งมนมาก ต้องกด Apply Changes เพื่อดูการเปลี่ยนแปลง

– border-bottom-right-radius เป็นการปรับความมนของขอบล่างด้านขวา ยิ่งมีค่ามากยิ่งมนมาก ต้องกด Apply Changes เพื่อดูการเปลี่ยนแปลง

– border-style คือลักษณะของเส้นขอบ เช่น เส้นทึบ, เส้นประ, เส้นไข่ปลา ต้องกด Apply Changes เพื่อดูการเปลี่ยนแปลง

– border-width คือขนาดของเส้นขอบ ยิ่งมากขอบยิ่งหนา ต้องกด Apply Changes เพื่อดูการเปลี่ยนแปลง

– Text color เป็นการปรับสีของ font เมื่อคลิกที่สี  ตัว font ที่แสดงในเนื้อหาจะเปลี่ยนสีเลย

– Background color เป็นการปรับสีพื้นหลังของตัวกรอบที่เราเลือกไว้อยู่

  • Link

    จะแสดงเมื่อเราคลิกไปในส่วนของ Image หรือ Button เมื่อคลิกแล้วจะมีแถบเลื่อนมาด้านข้างซึ่งในนั้นมีส่วนปรับแต่งมากยิ่งขึ้น ดังภาพ

040

ใน Link นั้นจะมีให้เลือกว่าเราจะลิงค์ข้อมูลเมื่อคลิกนั้นไปที่ไหน เช่น ลิงค์ไปที่หน้า Product ที่สร้างขึ้น หรือต้องการลิงค์ไปยังลิงค์ภายนอกก็ได้ เช่น ลิงค์ไปยังเว็บ Google ก็ให้ใส่ในช่อง Input ที่แสดงอยู่ด้านล่าง หากต้องการดูการเปลี่ยนแปลงให้กด Apply changes ก่อน

  • Icon

    จะแสดงเมื่อเราคลิกที่ส่วนเนื้อหาที่เป็น Static หรือ Integration ที่เป็น Icon เมื่อคลิกแล้วจะมีแถบเลื่อนช่อง Icon ขึ้นมาให้เลือก ดังภาพตัวอย่างด้านล่าง

041

         ผู้ใช้งานสามารถเลือก Icon ต่าง ๆ ได้ ซึ่งในระบบมี Icon ให้เลือกมากมาย เพื่อให้ตรงกับความต้องการของผู้ใช้งาน เมื่อเลือกแล้วให้กดที่ Apply Changes เพื่อดูการเปลี่ยนแปลง

ปุ่ม Clone, Reset, Remove

  • ปุ่ม 042

    ปุ่ม Clone ใช้สำหรับ Clone เนื้อหานั้น ๆ ขึ้นมาอีกแถวนึง หรืออาจใช้ Clone รูปขึ้นมาก็ได้เช่นกัน

  • ปุ่ม 043

    ปุ่ม Reset ใช้สำหรับ Reset ค่าที่ปรับไปแล้ว เช่น ปรับสีของ Font, ปรับขนาดของ Font เป็นต้น

  • ปุ่ม 044

    ปุ่ม Remove ใช้สำหรับ Remove ในส่วนเนื้อหาที่เลือก เช่นบางที ผู้ใช้งานลาก Theme static ที่ มีรูปเข้ามาวางในเนื้อหา แล้วไม่ต้องการให้มีรูป ผู้ใช้งานก็ต้องคลิกที่รูปและคลิกที่ปุ่ม Remove เพื่อลบรูปนั้นออกไป เมื่อคลิกที่ปุ่ม Remove แล้วจะมี Dialog แสดงขึ้นเพื่อให้ผู้ใช้งานยืนยันว่าต้องการลบ หากต้องการลบให้คลิกที่ปุ่ม 045  ได้เลย แต่หากผู้ใช้งานไม่ต้องการลบ ให้เลือกปุ่ม  046  แทน

ตรวจสอบการแสดงผลในหลายหน้าจอ

         ผู้ใช้งานสามารถตรวจดูการแสดงผลในหน้าจอต่าง ๆ ได้ โดยการคลิกที่ปุ่มด้านบน ดังภาพตัวอย่าง  047   จากภาพจะเห็นได้ว่า การแสดงผลในหน้าเนื้อหานั้นแสดงผลในขนาดหน้าจอ Desktop PC อยู่ หากเราคลิกที่หน้าจอที่เป็นรูป Tablet หรือ Mobile ผู้ใช้งานจะพบว่าหน้าจอในส่วนการแสดงผลเนื้อหาจะแสดงเล็กลงตามลำดับ และเนื้อหาก็มีการแสดงผลที่ปรับเปลี่ยนรูปแบบอัตโนมัติ เราคิดมาเพื่อประสบการณ์ในการใช้งานเว็บไซต์ของผู้ใช้งานให้ไม่รู้สึกขัด และมีการใช้งานที่ลื่นไหล ไม่ว่าจะเป็นการเข้าดูบน Tablet หรือ Mobile ก็จะแสดงผลที่สวยงาม

048

ปรับแต่งหน้าอื่น ๆ นอกเหนือจากหน้าแรก

         เมื่อผู้ใช้งานปรับแต่งหน้าแรกเรียบร้อยแล้ว และต้องการปรับแต่งหน้าอื่น ๆ สามารถทำได้โดยการกดที่ปุ่ม 049  เมื่อกดย้อนกลับไปที่การปรับแต่งหน้าอื่น ๆ ตำแหน่งของปุ่มอยู่บริเวณเมนูด้านขวา ด้านบน ดังภาพ

050

เมื่อกดย้อนกลับมาเรียบร้อยแล้ว จะแสดงเมนูหน้าอื่น ๆ ให้ปรับแต่ง การปรับแต่งหน้าอื่น ๆ จะแตกต่างจากการปรับแต่งหน้าแรก ซึ่งทางผู้พัฒนาได้เตรียม Theme ไว้ให้ผู้ใช้งานเลือก ซึ่งจะคล้าย ๆ กับการปรับแต่งในส่วน Dynamic ที่ได้กล่าวไว้ด้านบน แต่เมื่อลาก Theme ในส่วนหน้าแต่ละหน้าไปใส่ในเนื้อหา เนื้อหาจะแสดงอยู่ระหว่าง Header และ Footer ให้อัตโนมัติ ซึ่ง Header และ Footer ที่นำมาแสดงนั้น ได้มาจากการปรับแต่งหน้า Home นั่นเอง

Header จะถูกมองว่าสิ่งที่อยู่เหนือ Header ของ Dynamic ในหน้า Home นั้นเป็น Header หมด เช่นเราเอาเนื้อหาที่เป็น Static ไปใส่อยู่เหนือ Header ที่เป็น Dynamic ค่าที่เป็น Static ก็จะถูกมองว่าเป็น Header ด้วย

Footer จะกลับกันกับ Header คือ สิ่งที่อยู่ด้านใต้ Footer ของ Dynamic ในหน้า Home นั้น จะถูกมองว่าเป็น Footer หมด

  • การปรับแต่งหน้า Product, Search, Cart, Checkout, Blog, Faq, Contact, Sitemap

    ตัวอย่างการปรับแต่งหน้า Product ให้ผู้ใช้งานคลิกไปที่เมนู Product เมื่อคลิกแล้วจะเห็นแถบเมนูด้านข้างดังรูป 051ผู้ใช้งานสามารถลากไปใส่ในส่วนเนื้อหาได้เลย จากรูปที่แสดงนั้นมีให้เลือกอยู่ 2 Theme ผู้ใช้งานสามารถลากแล้วไปวางไว้ในส่วนเนื้อหาได้เลย แต่ไม่ว่าจะวางตำแหน่งใด เนื้อหาในส่วนนี้จะอยู่ระหว่าง Header และ Footer ให้เองเสมอ

    ส่วนการปรับแต่งหน้าอื่น ๆ อาทิเช่น Search, Cart, Checkout, Blog, Faq, Contact, Sitemap ก็มีการทำงานไม่ต่างจากการปรับหน้า Product

Rate This Article

(43 out of 90 people found this article helpful)

Leave A Comment?