Get In Touch
[email protected]
Th: +6620263180

ออกแบบเว็บไซต์ง่ายๆ ด้วย WebFlow

Webflow เป็นเครื่องออกแบบเว็บไซต์ที่ใช้งานบนเว็บเบราว์เซอร์มีความสามารถตั้งแต่สร้างโครงสร้างไซต์ ออกแบบรูปลักษณ์ เพิ่มเนื้อหา การโต้ตอบ ภาพเคลื่อนไหว โดยใช้แค่การ Drag and Drop element  (เมาส์ลากและวาง องค์ประกอบ) นอกจากนี้ Webflow ยังสร้างโค้ค HTML CSS JavaScript จากการที่คุณออกแบบเว็บไซต์พร้อมสามารถ Export ไฟล์ออกมาแก้ไขได้อีกด้วย

เริ่มต้นออกแบบเว็บไซต์

เมื่อคุณทำการ Login และเข้ามาที่หน้า Dashboard เรียบร้อย จะแสดง All Sites หรือไซต์ทั้งหมดที่คุณออกแบบไว้ สามารถคลิกไปที่  New Site เพื่อสร้างหน้าการออกแบบขึ้นใหม่ โดยคุณสามารถเลือก Blank Site (หน้าว่าง) หรือพรีเซ็ตอื่นๆ ได้โดยจะมีทั้งแบบใช้งานได้ฟรีและแบบที่ต้องซื้อเพื่อใช้งาน

องค์ประกอบหน้าการออกแบบ

แนะส่วนต่างๆ ที่อยู่ภายในหน้าการอออกแบบเว็บไซต์ว่าส่วนไหนมีเครื่องมืออะไรบ้างเพื่อให้คุณใช้งานโปรแกรมได้ง่ายขึ้น

The left toolbar : แถบเครื่องมือด้านซ้าย

มีชุดลิงค์และเครื่องมือสำหรับจัดโครงสร้างโปรเจ็กต์เว็บของคุณได้ โดยเมนูเครื่องมือจะแสดงเป็น Icon 

  • Main menu
  • Add elements panel
  • Symbols panel
  • Navigator panel
  • Pages panel
  • CMS panel
  • Ecommerce panel
  • Assets panel
  • Settings panel
  • Audits panel
  • Find anything search tool
  • Video tutorials panel
  • Help settings

The Canvas : พื้นที่การออกแบบ

ถ้าให้แปลเป็นไทยส่วนนี้จะเรียกว่า ผ้าใบ เป็นพื้นที่ในการออกแบบ คุณสามารถเลือก ย้าย elements (องค์ประกอบ) และแก้ไขเนื้อหาบนหน้าได้โดยตรง

The top bar : แถบด้านบน

แถบด้านบนมุมซ้าย

  • Page indicator สำหรับเลือกหน้า Page ที่ต้องการออกแบบ
  • Preview สลับไปมาระหว่างโหมดแสดงตัวอย่างและโหมดการออกแบบ ช่วยให้คุณเห็นว่าโปรเจ็กต์ของคุณจะเป็นอย่างไรเมื่อเผยแพร่

แถบด้านบนส่วนกลาง

  • Breakpoints buttons ทำให้คุณสามารถสลับระหว่างเบรกพอยต์ หรือปรับขนาดหน้าการออกแบบตามขนาดอุปกรณ์ต่างๆ เพื่อดูและแก้ไขการออกแบบของคุณให้รองรับการใช้งานบนหน้าจอทุกขนาด

แถบด้านบนมุมขวา

  • Undo and Redo
  • Save
  • ExportsCode
  • Share

ExportsCode

อีก 1 ฟีเจอร์ที่น่าสนใจของ Webflow ที่เมื่อคุณออกแบบเว็บไซต์เสร็จเรียบร้อย คุณสามารถ Exports งานของคุณออกมาเป็นรูปแบบ HTML CSS และ JavaScript ได้อีกด้วย แต่การใช้งานฟีเจอร์นี้จำเป็นต้องซื้อเท่านั้นถึงจะสามารถใช้งานได้

ไฟล์ที่ Webflow Exports ออกมามีอะไรบ้าง

ไฟล์ ZIP ที่ดาวน์โหลดประกอบด้วยหน้า สไตล์ สคริปต์ และรูปภาพทั้งหมดของไซต์:

  • โฟลเดอร์ CSS ที่มีสไตล์ทั้งหมดของคุณรวมอยู่ในไฟล์ .css 3 ไฟล์:
      • ไฟล์ CSS ที่มีสไตล์ที่กำหนดเองทั้งหมดของเว็บไซต์
      • Webflow.css ซึ่งมีรูปแบบพื้นฐานทั่วไปสำหรับระบบเค้าโครง Webflow ตลอดจนส่วนประกอบทั้งหมด เช่น แถบนำทาง แถบเลื่อน และแท็บ
      • Normalize.css ซึ่งทำให้เบราว์เซอร์แสดงองค์ประกอบทั้งหมดอย่างสม่ำเสมอและสอดคล้องกับมาตรฐานสมัยใหม่ มันกำหนดเป้าหมายเฉพาะสไตล์ที่ต้องการการทำให้เป็นมาตรฐานเท่านั้น
  • โฟลเดอร์ JS ที่มีไฟล์ Webflow.js ไฟล์นี้มี JavaScript ทั้งหมดที่จำเป็นในการใช้งานของหน้าเว็บของคุณทำงานได้อย่างถูกต้อง เช่น แบบฟอร์ม แถบนำทาง แถบเลื่อน แท็บ และการโต้ตอบนั้นอาศัย webflow.js ถ้าคุณลบไฟล์นี้ เพจของคุณอาจจะทำงานผิดปกติ
  • โฟลเดอร์รูปภาพที่มีรูปภาพทั้งหมดที่คุณอัปโหลดเพื่อตกแต่งหน้าเว็บไซต์
  • ไฟล์ .html สำหรับหน้าเว็บไซต์ของคุณทั้งหมด (รวมถึงหน้าเทมเพลตคอลเลกชันที่ไม่มีเนื้อหา)

Share

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

The bottom navigation breadcrumb bar : แถบนำทางด้านล่าง

แถบปุ่มที่ใช้แสดงลำดับชั้นของ Eelement ซึ่งใน 1 Eelement อาจจะมี Element ย่อยๆอยู่ภายในนั้น เราสร้างสามารถเลือก Element ภายในได้โดยการคลิกที่ breadcrumb bar ได้เลย

The right panels : แถบด้านขวา

เป็นแทบที่เอาไว้ใช้กำหนด หรือตกแต่ง Element ซึ่งประกอบด้วย 4 ส่วนหลักๆ

    • Style panel (S)
    • Element settings panel (D)
    • Style manager (G)
    • Interactions panel (H)

Style panel ปุ่มลัด : S

ให้คุณเข้าถึงคุณสมบัติ CSS ทั้งหมดของ Element ที่เลือก และกำหนดค่า CSS ต่างๆเพื่อตกแต่งรูปร่างของ Element ได้ พร้อมกับดูการเปลี่ยนแปลงสไตล์ของ Element ที่ Canvas ได้ทันที่

Element settings panel ปุ่มลัด : D

ใช้สำหรับการตั้งค่าต่างๆ ของ Element ซึ่งจะมีความแตกต่างกันออกไป

Style Manager ปุ่มลัด : G

แสดงรายการคลาสของ Element และสามารถเปลี่ยนหรือแก้ไขชื่อคลาสได้

Interactions panel — shortcut: H

ใช้สำหรับกำหนดการตอบโต้หรือ Action ของ Element  อย่างเช่นหากคุณลาก Element button มาใช้แต่ไม่ได้กำหนดการตอบโต้ไว้ใน button เมื่อคุณลองคลิกใช้งานก็จะไม่มีอะไรเกิดขึ้น

Interactions สามารถกำหนด Action ให้กับปุ่มได้ว่า เมื่อคลิกเเล้วต้องการให้เกิดอะไรขึ้นภายในเว็บไซต์ อย่างเช่น เมื่อกดปุ่มจะกำหนดให้เว็บไซต์ทำการ refresh เป็นต้น

Multiple-user collaboration : การทำงานร่วมกับทีม

ถ้าคุณทำการออกแบบเว็บไซต์กันกับทีม เป็นไปไม่ได้ที่หลายคนจะเข้าถึงโปรเจ็กต์ Webflow เดียวกันใน 1 หน้าได้ แต่สามารถใช้โหมด Editor ช่วยให้คนในทีมสามารถแก้ไขเนื้อหาใน Element ไปพร้อมกับการออกแบบได้ 

สรุป : เครื่องมือสำหรับออกแบบเว็บไซต์ Webflow

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

เราใช้คุกกี้เพื่อประสบการณ์การใช้งานที่ดีที่สุดบนเว็บไซต์