Elementor คืออะไร? ทำไมเว็บ WordPress ยุคนี้นิยมใช้

Elementor คือปลั๊กอินสร้างและจัดหน้าเว็บสำหรับ WordPress แบบลากวาง (drag and drop) ให้เราออกแบบหน้าเว็บบนหน้าจอที่เห็นผลจริงได้ทันทีโดยไม่ต้องเขียนโค้ด มีเวอร์ชันฟรีให้ใช้บน WordPress.org และเวอร์ชัน Pro แบบรายปีที่เพิ่มเครื่องมืออย่าง Theme Builder ฟอร์ม และป๊อปอัป

ถ้าคุณกำลังจะทำเว็บด้วย WordPress หรือเพิ่งได้เว็บจากคนรับทำมาแล้วเห็นปุ่ม “Edit with Elementor” อยู่หลังบ้าน บทความนี้จะอธิบายตั้งแต่ Elementor ทำงานยังไง เวอร์ชัน 4 เปลี่ยนอะไร ฟรีกับ Pro ต่างกันตรงไหน ไปจนถึงข้อเสียที่ควรรู้ก่อนตัดสินใจใช้ ผมจะใช้เว็บ ehowme.com เองเป็นตัวอย่างด้วย เพราะหน้าเว็บหลักของเราสร้างด้วย Elementor ทั้งหมด

Elementor คืออะไร อธิบายให้เห็นภาพ

ปกติถ้าใช้ WordPress เพียวๆ หน้าตาเว็บจะถูกกำหนดโดยธีม ส่วนเนื้อหาเราพิมพ์ในตัวแก้ไขของ WordPress (Gutenberg) ซึ่งเหมาะกับบทความ แต่ถ้าอยากจัดหน้าแรกให้มีแบนเนอร์ คอลัมน์ ปุ่ม การ์ดบริการ หรือรีวิวเรียงสวยๆ จะเริ่มทำได้ยากขึ้น

Elementor เข้ามาแก้ตรงนี้ โดยเปลี่ยนการแก้หน้าเว็บให้เป็นแบบ “เห็นอะไรได้อย่างนั้น” เราลากกล่อง (container) มาวาง แล้วลากวิดเจ็ตอย่างหัวข้อ ข้อความ รูป ปุ่ม วิดีโอ ลงไปในกล่อง ปรับสี ฟอนต์ ระยะห่าง ได้จากแผงด้านซ้าย และดูผลบนหน้าเว็บจริงไปพร้อมกัน

ตัวเลขที่บอกว่ามันได้รับความนิยมแค่ไหน ดูได้จากหน้า Elementor บน WordPress.org ที่แสดงจำนวนการติดตั้งใช้งานอยู่ที่ 10+ ล้านเว็บ (ตัวเลขสูงสุดที่หน้านี้แสดง) เวอร์ชันล่าสุดตอนที่เขียนคือ 4.3.5 ต้องใช้ WordPress 6.8 ขึ้นไป และ PHP 7.4 ขึ้นไป (แนะนำ PHP 8.3)

ให้มองง่ายๆ ว่า WordPress คือตัวบ้าน ธีมคือโครงสร้างและสีผนัง ส่วน Elementor คือเครื่องมือที่ให้เราจัดเฟอร์นิเจอร์ในแต่ละห้องเองได้

หน้าตาตอนใช้งานจริงเป็นแบบนี้

ภาพด้านล่างคือหน้าจอ Elementor ตอนเปิดแก้หน้ารับทำเว็บไซต์ WordPress ของ eHowMe เอง (เวอร์ชัน 4.3.5 พร้อม Elementor Pro) จะเห็นว่าแบ่งเป็น 3 ส่วนหลัก

• แผง Elements ด้านซ้าย รวมวิดเจ็ตทั้งหมด ในเวอร์ชัน 4 จะมีหมวด Atomic Elements เช่น Div block, Flexbox, Grid, Heading, Paragraph, Button ลากไปวางบนหน้าได้เลย
• พื้นที่หน้าเว็บตรงกลาง คือหน้าเว็บจริง คลิกตรงไหนก็แก้ตรงนั้นได้ มีปุ่มสลับมุมมองเดสก์ท็อป แท็บเล็ต มือถือ อยู่แถบบน
• แผง Structure ด้านขวา แสดงโครงสร้างหน้าเป็นลำดับชั้น ผมตั้งชื่อแต่ละส่วนไว้ (hero, why, work, pricing, reviews, faq) เวลากลับมาแก้จะหาส่วนที่ต้องการได้เร็วกว่าการเลื่อนหา

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

Elementor 4 เปลี่ยนอะไรไปบ้าง

ปี 2026 Elementor ออก Editor 4.0 ซึ่งเปลี่ยนวิธีจัดสไตล์ไปค่อนข้างมาก แนวคิดหลักเรียกว่า Atomic คือแตกหน้าเว็บเป็นชิ้นเล็กที่นำกลับมาใช้ซ้ำได้ สิ่งที่เปลี่ยนไปมีประมาณนี้

• Classes สร้างชุดสไตล์ไว้ครั้งเดียว แล้วใช้กับหลายองค์ประกอบ แก้ที่เดียวเปลี่ยนทั้งเว็บ รองรับสถานะ hover, focus, active ด้วย
• Variables กำหนดสี ฟอนต์ และขนาดเป็นตัวแปร เช่น สีหลักของแบรนด์ ถ้าวันหนึ่งเปลี่ยน CI ก็แก้ตัวแปรเดียว
• Components (Pro) ส่วนของหน้าที่ใช้ซ้ำได้และซิงก์กันทั้งเว็บ แต่ยังแก้เนื้อหาเฉพาะจุดได้
• Atomic Forms และ Interactions (Pro) ฟอร์มที่ประกอบจากช่องกรอกทีละชิ้น และเอฟเฟกต์ตอนเลื่อน ชี้ หรือคลิก ตั้งแยกตามขนาดจอได้
• โค้ดเบาลง แต่ละองค์ประกอบใช้ DIV ห่อชั้นเดียว และตั้งค่าสไตล์แยกตามอุปกรณ์ได้ทุกค่า

ข่าวดีสำหรับคนที่มีเว็บอยู่แล้วคือ Elementor ระบุว่าการอัปเดตเป็น 4.0 จะไม่เปลี่ยนการตั้งค่าเดิมของเว็บ และใช้ Atomic Elements ผสมกับวิดเจ็ตแบบเก่าในหน้าเดียวกันได้ เว็บที่ติดตั้งใหม่จะเปิดฟีเจอร์ Atomic ไว้ตั้งแต่แรก ส่วนเว็บเก่าเปิดได้จากแผง Elements

ถ้าคุณเคยเรียน Elementor จากคลิปสอนเมื่อ 2-3 ปีก่อน หน้าจอเวอร์ชัน 4 จะดูต่างไปพอสมควร แต่หลักคิดเรื่องกล่องกับวิดเจ็ตยังเหมือนเดิม

Elementor ฟรีกับ Pro ต่างกันตรงไหน

เวอร์ชันฟรีใช้จัดหน้าเว็บทั่วไปได้จริง ทั้งลากวางวิดเจ็ตพื้นฐาน จัดเลย์เอาต์ด้วยคอนเทนเนอร์ และปรับการแสดงผลตามขนาดจอ จุดที่ต้องขยับไป Pro มักเป็นตอนที่อยากคุมหน้าตาทั้งเว็บ ไม่ใช่แค่หน้าเดียว ตารางนี้สรุปจากหน้า แพ็กเกจ Elementor Pro

ราคา Elementor Pro ตอนนี้เท่าไหร่

ราคาในหน้าแพ็กเกจ ณ วันที่ 30 ต.ค. 2026 (แบบจ่ายรายปี ยังไม่รวมภาษี) มีดังนี้

• Essential 60 ดอลลาร์ต่อปี ใช้ได้ 1 เว็บ
• Advanced Solo 84 ดอลลาร์ต่อปี ใช้ได้ 1 เว็บ ได้ฟีเจอร์ Pro ครบ
• Advanced 108 ดอลลาร์ต่อปี ใช้ได้ 3 เว็บ (มีตัวเลือก Expert สำหรับ 25 เว็บ)
• One 180 ดอลลาร์ในปีแรก ต่ออายุ 228 ดอลลาร์ต่อปี รวม Editor Pro กับเครดิตเครื่องมือ AI และเครื่องมืออื่นของ Elementor

ทุกแพ็กเกจรายปีมีรับประกันคืนเงิน 30 วัน และแพ็กเกจหลายปีจะถูกลงอีก ราคาพวกนี้เปลี่ยนได้ ก่อนซื้อควรเช็กหน้าแพ็กเกจอีกรอบ

ความเห็นผมคือ ถ้าเป็นเว็บธุรกิจที่อยากออกแบบ header กับ footer เอง และมีฟอร์มติดต่อ Essential ก็เริ่มได้แล้ว แต่ถ้าจะทำร้านค้าออนไลน์หรือต้องการเก็บข้อมูลจากฟอร์มไว้ในหลังบ้าน ให้ดูที่ Advanced Solo ขึ้นไป

ทำไมเว็บ WordPress ยุคนี้ถึงนิยมใช้ Elementor

เหตุผลที่คนทำเว็บและเจ้าของธุรกิจเลือก Elementor ส่วนใหญ่วนอยู่ไม่กี่เรื่อง

1. แก้หน้าเว็บได้โดยไม่ต้องเขียนโค้ด เปลี่ยนข้อความโปรโมชัน รูปแบนเนอร์ หรือเพิ่มส่วนรีวิว ทำเองได้จากหลังบ้าน
2. อิสระในการออกแบบสูง ไม่ต้องยึดเลย์เอาต์ที่ธีมกำหนด หน้าแรกกับ Landing Page แต่ละหน้าจัดต่างกันได้เต็มที่
3. คุมทั้งเว็บได้จากที่เดียว ด้วย Theme Builder ของ Pro สร้าง header, footer และแม่แบบหน้าบทความเองได้ ไม่ต้องไปแก้ไฟล์ธีม
4. ระบบนิเวศใหญ่ มีเทมเพลต ส่วนเสริมจากผู้พัฒนาภายนอก และคนที่ใช้เป็นอยู่เยอะ เวลาเจอปัญหาหาคำตอบได้ง่าย หรือจะเปลี่ยนคนดูแลเว็บก็หาคนที่ใช้เป็นได้ไม่ยาก
5. ใช้คู่กับธีมเบาๆ ได้ Elementor มีธีม Hello Elementor ที่แทบไม่มีดีไซน์ของตัวเอง ปล่อยให้ Elementor จัดหน้าเกือบทั้งหมด

เว็บ ehowme.com เองก็ใช้สูตรนี้ คือธีม Hello Elementor + Elementor + Elementor Pro โดย header กับ footer ทำจาก Theme Builder ส่วนหน้าแรก หน้าบริการ หน้าผลงาน หน้าติดต่อ จัดด้วย Elementor ทั้งหมด แต่บทความในบล็อกอย่างที่คุณอ่านอยู่นี้ ผมเขียนใน Gutenberg เพราะเป็นเนื้อหาข้อความยาวที่ไม่ต้องจัดเลย์เอาต์ซับซ้อน

ข้อเสียที่ควรรู้ก่อนตัดสินใจใช้

Elementor ไม่ได้เหมาะกับทุกงาน และมีจุดที่ควรรู้ไว้ก่อนตั้งแต่ต้น

หน้าเว็บหนักขึ้นได้ ถ้าจัดไม่ระวัง

ทุกกล่องและวิดเจ็ตที่ลากมาวางคือโค้ด HTML เพิ่มขึ้นทั้งนั้น ผมลองนับคลาส elementor-element ในโค้ดหน้าบริการของ eHowMe (รวม header กับ footer) ได้ 821 จุด หน้าแรกได้ 743 จุด ตัวเลขระดับนี้ยังทำความเร็วให้ผ่านเกณฑ์ได้ แต่ต้องตั้งค่าเรื่องแคช ฟอนต์ และรูปควบคู่ไปด้วย รายละเอียดเรื่องนี้อ่านต่อได้ใน วิธีทำ Core Web Vitals ให้ผ่านบน WordPress

ย้ายออกยาก

เลย์เอาต์ที่ทำด้วย Elementor ถูกเก็บในรูปแบบข้อมูลของ Elementor เอง ถ้าวันหนึ่งปิดปลั๊กอิน เนื้อหาข้อความยังอยู่ แต่การจัดวาง สี และระยะที่ทำไว้จะหายไป ต้องจัดหน้าใหม่ด้วยเครื่องมืออื่น เลือกแล้วควรตั้งใจใช้ยาวๆ

มีค่าใช้จ่ายรายปีถ้าใช้ Pro

Pro เป็นแบบสมัครสมาชิกรายปี และต่ออายุตามราคาปกติของรอบบิล ควรนับรวมในงบดูแลเว็บแต่ละปีด้วย

ต้องเรียนรู้นิดหน่อย

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

ปัญหาส่วนใหญ่ไม่ได้มาจาก Elementor โดยตรง แต่มาจากการลงส่วนเสริมหลายตัวซ้อนกัน และจัดหน้าแบบกล่องซ้อนกล่องหลายชั้นเกินจำเป็น

Elementor กับ Gutenberg ต่างกันยังไง ใช้อะไรดี

คำถามนี้เจอบ่อย เพราะ WordPress มีตัวแก้ไขแบบบล็อก (Gutenberg) มาให้อยู่แล้ว ทั้งสองตัวไม่ได้แข่งกันตรงๆ แต่ถนัดคนละงาน

ผมมองว่าไม่จำเป็นต้องเลือกฝั่งใดฝั่งหนึ่ง ใช้ Elementor กับหน้าที่ต้องขายของหรือเล่าเรื่องแบรนด์ แล้วใช้ Gutenberg กับบทความ แบบที่เว็บนี้ทำ เป็นทางที่ลงตัวสำหรับเว็บธุรกิจส่วนใหญ่

เริ่มใช้ Elementor ทำยังไง

ถ้ามีเว็บ WordPress อยู่แล้ว ลองได้เลยตามนี้

1. เข้าหลังบ้าน ไปที่ ปลั๊กอิน > เพิ่มปลั๊กอินใหม่ ค้นหาคำว่า Elementor แล้วกดติดตั้งและเปิดใช้งาน
2. (แนะนำ) ติดตั้งธีม Hello Elementor ถ้าอยากให้ Elementor คุมหน้าตาเว็บเกือบทั้งหมด หรือจะใช้ธีมเดิมต่อก็ได้
3. ไปที่ หน้า > เพิ่มหน้าใหม่ ตั้งชื่อหน้า แล้วกดปุ่ม Edit with Elementor
4. ลากคอนเทนเนอร์ (เช่น Flexbox หรือ Grid) มาวางเป็นโครง แล้วลากวิดเจ็ตหัวข้อ ข้อความ รูป ปุ่ม ลงไป
5. สลับดูมุมมองมือถือและแท็บเล็ตจากแถบบน ปรับขนาดตัวอักษรและระยะให้พอดีทุกจอ
6. กด Publish เมื่อพอใจ แล้วเปิดหน้าเว็บจริงเช็กอีกรอบ

อย่าลืมว่าปลั๊กอินทุกตัวที่ลงเพิ่มมีผลกับความเร็วและความปลอดภัย ลงเฉพาะส่วนเสริมที่ได้ใช้จริง และหมั่นอัปเดต Elementor กับปลั๊กอินตัวอื่นให้เป็นเวอร์ชันล่าสุดอยู่เสมอ

จ้างทำเว็บด้วย Elementor แล้วแก้เองได้ไหม

ได้ และนี่คือเหตุผลหลักที่หลายธุรกิจเลือกจ้างทำเว็บด้วย WordPress + Elementor เพราะงานที่เกิดขึ้นบ่อยหลังเปิดเว็บ เช่น เปลี่ยนราคา เปลี่ยนรูปโปรโมชัน แก้เบอร์โทร เพิ่มรีวิว เจ้าของเว็บทำเองได้หลังเรียนรู้ไม่นาน ไม่ต้องรอโปรแกรมเมอร์ทุกครั้ง

สิ่งที่ควรถามคนรับทำเว็บก่อนจ้างคือ ใครเป็นเจ้าของ license ของ Elementor Pro และค่าต่ออายุปีถัดไปใครจ่าย เพราะถ้าเว็บใช้ฟีเจอร์ Pro อยู่ เรื่องนี้กระทบงบระยะยาวโดยตรง ส่วนแพ็กเกจ รับทำเว็บไซต์ WordPress ของ eHowMe รวม Elementor Pro 1 License ไว้ในแพ็กเกจแล้ว

ถ้ายังลังเลว่าจะลองทำเองด้วย Elementor หรือจ้างคนทำ ผมเปรียบเทียบเรื่องเวลา งบ และความเสี่ยงไว้ใน ทำเว็บเองหรือจ้างทำเว็บ แล้ว

คำถามที่พบบ่อย

สรุปสั้นๆ Elementor คือเครื่องมือที่ทำให้การจัดหน้าเว็บ WordPress เป็นเรื่องที่คนไม่เขียนโค้ดทำได้ เริ่มจากเวอร์ชันฟรีเพื่อดูว่าถนัดไหม แล้วค่อยขยับไป Pro เมื่ออยากคุมหน้าตาทั้งเว็บ แค่อย่าลืมดูแลเรื่องความเร็วไปพร้อมกัน