วิธีใช้ตัวสร้างเพจ SiteOrigin ด้วย WordPress

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

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

ทำไมต้องเลือก SiteOrigin Page Builder?

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

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

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

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

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

ตัวสร้างประเภทโพสต์แบบกำหนดเอง

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

มีขั้นตอนสำคัญที่ต้องปฏิบัติตามเพื่อให้คุณสร้างเทมเพลตประเภทโพสต์ที่กำหนดเองใน SiteOrigin

ขั้นตอนที่ 1

คุณจะต้องเพิ่มประเภทโพสต์ที่กำหนดเองใหม่ สร้างเค้าโครงประเภทโพสต์โดยใช้ Page Builder และเลือกการตั้งค่าการแสดงประเภทโพสต์

จากแดชบอร์ด WordPress ของคุณ ให้ไปที่เครื่องมือ → ประเภทโพสต์ แล้วคลิกปุ่มเพิ่มใหม่ ตั้งชื่อเป็นพอร์ตโฟลิโอ ตอนนี้ ให้คลิกที่แท็บ Page Builder ถัดจากแท็บ Text และ Visual ใช้ปุ่ม Page Builder Add Widget และเพิ่ม Row เพื่อสร้างโครงร่างประเภทโพสต์ที่กำหนดเองของพอร์ตโฟลิโอ

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

ขั้นตอนที่ 2

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

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

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

โพสต์วิดเจ็ตลูป

SiteOrigin มีวิดเจ็ต Post Loop แต่อาศัยเทมเพลตลูปภายในธีมที่ใช้งานอยู่

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

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

หากคุณต้องการทำใน post carousel ข้อแตกต่างเพียงอย่างเดียวคือการเลือกวิดเจ็ต post carousel แทนที่จะเป็น Post Loop ส่วนที่เหลือของขั้นตอนจะเหมือนกัน

เครื่องมือสร้างเทมเพลต WooCommerce

เทมเพลต WooCommerce อนุญาตให้สร้างหน้าเฉพาะของ WooCommerce ที่สวยงามและรูปลักษณ์ของผลิตภัณฑ์เดียว อินเทอร์เฟซ WooCommerce Template Builder แบ่งออกเป็นเจ็ดแท็บ:

1. ผลิตภัณฑ์
2. คลังเก็บสินค้า
3. ร้านค้า
4. รถเข็น
5. รถเข็นเปล่า
6. เช็คเอาท์
7. บัญชีของฉัน

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

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

วิดเจ็ตอื่นๆ เป็นเรื่องปกติเช่น Maps, Accordions, CTAs, Tabs, Social Widgets, Carousels เป็นต้น

ด้วยการสมัครสมาชิก Pro คุณจะไม่ได้รับเพียง Pro Page Builder แต่เข้าถึงคุณสมบัติ Pro ทั้งหมด ธีมพรีเมียม CSS และวิดเจ็ต

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

SiteOrigin เสนอรูปแบบการกำหนดราคาสองแบบ รายการแรกและมีประโยชน์มากที่สุดคือการสมัครสมาชิกรายปีซึ่งมี 3 แพ็คเกจ

• เดียว สำหรับหนึ่งไซต์ในราคา $29
• ธุรกิจ สำหรับไซต์สูงสุด 5 แห่งในราคา $49
• นักพัฒนา สำหรับเว็บไซต์ไม่จำกัดในราคา $99

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

• โสด สำหรับหนึ่งไซต์ในราคา $38
• ธุรกิจ สำหรับไซต์สูงสุด 5 แห่งในราคา $64
• นักพัฒนา สำหรับไซต์ไม่จำกัดในราคา $128

ข้อกำหนดของระบบ/โฮสติ้งของ SiteOrigin

แม้ว่าการค้นหาความต้องการของระบบของ SiteOrigin จะค่อนข้างยาก จากฟอรัมสนับสนุนและความคิดเห็นออนไลน์ ดูเหมือนว่า PHP 7.4 ที่มีหน่วยความจำ PHP อย่างน้อย 512MB จะช่วยได้ อย่างไรก็ตาม ฉันใช้ VultrHF กับหน่วยความจำ PHP ขนาด 2GB เพื่อการทดสอบ

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

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

เมื่อพูดถึงการติดตั้งและการกำหนดค่า SiteOrigin เสนอสิ่งที่น่าสนใจที่ผู้สร้างเพจส่วนใหญ่ไม่มี

สำหรับทุกอย่างใน WordPress คุณควรติดตั้ง SiteOrigin ฟรีโดยตรงจาก Repository และหลังจากนั้น คุณอัปโหลดเวอร์ชัน Pro ที่ดาวน์โหลดจากบัญชี SiteOrigin ของคุณ หลังจากคุณติดตั้งเสร็จแล้ว ให้ทำตามขั้นตอนและติดตั้ง/เปิดใช้งานปลั๊กอินที่แนะนำ

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

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

เมื่อเสร็จแล้ว คุณสามารถเริ่มสร้างไซต์ของคุณได้โดยใช้ตัวสร้างเพจ SiteOrigin ไปที่ Pages → Add New และเมื่อคลิกที่ลูกศรดรอปดาวน์ คุณจะเสนอให้เพิ่มหน้าใหม่ด้วย SiteOrigin Page Builder และ Block Editor → เลือก SiteOrigin Page Builder

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

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

เมื่อคุณคลิกหน้าแก้ไข คุณจะเข้าไปอยู่ในตัวแก้ไขส่วนหลัง จากนั้นเพียงคลิก Live Editor จากแถบเครื่องมือ คุณก็จะเข้าไปอยู่ในหน้านั้น

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

ไม่รองรับการลากและวางโดยตรงในไซต์ แต่ทุกอย่างต้องทำผ่านเครื่องมือปรับแต่งแถบด้านข้างทางซ้ายมือ

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

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

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

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

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

ประสิทธิภาพ SiteOrigin Page Builder บน Cloudways

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

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

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

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

SiteOrigin Page Builder รีวิวจากผู้ใช้

และสิ่งหนึ่งที่คุณควรตรวจสอบก่อนติดตั้งปลั๊กอินอยู่เสมอคือบทวิจารณ์และการให้คะแนนบนที่เก็บปลั๊กอิน WordPress.org สำหรับ SiteOrigin มีคะแนน 922 5 ดาวจนถึงตอนนี้และบทวิจารณ์ล่าสุดนั้นยอดเยี่ยมมาก

สรุป

หากคุณต้องการเครื่องมือขนาดเล็กเพื่อสร้างเว็บไซต์อย่างง่ายหรือหน้า Landing Page SiteOrigin อาจเป็นตัวเลือกที่สมบูรณ์แบบสำหรับคุณ ข้อเสียคือไม่มีตัวสร้างส่วนหัวและส่วนท้าย ดังนั้นคุณต้องมีธีมที่อนุญาตให้แก้ไขส่วนหัวและส่วนท้ายของไซต์ได้

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

ระบบนิเวศรอบ ๆ SiteOrigin นั้นไม่ใหญ่เท่ากับเครื่องมือสร้างเพจอื่น ๆ แต่เราต้องคำนึงว่ามีการติดตั้งที่ใช้งานอยู่ 1 ล้านครั้งสำหรับเวอร์ชันฟรีและ 900.000 สำหรับ Widget Bundle และส่วนเสริมภายนอกบางส่วนบนผู้เขียนมีมากกว่า 30,000 รายการ การติดตั้งที่ใช้งานอยู่