วางโครงสร้างเว็บไซต์ด้วย Astra Theme
เรียนรู้วิธีตั้งค่า Header, Footer, Logo, Layout, Typography และ Responsive เพื่อเตรียมโครงสร้างเว็บไซต์ให้พร้อม ก่อนเริ่มออกแบบเนื้อหาด้วย Elementor
Astra Theme ใช้ทำอะไร?
ให้นึกว่า Astra เป็นโครงสร้างระดับเว็บไซต์ ส่วน Elementor ใช้สำหรับออกแบบเนื้อหาภายในแต่ละหน้า
โครงสร้างเว็บไซต์
ควบคุม Header, Footer, Container, Sidebar และ Layout ระดับเว็บไซต์
Global Design
กำหนดสีหลัก Font, Heading และองค์ประกอบพื้นฐาน ให้ทั้งเว็บไซต์ใช้มาตรฐานเดียวกัน
Responsive
ปรับ Header, Menu, Logo และองค์ประกอบต่าง ๆ ให้เหมาะกับ Desktop และ Mobile
ตั้งค่า Astra ตามลำดับนี้
ไม่จำเป็นต้องปรับทุกเมนูใน Customizer ให้เริ่มจากสิ่งที่มีผลกับทั้งเว็บไซต์ก่อน
ตั้ง Logo และ Site Icon
เพิ่ม Logo หลักของเว็บไซต์, Logo สำหรับ Retina และ Favicon ให้พร้อมก่อนสร้าง Header
กำหนด Font และสีหลัก
ตั้ง Typography และ Color Palette ก่อนออกแบบหน้า เพื่อไม่ต้องแก้สี และ Font ซ้ำทีละ Section
สร้าง Header
วาง Logo, Primary Menu, Search และปุ่ม CTA พร้อมตรวจ Tablet และ Mobile
สร้าง Footer
แบ่ง Widget, Navigation, Contact และ Copyright ให้อยู่ในโครงสร้างที่อ่านง่าย
ตั้ง Container และ Page Layout
กำหนด Content Width, Full Width, Sidebar และ Page Title ให้เหมาะกับเว็บไซต์
ตรวจทุก Device
ตรวจ Logo, Menu, Header Height, Footer และ Layout บน Desktop, Tablet และ Mobile
ส่วนสำคัญของ Astra Customizer
กดเลือกหัวข้อเพื่อดูว่า แต่ละส่วนควรใช้ตั้งค่าอะไร
Header Builder
ใช้สร้างส่วนบนสุดของเว็บไซต์ และ Navigation หลักที่แสดงทุกหน้า
Footer Builder
ใช้จัดข้อมูลด้านล่างเว็บไซต์ เช่น Branding, Navigation, Contact และ Copyright
Page Layout
กำหนดความกว้างของเนื้อหา Sidebar และพื้นที่ที่ Elementor สามารถใช้งานได้
Mobile Experience
Astra มีการตั้งค่าหลายส่วน ที่สามารถแยก Desktop, Tablet และ Mobile ได้
ตั้ง Global ก่อนออกแบบหน้า
การตั้ง Global Style ก่อน จะช่วยให้ทุกหน้าใช้มาตรฐานเดียวกัน และลดเวลาการแก้สี Font และ Layout ซ้ำไปมา
Typography
กำหนด Body Font, Heading Font, Size และ Line Height
Global Colors
กำหนด Primary, Text, Background และ Accent Color
Container Width
กำหนดความกว้างมาตรฐาน เพื่อให้ Layout ดูสม่ำเสมอ
Button Style
ตั้งสี ปุ่ม Border Radius และ Typography ให้เป็นระบบเดียวกัน
Heading Hierarchy
กำหนด H1–H6 ให้มีลำดับและขนาดที่ชัดเจน
Astra กับ Elementor ต่างกันอย่างไร?
ใช้ทั้งสองอย่างร่วมกันได้ แต่ควรแยกหน้าที่ให้ชัดเจน
Astra
ดูแลโครงสร้างระดับเว็บไซต์ และส่วนที่ใช้เหมือนกันทุกหน้า
Elementor
ใช้ออกแบบรายละเอียด และเนื้อหาภายในแต่ละหน้า
อย่าตั้งค่า Astra แค่ Desktop
Header และ Footer เป็นส่วนที่ปรากฏเกือบทุกหน้า ถ้าตั้ง Mobile ไม่ดี จะกระทบทั้งเว็บไซต์
เช็กความพร้อมของ Astra
ติ๊กสิ่งที่ตั้งค่าเรียบร้อยแล้ว ระบบจะคำนวณ Progress ให้อัตโนมัติ
ตั้งค่าโครงสร้างให้ครบ ก่อนเริ่มออกแบบหน้าด้วย Elementor
คำถามเกี่ยวกับ Astra Theme
ตั้ง Astra พร้อมแล้ว เริ่มออกแบบด้วย Elementor
ขั้นต่อไปเรียนรู้ Container, Widget, Spacing และ Responsive เพื่อสร้างหน้าเว็บไซต์จริง
เริ่มเรียน Elementor →