Elementor ELEMENTOR PAGE BUILDER

ออกแบบเว็บไซต์ด้วย Elementor แบบเป็นระบบ

เรียนรู้ Elementor ตั้งแต่หน้าตา Editor, Container, Widget, Flexbox, Padding, Margin ไปจนถึง Responsive เพื่อสร้างหน้าเว็บไซต์ที่สวยและดูแลง่าย

เริ่มเรียน Elementor → ดู Elementor Checklist
✓ Container & Flexbox ✓ Widgets ✓ Responsive
Container
01 · Editor รู้จักเครื่องมือ 02 · Build วิธีสร้างหน้าเว็บ 03 · Responsive Desktop / Mobile 04 · Practice แบบฝึกหัด
ELEMENTOR 101

Elementor ใช้ทำอะไร?

Elementor คือ Page Builder ที่ช่วยให้เราออกแบบเนื้อหาภายในหน้า WordPress โดยจัดวางองค์ประกอบแบบ Visual

01

Visual Editor

แก้ไขหน้าเว็บไซต์ พร้อมเห็นผลลัพธ์ขณะออกแบบ โดยไม่ต้องสลับไปดูหน้าเว็บตลอดเวลา

02

Container

ใช้ Container เป็นโครงสร้างหลักสำหรับจัดวาง Widget และสร้าง Layout ด้วย Flexbox

03

Widgets

เพิ่ม Heading, Text, Image, Button, Icon และองค์ประกอบอื่น ๆ ลงในหน้าเว็บไซต์

ELEMENTOR WORKFLOW

สร้างหน้า Elementor ตามลำดับนี้

เริ่มจากโครงสร้างก่อน แล้วค่อยตกแต่งรายละเอียด จะช่วยให้หน้าเว็บแก้ง่ายและ Responsive ง่ายกว่า

01
STRUCTURE

วาง Section และ Container

แบ่งหน้าออกเป็น Hero, Benefits, Services, Content, CTA และ Footer ก่อนเริ่มตกแต่งรายละเอียด

→
02
FLEXBOX

กำหนด Direction และ Alignment

เลือก Row หรือ Column และกำหนด Justify Content, Align Items และ Gap ให้เหมาะกับ Layout

→
03
WIDGETS

เพิ่มเนื้อหา

เพิ่ม Heading, Paragraph, Image, Button และ Widget ที่จำเป็นลงใน Container

→
04
SPACING

ตั้ง Padding, Gap และ Width

ใช้ Padding สำหรับพื้นที่ภายใน, Gap สำหรับระยะระหว่างองค์ประกอบ และหลีกเลี่ยง Margin ที่ซับซ้อนเกินไป

→
05
DESIGN

ปรับ Style

กำหนด Font, Color, Background, Border, Radius และ Shadow หลังจาก Layout ลงตัวแล้ว

→
06
RESPONSIVE

ตรวจ Tablet และ Mobile

ปรับ Direction, Width, Font Size, Padding และ Gap ให้เหมาะกับแต่ละขนาดหน้าจอ

✓
EDITOR BASICS

รู้จักส่วนหลักของ Elementor

กดเลือกหัวข้อด้านล่าง เพื่อดูหน้าที่ของแต่ละส่วน

LAYOUT

Container

Container คือกรอบหลัก สำหรับจัดกลุ่ม Widget และกำหนด Layout ด้วย Flexbox

01
Direction Row หรือ Column
02
Justify Content จัดตำแหน่งตามแนวหลัก
03
Align Items จัดตำแหน่งตามแนวขวาง
04
Gap กำหนดระยะห่างระหว่าง Widget
CONTENT

Widgets

Widget คือองค์ประกอบ ที่นำมาวางภายใน Container เพื่อสร้างเนื้อหาของหน้า

H
Heading H1–H6 และหัวข้อ Section
T
Text เนื้อหา Paragraph
IMG
Image รูปภาพและ Alt Text
CTA
Button ปุ่มสำหรับ Call to Action
DESIGN

Style

ใช้กำหนดรูปลักษณ์ ของ Widget หรือ Container หลังวางโครงสร้างเสร็จแล้ว

C
Colors Text, Background และ Accent
Aa
Typography Font, Size และ Line Height
R
Border Radius ความโค้งของ Card และ Button
S
Shadow เพิ่ม Depth อย่างพอดี
ADVANCED

Advanced

ใช้ควบคุมระยะห่าง, Responsive และค่าขั้นสูง ขององค์ประกอบ

P
Padding พื้นที่ภายในองค์ประกอบ
M
Margin พื้นที่ภายนอกองค์ประกอบ
R
Responsive Hide / Show ตาม Device
ID
CSS ID / Class ใช้สำหรับ Anchor และ Custom CSS
FLEXBOX

เข้าใจ Container แล้ว Elementor จะง่ายขึ้นมาก

Layout ของ Elementor รุ่นใหม่ ใช้แนวคิด Flexbox ดังนั้นไม่จำเป็นต้องจำทุกค่า แต่ควรเข้าใจ Direction, Alignment และ Gap

Row = เรียงแนวนอน
Column = เรียงแนวตั้ง
Justify = จัดตาม Direction
Align = จัดแกนตรงข้าม
Gap = ระยะห่างระหว่าง Widget
Container Demo FLEXBOX
Widget 01
Widget 02
Widget 03
Direction Row
Justify Start
Gap 10px
SPACING SYSTEM

Padding, Margin และ Gap ต่างกันอย่างไร?

การใช้ Spacing ให้ถูกประเภท จะช่วยให้ Layout ดูเป็นระบบ และแก้ Responsive ง่ายขึ้น

Padding
Content

Padding

ระยะภายใน Container หรือ Widget ระหว่างขอบกับเนื้อหาด้านใน

Margin
Widget

Margin

ระยะภายนอกองค์ประกอบ ใช้เมื่อต้องการแยก Widget ออกจากสิ่งรอบข้าง

A
B

Gap

ระยะระหว่าง Widget ภายใน Container เหมาะกับการจัด Layout ด้วย Flexbox

RESPONSIVE DESIGN

อย่ารอจนสร้างเสร็จทั้งหน้าแล้วค่อยทำ Mobile

หลังสร้างแต่ละ Section ให้เปิด Tablet และ Mobile ตรวจ Layout ทันที จะลดงานแก้ย้อนหลังได้มาก

ตรวจ Container Direction
ตรวจ Heading Size
ตรวจ Width ของ Widget
ลด Padding บน Mobile
ตรวจปุ่มไม่ล้นหน้าจอ
ตรวจรูปภาพทุก Section
BEST PRACTICES

หลักการสร้าง Elementor ให้ดูแลง่าย

หน้าเว็บที่ดีไม่ใช่แค่สวย แต่ต้องแก้ไขง่าย โหลดไม่หนัก และ Responsive ได้ดี

01

ลด Container ซ้อน

อย่าสร้าง Container ซ้อนกันหลายชั้น หากไม่จำเป็น

02

ใช้ Gap ก่อน Margin

สำหรับรายการที่อยู่ใน Container เดียวกัน Gap มักจัดการง่ายกว่า

03

ใช้ Global Style

ไม่ควรกำหนด Font และสีใหม่ ทีละ Widget หากใช้ค่าเดียวกัน

04

ตรวจ Responsive ทันที

ทำ Desktop เสร็จแต่ละ Section แล้วตรวจ Tablet และ Mobile ต่อเลย

ELEMENTOR CHECKLIST

เช็กทักษะ Elementor พื้นฐาน

ทำเครื่องหมายสิ่งที่คุณทำได้แล้ว ระบบจะคำนวณ Progress ให้ทันที

ELEMENTOR PROGRESS
0%

เมื่อ Checklist ครบ คุณพร้อมสร้างหน้าเว็บไซต์จริงด้วย Elementor

✓
เปิด Elementor Editor ได้ รู้จัก Panel และ Canvas
✓
สร้าง Container ได้ เข้าใจ Parent และ Child Container
✓
ใช้ Flexbox พื้นฐานได้ Direction, Justify และ Align
✓
เพิ่ม Widget ได้ Heading, Text, Image และ Button
✓
เข้าใจ Spacing Padding, Margin และ Gap
✓
ปรับ Style ได้ Color, Typography, Border และ Radius
✓
ทำ Responsive ได้ ตรวจ Desktop, Tablet และ Mobile
✓
Publish หน้าได้ ตรวจหน้าเว็บจริงหลังเผยแพร่
FAQ

คำถาม Elementor สำหรับมือใหม่

สำหรับบทเรียนพื้นฐานและเว็บไซต์ทั่วไป Elementor รุ่นฟรีสามารถใช้ฝึก Container, Flexbox, Heading, Text, Image, Button และ Responsive ได้เพียงพอครับ
Container เป็นระบบ Layout รุ่นใหม่ของ Elementor ที่ใช้ Flexbox และมีความยืดหยุ่นกว่าโครงสร้าง Section / Column แบบเดิม สำหรับเว็บใหม่แนะนำให้เรียน Container เป็นหลักครับ
Padding ใช้สร้างพื้นที่ภายในองค์ประกอบ ส่วน Margin ใช้สร้างระยะภายนอก หากต้องการเว้นระยะระหว่าง Widget ที่อยู่ใน Container เดียวกัน แนะนำให้พิจารณาใช้ Gap ก่อน
มักเกิดจาก Container ยังใช้ Row, Width คงที่, Padding มากเกินไป หรือ Font ใหญ่เกินไปบน Mobile ควรตรวจ Responsive หลังสร้างแต่ละ Section ไม่ควรรอจนสร้างหน้าเสร็จทั้งหมดครับ
NEXT STEP

สร้างหน้าได้แล้ว ต่อไปเพิ่มแบบฟอร์มให้เว็บไซต์

ขั้นต่อไปเรียนรู้ Forminator เพื่อสร้าง Contact Form, ตั้งค่าฟิลด์ และส่งข้อมูลจากเว็บไซต์เข้า Email

เรียน Forminator →
Scroll to Top