MotoPress Content Editor

คือ ปลั๊กอินที่ช่วยให้เราสามารถสร้างเนื้อหาหลายแบบได้ง่ายๆ แบบสำเร็จรูป ลากวางๆ ได้เลย หลายคนอาจจะติดปากเรียกปลั๊กอินแนวนี้ว่า Page Builder ก็ไม่ผิด

จริงๆ แล้ว Content Editor ตัวนี้ ใช้งานร่วมกับ Cherry Framework สร้างเป็นธีมขายแบบจริงจังที่ MotoPress (Framework เป็นธีมประเภทหนึ่ง แต่ต่างจากธีมทั่วไปตรงที่สามารถปรับแต่งได้แทบทุกส่วนในธีม คือสามารถนำ Theme Framework มาปรับแต่งจนเป็นอีกธีมได้เลย ต่างจากธีมทั่วไป ที่ถูกวางรูปแบบไว้เรียบร้อยและเลือกได้ตามที่เขามีให้เท่านั้น) โดยธีมที่สร้างขายในเว็บนั้นทั้งหมดใช้ Cherry Framework ร่วมกับตัวปลั๊กอิน Content Editor นี้เอง

วิดีโอ

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

หลักการทำงานก็คือ เมื่อเราต้องการสร้างหรือแก้ไข Post หรือ Page ใดๆ แทนที่เราจะทำใช้ Visual Editor ของ WordPress ก็ใช้ของ MotoPress Content Editor แทน เราก็จะสามารถที่จะใช้โมดูลต่างๆ ในการสร้างเว็บได้เพียงแค่ลากวางและใส่เนื้อหาเท่านั้น

content-editor-button

โมดูล คือ ส่วนเสริมสำเร็จรูปต่างๆ ที่เราจะนำไปใช้ประกอบกันในการทำเว็บ เช่นเดียวกับปลั๊กอิน Page Builder อืนๆ ในปลั๊กอินนี้จะแยกโมดูลต่างๆ ออกไปตามหมวดหมู่ คือ

Text  โมดูลเกี่ยวกับข้อความ

text

Image โมดูลเกี่ยวกับภาพ

images

Buttons ว่าด้วยปุ่มต่าง

buttons

Video ใส่ได้ทั้งวิดีโอและออดิโอ

videos

โมดูลพิเศษต่างๆ

custom-code

WordPress Widget ยังคงสามารถนำของ WordPress มาใช้ได้ด้วย ทำให้ยืดหยุ่นไปอีก

widgets

สามารถทดลองเล่นก่อนได้ที่ Demo (บางทีอาจจะโหลดช้าเพราะเป็นการเชื่อมต่อออกนอกประเทศ)

ด้านล่างเป็นตัวอย่างที่เขาทำไว้แล้ว โดยเราสามารถคลิกแก้ไขเพิ่มเติมได้เลย

try-demo

นอกจากนี้ Content Editor นี้ มีการใช้งานร่วมกันกับ Cherry Framework ดังนั้น หากเราติดตั้งปลั๊กอิน Cherry Plugin ลงไป พร้อมกับปลั๊กอินที่ชื่อว่า MotoPress and CherryFramework-3 Integration ก็จะทำให้เราสามารถใช้โมดูลต่างๆ ของ Cherry Framework มากกว่า 30 โมดูลได้ด้วย

cherry-module

ตัวอย่างโมดูลที่มีเสริมขึ้นมาเป็นของ Cherry Plugin

ซึ่งหลังจากลองใช้ดูแล้ว ก็คิดว่า Cherry Plugin นั้นไม่จำเป็นเท่าไหร่ แถมยังทำให้บางโมดูลทำงานผิดเพี้ยน! เช่น Button ซึ่งอาจจะเป็นเพราะธีมที่ใช้ไม่ใช่ธีมที่สนับสนุน Cherry Framework โดยตรง มันเลยตีกัน เราอาจจะใช้ปลั๊กอินพวก Shortcode อย่าง Simple shortcode หรือ Shortcode Untimate ก็ได้ เพราะ Content Editor นั้น สามารถเรียก Visual Editor ของ WordPress มาทำงานเหมือนที่เราเขียนใน WordPress ปกติได้อยู่แล้ว ทำให้เราใช้พวก shortcode อื่นได้ด้วย

Download

WooCommerce

หากต้องการใช้งานร่วมกับ WooCommerce ก็มีปลั๊กอินเสริมโมดูลเกี่ยวกับ WooCommerce ชื่อ MotoPress and WooCommerce integration สามารถดาวน์โหลดได้ฟรีค่ะ

content-editor-woocommerce-2

การใช้งาน

เมื่อเราคลิกเพิ่ม Post หรือ Page ใหม่ จะมีปุ่ม MotoPress Content Editor สำหรับให้เรากดเพื่อใช้งาน

motopress-button

 

 

หลังจากนั้น ปลั๊กอินจะแสดงหน้าแก้ไขด้วย Content Editor ตรงนี้จะมีเทมเพลตสำเร็จรูปที่ด้านล่างให้เราเลือกใช้งานได้ด้วย โดยสามารถคลิกเลือกที่ด้านล่างตรงเทมเพลตที่เราต้องการได้เลย แล้วมันก็จะสร้างเนื้อหาให้อัตโนมัติ เราก็เพียงแต่แก้ไขให้เป็นข้อมูลของเรา เช่น Landing page

motopress-1

 

เราสามารถเริ่มสร้างข้อมูลของเราได้เอง โดยการเลือกโมดูลจากปุ่มโมดูลประเภทต่างๆ ด้านซ้ายมือ แล้วลากมาวางที่หน้าเพจด้านขวามือ

first-title

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

insert-title

 

การแก้ไขโมดูล

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

object-style

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

slider-settings

เราสามารถลบ Object ใดๆ ได้ด้วยการคลิกที่ Object นั้นก่อน เสร็จแล้วก็คลิกที่ปุ่ม Delete Object ด้านบน

delete-object

แถว และ คอลัมน์

ปลั๊กอินนี้ค่อนข้างแตกต่างจาก Page Builder อื่นๆ ตรงที่ตัวอื่นจะให้เราสร้างแถว (Row) หรือ คอลัมน์ (Column) ไว้ก่อนแล้วจึงเลือก Add Object เข้าไป แต่การเพิ่ม Row หรือ Column ของ MotoPress Content Editor นั้น ทำได้ง่ายๆ โดยเมื่อเราลากโมดูลไหนไปวาง ต่อจากโมดูลอื่นๆ ก็จะมีเส้นสีน้ำเงินขึ้นมา พร้อมกับแสดงข้อความว่า ตำแหน่งนี้เป็น Row หรือว่า Column

insert-row

แทรกโมดูลเป็น Row

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

insert-colum

แทรกคอลัมน์

นอกจากนี้ เรายังสามารถแก้ไข Style ของคอลัมน์และแถวได้เช่นเดียวที่เราทำกับ Object โดยการคลิกที่ชี้เม้าส์ไปที่ Object นั้นๆ ก็จะมีไข่ปลาขึ้นมา อันที่อยู่ด้านก็คือ Column ส่วนอันซ้ายก็คือ Row นั่นเอง

setting-column

 

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

parallax-settings

parallax-bg

ส่วนของ Style ก็ยังกำหนดเพิ่มเติมได้ มีแบบสำเร็จเป็นชุดให้เราเลือกได้เลย

full-width

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

column-resize

ผลจากการทดลองใช้งาน
ทำหน้า Landing Page ง่ายๆ ส่วนใหญ่ใช้เครื่องมือที่เขาให้มาแล้ว ยกเว้นปุ่ม Sign Up ใช้ปลั๊กอิน Symple Shortcode แทรกได้เช่นเดียวกัน

สำหรับท่านที่สนใจปลั๊กอินนี้ สามารถดูรายละเอียดและลองทดสอบดูก่อนได้ ที่เว็บMotoPress ได้เลยค่ะ

Search