สร้างเว็บไซต์ WordPress ตั้งแต่โครงสร้างจนพร้อมใช้งาน
เรียนรู้วิธีวางโครงสร้างเว็บไซต์ ตั้งค่า Astra Theme ออกแบบด้วย Elementor ทำ Responsive และเตรียมเว็บไซต์ให้พร้อมเปิดใช้งานจริง
ก่อนออกแบบ ให้เริ่มจากโครงสร้าง
เว็บไซต์ที่ดีไม่ควรเริ่มจากเลือกสีหรือ Widget แต่ควรเริ่มจากวัตถุประสงค์ เนื้อหา และเส้นทางของผู้ใช้งาน
เป้าหมายเว็บไซต์
ต้องการให้ผู้ใช้งานอ่านข้อมูล, ติดต่อเรา, จองบริการ, ซื้อสินค้า หรือเรียนรู้เนื้อหาอะไร
วาง Sitemap
กำหนดว่าต้องมีหน้าอะไรบ้าง และแต่ละหน้าควรเชื่อมโยงกันอย่างไร
วาง Layout
วางลำดับ Hero, Content, Benefits, CTA และ Footer ก่อนเริ่มออกแบบจริง
รู้จักผู้ใช้งาน
ออกแบบข้อความ ปุ่ม และโครงสร้าง ให้เหมาะกับคนที่เข้ามาใช้งานจริง
เตรียม Content
เตรียมหัวข้อ ข้อความ รูปภาพ โลโก้ และข้อมูลติดต่อ ก่อนเริ่มสร้างหน้า
กำหนด CTA
ทุกหน้าควรมีสิ่งที่ต้องการ ให้ผู้ใช้งานทำต่ออย่างชัดเจน
ขั้นตอนสร้างเว็บไซต์
เรียงลำดับตั้งแต่ตั้งค่า Theme ไปจนถึงสร้างหน้าและเปิดเว็บไซต์จริง
สร้างหน้าที่จำเป็น
สร้างหน้าแรก เกี่ยวกับเรา บริการ ติดต่อเรา และหน้าบทความ ก่อนลงรายละเอียดการออกแบบ
วาง Design System
กำหนด Font, Heading, สีหลัก, สีปุ่ม, Border Radius และระยะห่างให้เป็นมาตรฐานเดียวกัน
ปรับ Tablet และ Mobile
ตรวจขนาดตัวอักษร, Column, Padding, รูปภาพ และปุ่มทุก Section
ตรวจสอบก่อนเปิดเว็บไซต์
ทดสอบลิงก์, Form, Email, HTTPS, SEO, Mobile และความเร็ว
เว็บทั่วไปควรมีหน้าอะไรบ้าง?
ไม่จำเป็นต้องสร้างหลายสิบหน้า ให้เริ่มจากหน้าหลักที่ผู้ใช้งานต้องใช้จริง แล้วค่อยเพิ่มเนื้อหาในภายหลัง
Astra กับ Elementor ใช้อะไรทำอะไร?
แยกหน้าที่ให้ชัด จะทำให้สร้างเว็บง่ายขึ้น และลดการตั้งค่าซ้ำกัน
Astra Theme
ใช้ควบคุมโครงสร้างระดับเว็บไซต์ เช่น Header, Footer, Global Layout และ Typography
Elementor
ใช้ออกแบบเนื้อหาแต่ละหน้า ตั้งแต่ Hero, Cards, Sections, CTA และ Responsive
Astra + Elementor
ใช้ Astra ดูแลโครงสร้างระดับเว็บไซต์ และใช้ Elementor ออกแบบเนื้อหาภายในหน้า
เว็บที่ดีต้องใช้งานได้ทุกหน้าจอ
อย่าดูเฉพาะ Desktop หลังสร้างแต่ละ Section ควรตรวจ Tablet และ Mobile เสมอ
เช็กเว็บก่อน Publish
ติ๊กสิ่งที่ตรวจสอบแล้ว ระบบจะคำนวณความพร้อมของเว็บไซต์ให้อัตโนมัติ
ทำ Checklist ให้ครบ ก่อนเปิดเว็บไซต์ให้ผู้ใช้งานจริง
คำถามเกี่ยวกับการสร้างเว็บไซต์
พร้อมเริ่มออกแบบด้วย Elementor แล้วหรือยัง?
ขั้นต่อไปเรียนรู้ Container, Widget, Spacing และ Responsive เพื่อสร้างหน้าเว็บไซต์จริงด้วยตัวเอง
เริ่มเรียน Elementor →