Page Builder เป็นปลั๊กอินที่ช่วยในการจัดการคอนเท้น ต่างๆ ได้หลากหลายยิ่งขึ้น เช่น การจัดแบ่งหน้าเว็บเป็นคอลัมน์ในความกว้างที่ต่างกัน การแทรก object ต่างๆ ซึ่งปกติการที่เราทำโดยใช้ Visual Editor ร่วมกับปลั๊กอิน shortcode นั้น ก็ค่อนข้างที่จะยากต่อการจัดการและแก้ไขพอสมควร เพราะมันอ่านยากกว่ากันมาก Page Builder ปัจจุบันนี้มีฟังชั่นที่ช่วยให้เราแก้ไขข้อมูลได้เหมือนกับว่าอยู่ ที่หน้าเว็บจริงๆ (Frontend) ทำให้เราสามารถมองภาพได้เลยว่าเว็บจะออกมาเป็นแบบไหนPage Builder by SiteOriginเป็นปลั๊กอิน Page Builder รุ่นแรกๆ ก่อนที่จะมีเจ้าอื่นที่ดังๆ อย่าง
Visual Composer ตามมา จนกระทั่งเดี๋ยวนี้มีธีมที่เรียกว่าเป็น Theme Builder ด้วย คือสามารถ build ไล่ตั้งแต่ตัวธีมจนมาถึงคอนเท้นกันเลยทีเดียว เช่น
Divi,
X เป็นต้น
คุณสมบัติ :
- ใช้งานง่ายด้วยการลากวาง
- ใช้กับธีมไหนก็ได้
- สามารถใช้ Widget ร่วม
- สามารถ กำหนดคุณสมบัติให้กับ row หรือ column ได้เช่น margin, padding (ระยะห่างระหว่างแถว) และพื้นหลัง รวมไปถึงพื้นหลังแบบ Parallax Background
- History สามารถย้อนกลับการแก้ไขได้
- Live Editing แก้ไขคอนเท้นในแบบเสมือนจริง
- มี Prebuilt Layout หรือเทมเพลตสำเร็จรูปให้เลือกใช้งานได้ทันที
Downloadการใช้งานหลังจากติดตั้งปลั๊กอินเรียบร้อยแล้ว เมื่อเรา Add New Post หรือ Page ก็จะมีปุ่ม
Page Builder ขึ้น ข้างๆ กับปุ่ม Visual กับ Text ของหน้า Editor ให้เราคลิกที่ปุ่มนี้เพื่อสลับไปใช้งาน Page Builder แทน
หลังจากนั้นจะเข้าสู่หน้า Page Builder ให้เราเริ่มด้วยการเพิ่มแถวก่อน โดยการคลิกที่ปุม
Row
กำหนดรูปแบบของแถวที่เราจะเพิ่ม โดยใส่เลขจำนวนคอลัมน์ที่ต้องการ ในช่อง
Set row layout หากต้องการใส่เป็นแถวเดียวโดยไม่แบ่งคอลัมน์ก็ใส่เป็นเลข 1 เป็นต้น และเรายังสามารถเลื่อนที่แกนตรงกลางเพื่อกำหนดความกว้าของแต่ละคอลัมน์ได้ หรือเลือกแบบสำเร็จจากลิสในช่อง
columns with a ratio of
เสร็จแล้วเราจะได้ row มา 1 row แบบนี้ ซึ่งเราลองกำหนดให้มี 2 คอลัมน์ดังภาพ เมื่อเราจะใส่ข้อมูลอะไรในคอลัมน์ไหน ก็ให้คลิกที่คอลัมน์นั้นให้ขึ้นไฮไลท์สีน้ำเงินเสียก่อน จากนั้นค่อยคลิกที่ปุ่ม
+ Add Widget
จากนั้นก็จะมีหน้า
Widgets ต่างๆ ที่เรามีอยู่แล้วบวกกับวิดเก็ตของ SiteOrigin เอง หรือโหลดตัว
SiteOrigin Widgets Bundle และ
Ultimate Addons for SiteOrigin มาลงเพิ่ม เราก็จะมี Widgets อีกหลายตัวที่มีประโยชนต่อการใช้งาน
ข้อเสียของการใช้ Widget คือเนื่องจากมันมาจากต่างปลั๊กอินกัน บางครั้งก็จะทำให้ประกอบกันออกมาแล้วดูไม่เป็นอันหนึ่งอันเดียวกัน เพราะต่างที่มาต่างสไตล์นั่นเอง ถ้าเป็นแบบที่ซื้อๆ กันนั้น ส่วนใหญ่จะเขียนมาให้ลงตัว ประกอบกันออกมาได้สวยงาม เป็นต้น
หลังจากที่เราเพิ่ม Widget แล้วเคลื่อนเม้าส์ไปที่ตัว widget ที่เราได้สร้าง แล้วคลิกที่ปุ่ม Edit เพื่อกำหนดเนื้อหาที่ต้องการ
ทำการกำหนดค่าต่างๆ ที่ช่องด้านซ้ายมือ ด้านล่างก็จะมีปุ่มให้ Preview ดูได้
ด้านขวานั้นจะมีให้เรากำหนดคุณลักษณะอื่นๆ ของ widget เช่น widget design กำหนดสีและพื้นหลัง ถ้าเป็นแบบ คอลัมน์เรามักจะไม่ตั้งค่าตรงนี้มากนัก อาจจกำหนดเฉพาะ Padding ใน Layout lส่วนพวกพื้นหลังจะไปตั้งค่าในส่วนของ row แทน
เมื่อตั้งค่าต่างๆ เสร็จแล้วก็คลิกที่ปุ่ม Done
การตั้งค่าแถวหรือ row นั้น ทำได้ด้วยการคลิกที่ปุ่ม ของ row นั้นๆ เพื่อเปิด row settings ขึ้นมา ใกล้ๆ กันมีปุ่ม duplicate ไว้โคลนสร้างอีกแถวได้อย่างรวดเร็วด้วย บางอย่างเช่นเวลาเราทำ ข้อความมาชุดนึง กำหนดใช้ฟ้อนต์ ขนาด สีสันสวยๆ ไว้แล้ว ก็สามารถโครนไปใช้กับส่วนอื่นได้เลย ส่วนการเคลื่อนย้ายขึ้นลงสลับแถวนั้น ให้คลิกที่ปุ่มลูกศรแนวตั้งที่มีสองห้วด้านข้าง
Prebuilt Layout
หากเราคลิกที่ปุ่ม Prebuilt ระบบก็จะเรียกเทมเพลตสำเร็จรูปมาให้เรา โดยเขาจะให้เรากด Enable เพื่อเปิดคลังเทมเพลตก่อน
จากนั้นก็จะมีการเปิด Prebuilt Layouts ที่พร้อมใช้งานมาให้เราได้เลือก เราชี้เม้าส์ที่เลย์เอ้าท์ที่ต้องการ แล้วคลิก
Preview หรือ
Use ได้เลย นอกจากนี้ ที่ด้านซ้ายมือ เราจะเห็นเมนูสำหรับการ
Import/Export เทมเพลตที่เราสร้างเอง หรือ
Clone Page, Clone Posts หน้าอื่นๆ ที่เราสร้างไว้แล้วในเว็บเดียวกันนี้ เพื่อนำมาแก้ไขเพิ่มเติมได้ ช่วยให้เราประหยัดเวลาในการสร้างใหม่แต่ต้นหากต้องออกแบบหน้าที่คล้ายๆ กัน ตรงนี้เป็นคุณสมบัติเหมือนของที่ต้องเสียเงินแพงๆ เลยนะ
เมื่อเราแทรก Prebuilt ลงไป มันจะลงไปแทนที่ของเดิมทั้งหมด ดังนั้นการใช้งาน Prebuilt Layout นี้จะใช้สำหรับการขึ้นต้นหน้าใหม่นะคะ เมื่อเราตกลงที่จะใช้แล้ว ปลั๊กอินก็จะสร้าง Row, Column และใส่ Widget ต่างๆ ลงไปให้เราตามเทมเพลตที่เลือก โดยเราก็มีหน้าที่เพียงแค่แก้ไขในแต่ละ Widget ให้เป็นข้อมูลของเราค่ะ
History
ปุ่มนี้ใช้สำหรับย้อนดูการแก้ไขก่อนหน้านี้ของเรา
ตัวนี้ช่วยชีวิตได้มากเลยค่ะ บางทีแก้ไปแก้มาเสียเวลา จำอันเก่าไม่ได้ ใช้การย้อนกลับไปเลยค่ะ สะดวกดีมาก
เป็นการเปิดหน้าแก้ไขแบบ Live ขึ้นมา เสมือนหนึ่งเวลาที่เราอยู่หน้าจอจริงๆ อันนี้ก็ช่วยได้อย่างมากในการประหยัดเวลา โดยเราอาจจะเรียงและใส่ข้อมูลไปก่อนคร่าวๆ แล้วค่อยมาปรับแต่งทีหลังด้วยโหมด Live เพราะบางทีเราไปคลิกผิดแถวบ้างอะไรบ้างเนื่องจากสุดท้ายแล้ว มันจะมี หลาย row มากเลย
ตัวอย่างของหน้าที่ได้เมื่อเสร็จเรียบร้อยแล้วขออภัยที่เนื้อหาในภาพตัวอย่างไม่ค่อยเชื่อมโยงกันนัก รถ แมว และเด็กน้อย ==!
ใช้ธีมฟรี
Influence ของ SiteOrigin เช่นกัน
ความรู้สึกจากการใช้งาน คือ มันดีมากค่ะ ไม่ได้เพิ่งจะมาลองใช้นะคะ แต่เคยใช้ตั้งแต่เริ่มหัดเล่น WordPress แล้ว เป็นตัวฟรีที่ใช้งานได้สูสีตัวโปรเลย อาจจะด้อยกว่าในบางเรื่อง อย่างตัวโปร เช่น
MotoPress Content Editor เนี่ย เขาจะลากวางๆ แล้วก็จะเห็นแบบเสมือนจริงเลย คอลัมน์เขาก็ไม่ต้องแบ่งไว้ก่อน แค่ลากไปวางต่อมันก็จะแบ่งให้อัตโนมัติ แต่ SiteOrigin คือจะลากวางได้ในหน้า Editor เท่านั้น คือลากย้ายแถว ย้าย widget ได้ ขั้นตอนการปรับแต่งแต่ละตัวก็ใช้เวลามากกว่า คือเราต้องคลิกไปคลิกมาหลายรอบ เพราะการตั้งค่า widget แต่ละตัวนั้นก็ค่อนข้างเยอะเหมือนกัน เพราะมันไม่ได้สำเร็จมาเหมือนพวกที่เสียตังค์ ให้เวลามันนิดนึง
ปลั๊ก อินตัวนี้ มีมาก่อนที่ปลั๊กอินแนว Page Builder ทั้งหลายจะเป็นที่นิยมและถึงแม้ตอนนี้จะมีหลายปลั๊กอินที่ทำออกมาแข่งกัน (รวมทั้งธีมด้วย) แต่ว่า Page Builder by SiteOrigin ก็ยังคงสู้ได้แบบสมน้ำสมเนื้อเลยทีเดียว แถมได้แต้มต่อตรงที่เป็นของฟรีด้วย
เอาเป็นว่า ใครมีโปรเจคไม่ใหญ่มาก เว็บแค่ 5 หน้า 10 หน้า หรือไว้ทำหน้า Sale Page, Landing Page, Homepage ในเว็บ ก็ลองนำไปใช้ดูนะคะ ไม่ผิดหวังแน่นอนถ้าคุณให้เวลาศึกษากับมัน คุณจะรู้ว่าของฟรีดีๆ ก็มีเหมือนกัน
ขอขอบคุณ:
Narathip Rattha
