ออกแบบหน้าเว็บด้วยหน้าออกแบบ

หน้าออกแบบของ Anasaki Studio ทำงานคล้าย Figma: สิ่งที่เห็นบนผืนงานคือหน้าเว็บจริงทุกพิกเซล

ส่วนประกอบของหน้าจอ

• Layers (ซ้าย) — โครงสร้างของหน้า ค้นหาชั้นได้ และกดยุบ/ขยายทั้งหมด
• Assets (ซ้าย) — ส่วนสำเร็จรูป (หัวเว็บ บทความล่าสุด ฯลฯ) และบล็อกต่าง ๆ ลากลงผืนงานได้
• Design / Content (ขวา) — ปรับขนาด สี ตัวอักษร มุมโค้ง เงา และข้อมูลของชิ้นที่เลือก

หน้าเว็บ แม่แบบ และส่วนที่ใช้ซ้ำ

• หน้าเว็บ — 1 หน้าต่อ 1 ที่อยู่ เช่น หน้าแรก
• แม่แบบ — หน้าตาที่ใช้กับบทความทุกเรื่อง ข้อความเป็นช่องว่างรอข้อมูล เช่น {{post.title}}
• ส่วนที่ใช้ซ้ำ — เช่น ส่วนหัวและส่วนท้ายเว็บ แก้ที่เดียวทุกหน้าเปลี่ยนตาม

เทคนิคที่ใช้บ่อย

• Auto layout — จัดของในกล่องเป็นแถวหรือคอลัมน์อัตโนมัติ ตั้ง คอลัมน์ เพื่อทำเป็นตารางการ์ด
• รายการบทความ — เลือกรูปแบบการ์ดสำเร็จรูปได้ 4 แบบ ปรับการ์ดใบแรกแล้วใบอื่นเปลี่ยนตาม
• ข้อความหลายสี — ดับเบิลคลิกข้อความ เลือกคำ แล้วใช้แถบเครื่องมือทำตัวหนา เปลี่ยนสี หรือใส่ลิงก์
• ประวัติเวอร์ชัน — ปุ่ม 🕘 มุมขวาบน ย้อนไปเวอร์ชันที่บันทึกไว้ได้

สีและฟอนต์ของเว็บ (ธีม)

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

ปรับแยกสำหรับมือถือ

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