skip to Main Content

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

Tailor Page Builder เป็นปลั๊กอินฟรี สามารถติดตั้งผ่านเมนู Plugins > Add New ได้เลยค่ะ

การใช้งาน

ก่อนที่เราจะใช้งาน Tailor Page Builder เราจะต้องเปิดหน้าที่ต้องการแก้ไขขึ้นมาก่อน แล้วถึงจะมีเมนู Tailor this Post/Page ดังนั้น หากเป็นการสร้างหน้าใหม่เลย ก็ให้เราทำการ Save Draft หน้านั้นก่อน แล้วก็คลิกที่ปุ่ม Tailor this Post บน Toolbar ค่ะ (สำหรับบางท่านถ้าไม่เห็นเมนูนี้ ให้ตั้งชื่อ Title ให้เพจก่อน ให้มันมี url ของตัวเองก่อนนะคะหลังจาก Save Draft)

tailor-this-post

จากนั้นระบบจะโหลดหน้า Live Edit ของ Tailor ขึ้นมา ซึ่งก็หน้าตาเหมือนตัว Customizer ทุกอย่าง เพียงแต่มีเฉพาะเมนูของ Tailor เท่านั้น จะเห็นว่าที่หน้าด้านขวาจะมีตัวหนังสือคร่าวๆ ไว้ให้เรา ซึ่งสามารถลบภายหลังได้

 

tailor-customizer

Tailor Live Edit

การเพิ่ม Elements

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

drag-button

Elements

  • Box แสดงข้อความแบบเป็นกล่อง สามารถใส่ไอคอนได้
  • Button ปุ่ม ใส่ไอคอนได้
  • Card แสดงข้อความในแบบ Card
  • Content สำหรับเพิ่มเนื้อหาแบบปกติ
  • Gallery สร้างแกลลรี่ภาพเป็นแบบ List, Grid, Carousel, Slider ก็ได้
  • Hero สร้างเนื้อหาที่ต้องการเน้นเป็นพิเศษ
  • List แสดงข้อความแบบเป็นลิสต์ สามารถใส่ไอคอนได้
  • Map ใส่ Google Map
  • Post  ดึงบทความในเว็บมาแสดงได้ทั้งแบบ List, Grid และ Carousel
  • Section เพิ่มเซคชั่นใหม่
  • Tabs สร้างเนื้อหาแบบแท็บคลิกสลับ
  • Toggle สร้างเนื้อหาแบบ Toggle คลิกคลี่ขยาย
  • User แสดงข้อมูลของ user
  • Widgets ใส่ widgets จาก sidebar ที่สร้างไว้แล้ว

การแก้ไข Elements, Row, Section

การแก้ไขก็ทำได้ง่ายๆ โดยเมื่อเราคลิกที่ element ที่ต้องการแก้ไข ก็จะมีกรอบสีน้ำเงินขึ้นมา ด้านซ้ายจะแสดงชื่อของ element นั้นๆ ซึ่งหากในแถวนั้นมีหลาย element เราก็สามารถคลิกลูกศรลงเพื่อเลือก element, row, section ก็ได้  ส่วนด้านขวาก็จะเป็นเมนู Edit กับ Delete ไว้สำหรับแก้ไขหรือลบ element, Row, Section ที่เราเลือก

edit-element

edit-element-row-section

เมื่อคลิก Edit เราก็จะเจอกับการตั้งค่าของ element นั้นๆ แบ่งเป็น 3 แท็บหลักๆ คือ General สำหรับกำหนดสไตล์หลักๆ Colors กำหนดเรื่องของ สีสัน กรอบ และ Attributes จะเกี่ยวกับการกำหนดระยะห่างของ Margin, Padding, ภาพพื้นหลัง โดยเราสามารถี่จะกดปุ่ม Preview ก่อนทำการ Apply การแก้ไขก็ได้

Edit Element (Button)

Edit Element (Button)

 

Edit Row

Edit Row

 

Edit Section

Edit Section

Sections

เนื่องจากการเพิ่ม elements ต่างๆ ลงไปนั้น จะรวมต่อกันเรื่อยๆ เป็นรวมกันเป็น Section หากเราต้องการขึ้น section ใหม่ เพื่อให้ง่ายต่อการแก้ไข ก็เพียงแค่เพิ่ม section element เข้าไปในตำแหน่งที่ต้องการ

add-section

Tip : สำหรับการแทรกคอลัมน์ (Grid Element) พื้นฐานนั้นปลั๊กอินจะแทรกเป็น 2 คอลัมน์ เราก็คลิก Edit เพื่อเพิ่มคอลัมน์ตามจำนวนที่ต้องการ หลังจากระบบเพิ่มให้แล้ว เราก็ลาก element อื่นๆ ที่ต้องการมาแทรกในคอลัมน์ที่สร้างใหม่ เช่น Text ก็ลาก content มาวางใส่ตรงคอลัมน์ มันจะมีเครื่องหมาย + ขึ้น เราก็ปล่อยได้เลยค่ะ

Import/Export

Tailer นั้นสามารถที่จะให้เรานำหน้าที่สร้างไว้แล้วนั้น Export ไปเป็น Template เก็บไว้ใช้ในคราวต่อไปได้  ให้เราทำการ Save หน้าที่ทำเสร็จเรียบร้อยเสียก่อน จากนั้นไปที่เมนู Template

template

แล้วคลิกปุ่ม Save Template ระบบก็จะให้เราตั้งชื่อเทมเพลต

save-template

จากนั้นทำการคลิกปุ่มดาวน์โหลดมาเก็บไว้ ซึ่งก็จะเป็นไฟล์ .json ครั้งหน้าที่ใช้งานก็คลิกปุ่ม Import template แล้วเลือกไฟล์ที่ต้องการเพื่ออัพโหลดขึ้นไป

download-template

Settings

ในเมนู Settings ของ Tailor ที่หน้า Live Edit นั้นก็จะสามารถที่จะกำหนดคุณสมบัติในส่วนของ Layout และเพิ่ม CSS, JS ให้กับหน้านั้นๆ ได้ ทำให้มีความยืดหยุ่นมากขึ้นสำหรับ developer

setting-tailer

General Settings

General Settings

 

Layout Settings

Layout Settings

History

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

history

การพรีวิว

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

tailor-responsive

Tailor Settings

เป็นการตั้งค่าโดยรวมของปลั๊กอิน ซึ่งก็ไม่มีอะไรมากค่ะ มีส่วนที่กำหนดว่าจะใช้กับอะไรบ้าง Post/Page กำหนดให้ใครสามารถใช้ได้บ้าง และก็ยังมีในส่วนของ Google Map API  ที่ตอนนี้ Google กำหนดให้เราต้องใส่ API key สำหรับใช้งาน Google Map แล้ว เป็นต้น

tailor-settings

สรุปการใช้งาน

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

รูปร่างหน้าตาก็เป็นแนวเรียบๆ เข้ากับบทความ คือไม่ได้มีลูกเล่นอลังการอย่างพวก Parallax หรือ Animation มาให้ แต่ Element ต่างๆ ที่ให้มาถือว่าเพียงพอกับการเขียนบทความทั่วไป ปลั๊กอินนี้เหมาะที่สุดสำหรับทุกเว็บเลยก็ว่าได้ ที่หากคนเขียนไม่อยากจะแค่เขียนเรียงเป็นบรรทัดยาวๆ เพราะมันใช้งานง่าย แก้ไขง่าย นอกจากนี้ยังมี Extention เพิ่มคือ Portfolio Extension สำหรับทำ Portfolio และ WooCommerce Extension เพื่อรองรับ WooCommerce

นอกจากนี้ปลั๊กอินนี้ยังเป็นมิตรต่อนักพัฒนา ให้สามารถที่จะสร้าง Elements ของตัวเองไปใช้กับปลั๊กอินนี้ได้ อ่านได้จาก Extending

 

ข้อมูลเพิ่มเติม

Back To Top
Search