WooCommerce + Elementor: มาสร้างสิ่งดีๆกันเถอะ

เผยแพร่แล้ว: 2022-07-27

คุณต้องการปรับแต่งและออกแบบเว็บไซต์ WordPress ของคุณโดยไม่ต้องจ้างนักพัฒนาหรือไม่? ข่าวดี: เป็นไปได้อย่างสมบูรณ์ด้วยปลั๊กอินตัวสร้างหน้า WordPress

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

ตอนนี้ หากคุณสงสัยว่าปลั๊กอินตัวสร้างหน้า WordPress ตัวใดที่คุณควรพิจารณา คุณมาถูกที่แล้ว ในบทความนี้ เราจะทบทวนหนึ่งในตัวเลือกยอดนิยม: Elementor ซึ่งถือเป็นมาตรฐานทองคำ Elementor เป็นปลั๊กอิน WordPress ที่มีการติดตั้งมากที่สุดเป็นอันดับสอง โดยมีการติดตั้งที่ใช้งานอยู่ 2 ล้านครั้ง – ใช้โดยเว็บไซต์ WordPress ประมาณ 15.9%

เราจะเริ่มต้นด้วยภาพรวมโดยย่อของ Elementor และตรวจสอบอินเทอร์เฟซ คุณลักษณะ และราคาของปลั๊กอินเพิ่มเติม เพื่อช่วยให้คุณพิจารณาว่าเป็นตัวเลือกที่เหมาะสมสำหรับไซต์ของคุณหรือไม่ ไปกันเถอะ!

ปลั๊กอิน Elementor: ภาพรวมโดยย่อ

Elementor เป็นปลั๊กอินสร้างหน้า WordPress แบบลากและวางที่ให้คุณสร้างหน้าเว็บและโพสต์ที่ไม่ซ้ำใครเมื่อเปรียบเทียบกับเทมเพลตหน้ามาตรฐานที่มาพร้อมกับธีม WooCommerce หรือ WordPress ของคุณ

ไม่จำเป็นต้องมีการเข้ารหัสและช่วยให้คุณสามารถกำหนดการตั้งค่าและจัดระเบียบเนื้อหาและองค์ประกอบของหน้าของคุณได้อย่างง่ายดายด้วยเครื่องมือลากและวาง

เริ่มต้นด้วยการตรวจสอบปลั๊กอินโดยดูว่าอินเทอร์เฟซ Elementor ทำงานอย่างไร

การทำความเข้าใจส่วนต่อประสานปลั๊กอิน Elementor

เมื่อเทียบกับปลั๊กอินตัวสร้างหน้าอื่น ๆ Elementor มีอินเทอร์เฟซที่เรียบง่ายและราบรื่นที่สุด เมื่อคุณเปิดปลั๊กอินครั้งแรก คุณจะเข้าสู่หน้าดังนี้:

พื้นที่สีเทาประเหมือนเป็นพื้นที่เนื้อหาของคุณ นอกพื้นที่นี้ ธีมปกติของคุณจะปรากฏขึ้น ในขณะที่ภายในพื้นที่ที่มีจุด คุณสามารถเพิ่มวิดเจ็ตและสร้างการออกแบบของคุณเองได้

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

วิธีง่ายๆ ในการลากและวางองค์ประกอบที่ต้องการบนหน้า:

เมื่อคุณวางองค์ประกอบบนหน้าของคุณ Elementor จะแบ่งองค์ประกอบออกเป็นสองโครงสร้างเค้าโครง โดยให้องค์ประกอบโครงสร้างที่แตกต่างกันสององค์ประกอบ ดังที่แสดงด้านล่าง

องค์ประกอบโครงสร้างเหล่านี้รวมถึง:

  • ส่วน: ทำเครื่องหมายด้วยสีน้ำเงิน
  • คอลัมน์: อยู่ในส่วนที่ทำเครื่องหมายด้วยสีดำ คุณสามารถเพิ่มคอลัมน์ได้มากเท่าที่ต้องการภายในส่วน

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

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

ตัวอย่างเช่น ฉันได้เพิ่มรูปภาพและเลือกรูปภาพจากไลบรารีรูปภาพเริ่มต้นของ Elementor ดังที่แสดงด้านล่างในภาพ คุณสามารถเปลี่ยนขนาดและการจัดตำแหน่งของรูปภาพ เพิ่มคำอธิบายภาพ และเชื่อมโยง URL ที่เหมาะสมได้

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

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

ดังนั้น Elementor ค่อนข้างใช้งานง่ายและมีตัวเลือกการปรับแต่งแบบลากและวางที่ง่ายดาย - คุณสามารถสร้างเว็บไซต์ในฝันของคุณในเวลาไม่นาน

ตอนนี้โดยที่ไม่ต้องใช้เวลามาก มาดูคุณสมบัติของตัวสร้างเพจ Elementor กัน

คุณสมบัติ Elementor อันดับต้น ๆ ที่ทำให้เป็นเครื่องมือสร้างเพจที่ยอดเยี่ยมสำหรับ WooCommerce

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

  1. ไลบรารีเทมเพลตที่สร้างไว้ล่วงหน้าจำนวนมาก

Elementor มีเทมเพลตที่หลากหลาย คลิกที่ไอคอน เพิ่มเทมเพลต ด้านล่างเพื่อเพิ่มเทมเพลต

เลือกจากเทมเพลตกว่า 300 รายการจาก ไลบรารีเทมเพลต Elementor และเพิ่มลงในเพจของคุณได้ในคลิกเดียว

ตั้งแต่เปิดตัว Elementor 2.0 เทมเพลตเหล่านี้มาในสองรูปแบบ:

  • บล็อก: จัดเตรียมการออกแบบสำหรับส่วนเฉพาะแทนที่จะเป็นทั้งหน้า ตัวอย่างเช่น คุณสามารถเพิ่มส่วน เกี่ยวกับบริษัท หรือส่วนติดต่อที่สร้างไว้ล่วงหน้าให้กับเค้าโครงหน้าที่มีอยู่โดยใช้บล็อก
  • หน้า – นำเสนอการออกแบบแบบเต็มหน้า ซึ่งคุณสามารถนำเข้าได้ด้วยคลิกเดียวและปรับแต่งได้ตามต้องการ

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

นอกจากนี้ยังขจัดความยุ่งยากในการสร้างการออกแบบหน้าใหม่ตั้งแต่ต้นในแต่ละครั้ง

  1. การควบคุมการออกแบบที่ตอบสนองและการแสดงตัวอย่างบนมือถือ

การใช้งานมือถือเพิ่มขึ้นอย่างต่อเนื่องในแต่ละเดือน และประมาณ 73.1% ของนักออกแบบเว็บไซต์เชื่อว่าการออกแบบเพจที่ไม่ตอบสนองเป็นหนึ่งในสาเหตุที่ใหญ่ที่สุดเบื้องหลังการละทิ้งเว็บไซต์

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

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

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

ดังนั้นจึงทำให้มั่นใจได้ว่าเว็บไซต์ของคุณตอบสนองได้ 100% จึงดูดีบนอุปกรณ์ทั้งหมด รวมทั้งเดสก์ท็อป แท็บเล็ต และอุปกรณ์มือถือ

  1. ตัวเลือกการปรับแต่งที่ไร้ขีดจำกัด

การปรับแต่งนั้นไร้ขีดจำกัดด้วย Elementor และไม่มีข้อผูกมัดว่าคุณจะออกแบบเว็บไซต์และองค์ประกอบต่างๆ ได้อย่างไร

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

ในเวลาเดียวกัน เมนูขั้นสูงช่วยให้คุณจัดการเลย์เอาต์ เอฟเฟกต์การเคลื่อนไหว พื้นหลัง เส้นขอบ คุณลักษณะ และปัจจัยอื่นๆ ดังที่แสดงด้านล่าง

  1. การควบคุมเค้าโครงโดยละเอียด

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

Elementor ทำให้ง่ายต่อการจัดตำแหน่งส่วน วิดเจ็ต และคอลัมน์ของคุณในตำแหน่งที่คุณต้องการด้วยตัวเลือกการควบคุมที่ใช้งานง่ายมากมาย

การใช้ตัวควบคุมเลย์เอาต์ในเมนูขั้นสูง คุณสามารถ:

  • ตั้งค่า ระยะขอบและช่องว่าง ภายในสำหรับส่วน วิดเจ็ต และคอลัมน์ด้วยตนเอง
  • เลือก ความกว้าง ของส่วน – ค่าเริ่มต้น เต็มความกว้าง ในบรรทัด และกำหนดเอง
  • ปรับ ตำแหน่ง ของวิดเจ็ตภายในคอลัมน์ – ค่าเริ่มต้น คงที่ และแน่นอน
  • ปรับ ช่องว่าง ระหว่างคอลัมน์และสร้างพื้นที่ว่างสำหรับเลย์เอาต์ที่สะอาด

ดังนั้น หากไม่มีทักษะในการเขียนโค้ด คุณสามารถปรับตำแหน่งของวิดเจ็ตและปรับแต่งคอลัมน์และส่วนต่างๆ ได้ตามต้องการ

  1. ประวัติการแก้ไขที่สมบูรณ์ของความคืบหน้าด้วยการเลิกทำ/ทำซ้ำการเปลี่ยนแปลง

หนึ่งในคุณสมบัติที่ดีที่สุดของ Elementor คือมันให้คุณดูตัวอย่าง ประวัติการ เปลี่ยนแปลงทั้งหมดที่คุณทำ ดังนั้นการบันทึกทุกการกระทำในประวัติ

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

  1. ทิ้งไว้เบื้องหลังรหัสที่สะอาด

หากคุณต้องการปิดการใช้งาน Elementor ในอนาคตด้วยเหตุผลบางอย่าง คุณไม่ต้องกังวลว่าจะทิ้งรหัสย่อไว้มากมาย เช่น Divi Builder

Elementor ทิ้งโค้ดที่สะอาดไว้ เพื่อให้มั่นใจถึงประสิทธิภาพและความเร็วของหน้าที่เหมาะสมที่สุด

คุณสมบัติองค์ประกอบเพิ่มเติม

ต่อไปนี้เป็นคุณสมบัติเพิ่มเติมของปลั๊กอินตัวสร้างหน้า Elementor:

  • ตัว แก้ไขส่วนหัวและส่วนท้าย: คุณสามารถแก้ไขส่วนหัวและส่วนท้ายของเว็บไซต์ของคุณได้อย่างง่ายดายด้วย Elementor โดยไม่ต้องมีทักษะในการเขียนโค้ดใดๆ
  • การแก้ไขข้อความแบบอินไลน์: คุณลักษณะนี้ช่วยให้คุณสามารถแก้ไขข้อความบนหน้าจอได้ ทำให้ง่ายต่อการแก้ไขเนื้อหาข้อความที่มีอยู่หรือเขียนโพสต์ในบล็อก
  • RTL และการแปลพร้อม: Elementor มาใน 23 ภาษาที่แปลแล้ว และคุณสามารถแปลเป็นภาษาเพิ่มเติมได้อย่างง่ายดายเนื่องจากรองรับภาษา RTL เต็มรูปแบบ
  • วิดเจ็ต WooCommerce: มีวิดเจ็ต WooCommerce ที่สร้างไว้ล่วงหน้า เช่น รายการราคาและตารางราคา เพื่อให้การสร้างเว็บไซต์อีคอมเมิร์ซเป็นเรื่องง่าย
  • การผสานการทำงานกับบุคคลที่สาม: Elementor รองรับการผสานการทำงานกับบุคคลที่สาม ซึ่งรวมถึง ActiveCampaign และ MailChimp
  • ตัวเลือกสีและตัวพิมพ์สากล: Elementor ให้คุณตั้งค่าตัวพิมพ์และสีทั่วโลกเพื่อสร้างการออกแบบที่ครอบคลุมในทุกหน้า นอกจากนี้ คุณยังสามารถเลือกแบบอักษร Google กว่า 800 แบบสำหรับการออกแบบเว็บไซต์ของคุณ
  • โหมดการบำรุงรักษา: คุณสามารถใช้เทมเพลตโหมดการบำรุงรักษาของ Elementor เพื่อตั้งค่าเว็บไซต์ของคุณในโหมดการบำรุงรักษา

รีวิว Elementor Pro

แม้ว่าตัวสร้างหน้าหลักของ Elementor จะเป็นโอเพ่นซอร์สและฟรี แต่คุณสามารถอัปเกรดเป็นเวอร์ชัน Elementor Pro ได้ ซึ่งมีฟังก์ชันที่มีประโยชน์เพิ่มเติม

ต่อไปนี้คือลักษณะโดยย่อเกี่ยวกับคุณลักษณะบางอย่างของปลั๊กอิน Elementor Pro ใหม่:

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

ดังนั้น หากคุณต้องการคุณสมบัติเพิ่มเติม เทมเพลตระดับพรีเมียม และวิดเจ็ตทั่วโลก คุณสามารถไปที่ปลั๊กอิน Elementor Pro ได้ในราคาเริ่มต้นเพียง $49

รีวิวราคา Elementor

หากคุณต้องการสร้างเว็บไซต์ที่มีสไตล์เรียบง่ายและเรียบง่าย ปลั๊กอินเวอร์ชันฟรีน่าจะเพียงพอกับความต้องการของคุณ โดยพิจารณาว่าจะเป็นเครื่องมือสร้างเพจฟรีที่มีคุณลักษณะหลากหลายที่สุด

อย่างไรก็ตาม เพื่อสร้างเว็บไซต์ที่เป็นมืออาชีพมากขึ้น Elementor เสนอแผนระดับพรีเมียมสี่แผนพร้อมคุณสมบัติระดับพรีเมียม เช่น การสนับสนุนวีไอพีและโปรไฟล์ผู้เชี่ยวชาญของ Elementor

แผน Essential, Expert, Studio และ Agency ของปลั๊กอิน Elementor มีค่าใช้จ่าย $49, $199, $499 และ $999 ต่อปี ดังนั้น Elementor จึงเหมาะสำหรับทุกคน และไม่ว่าคุณจะเป็นนักออกแบบเว็บไซต์ นักพัฒนา หรือเจ้าของเอเจนซี่ Elementor มีคุณสมบัติสำหรับทุกความต้องการและความต้องการ

บทสรุป: คำตัดสินสุดท้าย

หลังจากการตรวจสอบที่ครอบคลุมนี้ พูดได้เลยว่า Elementor มีคุณสมบัติที่จำเป็นทั้งหมดที่จำเป็นในการสร้างเว็บไซต์ WordPress หรือ WooCommerce

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

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