วิธีการใช้ Elementor Page Builder กับ WordPress

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

ฉันได้ทดสอบ Elementor เวอร์ชัน Pro และสร้างหน้า Landing Page แล้ว มันมาพร้อมกับฟังก์ชันการลากแล้ววางและใช้งานได้กับธีมใดๆ และคุณสามารถใช้วิดเจ็ต Free, Pro และ WordPress ทั้งหมดได้ในเวลาเดียวกัน มาอ่านบทความนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการติดตั้งและกำหนดค่า Elementor ด้วย WordPress

เหตุใดจึงเลือกตัวสร้างหน้า Elementor

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

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

คุณสมบัติของ Elementor Page Builder

Elementor เวอร์ชันฟรีมาพร้อมกับ Elements จำนวนจำกัด แต่ในเวอร์ชัน Pro คุณจะได้รับส่วนเสริม เช่น QI, Ultimate Add On เป็นต้น นอกจากนี้ คุณจะมีองค์ประกอบและเทมเพลตที่มีประโยชน์มากมายเพื่อสร้างไซต์ของคุณอย่างง่ายดาย .

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

Elementor แบ่งคุณลักษณะออกเป็น 4 หมวดหมู่

1. วิดเจ็ตพื้นฐาน

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

2. วิดเจ็ตโปร

วิดเจ็ต Pro ที่มี Elementor Pro ครอบคลุมเกือบทุกด้านและทุกวิดเจ็ตที่คุณอาจต้องใช้เพื่อสร้างเว็บไซต์ทุกประเภท เพิ่มและเลือกโพสต์จากหมวดหมู่ต่างๆ ประเภทโพสต์หรือเพียงแค่แสดงรายการล่าสุด ตารางราคา แกลเลอรี Flip Box การฝังเครือข่ายโซเชียลมีเดียอย่างง่าย ม้าหมุนสื่อต่างๆ Lottie Widget และ HotSpot (ฉันจะพูดถึงเรื่องนี้ในภายหลัง)

3. องค์ประกอบของธีม

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

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

4. วิดเจ็ต WooCommerce

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

ราคาและแผนของ Elementor Page Builder

Elementor Pro มาพร้อมกับ 5 แผนที่แตกต่างกัน โดยทั้งหมดมีตัวสร้างเพจ Elementor Pro และคุณสมบัติเช่น:

• ลากและวางตัวแก้ไขสด
• การออกแบบที่ตอบสนอง
• วิดเจ็ตพื้นฐานและโปรกว่า 90+
• 300+ เทมเพลตพื้นฐานและโปร
• ตัวสร้างธีม

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

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

หนึ่งในอันดับต้น ๆ คือ Studio สำหรับ 100 ไซต์ในราคา $499 และคุณจะได้รับสิทธิประโยชน์เพิ่มเติมจากการสนับสนุน VIP ซึ่งหมายความว่าคุณมีลำดับความสำคัญและตั๋วของคุณจะได้รับการตอบกลับภายใน 30 นาที เช่นเดียวกับแผนเอเจนซี่ที่แพงที่สุดสำหรับไซต์ 1,000 แห่งในราคา 1,000 ดอลลาร์

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

ความต้องการของระบบ/โฮสติ้งของ Elementor

ตามหน้าข้อกำหนดของระบบของ Elementor ควรใช้งานได้กับ PHP 128MB, MySQL 5.6 หรือสูงกว่า หรือ MariaDB 10.0 หรือสูงกว่า นอกจากนี้ยังควรใช้งานได้กับ PHP 7+ เพื่อจุดประสงค์ในการทดสอบ ฉันใช้ VultrHF พร้อมหน่วยความจำ PHP 2GB

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

ติดตั้งและกำหนดค่า Elementor Page Builder

การติดตั้ง Elementor เวอร์ชันฟรีจะเหมือนกับปลั๊กอินอื่น ๆ บนที่เก็บปลั๊กอิน WordPress ไปที่แดชบอร์ด WordPress → ปลั๊กอิน → เพิ่มใหม่ เรียกดู Elementor ติดตั้งและเปิดใช้งานปลั๊กอิน

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

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

เมื่อคุณทำเสร็จแล้วในแถบด้านข้างทางซ้ายบนแดชบอร์ด WordPress ของคุณ ให้ไปที่ Elementor → คลิกที่ License → คลิกปุ่ม Connect & Activate

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

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

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

ในการทำเช่นนั้น เริ่มต้นด้วยการสร้างหน้า "หน้าแรก" และแก้ไขด้วย Elementor ไปที่ Pages → Add New ตั้งชื่อโฮมเพจและเผยแพร่ จากนั้นคลิกปุ่ม Edit With Elementor

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

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

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

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

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

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

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

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

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

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

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

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

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

ผลลัพธ์ที่ได้คือบนมือถือ

และผลลัพธ์สุดท้ายบนเดสก์ท็อปมีเพียงส่วนเดียวเท่านั้น แต่ส่วนอื่น

ประสิทธิภาพของตัวสร้างหน้า Elementor บน Cloudways

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

– ผลลัพธ์ของ Elementor บน GTMetrix

– ผลลัพธ์ของ Elementor บน Pingdom Tools

– ผลลัพธ์ของ Elementor บน WebPageTest

สรุป

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

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

เรามักจะเห็นว่า Elementor บวมแค่ไหน มีการโหลดโค้ดที่ไม่จำเป็นจำนวนมาก ยากต่อการเพิ่มประสิทธิภาพ แต่อย่างที่คุณเห็นจากการทดสอบ ดูเหมือนว่า Elementor จะทำงานได้ดีบน Cloudways ฉันได้ทดสอบหน้า Landing Page ด้วยรูปภาพ 25 รูปและ 7 ส่วน + ส่วนหัวและส่วนท้าย ซึ่งสูงกว่าค่าเฉลี่ยสำหรับหน้าแรก

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