คู่มือ Elementor Page Builder สร้างเว็บสวยงามไม่ต้องเขียนโค้ด 2026

ถ้าคุณเคยรู้สึกว่าการสร้างเว็บ WordPress สวยๆ ต้องรู้ HTML/CSS หรือต้องจ้าง Developer ราคาแพง — Elementor Page Builder คือคำตอบที่คุณกำลังมองหา มันเปลี่ยนวิธีสร้างเว็บไซต์ทั้งหมดด้วยระบบ Drag & Drop ที่เห็นผลจริงแบบ Real-time โดยไม่ต้องแตะโค้ดแม้แต่บรรทัดเดียว

ในปี 2026 Elementor ยังคงเป็น Page Builder อันดับ 1 สำหรับ WordPress มีเว็บที่ใช้งานทั่วโลกมากกว่า 12 ล้านเว็บ ไม่ว่าคุณจะสร้างเว็บธุรกิจ, เว็บพอร์ตโฟลิโอ, Landing Page, หรือร้านค้าออนไลน์ Elementor ทำได้ทั้งหมด

บทความนี้เป็น คู่มือ Elementor ฉบับสมบูรณ์สำหรับมือใหม่ ครอบคลุมตั้งแต่การติดตั้ง ทำความเข้าใจ Interface การใช้งาน Widget หลัก การออกแบบ Template ไปจนถึงเทคนิคที่ช่วยให้เว็บของคุณดูเป็นมืออาชีพ

Elementor คืออะไร ทำงานอย่างไร

Elementor เป็น Visual Page Builder Plugin สำหรับ WordPress ที่ให้คุณออกแบบหน้าเว็บได้ด้วยการ Drag & Drop โดยตรง แทนที่จะแก้ไข HTML และ CSS ทีละบรรทัด คุณเพียงลากชิ้นส่วนต่างๆ (เรียกว่า Widget) มาวางในตำแหน่งที่ต้องการ แล้วปรับขนาด สี Font และรายละเอียดอื่นๆ ผ่านหน้าจอที่ดูเหมือนโปรแกรม Design ทั่วไป

สิ่งที่ทำให้ Elementor พิเศษกว่า Page Builder รุ่นเก่าคือระบบ Live Preview — ทุกการเปลี่ยนแปลงที่คุณทำจะเห็นผลทันทีบนหน้าจอ ไม่ต้อง Save แล้ว Preview ซ้ำๆ ทำให้กระบวนการออกแบบเร็วและสนุกกว่ามาก

โครงสร้างพื้นฐานของ Elementor

Elementor จัดโครงสร้างหน้าเว็บเป็นลำดับชั้น 3 ระดับ ได้แก่:

• Section (ส่วน) — กรอบใหญ่สุด แต่ละ Section ครอบคลุมความกว้างเต็มหน้า ใช้กำหนดพื้นหลัง Padding และ Background Image
• Column (คอลัมน์) — แบ่งพื้นที่ใน Section เป็น 1, 2, 3 หรือมากกว่าคอลัมน์ เช่น ซ้าย 30% ขวา 70%
• Widget (วิดเจ็ต) — ชิ้นส่วนเนื้อหาจริง เช่น ข้อความ รูปภาพ ปุ่ม วิดีโอ แบบฟอร์ม ที่นำไปวางใน Column

เมื่อเข้าใจโครงสร้าง 3 ชั้นนี้แล้ว คุณจะสามารถออกแบบเลย์เอาต์ได้อย่างอิสระและคาดเดาผลลัพธ์ได้ถูกต้อง

ติดตั้ง Elementor บน WordPress

การติดตั้ง Elementor ทำได้ง่ายมากผ่าน WordPress Plugin Repository ใช้เวลาไม่เกิน 5 นาที ทำตามขั้นตอนนี้:

1. เข้า WordPress Dashboard → Plugins → Add New
2. ค้นหา Elementor Website Builder ในช่อง Search
3. กด Install Now ที่ Plugin ของ Elementor (สังเกตโลโก้สีแดงรูปตัว E)
4. รอให้ติดตั้งเสร็จ แล้วกด Activate
5. ระบบจะพาไปหน้า Welcome Screen — ทำตาม Setup Wizard หรือกดข้ามได้

ข้อกำหนดระบบของ Elementor (2026)

• WordPress 6.0 ขึ้นไป
• PHP 7.4 ขึ้นไป (แนะนำ PHP 8.1+)
• MySQL 5.7+ หรือ MariaDB 10.3+
• Memory Limit อย่างน้อย 128MB (แนะนำ 256MB)
• Hosting ที่รองรับ WordPress (AsiaGB Hosting มีครบทุกข้อ)

ทำความรู้จัก Elementor Interface

เมื่อกด Edit with Elementor บนหน้าใดหน้าหนึ่ง คุณจะเข้าสู่ Elementor Editor ที่แบ่งออกเป็น 2 ฝั่งหลัก:

ฝั่งซ้าย — Panel ควบคุม

• Elements Tab — รายการ Widget ทั้งหมดที่ลากได้ แบ่งเป็นหมวด Basic, Pro, และ Third-party
• Global Colors & Fonts — กำหนดสีและ Font ที่ใช้ทั่วทั้งเว็บ เปลี่ยนครั้งเดียวอัพเดตทุกหน้า
• Settings Gear (⚙) — ตั้งค่าหน้า เช่น Page Title, Featured Image, Layout
• History (↩) — ดู Revision History เพื่อ Undo หรือ Restore เวอร์ชันเก่า
• Responsive Mode (📱) — สลับดูผลลัพธ์บน Desktop, Tablet, Mobile

ฝั่งขวา — Canvas (พื้นที่ออกแบบ)

Canvas คือพื้นที่ที่แสดง Preview ของหน้าเว็บจริง คุณสามารถคลิกที่ Element ใดก็ได้เพื่อเลือกและแก้ไข หรือลาก Widget จาก Panel มาวางในตำแหน่งที่ต้องการได้เลย การออกแบบทั้งหมดเห็นผลแบบ Real-time

Widget หลักที่ต้องรู้จัก

Elementor Free มี Widget มากกว่า 40 ตัว แต่ Widget ที่ใช้บ่อยที่สุดในการสร้างเว็บทั่วไป ได้แก่:

1. Heading Widget

ใช้สร้างหัวข้อ H1–H6 ปรับ Font Family, Size, Color, Alignment และ HTML Tag ได้อิสระ เหมาะสำหรับ Hero Title, Section Header และ Sub-heading ทั่วทั้งเว็บ สิ่งสำคัญคือต้องใช้ H1 เพียงอันเดียวต่อหน้า เพื่อ SEO ที่ถูกต้อง

2. Text Editor Widget

Widget นี้คือ WYSIWYG Editor สำหรับเนื้อหาข้อความยาวๆ รองรับการจัดรูปแบบ Bold, Italic, Link, รายการ Bullet และ Numbered รวมถึงการวาง HTML โดยตรงได้ เหมาะสำหรับย่อหน้าเนื้อหา, คำอธิบายสินค้า และ Blog Post Body

3. Image Widget

แสดงรูปภาพเดี่ยวพร้อมตัวเลือก Caption, Link และ Hover Effects ปรับ Object Fit, Border Radius และ Box Shadow ได้ รองรับ Lightbox อัตโนมัติเมื่อคลิกรูป

4. Button Widget

สร้างปุ่ม Call-to-Action ได้อย่างสวยงาม ตั้ง URL, ขนาด, สี Background, สี Text, Icon ด้านหน้า/หลัง และ Hover Effect ได้ครบถ้วน เป็น Widget ที่สำคัญที่สุดสำหรับ Landing Page และหน้า Sales

5. Image Carousel Widget

สร้าง Slideshow หรือ Gallery แบบ Carousel ที่เลื่อนได้ ตั้ง Autoplay, Navigation Arrow, Dots, Slides Per View และ Loop ได้ เหมาะสำหรับ Portfolio, ภาพสินค้า และ Testimonial พร้อมรูป

6. Icon Box Widget

รวม Icon + หัวข้อ + คำอธิบาย ในหนึ่ง Widget เหมาะสำหรับส่วน Features หรือ Services ที่มีหลายจุดเด่น เลือก Icon จากไลบรารีกว่า 1,500 ตัว (Font Awesome, Eicons) หรืออัพโหลด SVG เอง

7. Video Widget

ฝัง Video จาก YouTube, Vimeo, Dailymotion หรือ Self-hosted โดยตรงพร้อมตั้ง Autoplay, Mute, Controls และ Aspect Ratio รองรับ Lazy Load Video เพื่อลด Page Speed impact

8. Form Widget (Elementor Pro)

สร้างแบบฟอร์มได้ง่ายด้วยการลาก Field มาเพิ่ม รองรับ Text, Email, Textarea, Select, Checkbox, Date, File Upload และอื่นๆ เชื่อมต่อกับ Email Marketing ได้โดยตรง เช่น Mailchimp, ActiveCampaign

การสร้างหน้าเว็บด้วย Elementor ทีละขั้นตอน

มาดูวิธีสร้างหน้า Landing Page พื้นฐานตั้งแต่ต้นจนจบกัน เพื่อให้เห็นภาพรวมของกระบวนการทำงานจริง

ขั้นที่ 1: สร้าง Page ใหม่

ไปที่ WordPress Dashboard → Pages → Add New ตั้งชื่อ Page แล้วกด Edit with Elementor (ปุ่มสีน้ำเงิน) ระบบจะเปิด Elementor Editor ขึ้นมา

ขั้นที่ 2: เพิ่ม Section แรก (Hero Section)

กดปุ่ม + (Add New Section) ตรงกลาง Canvas เลือกโครงสร้าง Column — สำหรับ Hero Section ง่ายๆ ให้เลือก 1 Column เต็มหน้า จากนั้นกด Section (กรอบสีน้ำเงิน) แล้วไปที่ Style Tab → Background เลือกสีพื้นหลังหรืออัพโหลดภาพ

ขั้นที่ 3: ลาก Widget เข้า Section

จาก Panel ซ้าย ลาก Heading Widget เข้าไปใน Column พิมพ์หัวข้อหลัก แล้วปรับขนาดและสีใน Style Tab ลาก Text Editor Widget มาใต้ Heading พิมพ์คำอธิบาย แล้วลาก Button Widget มาด้านล่างสุด

ขั้นที่ 4: เพิ่ม Section ถัดไป (Features Section)

เพิ่ม Section ใหม่ด้านล่าง เลือกโครงสร้าง 3 Columns ลาก Icon Box Widget เข้าแต่ละ Column ปรับ Icon, หัวข้อ และคำอธิบายของแต่ละจุดเด่น ปรับ Spacing ให้สม่ำเสมอโดยใช้ Content Tab → Padding

ขั้นที่ 5: บันทึกและ Preview

กด Publish (หน้าใหม่) หรือ Update (หน้าเก่า) เพื่อบันทึก จากนั้นกด Preview Changes เพื่อดูผลลัพธ์บน Browser จริงก่อนแชร์ให้ผู้อื่นเห็น

การใช้งาน Elementor Template Library

Template Library คือฟีเจอร์ที่ทำให้ Elementor แตกต่างจาก Page Builder ทั่วไป แทนที่จะเริ่มออกแบบจากศูนย์ คุณสามารถเลือก Template สำเร็จรูปที่สวยงามได้เลย แล้วค่อยแก้ไขเนื้อหาให้เป็นของตัวเอง

วิธีเปิด Template Library

ใน Elementor Editor กดปุ่ม Folder Icon (📁) บนแถบ Toolbar ด้านบน หรือกดปุ่ม Add Template ที่ปรากฏเมื่อ Hover ที่ Section จะเปิด Template Library ขึ้นมา

• Pages Tab — Template หน้าเต็มสำเร็จรูป เช่น Landing Page, About, Portfolio, Pricing
• Blocks Tab — Template ส่วนย่อย เช่น Hero, Features, Testimonial, FAQ, CTA
• My Templates Tab — Template ที่คุณบันทึกเองเพื่อนำกลับมาใช้ซ้ำ

บันทึก Template ของตัวเอง

ออกแบบ Section หรือหน้าเว็บที่ต้องการบันทึกแล้ว คลิกขวาที่ Section → Save as Template ตั้งชื่อแล้วกด Save Template นี้จะปรากฏใน My Templates Tab ให้นำไปใช้กับหน้าอื่นๆ ได้เลย เหมาะมากสำหรับส่วนที่ใช้ซ้ำบ่อย เช่น Header CTA หรือ Contact Block

Global Colors & Global Fonts — หัวใจของการออกแบบที่สม่ำเสมอ

ฟีเจอร์ Global Colors และ Global Fonts ช่วยให้เว็บของคุณมีความสม่ำเสมอของ Design ตลอดทุกหน้า โดยไม่ต้องปรับซ้ำทีละ Widget

ตั้งค่า Global Colors

กดปุ่ม Hamburger Menu (☰) ด้านบนซ้าย → Site Settings → Global Colors กำหนดสีหลักของเว็บ เช่น Primary, Secondary, Text, Accent เมื่อ Widget ใดใช้ Global Color ถ้าเปลี่ยนสีที่นี่ ทุก Widget ที่ใช้สีนั้นจะอัปเดตพร้อมกันทันที

ตั้งค่า Global Fonts

ไปที่ Site Settings → Global Fonts กำหนด Font Family, Size, Weight และ Line Height สำหรับ Primary Font (ใช้กับเนื้อหาทั่วไป), Secondary Font (ใช้กับ Heading), Text Font และ Accent Font การตั้ง Global Fonts ช่วยให้หน้าเว็บทุกหน้ามี Typography ที่สม่ำเสมอโดยอัตโนมัติ

การออกแบบให้ Responsive บน Elementor

เว็บที่ดีในปี 2026 ต้องดูดีบนทุกหน้าจอ Elementor มีระบบ Responsive ที่ครอบคลุมมาก ทำให้ปรับแต่งแยกกันสำหรับแต่ละ Device ได้โดยไม่กระทบกัน

วิธีใช้ Responsive Mode

กดปุ่ม Responsive Mode (📱) ที่ด้านล่างของ Panel ซ้าย หรือกดปุ่ม Icon มือถือในแถบ Toolbar ด้านบน เลือก Viewport ที่ต้องการ: Desktop, Tablet, หรือ Mobile

• เมื่ออยู่ใน Mobile Mode — การปรับค่าใน Style Tab จะมีผลเฉพาะมือถือ ไม่กระทบ Desktop
• ปรับ Font Size, Padding/Margin, Column Width และ Visibility ได้แยกต่างหากแต่ละ Device
• ซ่อน/แสดง Section ตาม Device ด้วย Advanced Tab → Responsive → Hide On Mobile/Tablet/Desktop

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

• Column Reversal: บนมือถือให้ Column ขวา (รูปภาพ) ขึ้นมาก่อน Column ซ้าย (ข้อความ) ด้วย Section Settings → Layout → Column Gap
• Stack Columns: Section ที่มี 3-4 Columns บน Desktop ให้เหลือ 1 Column บนมือถือโดยตั้ง Width (%) ใน Column ให้เป็น 100% ใน Mobile Mode
• Font Scaling: ใช้ Viewport Width (VW) หรือ Clamp สำหรับ Heading ใหญ่ เพื่อให้ขนาด Font ปรับตาม Device อัตโนมัติ

เทคนิคขั้นสูงที่ทำให้เว็บดูเป็นมืออาชีพ

เมื่อเข้าใจพื้นฐานแล้ว ลองนำเทคนิคเหล่านี้มาใช้เพื่อยกระดับดีไซน์ของคุณให้ดูแตกต่างและน่าประทับใจยิ่งขึ้น

1. Motion Effects (Entrance Animation)

ใน Advanced Tab → Motion Effects เปิดใช้งาน Entrance Animation เช่น FadeInUp, SlideInLeft เลือก Duration และ Delay ให้แต่ละ Element ปรากฏตามลำดับ Effect นี้ช่วยดึงดูดความสนใจของผู้เยี่ยมชมและทำให้เว็บดู Dynamic มากขึ้น

2. Parallax Scrolling

เปิดใช้งาน Scrolling Effects → Vertical Scroll บน Background Image ของ Section จะทำให้ภาพพื้นหลังเลื่อนช้ากว่าเนื้อหา สร้าง Depth Effect ที่ดูน่าสนใจ โดยเฉพาะสำหรับ Hero Section และ Full-screen Sections

3. Custom CSS (Elementor Pro)

ใน Advanced Tab → Custom CSS เขียน CSS ที่ apply เฉพาะ Element นั้นโดยไม่กระทบส่วนอื่น ใช้ Selector selector แทน Class ปกติ เช่น:

selector {
    background: linear-gradient(135deg, #059669, #047857);
    transition: transform 0.3s ease;
}
selector:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(5,150,105,0.25);
}

4. Global Widget

สร้าง Widget ที่ใช้ซ้ำในหลายหน้า เช่น CTA Box หรือ Newsletter Form แล้วบันทึกเป็น Global Widget (คลิกขวาที่ Widget → Save as Global) เมื่อแก้ไข Global Widget ที่หน้าใดหน้าหนึ่ง ทุกหน้าที่ใช้ Widget นั้นจะอัปเดตพร้อมกันทันที ประหยัดเวลาการอัพเดตเนื้อหาที่ซ้ำกันมาก

5. Flexbox Container (Elementor 3.6+)

Elementor รุ่นใหม่แนะนำระบบ Flexbox Container มาแทน Section+Column เดิม ทำให้ Layout ยืดหยุ่นกว่ามาก รองรับ Direction แนวนอน/แนวตั้ง, Wrap, Gap และ Align Items อย่างอิสระ หากเริ่มโปรเจ็กต์ใหม่แนะนำให้เปิดใช้งาน Container Mode ใน Settings → Experiments → Flexbox Container

การเชื่อมต่อ Elementor กับ WooCommerce

สำหรับเจ้าของร้านค้าออนไลน์ที่ใช้ WooCommerce, Elementor Pro มี WooCommerce Builder ที่ให้ออกแบบหน้าสินค้า, หน้า Cart, หน้า Checkout และหน้า Thank You ได้อย่างอิสระ ไม่ต้องง่ายหน้าตา WooCommerce มาตรฐานที่ดูเรียบๆ อีกต่อไป

• Single Product Template — ออกแบบหน้าสินค้าแต่ละชิ้นให้สวยงาม เพิ่ม Gallery, Review, Related Products ในตำแหน่งที่ต้องการ
• Products Widget — แสดงสินค้าแบบ Grid หรือ List พร้อม Filter ตาม Category, Tag, Rating ได้ใน Frontend
• Cart & Checkout — ปรับ Layout ของหน้า Cart และ Checkout ให้กระชับ ลด Friction ทำให้ลูกค้า Checkout ง่ายขึ้น ส่งผลต่อ Conversion Rate โดยตรง

Elementor กับ SEO — สิ่งที่ต้องระวัง

Elementor เองไม่ได้ทำ SEO ให้คุณ แต่ก็ไม่ได้ทำลาย SEO ถ้าใช้อย่างถูกต้อง สิ่งที่ต้องระวัง ได้แก่:

• H1 ซ้ำ: Elementor Heading Widget ตั้ง Tag เป็น H1 ได้ แต่ต้องมีแค่ 1 H1 ต่อหน้า ถ้าใช้ Page Title เป็น H1 ด้วย จะมี H1 ซ้ำ — ให้ปรับ Elementor Heading เป็น H2 หรือ H3 แทน
• Page Speed: Elementor โหลด JavaScript และ CSS เพิ่มเติม ควรเปิด Improved Asset Loading ใน Settings → Experiments เพื่อโหลด CSS เฉพาะ Widget ที่ใช้จริงบนหน้านั้น
• Image Alt Text: ใส่ Alt Text ทุกรูปใน Image Widget เพื่อ SEO และ Accessibility
• Structured Data: ใช้ SEO Plugin เช่น Yoast SEO หรือ Rank Math ควบคู่กับ Elementor เพื่อเพิ่ม Schema Markup ให้หน้าเว็บ

Elementor Pro คุ้มไหม ควรอัพเกรดเมื่อไหร่

คำถามที่มือใหม่ถามมากที่สุด — คำตอบคือ Elementor Free ก็เพียงพอสำหรับเว็บทั่วไปและพอร์ตโฟลิโอส่วนตัว แต่ Elementor Pro คุ้มค่ามากถ้าคุณต้องการ:

• Theme Builder — ออกแบบ Header, Footer, Single Post, Archive Page และ 404 ด้วย Elementor แทน Theme
• Popup Builder — สร้าง Popup, Sticky Bar, Slide-in สำหรับ Lead Generation
• WooCommerce Builder — ออกแบบหน้าร้านค้าได้อย่างอิสระ
• Form Builder — สร้างแบบฟอร์มและเชื่อมต่อกับ CRM หรือ Email Marketing
• Dynamic Content — แสดงข้อมูลจาก Custom Fields, ACF, หรือ Database โดยตรงใน Template
• Custom Fonts & Icons — อัพโหลด Font เอง เหมาะสำหรับเว็บที่ต้องการ Brand ชัดเจน

ราคา Elementor Pro เริ่มต้นที่ $59/ปี (1 เว็บ) ถึง $399/ปี (1,000 เว็บ) ถ้าเป็น Freelancer หรือ Agency ที่รับสร้างเว็บให้ลูกค้าหลายราย ค่าลิขสิทธิ์นี้คุ้มมากเมื่อเทียบกับเวลาที่ประหยัดได้

ตาราง Elementor Free vs Pro เปรียบเทียบ

Checklist ก่อน Publish หน้าเว็บ Elementor