สิ่งที่ทำให้ Elementor เป็นผู้สร้างหน้า WordPress ที่ใช้กันอย่างแพร่หลายที่สุด
Elementor ได้เติบโตจากผู้สร้างหน้าที่เรียบง่ายที่ใช้การลากและวาง ไปสู่แพลตฟอร์มการสร้างเว็บไซต์ที่ครบวงจรซึ่งใช้ในเว็บไซต์มากกว่า 16 ล้านแห่ง วิธีการแก้ไขแบบภาพช่วยให้คุณออกแบบหน้าในเวลาจริงโดยไม่ต้องเขียนโค้ด ในขณะที่ Theme Builder ขยายการควบคุมไปยังส่วนหัว ส่วนท้าย เทมเพลตโพสต์เดี่ยว หน้าเก็บถาวร และรูปแบบผลิตภัณฑ์ WooCommerce
ไม่ว่าคุณจะสร้างพอร์ตโฟลิโอ เว็บไซต์องค์กร ร้านค้าออนไลน์ หรือบล็อก Elementor ให้เครื่องมือในการสร้างการออกแบบระดับมืออาชีพโดยไม่ต้องพึ่งพานักพัฒนา คู่มือนี้ครอบคลุมทุกอย่างตั้งแต่พื้นฐานของอินเทอร์เฟซไปจนถึงเทคนิคขั้นสูงสำหรับเนื้อหาที่มีพลศาสตร์ การเพิ่มประสิทธิภาพ และระบบเสริมที่กำลังเติบโต
ทำความเข้าใจกับอินเทอร์เฟซของ Elementor
Elementor แทนที่ตัวแก้ไข WordPress เริ่มต้นด้วยตัวแก้ไขภาพแบบสด เมื่อคุณคลิก "แก้ไขด้วย Elementor" หน้าเว็บจะโหลดในมุมมองแบบแบ่ง: พื้นที่เนื้อหาของคุณอยู่ทางด้านขวาและแผง Elementor อยู่ทางด้านซ้าย
องค์ประกอบหลักของอินเทอร์เฟซ
- แผงด้านซ้าย: ประกอบด้วยวิดเจ็ต การตั้งค่า การนำทาง และตัวเปลี่ยนโหมดที่ตอบสนอง วิดเจ็ตจะถูกจัดระเบียบตามหมวดหมู่ (พื้นฐาน, โปร, ทั่วไป, เว็บไซต์, WooCommerce)
- แคนวาส: ตัวอย่างหน้าเว็บสดของคุณที่คุณลาก วาง และจัดเรียงองค์ประกอบ คลิกที่องค์ประกอบใด ๆ เพื่อแก้ไขโดยตรง
- โครงสร้างส่วน/คอลัมน์: หน้าเว็บถูกสร้างขึ้นด้วย Sections (แถวเต็มความกว้าง) ที่มี Columns ซึ่งถือวิดเจ็ต Elementor 3.6+ ได้แนะนำ Containers (Flexbox) เป็นทางเลือกที่ทันสมัยกว่าในรูปแบบส่วน/คอลัมน์
- Navigator: มุมมองต้นไม้ของโครงสร้างหน้าเว็บของคุณ ซึ่งจำเป็นสำหรับการจัดการเลย์เอาต์ที่ซับซ้อนด้วยองค์ประกอบที่ซ้อนกัน
- โหมดตอบสนอง: สลับระหว่างมุมมอง Desktop, Tablet และ Mobile การตั้งค่ามากที่สุดสามารถปรับแต่งได้ตามจุดหยุด
- แผงประวัติ: ย้อนกลับ/ทำซ้ำพร้อมประวัติการแก้ไขทั้งหมด คุณสามารถย้อนกลับไปยังสถานะที่บันทึกไว้ก่อนหน้านี้ได้
Flexbox Containers กับ Sections
องค์ประกอบ Container ใหม่ของ Elementor ใช้การจัดเรียง CSS Flexbox แทนที่ระบบ Section/Column เก่า Containers สร้าง HTML ที่สะอาดขึ้นด้วย div ห่อหุ้มที่น้อยลง ส่งผลให้หน้าเว็บมีน้ำหนักเบาขึ้น นอกจากนี้ยังมีตัวเลือกเลย์เอาต์ที่ยืดหยุ่นมากขึ้น รวมถึงทิศทางแถวและคอลัมน์ การห่อหุ้ม การจัดตำแหน่ง และการควบคุมช่องว่างที่ไม่สามารถทำได้ด้วยระบบเก่า โครงการใหม่ควรใช้ Containers โดยเฉพาะ เปิดใช้งานได้ใน Elementor → การตั้งค่า → ฟีเจอร์
ภาพรวมของห้องสมุดวิดเจ็ต
ห้องสมุดวิดเจ็ตของ Elementor ถูกจัดระเบียบเป็นหมวดหมู่ รุ่นฟรีรวมถึงวิดเจ็ตประมาณ 40 รายการ ในขณะที่ Elementor Pro เพิ่มวิดเจ็ตและฟีเจอร์เพิ่มเติมอีกกว่า 50 รายการ
| หมวดหมู่ | วิดเจ็ตฟรี | วิดเจ็ตโปร |
|---|---|---|
| พื้นฐาน | หัวข้อ, รูปภาพ, ตัวแก้ไขข้อความ, วิดีโอ, ปุ่ม, ตัวแบ่ง, ช่องว่าง, แผนที่ Google | — |
| ทั่วไป | ไอคอน, กล่องรูปภาพ, กล่องไอคอน, การให้คะแนนดาว, เคาน์เตอร์, แถบความก้าวหน้า, คำรับรอง, แท็บ, แอคคอร์เดียน, สลับ, การแจ้งเตือน | — |
| โปร | — | โพสต์, พอร์ตโฟลิโอ, สไลด์, แกลเลอรี, ฟอร์ม, ตารางราคา, รายการราคา, กล่องพลิก, การเรียกร้องให้ดำเนินการ, สื่อ Carousel, คำรับรอง Carousel, นับถอยหลัง, ปุ่มแชร์, Blockquote, เทมเพลต |
| องค์ประกอบธีม | — | โลโก้เว็บไซต์, ชื่อเว็บไซต์, ชื่อหน้า, ชื่อโพสต์, เนื้อหาโพสต์, ข้อความย่อโพสต์, รูปภาพที่โดดเด่น, กล่องผู้เขียน, การนำทางโพสต์, ความคิดเห็นโพสต์, ฟอร์มค้นหา, แผนผังเว็บไซต์ |
| WooCommerce | — | ผลิตภัณฑ์, หมวดหมู่ผลิตภัณฑ์, เพิ่มผลิตภัณฑ์ลงในรถเข็น, ราคาผลิตภัณฑ์, การให้คะแนนผลิตภัณฑ์, สต็อกผลิตภัณฑ์, รูปภาพผลิตภัณฑ์, เมตาผลิตภัณฑ์, ชำระเงิน, รถเข็น, บัญชีของฉัน, เมนูรถเข็น |
| WordPress | แถบด้านข้าง, หมวดหมู่, หน้า, ปฏิทิน, ค้นหา, เมฆแท็ก, เมนูนำทาง, เสียง, เก็บถาวร, RSS | — |
ระบบเทมเพลต
เทมเพลตคือเลย์เอาต์ที่ออกแบบล่วงหน้าซึ่งคุณสามารถบันทึก ใช้ซ้ำ และแชร์ข้ามเว็บไซต์ของคุณ ระบบเทมเพลตของ Elementor ทำงานในหลายระดับ
ประเภทเทมเพลต
- เทมเพลตหน้า: การออกแบบหน้าแบบครบถ้วนที่คุณสามารถนำเข้าและปรับแต่งได้
- เทมเพลตส่วน: ส่วนบุคคล (ฮีโร่ ฟีเจอร์ ราคา คำถามที่พบบ่อย) ที่คุณสามารถรวมกันเพื่อสร้างหน้าเว็บ
- วิดเจ็ตทั่วโลก: วิดเจ็ตที่กำหนดค่าเพียงครั้งเดียวซึ่งปรากฏเหมือนกันในทุกหน้าเว็บที่ใช้งาน แก้ไขวิดเจ็ตทั่วโลก และทุกอินสแตนซ์จะอัปเดตพร้อมกัน — เหมาะสำหรับ CTAs แบนเนอร์ และข้อมูลการติดต่อ
- เทมเพลต Theme Builder (โปร): ควบคุมการออกแบบธีมทั้งหมดของคุณรวมถึงส่วนหัว ส่วนท้าย โพสต์เดี่ยว หน้าเก็บถาวร และผลลัพธ์การค้นหา
Elementor รวมถึงห้องสมุดเทมเพลตที่มีเทมเพลตที่ออกแบบอย่างมืออาชีพหลายร้อยรายการ คุณยังสามารถบันทึกส่วนหรือหน้าใด ๆ เป็นเทมเพลตเพื่อใช้ซ้ำและส่งออกเทมเพลตเป็นไฟล์ JSON เพื่อแชร์ระหว่างเว็บไซต์
Theme Builder: การควบคุมเว็บไซต์ทั้งหมด
Theme Builder เป็นฟีเจอร์ที่มีค่าที่สุดของ Elementor Pro มันช่วยให้คุณออกแบบทุกส่วนของธีม WordPress ของคุณได้อย่างมีวิสัยทัศน์ โดยไม่ต้องแตะต้องไฟล์เทมเพลต PHP เข้าถึงได้จาก Elementor → Theme Builder.
พื้นที่เทมเพลต
- ส่วนหัว: ออกแบบส่วนหัวที่กำหนดเองด้วยโลโก้ เมนูนำทาง การค้นหา ไอคอนรถเข็น และองค์ประกอบอื่น ๆ สร้างส่วนหัวหลายรายการด้วยเงื่อนไขการแสดง (เช่น ส่วนหัวที่แตกต่างกันสำหรับบล็อกกับร้านค้า)
- ส่วนท้าย: ส่วนท้ายที่กำหนดเองพร้อมคอลัมน์ วิดเจ็ต การลงทะเบียนจดหมายข่าว ลิงก์โซเชียล และข้อความลิขสิทธิ์
- โพสต์เดี่ยว: ควบคุมเลย์เอาต์ของโพสต์บล็อกแต่ละรายการรวมถึงชื่อ รูปภาพที่โดดเด่น เนื้อหา ชีวประวัติผู้เขียน ความคิดเห็น และโพสต์ที่เกี่ยวข้อง
- หน้าเดี่ยว: เทมเพลตเริ่มต้นสำหรับหน้าที่ไม่ได้แก้ไขด้วย Elementor
- เก็บถาวร: ออกแบบหน้าหมวดหมู่ หน้าป้ายกำกับ เก็บถาวรผู้เขียน เก็บถาวรวันที่ และผลลัพธ์การค้นหา
- ผลิตภัณฑ์ (WooCommerce): เลย์เอาต์หน้าผลิตภัณฑ์เดี่ยวที่กำหนดเองพร้อมการควบคุมทั้งหมดเกี่ยวกับแกลเลอรีรูปภาพผลิตภัณฑ์ ชื่อ ราคา ปุ่มเพิ่มลงในรถเข็น แท็บ และผลิตภัณฑ์ที่เกี่ยวข้อง
- เก็บถาวรผลิตภัณฑ์: เลย์เอาต์หน้าร้านและหน้าหมวดหมู่ผลิตภัณฑ์ที่กำหนดเอง
- 404 Page: ออกแบบประสบการณ์ "ไม่พบหน้า" ที่กำหนดเอง
ปลดล็อก Theme Builder, Popup Builder, และวิดเจ็ตโปร 50+ รายการ
Elementor Pro ให้คุณควบคุมการออกแบบเว็บไซต์ WordPress ทั้งหมดของคุณด้วยวิดเจ็ตระดับมืออาชีพ เนื้อหาที่มีพลศาสตร์ และ WooCommerce Builder
รับ Elementor Pro →Popup Builder
Elementor Pro รวมถึง Popup Builder ที่มีฟีเจอร์ครบถ้วนซึ่งไม่จำเป็นต้องใช้ปลั๊กอินป๊อปอัปแยกต่างหาก คุณสามารถสร้างป๊อปอัปได้อย่างมีวิสัยทัศน์โดยใช้อินเทอร์เฟซการลากและวางเดียวกันและกระตุ้นพวกเขาตามการโต้ตอบของผู้ใช้ที่แตกต่างกัน
ตัวกระตุ้นป๊อปอัป
- เมื่อโหลดหน้า: ปรากฏเมื่อหน้าโหลด (พร้อมการหน่วงเวลาแบบเลือกได้)
- เมื่อเลื่อน: กระตุ้นหลังจากเลื่อนเปอร์เซ็นต์ของหน้าเว็บหรือถึง
- เมื่อคลิก: ปรากฏเมื่อผู้เข้าชมคลิกที่ปุ่ม ลิงก์ หรือองค์ประกอบอื่น
- หลังจากไม่มีการใช้งาน: แสดงเมื่อผู้เข้าชมไม่ได้ทำกิจกรรมใด ๆ เป็นเวลาที่กำหนด
- เมื่อมีเจตนาจะออก: ตรวจจับเมื่อเคอร์เซอร์เคลื่อนที่ไปยังปุ่มปิดเบราว์เซอร์ (เฉพาะเดสก์ท็อป)
กรณีการใช้งานป๊อปอัพทั่วไป ได้แก่ การลงทะเบียนรับจดหมายข่าว การประกาศโปรโมชั่น แบบฟอร์มการเข้าสู่ระบบ/ลงทะเบียน ข้อความยินยอมคุกกี้ และการตรวจสอบอายุ ใช้เงื่อนไขการแสดงเพื่อแสดงป๊อปอัพที่แตกต่างกันในหน้าแตกต่างกันและตั้งค่ากฎความถี่เพื่อหลีกเลี่ยงการรบกวนผู้เข้าชมด้วยป๊อปอัพเดียวกันซ้ำ ๆ
WooCommerce Builder
WooCommerce Builder ช่วยให้คุณออกแบบหน้าผลิตภัณฑ์ที่กำหนดเอง หน้าเพจร้านค้า ตะกร้า เช็คเอาต์ และหน้าบัญชีของฉันได้อย่างมีวิสัยทัศน์ นี่มีค่าโดยเฉพาะอย่างยิ่งเพราะเทมเพลตเริ่มต้นของ WooCommerce นั้นใช้งานได้แต่พื้นฐาน
สิ่งที่คุณสามารถปรับแต่งได้
- เลย์เอาต์หน้าผลิตภัณฑ์เดียว (จัดเรียงภาพผลิตภัณฑ์ ชื่อ ราคา คำอธิบาย รีวิว)
- เลย์เอาต์กริดของหน้าเก็บผลิตภัณฑ์/ร้านค้าและการกรอง
- การออกแบบหน้าตะกร้าพร้อมคำแนะนำผลิตภัณฑ์ข้ามขาย
- เลย์เอาต์หน้าชำระเงินที่ปรับให้เหมาะสมสำหรับการแปลง
- หน้าบัญชีของฉันพร้อมวิดเจ็ตแดชบอร์ดที่กำหนดเอง
- หน้าขอบคุณพร้อมโอกาสในการขายเพิ่มเติม
Form Builder
Elementor Pro รวมวิดเจ็ตสร้างฟอร์มที่จัดการฟอร์มติดต่อ ฟอร์มลงทะเบียน การลงทะเบียนรับจดหมายข่าว และฟอร์มหลายขั้นตอน ฟอร์มสามารถเชื่อมต่อกับบริการการตลาดทางอีเมล (Mailchimp, ActiveCampaign, GetResponse, ConvertKit, Drip), CRM และเว็บฮุคที่กำหนดเอง การส่งฟอร์มสามารถกระตุ้นการกระทำอัตโนมัติเช่นการส่งอีเมล การเพิ่มผู้ติดตามในรายชื่อ หรือโพสต์ข้อมูลไปยัง API ภายนอก
Dynamic Content
เนื้อหาที่ไดนามิกเชื่อมต่อวิดเจ็ตของ Elementor กับข้อมูล WordPress ของคุณ แทนที่จะพิมพ์ข้อความคงที่ลงในวิดเจ็ตหัวเรื่อง คุณสามารถดึงชื่อหน้า ค่าฟิลด์ที่กำหนดเอง หรือข้อมูลไดนามิกอื่น ๆ นี่เป็นพื้นฐานสำหรับการสร้างการออกแบบที่ขับเคลื่อนด้วยเทมเพลตที่เติมข้อมูลโดยอัตโนมัติ
แหล่งข้อมูลไดนามิก
- ฟิลด์โพสต์และหน้า (ชื่อ, ข้อความย่อ, เนื้อหา, รูปภาพเด่น, วันที่, ผู้เขียน)
- ฟิลด์ที่กำหนดเอง (ACF, Pods, JetEngine, Meta Box, Toolset)
- ข้อมูลเว็บไซต์ (ชื่อเว็บไซต์, แท็กไลน์, โลโก้)
- ข้อมูลผู้ใช้ (ชื่อที่แสดง, อีเมล, อวาตาร์, บทบาท)
- ข้อมูลผลิตภัณฑ์ WooCommerce (ราคา, SKU, สถานะสต็อก, แบนด์ขาย)
- ข้อมูลเก็บ (ชื่อเงื่อนไข, คำอธิบาย, จำนวน)
Custom CSS และ Advanced Styling
ใช้คำสำคัญ selector เป็นตัวแทนสำหรับตัวเลือก CSS ขององค์ประกอบ ตัวอย่างเช่น: selector .elementor-heading-title { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
Responsive Editing
Elementor มีการควบคุมตามจุดแตกต่างสำหรับการตั้งค่าหลายรายการ คลิกที่ไอคอนอุปกรณ์ถัดจากการตั้งค่าใด ๆ เพื่อแสดงตัวเลือกที่ตอบสนอง คุณสามารถตั้งค่าให้มีค่าที่แตกต่างกันสำหรับเดสก์ท็อป แท็บเล็ต และมือถือสำหรับคุณสมบัติต่าง ๆ เช่น ขนาดฟอนต์ การเติมขอบ ขอบเขต ความกว้างของคอลัมน์ การมองเห็น และทิศทางเลย์เอาต์
เคล็ดลับการตอบสนอง
- ออกแบบเดสก์ท็อปก่อน จากนั้นปรับแต่งแท็บเล็ตและมือถือ
- ใช้ตัวเลือกซ่อนบนเดสก์ท็อป/แท็บเล็ต/มือถือเพื่อแสดงเลย์เอาต์ที่แตกต่างกันตามอุปกรณ์
- ตั้งค่าขนาดฟอนต์ในหน่วยสัมพัทธ์ (em/rem) หรือใช้การปรับขนาดฟอนต์ที่ตอบสนองของ Elementor
- ทดสอบบนอุปกรณ์จริง ไม่ใช่แค่การแสดงตัวอย่างที่ตอบสนอง — การเรนเดอร์บนอุปกรณ์จริงอาจแตกต่างกัน
- จุดแตกต่างที่กำหนดเอง (Pro) ช่วยให้คุณกำหนดความกว้างของอุปกรณ์ของคุณเองนอกเหนือจากสามค่าเริ่มต้น
Elementor Free vs. Pro: การเปรียบเทียบฟีเจอร์
| ฟีเจอร์ | ฟรี | โปร |
|---|---|---|
| วิดเจ็ต | ~40 วิดเจ็ตพื้นฐาน | ~100 วิดเจ็ตทั้งหมด |
| เทมเพลต | ห้องสมุดจำกัด | ห้องสมุดเทมเพลตเต็ม (300+) |
| ธีมบิลเดอร์ | ไม่มี | ส่วนหัว ส่วนท้าย หน้าคนเดียว เก็บข้อมูล |
| ป๊อปอัพบิลเดอร์ | ไม่มี | ป๊อปอัพบิลเดอร์เต็มรูปแบบพร้อมทริกเกอร์ |
| WooCommerce Builder | ไม่มี | ผลิตภัณฑ์ ร้านค้า ตะกร้า เช็คเอาต์ |
| Form Builder | ไม่มี | ฟอร์มพร้อมการเชื่อมต่อ |
| Dynamic Content | ไม่มี | แท็กไดนามิกเต็มรูปแบบ |
| Custom CSS | ไม่มี | Custom CSS ต่อองค์ประกอบ |
| ฟอนต์ที่กำหนดเอง | ไม่มี | อัปโหลดฟอนต์ที่กำหนดเอง |
| Global Widgets | ไม่มี | สร้างวิดเจ็ตทั่วโลกที่ใช้ซ้ำได้ |
| Motion Effects | ไม่มี | เอฟเฟกต์การเลื่อน เอฟเฟกต์เมาส์ |
| Custom Breakpoints | ไม่มี | กำหนดความกว้างของอุปกรณ์ที่กำหนดเอง |
| Role Manager | ไม่มี | ควบคุมการเข้าถึงการแก้ไขตามบทบาท |
| การสนับสนุน | ฟอรัมชุมชน | การสนับสนุนพรีเมียม |
| Elementor AI | จำกัด | การสร้างเนื้อหาและภาพ AI เต็มรูปแบบ |
สำหรับการเปรียบเทียบอย่างละเอียดของ Elementor กับผู้สร้างหน้าอื่น ๆ โปรดดูที่ การเปรียบเทียบผู้สร้างหน้า และ Elementor vs. Gutenberg บทความ.
การปรับแต่งประสิทธิภาพสำหรับเว็บไซต์ Elementor
Elementor สร้าง HTML, CSS, และ JavaScript เพิ่มเติมที่อาจส่งผลต่อเวลาในการโหลดหน้าเว็บหากไม่จัดการอย่างเหมาะสม นี่คือกลยุทธ์การปรับแต่งเฉพาะสำหรับเว็บไซต์ Elementor.
| การปรับแต่ง | ผลกระทบ | วิธีการดำเนินการ |
|---|---|---|
| ใช้คอนเทนเนอร์แทนส่วน | สูง — องค์ประกอบ DOM น้อยลง, HTML เล็กลง | Elementor → การตั้งค่า → ฟีเจอร์ → Flexbox Container |
| ปรับแต่งภาพ | สูง — ลดขนาดไฟล์ลง 60-80% | ใช้รูปแบบ WebP, การโหลดแบบขี้เกียจ, รูปภาพที่ตอบสนอง |
| ลดจำนวนวิดเจ็ต | ปานกลาง — องค์ประกอบน้อยลง = CSS/JS น้อยลง | รวมข้อความเป็นวิดเจ็ตน้อยลง หลีกเลี่ยงการใช้พื้นที่ว่างที่ว่างเปล่า |
| ลด CSS ทั่วไป | ปานกลาง — สไตล์ชีตเล็กลง | Elementor → การตั้งค่า → สไตล์ → ฟอนต์ทั่วไปเริ่มต้น |
| ใช้ปลั๊กอินแคช | สูง — ให้บริการหน้า HTML ที่แคชแล้ว | WP Rocket, LiteSpeed Cache, หรือ W3 Total Cache |
| ปรับแต่ง Google Fonts | ปานกลาง — ลดการบล็อกการเรนเดอร์ | Elementor → การตั้งค่า → ขั้นสูง → โหลด Google Fonts |
| ทำความสะอาด CSS ที่ไม่ได้ใช้งาน | ปานกลาง — ลบสไตล์สำหรับวิดเจ็ตที่ไม่ได้ใช้งาน | Elementor → การตั้งค่า → ประสิทธิภาพ → การโหลด CSS ที่ปรับปรุงแล้ว |
| ปิดการใช้งานวิดเจ็ตที่ไม่ได้ใช้งาน | ต่ำ-ปานกลาง — ป้องกันการโหลด JS/CSS ที่ไม่ได้ใช้งาน | ใช้ตัวจัดการวิดเจ็ตในตัวของ Elementor หรือ Element Pack lite |
สำหรับคู่มือที่ครอบคลุมเกี่ยวกับประสิทธิภาพของ WordPress รวมถึงการปรับแต่งด้านเซิร์ฟเวอร์ โปรดดูที่ คู่มือการปรับแต่งความเร็ว WordPress.
ระบบนิเวศของ Add-Ons
ระบบนิเวศที่เฟื่องฟูของ Add-ons จากบุคคลที่สามขยาย Elementor ด้วยวิดเจ็ต ฟีเจอร์ และการเชื่อมต่อเพิ่มเติม Add-ons ที่ได้รับความนิยม ได้แก่:
- Essential Addons for Elementor: วิดเจ็ต 90+ รวมถึงตารางข้อมูล ตารางราคา ไทม์ไลน์เนื้อหา แอคคอร์เดียนขั้นสูง และแกลเลอรีที่กรองได้
- Happy Addons Pro: 110+ วิดเจ็ตพร้อมฟังก์ชันการคัดลอกและวางข้ามโดเมน, การออกแบบที่ตั้งไว้ล่วงหน้า, และฟีเจอร์ขั้นสูงเช่นการเปรียบเทียบภาพและเอฟเฟกต์อนุภาค
- JetEngine: โครงสร้างเนื้อหาที่มีความยืดหยุ่นพร้อมประเภทโพสต์ที่กำหนดเอง, ฟิลด์ที่กำหนดเอง, เครื่องมือสร้างคำค้น, และรายการที่มีความยืดหยุ่น
- PowerPack: 80+ วิดเจ็ต รวมถึงเมนูขั้นสูง, วิดเจ็ต WooCommerce, เงื่อนไขการแสดงผล, และการปกป้องเนื้อหา
- Jetelements: วิดเจ็ตเพิ่มเติมที่มุ่งเน้นไปที่องค์ประกอบการออกแบบเช่นพารัลแลกซ์, อนุภาค, และข้อความเคลื่อนไหว
Elementor AI
Elementor AI เปิดตัวในปี 2023 และขยายตัวอย่างมีนัยสำคัญในปี 2025-2026 โดยรวมปัญญาประดิษฐ์เข้ากับตัวแก้ไขโดยตรง คุณสามารถสร้างเนื้อหาข้อความ, สร้างและแก้ไขภาพ, สร้างโค้ด CSS ที่กำหนดเอง, และรับข้อเสนอการจัดเลย์เอาต์โดยไม่ต้องออกจากอินเทอร์เฟซของ Elementor AI มีประโยชน์โดยเฉพาะในการสร้างข้อความเริ่มต้นสำหรับส่วนต่างๆ, สร้างภาพตัวอย่างระหว่างการออกแบบ, และเขียน CSS ที่กำหนดเองสำหรับเอฟเฟกต์ที่ไม่สามารถใช้ได้ผ่านอินเทอร์เฟซที่มองเห็นได้ ผู้ใช้ Pro จะได้รับความสามารถ AI ที่ขยายออกไป รวมถึงขีดจำกัดการใช้งานที่สูงขึ้นและการเข้าถึงโมเดลขั้นสูง
เคล็ดลับการทำงานเพื่อการออกแบบที่รวดเร็วขึ้น
- เริ่มต้นด้วยเทมเพลต: แม้ว่าคุณจะวางแผนที่จะปรับแต่งอย่างมาก แต่การเริ่มต้นด้วยเทมเพลตจะเร็วกว่าเริ่มจากศูนย์
- สร้างระบบการออกแบบ: กำหนดสี, ฟอนต์, และสไตล์ปุ่มทั่วโลกก่อนที่จะสร้างหน้า Elementor's Global Settings จะช่วยให้คุณตั้งค่าเหล่านี้ทั่วทั้งไซต์
- ใช้วิดเจ็ตทั่วโลก: สำหรับองค์ประกอบที่ซ้ำกันในหลายหน้า (CTAs, แบบฟอร์มจดหมายข่าว, ข้อมูลติดต่อ) สร้างวิดเจ็ตทั่วโลกเพียงครั้งเดียว
- คัดลอกและวางสไตล์: คลิกขวาที่องค์ประกอบใดๆ เพื่อคัดลอกสไตล์ จากนั้นวางลงในองค์ประกอบอื่น
- ทางลัดคีย์บอร์ด: Ctrl+Z (ย้อนกลับ), Ctrl+S (บันทึก), Ctrl+Shift+M (โหมดตอบสนอง), Ctrl+I (ผู้ช่วย)
- ใช้ Finder: Ctrl+E เปิดการค้นหาอย่างรวดเร็วเพื่อกระโดดไปยังหน้า, เทมเพลต, หรือการตั้งค่าใดๆ
- บันทึกบ่อยๆ: Elementor จะบันทึกอัตโนมัติ แต่การบันทึกด้วยตนเองจะช่วยให้แน่ใจว่างานของคุณได้รับการเก็บรักษา
ขยาย Elementor ด้วยวิดเจ็ตมืออาชีพ 90+ ตัว
Essential Addons for Elementor Pro เพิ่มตารางข้อมูล, ตารางราคา, เส้นเวลาเนื้อหา, แกลเลอรีที่กรองได้, และวิดเจ็ตอีกหลายสิบตัวให้กับเครื่องมือของคุณ
รับ Essential Addons Pro →สำหรับรายละเอียดเพิ่มเติม โปรดดูเอกสารทางการ: ศูนย์ช่วยเหลือ Elementor, เอกสารนักพัฒนา Elementor.
คำถามที่พบบ่อย
Elementor ทำให้เว็บไซต์ของฉันช้าลงหรือไม่?
Elementor เพิ่มโค้ดด้านหน้า (HTML, CSS, และ JS) ที่อาจเพิ่มน้ำหนักของหน้า อย่างไรก็ตาม ด้วยการปรับแต่งที่เหมาะสม — การใช้ Containers, การลดจำนวนวิดเจ็ต, การเปิดใช้งานการโหลด CSS ที่ดีขึ้น, และการใช้ปลั๊กอินแคช — เว็บไซต์ที่ใช้ Elementor สามารถบรรลุเวลาโหลดที่รวดเร็ว หลายเว็บไซต์ที่มีการเข้าชมสูงที่ใช้ Elementor มีคะแนนดีใน Core Web Vitals กุญแจสำคัญคือการปฏิบัติตามแนวทางการสร้างที่มีระเบียบมากกว่าการหลีกเลี่ยงเครื่องมือโดยสิ้นเชิง
ฉันสามารถใช้ Elementor กับธีม WordPress ใดก็ได้หรือไม่?
Elementor ทำงานร่วมกับธีม WordPress ส่วนใหญ่ อย่างไรก็ตาม ธีมบางตัวมีการรวม Elementor ที่ลึกซึ้งยิ่งขึ้นด้วยความเข้ากันได้ของส่วนหัว/ส่วนท้าย, สไตล์ที่สอดคล้องกัน, และวิดเจ็ต Elementor ที่เฉพาะเจาะจง ธีมเช่น Astra, GeneratePress, OceanWP, และ Hello (ธีมของ Elementor เอง) ได้รับการปรับให้เหมาะสมสำหรับ Elementor โดยเฉพาะและมอบประสบการณ์ที่ราบรื่นที่สุด
ความแตกต่างระหว่าง Elementor Free และ Pro คืออะไร?
Elementor Free มีตัวแก้ไขภาพที่สำคัญพร้อมวิดเจ็ตประมาณ 40 ตัว, เทมเพลตพื้นฐาน, และการควบคุมที่ตอบสนอง Elementor Pro เพิ่มวิดเจ็ตเพิ่มเติม 50+ ตัว, Theme Builder, Popup Builder, WooCommerce Builder, Form Builder, เนื้อหาที่มีความยืดหยุ่น, CSS ที่กำหนดเอง, วิดเจ็ตทั่วโลก, เอฟเฟกต์การเคลื่อนไหว, และการสนับสนุนระดับพรีเมียม สำหรับเว็บไซต์ธุรกิจ Pro เป็นสิ่งจำเป็นที่มีความเป็นจริง
ฉันสามารถใช้ Elementor สำหรับร้านค้า WooCommerce ได้หรือไม่?
ใช่ Elementor Pro's WooCommerce Builder ช่วยให้คุณออกแบบหน้าผลิตภัณฑ์ที่กำหนดเอง, สินค้าในร้าน, ตะกร้า, การชำระเงิน, และหน้าบัญชีได้อย่างเห็นภาพ คุณจะได้รับวิดเจ็ตเฉพาะสำหรับ WooCommerce เพื่อแสดงผลิตภัณฑ์, หมวดหมู่, ปุ่มเพิ่มลงในตะกร้า, และรายละเอียดผลิตภัณฑ์ ซึ่งให้การควบคุมการออกแบบที่มากกว่าที่เทมเพลตเริ่มต้นของ WooCommerce มีให้
Elementor เปรียบเทียบกับ Gutenberg ในปี 2026 อย่างไร?
Gutenberg (ตัวแก้ไขบล็อก WordPress) ได้รับการปรับปรุงอย่างมาก แต่ยังคงมุ่งเน้นไปที่การแก้ไขเนื้อหาเป็นหลัก Elementor มอบประสบการณ์การออกแบบที่ครอบคลุมมากขึ้นด้วยการควบคุมเลย์เอาต์ที่ขั้นสูง, ห้องสมุดวิดเจ็ตที่ใหญ่กว่า, และฟีเจอร์เช่น Theme Builder และ Popup Builder ที่ Gutenberg ยังไม่สามารถทำได้ อย่างไรก็ตาม Gutenberg มีน้ำหนักเบากว่า, โหลดได้เร็วกว่า, และกำลังปรับปรุงในทุกการปล่อย WordPress สำหรับการเปรียบเทียบอย่างละเอียด อ่านบทความ Elementor vs. Gutenberg ของเรา
ฉันจะย้ายจากตัวสร้างหน้าอื่นไปยัง Elementor ได้อย่างไร?
การย้ายจากตัวสร้างหน้าอื่นไปยัง Elementor ต้องการการสร้างหน้าใหม่เนื่องจากตัวสร้างหน้าใช้รหัสสั้นและโครงสร้างข้อมูลที่ไม่สามารถแลกเปลี่ยนกันได้ อย่างไรก็ตาม คุณสามารถใช้เนื้อหา WordPress (ข้อความ, รูปภาพ, ลิงก์) และสร้างเลย์เอาต์ใหม่ใน Elementor บางปลั๊กอินเสนอการย้ายบางส่วนจากตัวสร้างเฉพาะ แต่การสร้างใหม่ด้วยตนเองจะให้ผลลัพธ์ที่สะอาดกว่า วางแผนสำหรับการย้ายอย่างค่อยเป็นค่อยไป โดยการแปลงหน้าเป็นครั้งๆ ไป
Containers ของ Elementor คืออะไรและฉันควรใช้พวกมันหรือไม่?
Containers เป็นระบบเลย์เอาต์สมัยใหม่ของ Elementor ที่ใช้ CSS Flexbox พวกเขาแทนที่โมเดล Section/Column เก่าโดยใช้องค์ประกอบเดียวที่ยืดหยุ่นซึ่งสามารถทำหน้าที่เป็นทั้งส่วนและคอลัมน์ Containers สร้าง HTML ที่สะอาดกว่า, จำนวน DOM ที่น้อยลง, และเลย์เอาต์ที่ยืดหยุ่นมากขึ้น โครงการใหม่ทั้งหมดควรใช้ Containers โดยเฉพาะ เว็บไซต์ที่มีอยู่สามารถย้ายไปยัง Containers ได้อย่างค่อยเป็นค่อยไปโดยการสร้างใหม่ส่วนต่างๆ เป็น Containers
ฉันสามารถสร้างเว็บไซต์หลายภาษาด้วย Elementor ได้หรือไม่?
ใช่ Elementor เข้ากันได้กับปลั๊กอินการแปลหลักๆ รวมถึง WPML, Polylang, และ TranslatePress WPML มีการรวมที่ลึกซึ้งที่สุดพร้อมตัวแก้ไขการแปล Elementor ที่เฉพาะเจาะจง คุณสร้างหน้าในภาษาหลักเพียงครั้งเดียว จากนั้นแปลเป็นภาษาอื่นๆ เทมเพลต Theme Builder สามารถมีการแปลแยกสำหรับแต่ละภาษา
ฉันจะเพิ่มฟอนต์ที่กำหนดเองใน Elementor ได้อย่างไร?
Elementor Pro รวมฟีเจอร์ฟอนต์ที่กำหนดเองภายใต้ Elementor → Custom Fonts อัปโหลดไฟล์ฟอนต์ของคุณ (แนะนำ WOFF2 สำหรับประสิทธิภาพเว็บ) และจะสามารถใช้งานได้ในเมนูดรอปดาวน์ฟอนต์ทั่วทั้งตัวแก้ไข สำหรับ Elementor Free คุณสามารถใช้ปลั๊กอินเช่น Custom Fonts หรือเพิ่มการประกาศ @font-face ผ่าน functions.php ของธีมของคุณหรือปลั๊กอิน CSS ที่กำหนดเอง
Elementor Pro คุ้มค่ากับค่าใช้จ่ายหรือไม่?
สำหรับผู้ที่สร้างเว็บไซต์ธุรกิจ, เว็บไซต์ลูกค้า, หรือร้านค้าออนไลน์ Elementor Pro จะคืนทุนให้กับตัวเองอย่างรวดเร็วผ่านการประหยัดเวลาและความต้องการที่ลดลงสำหรับปลั๊กอินเพิ่มเติม Theme Builder เพียงอย่างเดียวแทนที่ความจำเป็นสำหรับธีมพรีเมียม, Popup Builder แทนที่ปลั๊กอินป๊อปอัพ, และ Form Builder แทนที่ปลั๊กอินฟอร์ม ที่ราคา $59 ต่อปีสำหรับไซต์เดียว มูลค่าที่เสนอจึงแข็งแกร่งสำหรับการใช้งานในระดับมืออาชีพ
