หลักสูตร Web Design with Figma and WordPress เป็นการอบรมออกแบบหน้าเว็บใน Figma ด้วย Auto Layout, Components และ Prototype แล้วสร้างเป็นเว็บจริงบน WordPress ด้วย Elementor แบบลากวาง เหมาะกับผู้เริ่มต้น UX/UI Designer และผู้ดูแลเว็บไซต์ขององค์กร จบแล้วได้เว็บไซต์ 3 หน้าตามแบบใน Figma
การมีเว็บไซต์ที่ดูดีและใช้งานง่ายไม่จำเป็นต้องเริ่มจากการเขียนโค้ดเสมอไป การออกแบบหน้าเว็บใน Figma ก่อน ช่วยให้ทีมเห็นภาพตรงกันทั้งโครงหน้า สี และตัวอักษร จากนั้นนำงานไปสร้างเป็นเว็บจริงด้วย WordPress ร่วมกับ Elementor ซึ่งเป็นเครื่องมือจัดหน้าแบบลากวางที่ใช้กันแพร่หลาย ผู้ดูแลเว็บจึงแก้ไขเนื้อหาต่อได้เองโดยไม่ต้องพึ่งนักพัฒนาทุกครั้ง
หลักสูตรนี้ปูพื้นฐานการออกแบบเว็บที่ดี แล้วพาผู้เรียนออกแบบหน้าเว็บใน Figma ด้วย Layout Grid, Auto Layout, Styles, Variables, Components และ Prototype จากนั้นติดตั้ง WordPress 7.1 บนเครื่อง สร้างเพจและเมนู ใช้ Elementor รุ่นปัจจุบันที่จัดสไตล์ด้วย Variables และ Classes สร้างหน้าเว็บให้ตรงกับแบบใน Figma และแสดงผลดีทุกขนาดหน้าจอ แล้วปิดท้ายด้วย Workshop สร้างเว็บไซต์ 3 หน้าจากไฟล์ Figma (อบรม 1 วัน 6 ชั่วโมง ระดับ Beginner)
รายละเอียดหลักสูตร
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตรออกแบบเว็บด้วย Figma ร่วมกับ WordPress อบรม 1 วัน 6 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Beginner เนื้อหาอัปเดตเป็น WordPress 7.1 และ Elementor V4 ที่จัดสไตล์ด้วย Variables, Classes และ Components ฝั่ง Figma ใช้ Auto Layout, Variables และ Components ตามหน้าจอปัจจุบัน ทุก Lab ใช้ Elementor รุ่นฟรี ส่วนความสามารถของ Elementor Pro สาธิตเป็นภาพรวม ผู้เรียนใช้บัญชี Figma ของตนเองซึ่งแผน Starter แบบฟรีเพียงพอ และจะได้เอกสารประกอบการอบรม ไฟล์ Figma ตัวอย่าง และไฟล์ Template ของ Elementor กลับไปใช้งานต่อ
Day 1: จาก Figma สู่เว็บ WordPress ด้วย Elementor
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
Elementor คือปลั๊กอิน Page Builder ของ WordPress ที่ให้ออกแบบหน้าเว็บด้วยการลากวางบนหน้าจอที่เห็นผลทันที รุ่นปัจจุบันคือ Editor V4 ที่จัดสไตล์ด้วย Variables สำหรับสีและฟอนต์ และ Classes สำหรับสไตล์ที่ใช้ซ้ำ ทำให้ทั้งเว็บดูสม่ำเสมอและแก้ได้จากจุดเดียว บันทึกส่วนที่ใช้บ่อยเป็น Template หรือ Components และสลับดูการแสดงผลบนเดสก์ท็อป แท็บเล็ต และมือถือเพื่อปรับแต่ละขนาดจอได้ หลักสูตรนี้ใช้ Elementor รุ่นฟรีทุก Lab
Component คือชิ้นงานต้นแบบที่สร้างครั้งเดียวแล้วนำไปใช้ซ้ำได้หลายจุด เช่น ปุ่ม การ์ด หรือเมนู สำเนาที่นำไปวางเรียกว่า Instance เมื่อแก้ Main Component ทุก Instance จะเปลี่ยนตาม แต่ยังปรับข้อความหรือสีเฉพาะจุดได้ ใช้คู่กับ Styles และ Variables ของสีและตัวอักษรจะทำให้ทั้งเว็บดูสม่ำเสมอ แก้ไขได้เร็ว และนำไปสร้างเป็น Classes และ Components ใน Elementor ได้ตรงกัน
เริ่มจากส่งออกรูปภาพและไอคอนจาก Figma และจดค่าสี ฟอนต์ และระยะห่างเป็นแผ่นสเปก จากนั้นตั้ง Variables ของสีและฟอนต์และสร้าง Classes ใน Elementor ให้ตรงกับดีไซน์ สร้างหน้าใหม่ วางโครงทีละส่วนด้วย Container ใส่หัวข้อ ข้อความ รูปภาพ และปุ่ม แล้วปรับระยะให้ตรงกับไฟล์ต้นแบบ สุดท้ายตรวจและปรับการแสดงผลในโหมดแท็บเล็ตและมือถือ หลักสูตรนี้ฝึกตามขั้นตอนนี้จนได้เว็บ 3 หน้า
เหมาะกับผู้เริ่มต้นที่อยากออกแบบและสร้างเว็บไซต์เอง UX/UI Designer ที่อยากนำงานจาก Figma ขึ้นเว็บจริง เจ้าของธุรกิจ และผู้ดูแลเว็บไซต์ขององค์กร ไม่ต้องมีพื้นฐานการเขียนโค้ดหรือการออกแบบมาก่อน ขอเพียงใช้คอมพิวเตอร์ได้คล่อง และมีบัญชี Figma ซึ่งแผน Starter แบบฟรีเพียงพอ
ออกแบบหน้าเว็บใน Figma ตามหลักการที่ดี ใช้ Auto Layout, Styles, Variables และ Components ทำ Prototype เชื่อมหน้า ติดตั้ง WordPress 7.1 บนเครื่องตัวเอง สร้างเพจและเมนู และใช้ Elementor สร้างหน้าเว็บให้ตรงกับดีไซน์และแสดงผลดีบนทุกขนาดหน้าจอ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้
ได้ สถาบันไอทีจีเนียสรับจัดอบรมแบบ In-house ให้ทีมขององค์กร ปรับตัวอย่างให้ตรงกับงานของทีม เช่น ออกแบบและสร้างหน้าเว็บขององค์กรหรือโครงการที่ทีมดูแลอยู่ และจัดได้ทั้งแบบ Onsite และ Online สอบถามรายละเอียดและขอใบเสนอราคาได้ทางช่องทางติดต่อของสถาบัน
งานออกแบบเว็บวันนี้ต้องสวย รองรับทุกขนาดจอ โหลดเร็ว และให้ทีมแก้ไขต่อได้ง่าย การเขียน CSS เองทั้งหมดมักจบที่ไฟล์ยาวที่ไม่มีใครกล้าแก้ ส่วน CSS Framework แบบมี Component สำเร็จรูปก็ทำให้เว็บหน้าตาคล้ายกันและปรับแต่งยาก Tailwind CSS จึงได้รับความนิยมสูง…
เว็บไซต์ปัจจุบันต้องแสดงผลได้ดีทั้งบนมือถือ แท็บเล็ต และเดสก์ท็อป การเขียน CSS ให้ Responsive ทุกขนาดจอเองตั้งแต่ต้นต้องใช้เวลาเรียนรู้นาน Bootstrap 5 เป็น CSS Framework ที่ช่วยให้วางหน้าเว็บแบบ Responsive ได้เร็วด้วย Grid System, Utility Class และ Component…
เว็บไซต์ยุคนี้ต้องดูดีบนทุกขนาดหน้าจอ โหลดเร็ว และใช้งานได้กับทุกคน แต่หลายทีมยังออกแบบหน้าเว็บแบบภาพนิ่งแล้วส่งให้นักพัฒนาไปเดาเอง ระยะห่าง สี และขนาดตัวอักษรจึงไม่ตรงกับที่ออกแบบ หน้าเว็บพังเมื่อเปิดบนมือถือ และต้องแก้ไปมาหลายรอบ การออกแบบใน Figma…
