Elementor Page Builder คู่มือมือใหม่

Elementor Page Builder คู่มือเริ่มต้นสำหรับมือใหม่

WordPress

ถ้าคุณเพิ่งเริ่มทำเว็บ WordPress และรู้สึกว่า Gutenberg Editor ที่มาพร้อมกับ WordPress นั้นยังไม่ตอบโจทย์ หรืออยากได้ความยืดหยุ่นในการออกแบบมากกว่าเดิม Elementor Page Builder คือคำตอบที่คนทำเว็บหน้าใหม่เลือกใช้มากที่สุดในโลก ด้วยระบบ drag-and-drop ที่เห็นผลลัพธ์แบบ Real-time คุณสามารถออกแบบหน้าเว็บได้เหมือนใช้ Canva แต่ทรงพลังกว่ามาก

Elementor คืออะไร และทำไมต้องใช้?

Elementor เป็น Plugin สำหรับ WordPress ที่ช่วยให้คุณสร้างและแก้ไขหน้าเว็บผ่านอินเทอร์เฟซแบบภาพ (Visual Editor) โดยไม่ต้องยุ่งกับ HTML, CSS หรือ PHP เลย มีผู้ใช้งานมากกว่า 10 ล้านเว็บไซต์ทั่วโลก และมีทั้งเวอร์ชันฟรี (Elementor Free) และเวอร์ชันเสียเงิน (Elementor Pro)

Elementor Free — มี Widget พื้นฐานครบถ้วน เหมาะกับเว็บทั่วไป บล็อก และพอร์ตโฟลิโอ
Elementor Pro — เพิ่ม Theme Builder, WooCommerce Builder, Form Builder และ Widget พิเศษอีกกว่า 50 ตัว

สำหรับมือใหม่ที่ใช้ Shared Hosting ทั่วไป เวอร์ชันฟรีเพียงพอแน่นอนในช่วงแรก และสามารถอัปเกรดได้ภายหลังเมื่อเว็บโตขึ้น

ความต้องการของระบบก่อนติดตั้ง Elementor

ก่อนติดตั้ง Elementor ควรตรวจสอบว่าโฮสติ้งและ WordPress ของคุณพร้อมรองรับ Plugin นี้:

PHP เวอร์ชัน 7.4 ขึ้นไป (แนะนำ 8.1+)
WordPress เวอร์ชัน 6.0 ขึ้นไป
MySQL 5.6 / MariaDB 10.0 ขึ้นไป
Memory Limit ไม่ต่ำกว่า 256MB (สามารถแก้ได้ใน cPanel)
พื้นที่ดิสก์ว่างอย่างน้อย 500MB

Tip: หากโฮสติ้งของคุณมี PHP Memory Limit ต่ำกว่า 256MB ให้ไปที่ cPanel > Software > Select PHP Version แล้วปรับค่า memory_limit ก่อนติดตั้ง Elementor

วิธีติดตั้ง Elementor ผ่าน WordPress Dashboard

การติดตั้ง Elementor ทำได้ง่ายมากผ่านหน้า Admin ของ WordPress โดยไม่ต้องเข้า cPanel หรืออัปโหลดไฟล์เองเลย:

เข้าสู่ระบบ WordPress Admin ที่ yourdomain.com/wp-admin
ไปที่เมนู Plugins > Add New Plugin
พิมพ์ "Elementor" ในช่องค้นหา
คลิก Install Now ที่ Plugin ชื่อ "Elementor Website Builder" (โลโก้สีแดง)
รอการติดตั้งเสร็จ จากนั้นคลิก Activate
ทำตามขั้นตอน Setup Wizard ที่ปรากฏขึ้น

Tip: หากกด Install แล้วค้างนานผิดปกติ อาจเป็นเพราะ PHP max_execution_time ต่ำเกินไป ให้ไปแก้ที่ cPanel > MultiPHP INI Editor > เพิ่ม max_execution_time = 120

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

เมื่อเปิด Elementor Editor ขึ้นมา คุณจะพบกับโครงสร้าง 3 ระดับ:

Section (ส่วน) — โครงสร้างหลักของหน้า แบ่งเป็นแถวๆ ปรับได้ทั้ง Full Width, Boxed หรือ Full Screen
Column (คอลัมน์) — แต่ละ Section แบ่งได้หลายคอลัมน์ เช่น 1/2, 1/3, 2/3 เป็นต้น
Widget (วิดเจ็ต) — องค์ประกอบต่างๆ ที่ drag มาวางใน Column เช่น Heading, Text Editor, Image, Button, Video

แถบด้านซ้ายของ Editor คือ Panel ซึ่งแสดง Widget ทั้งหมด ส่วนพื้นที่ด้านขวาคือ Canvas ที่คุณจะเห็น Preview ของหน้าเว็บแบบ Real-time

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

มาเริ่มสร้างหน้าเว็บแรกกันเลย ด้วยขั้นตอนง่ายๆ ที่ทำตามได้ทันที:

ไปที่ Pages > Add New ใน WordPress Admin
ตั้งชื่อหน้า เช่น "หน้าแรก" แล้วคลิก Edit with Elementor
คลิก + (Add New Section) ตรงกลาง Canvas เพื่อเริ่มต้น
เลือก Layout ของ Section เช่น 1 คอลัมน์หรือ 2 คอลัมน์
ลาก Widget Heading จาก Panel ซ้ายมาวางใน Section
ดับเบิลคลิกที่ Heading แล้วพิมพ์ข้อความที่ต้องการ
ใช้ Panel ด้านซ้ายปรับ Style เช่น ขนาดตัวอักษร สี Alignment
เพิ่ม Widget อื่นๆ ต่อตามต้องการ เช่น Image, Button, Text
คลิก PUBLISH สีเขียวด้านล่างซ้ายเมื่อพอใจแล้ว

ปรับแต่ง Style ด้วย Section และ Column Settings

จุดแข็งของ Elementor คือการปรับ Style ได้ละเอียดมากโดยไม่ต้องเขียน CSS เอง ทั้ง Background สี Gradient รูปภาพ วิดีโอ Padding Margin Border และ Box Shadow ล้วนทำได้จาก Panel ทั้งหมด ตัวอย่างเช่น การใส่ Background Gradient ให้ Section:

1. คลิกที่ Section แล้วคลิกไอคอน Edit Section (ดินสอ) ด้านบน
2. ไปที่แท็บ Style
3. Background Type เลือก Classic หรือ Gradient
4. ถ้าเลือก Gradient: กำหนด Color 1 = #15803d, Color 2 = #059669
5. Location: Color 1 = 0%, Color 2 = 100%
6. Angle = 135 องศา (diagonal)
7. คลิกพื้นที่ว่างเพื่อ Deselect และดู Preview

Tip: ใช้ "Responsive Mode" ที่ด้านล่างของ Editor เพื่อดู Preview บนมือถือและแท็บเล็ต Elementor ให้ปรับ Style แยกกันในแต่ละ Breakpoint ได้เลย

ใช้ Template สำเร็จรูปเพื่อประหยัดเวลา

Elementor มี Template Library ในตัวที่ให้คุณดึงหน้าเว็บสำเร็จรูปมาใช้ได้ฟรี เหมาะมากสำหรับมือใหม่ที่ยังไม่มีไอเดียในการออกแบบ:

คลิกไอคอนรูปโฟลเดอร์ (Add Template) ใน Elementor Editor
เลือก Pages หรือ Blocks ตามต้องการ
กรอง Category เช่น Landing Page, Portfolio, Business, Blog
คลิก Insert บน Template ที่ชอบ
Template จะโหลดลงในหน้าทันที จากนั้นแก้ข้อความและรูปภาพให้เป็นของคุณ

การใช้ Template ช่วยย่นเวลาการออกแบบจากหลายชั่วโมงเหลือแค่ไม่กี่นาที เพราะโครงสร้างและ Style ถูกออกแบบมาอย่างสวยงามแล้ว

Global Settings: กำหนด Font และสีทั้งเว็บในที่เดียว

แทนที่จะแก้ Font และสีทีละ Widget Elementor Pro มีระบบ Global Colors และ Global Fonts ที่ให้คุณกำหนดค่ากลางสำหรับทั้งเว็บ แต่แม้แต่เวอร์ชันฟรีก็สามารถกำหนดค่าผ่าน Site Settings ได้:

เข้าถึง Global Settings:
1. คลิกไอคอนแฮมเบอร์เกอร์ (☰) มุมบนซ้ายของ Elementor Editor
2. เลือก Site Settings
3. Global Colors: กำหนดสีหลัก, สองรอง, Accent, Text
4. Global Fonts: เลือก Primary Font สำหรับหัวเรื่อง และ Secondary สำหรับเนื้อหา
5. ตัวอย่างการกำหนดสีแบรนด์:
   Primary Color:   #15803d
   Secondary Color: #059669
   Text Color:      #1a1a1a
   Accent Color:    #16a34a
6. คลิก Save Changes

Tip: เมื่อกำหนด Global Colors แล้ว ให้ใช้ "Global" option ในช่องเลือกสีของ Widget แทนการใส่ Hex Code ตรงๆ จะได้เปลี่ยนสีทั้งเว็บได้ในคลิกเดียว

เพิ่มประสิทธิภาพ Elementor บน Shared Hosting

Elementor ใช้ JavaScript และ CSS จำนวนมาก ซึ่งอาจทำให้เว็บโหลดช้าบน Shared Hosting ถ้าไม่ได้ตั้งค่า ลองทำสิ่งเหล่านี้เพื่อเพิ่มความเร็ว:

ไปที่ Elementor > Settings > Advanced แล้วเปิด "Improved Asset Loading" และ "Improved CSS Loading"
ติดตั้ง Plugin cache เช่น LiteSpeed Cache หรือ W3 Total Cache
บีบอัดรูปภาพก่อนอัปโหลดด้วย Plugin เช่น Smush หรือ ShortPixel
ใช้ Elementor > Tools > Regenerate CSS/Data เมื่อเว็บแสดงผลผิดพลาด

ก่อนทดสอบการตั้งค่า Elementor และดูว่าเว็บทำงานถูกต้องหรือไม่ แนะนำใช้เครื่องมือฟรีที่ dnsxray.com ตรวจสอบ DNS, SSL, Email Authentication และ Security Headers ของเว็บได้ในที่เดียว เพื่อให้มั่นใจว่าเว็บที่สร้างด้วย Elementor พร้อม Live อย่างสมบูรณ์

ตรวจสอบว่า Elementor ทำงานถูกต้อง

หลังจากติดตั้งและตั้งค่าเสร็จแล้ว ให้ตรวจสอบความถูกต้องด้วยวิธีเหล่านี้:

# 1. ตรวจสอบว่า Elementor CSS ถูก Generate แล้ว
ไปที่ wp-content/uploads/elementor/css/
ควรมีไฟล์ post-[ID].css สำหรับทุกหน้าที่ใช้ Elementor

# 2. ตรวจสอบ PHP Memory Limit ใน WordPress
ไปที่ WordPress Admin > Tools > Site Health > Info > Server
ดูค่า PHP Memory Limit ต้องไม่ต่ำกว่า 256M

# 3. Regenerate CSS ถ้าหน้าเว็บแสดงผลแปลกๆ
ไปที่ Elementor > Tools > คลิก "Regenerate CSS & Data"

# 4. ตรวจสอบ Plugin Conflict
ปิด Plugin ทีละตัว แล้วดูว่าปัญหาหายไปหรือไม่
วิธีปลอดภัยคือใช้ Health Check & Troubleshooting Plugin

# 5. ตรวจสอบ Elementor Version ใน Site Health
ไปที่ Tools > Site Health > Info > Active Plugins
ดูว่า Elementor เป็น Version ล่าสุดหรือไม่

Tip: ถ้า Elementor Editor ไม่โหลดหรือค้าง ให้ลองเปิดใน Private/Incognito Mode ก่อน เพราะปัญหามักเกิดจาก Browser Cache หรือ Extension ของ Browser รบกวนการทำงาน

แก้ปัญหาที่พบบ่อย

Error: "Elementor Editor ไม่โหลด หน้าจอวนอยู่กับที่"

ปัญหานี้มักเกิดจาก PHP Memory Limit ต่ำเกินไป หรือ Plugin อื่นขัดแย้งกัน ให้แก้ไขโดยเพิ่มค่า Memory ใน cPanel ไปที่ MultiPHP INI Editor เลือก Home Directory แล้วเพิ่มบรรทัด:

memory_limit = 256M
max_execution_time = 120
max_input_vars = 3000

จากนั้น Clear Cache ของ Browser และลองเปิด Elementor ใหม่อีกครั้ง

Error: "Sorry, you need permissions to do this" เมื่อเปิด Elementor

ปัญหานี้เกิดจาก User ที่ Login อยู่ไม่มีสิทธิ์ใช้ Elementor ให้ตรวจสอบ User Role ใน WordPress Admin > Users ว่า Role เป็น Editor หรือ Administrator และไปที่ Elementor > Settings > Advanced > Role Manager เพื่อกำหนดสิทธิ์ให้ถูกต้อง

Error: "The preview could not be loaded" หลังกด Edit

ปัญหานี้มักเกิดจาก WordPress Address URL ไม่ตรงกับ Site Address URL หรือมีปัญหาด้าน SSL ให้ตรวจสอบใน WordPress > Settings > General ว่า URL ทั้งสองเหมือนกัน และใช้ HTTPS ทั้งคู่ นอกจากนี้ให้ตรวจสอบว่า .htaccess ไม่ได้บล็อก request ไปยัง wp-admin:

# ตรวจสอบ .htaccess ใน public_html
# ต้องมีบรรทัดนี้สำหรับ WordPress:
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Error: CSS Elementor ไม่โหลด หน้าเว็บดูแปลก ไม่มี Style

เกิดขึ้นเมื่อ Elementor ไม่สามารถ Generate CSS ไปยัง Folder wp-content/uploads/elementor/css/ ได้ เพราะ Permission ของ Folder ผิด ให้เข้า cPanel > File Manager แล้วแก้ Permission ของ wp-content/uploads/ เป็น 755 และ File Permission เป็น 644 จากนั้นไปที่ Elementor > Tools > Regenerate CSS & Data

Error: Elementor ทำให้เว็บโหลดช้ามาก

Elementor โหลด CSS/JS ในทุกหน้าแม้ไม่ได้ใช้ ให้เปิด Improved Asset Loading ใน Elementor > Settings > Advanced และตั้งค่าให้ Load Elementor Scripts เฉพาะหน้าที่ใช้ Elementor เท่านั้น นอกจากนี้ใช้ Plugin Cache ควบคู่เสมอ

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

Q: Elementor ฟรีกับ Pro ต่างกันอย่างไร ควรใช้อันไหน?

Elementor Free มี Widget พื้นฐานกว่า 40 ตัว เหมาะกับเว็บบล็อก พอร์ตโฟลิโอ และธุรกิจทั่วไป ส่วน Elementor Pro (ราคาเริ่ม $59/ปี) เพิ่ม Theme Builder ที่ให้ออกแบบ Header/Footer/Archive/Single Post Template รวมถึง WooCommerce Builder, Form Builder, Popup Builder และ Widget พิเศษอีกกว่า 60 ตัว สำหรับมือใหม่แนะนำเริ่มจากฟรีก่อน แล้วค่อยอัปเกรดเมื่อต้องการฟีเจอร์ขั้นสูง

Q: Elementor ทำงานกับทุก Theme ของ WordPress ได้ไหม?

Elementor ทำงานได้กับ WordPress Theme ส่วนใหญ่ แต่ผลลัพธ์ที่ดีที่สุดจะได้เมื่อใช้กับ "Hello Elementor" Theme ที่ทีม Elementor พัฒนาขึ้นมาโดยเฉพาะ เพราะแทบไม่มี CSS หรือ JS ของตัวเอง ทำให้ไม่ขัดแย้งกับ Elementor นอกจากนี้ Theme ยอดนิยมอย่าง Astra, OceanWP, GeneratePress ก็รองรับ Elementor ได้ดีมาก

Q: ถ้าเลิกใช้ Elementor แล้วจะเกิดอะไรขึ้นกับเนื้อหาบนเว็บ?

เนื้อหาที่สร้างด้วย Elementor จะยังอยู่ในฐานข้อมูล WordPress แต่จะแสดงในรูปแบบ Raw HTML ที่มี Elementor Shortcode ซึ่งอาจดูแปลกๆ เมื่อมองใน Default Editor โดยเนื้อหาจะไม่หายไป แต่การจัดรูปแบบอาจเสียหาย ดังนั้นถ้าวางแผนเปลี่ยน Page Builder ควรย้ายเนื้อหาและทดสอบอย่างรอบคอบก่อน

Elementor Page Builder คู่มือเริ่มต้นสำหรับมือใหม่