Skip to content
การสร้าง Timeline ใน WordPress

สิ่งหนึ่งที่เรามักจะเห็นในเว็บไซต์องค์กรที่มีประวัติความเป็นมาอย่างยาวนาน หรือเว็บไซต์ที่มีการนำเสนอข้อมูลเกี่ยวกับประวัติที่มีระยะเวลายาวนาน เช่น การแข่งขันฟุตบอลโลก, มหกรรมกีฬาโอลิมปิก หรือประวัติของบริษัทชั้นนำของโลก นั่นคือการนำเสนอข้อมูลแบบ Timeline

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

การสร้าง Timeline ใน WordPress นั้นทำได้ไม่ยาก ใน Page Builder ส่วนใหญ่ก็สามารถทำได้ทั้งจากตัว Page Builder เองหรือลงปลั๊กอินเสริมสำหรับ Page Builder นั้นๆ ซึ่งปลั๊กอินที่จะมาแนะนำในวันนี้มีชื่อว่า Cool Timeline (Horizontal & Vertical Timeline) จากผู้พัฒนา Cool Plugins

Cool Plugins เป็นบริษัทน้องใหม่ที่มุ่งเน้นการพัฒนาปลั๊กอิน WordPress ก่อตั้งขึ้นในปี 2016 ในเมือง Mohali ประเทศอินเดีย โดยเรื่องราวเริ่มต้นจากเพื่อนสองคนคือ Satinder Singh และ Narinder Singh ได้ออก Plugin ฟรีตัวหนึ่งใน WordPress.org ในปี 2016 ซึ่งได้รับการตอบรับอย่างล้นหลาม พวกเขาทุ่มเทเวลาในการพัฒนา Plugin มากขึ้น ในปัจจุบัน Cool Plugins มีทีมงาน Developers and Designers กว่า 15 คน มีปลั๊กอิน WordPress ทั้งแบบ Free และ Premium มากกว่า 20 รายการ

สำหรับปลั๊กอิน Cool Timeline (Horizontal & Vertical Timeline) นั้นก็ถือเป็นปลั๊กอินที่ใช้สร้าง Timeline ที่ได้รับความนิยมตัวหนึ่ง โดยมียอดดาวน์โหลดตั้งแต่เวอร์ชั่นแรกถึงปัจจุบันรวมแล้วกว่า 6 แสนครั้ง โดยมีทั้งเวอร์์ชั่น Free และเวอร์ชั่น Pro

ราคาและแพลนของ Cool Timeline Pro

แบบรายปี

Personal | $29/Year | ใช้ได้ 1 เว็บไซต์
Professional | $59/Year | ใช้ได้ 5 เว็บไซต์
Agency | $99/Year | ใช้ได้ 25 เว็บไซต์

แบบตลอดชีพ

Personal | $59/Year | ใช้ได้ 1 เว็บไซต์
Professional | $149/Year | ใช้ได้ 5 เว็บไซต์
Agency | $299/Year | ใช้ได้ 25 เว็บไซต์

คุณสมบัติเด่นของปลั๊กอิน Cool Timeline เวอร์ชั่น Free

Gutenberg Timeline Block

Gutenberg Block ช่วยให้คุณสร้าง Timeline แบบ Vertical ได้สวยงามและง่ายดาย

Compact Timeline

ในเวอร์ชั่น Free การสร้าง Timeline จะเป็นแบบ Compact คือจะไม่มีช่องว่างระหว่าง Story มากนัก

Clean Layout

ใช้โครงสร้างที่สะอาดตา สีไม่จัด

Advanced Design & Optimized Code

ออกแบบมาให้เป็นมึตรกับนักพัฒนา โดยสามารถปรบแต่ง Timeline ได้อย่างง่ายดาย

Timeline Shortcode

รองรับการสร้าง Timeline ด้วย Classic Editor ของ WordPress และนำไปใช้ในหน้า Post หรือ Page ที่เป็น Gutenberg ได้ด้วยการวาง Block Shortcode

คุณสมบัติเด่นของปลั๊กอิน Cool Timeline เวอร์ชั่น Pro

Horizontal Roadmap Timeline

มี Timeline แบบ Horizontal เหมาะสำหรับการนำเสนอแผนและขั้นตอนของโครงการหรือบริษัท

40+ Timeline Designs

มี Timeline Designs ให้เลือกใช้มากกว่า 40 แบบ

Gutenberg / Elementor / WPBakery

นอกจากนี้มี Block ของ Gutenberg แล้ว ยังรองรับการใช้งานกับ Page Builder Elementor และ WPBakery

15+ Animation Effects

มีเอฟเฟกต์แอนิเมชั่นสุดเจ๋งมากกว่า 15+ แบบ เพื่อประสบการณ์การออกแบบ Timeline ระดับ Premium

การติดตั้งปลั๊กอิน Cool Timeline

ที่หลังบ้าน WordPress ไปที่ Plugins -> Add New Plugin

ที่หน้า Add Plugins ให้ใส่คำว่า Cool Timeline ที่ช่อง Keyword

Install และ Activate ให้เรียบร้อย

อธิบายเมนูของปลั๊กอิน Cool Timeline

เมื่อ Install และ Activate เรียบร้อยแล้ว จะเข้าไปตั้งค่าต่างๆของ Cool Timeline ได้จาก -> Timeline Addons โดยมีเมนูทั้งหมด 4 เมนู

Dashboard

เป็นหน้าท่ีแสดงปลั๊กอิน Timeline ทั้งหมดของ Cool Timeline โดยจะแสดงปลั๊กอินที่ลงและ Active อยู่ ซี่งในตัวอย่างก็จะลง Cool Timeline (Horizontal and Vertical Timeline) เอาไว้ โดยจะเห็นว่ามี Timeline Block For Gutenberg ตัวนี้จะเป็นปลั๊กอินที่เพื่อสร้าง Timeline ด้วย Gutenberg Block ซึ่งมีอยู่แล้วใน Cool Timeline จึงไม่จำเป็นต้องลงอีก

Cool Timeline Stories

เป็นหน้าที่ใช้ Timeline ด้วย Classic Editor ของ WordPress และนำไปใช้ด้วยการเพิ่ม Block ใน Gutenberg Editor โดยจะสร้างได้แค่ 1 Timeline เท่านั้น เมื่อคลิกที่ปุ่ม Add New จะเป็นการสร้าง Story ที่ 1 และสร้าง Story ที่ 2 ด้วยการคลิกปุ่ม Add New อีกครั้ง สร้างไปจนครบที่ต้องการ ซึ่งทุก Story ก็จะรวมกันเป็น 1 Timeline

Add New Story

เมื่อเลือกเมนูนี้จะไปที่หน้า Add New Story สำหรับใช้สร้าง Story

Timeline Settings

หน้าสำหรับตั้งค่าต่างๆที่ใช้ใน Story ที่สร้างด้วย Classic Editor ของ WordPress สามารถตั้งค่าได้ทั้งสี รูปแบบตัวอักษร และจะมี tab ที่แนะนำขั้นตอนการสร้างแบบ Classic Timeline Shortcode, Modern Timeline Block และ Elementor Timeline Widgets

ข้อแตกต่างระหว่าง Cool Timeline Free กับ Pro

ตัวอย่างการสร้าง Timeline แบบ Classic Timeline Shortcode

ไปที่ Timeline Addons -> Add New Story หรือจะคลิกปุ่ม Add New จากหน้า Cool Timeline Stories ก็ได้

ตั้งชื่อ Story และใส่รายละเอียดข้อความลงไป (เวอร์ชั่นฟรี ใส่รูปภาพไม่ได้) จากนั้นตรง Story Type เลือก Date/Year ของ Story จากนั้นคลิกที่ปุ่ม Publish

สร้าง Story ลำดับถัดไปด้วยการคลิกที่ปุ่ม Add New ที่อยุ่ด้านบนสุดของหน้าที่เพิ่งสร้าง Story 1 ไป

สร้าง Story ให้ครบตามที่ต้องการ เมื่อกลับไปดูที่หน้า Timeline Stories ก็จะแสดง Story ทั้งหมดที่สร้างไว้

หลังจากนั้นไปที่หน้า Post หรือ Page โดยการใช้ Gutenberg Editor แล้วเพิ่ม Block -> Cool Timeline Shortcode ลงไป และคลิกที่ปุ่ม Publish

เมื่อไปดูที่หน้าเว็บ ก็จะเห็น Timeline ที่สร้างไว้

ตัวอย่างการสร้าง Timeline แบบ Modern Timeline Block

ไปที่หน้า Post หรือ Page โดยการใช้ Gutenberg Editor แล้วเพิ่ม Block -> Cool Timeline Block ตัวปลั๊กอินจะลงตัวอย่างให้ 3 Story

โดยในแต่ละ Story สามารถเปลี่ยนภาพ แก้ไขวันเดือนปีของ Story รวมถึงหัวข้อและรายละะอียดของ Story ได้เหมือนการแก้ไข Block ทั่วไปเลย

ถ้าต้องการเพิ่ม Story ก็เลื่อนลงไปด้านล่างสุด และคลิกที่ปุ่ม + Add Story

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

General ใช้เลือก Layout ของ Timeline, Timeline Design และการเลือกว่าจะให้ Full Story อยู่ด้านซ้ายหรือขวา

Style ใช้ตั้งค่าเกี่ยวกับตัวอักษรใน Story ทั้งหมด ทั้งหัวข้อและรายละเอียด ทั้งรูปแบบตัวอักษร ขนาด น้ำหนัก รวมถึงสีของตัวอักษร

Advanced ใช้ตั้งค่าสีของเส้น Timeline, Icon รวมถึงตวามหนาของเส้น Timeline และขนาดของ Icon Timeline

เมื่อสร้าง Story เสร็จเรียบร้อยแล้ว ให้คลิกที่ปุ่ม Publish เพื่อบันทีกการเปลี่ยนแปลง

เมื่อไปดูที่หน้าเว็บ ก็จะเห็น Timeline ที่สร้างไว้

สรุป

สำหรับคนที่กำลังอยากจะสร้าง Timeline Story ลงในเว็บไซต์ และมองหาปลั๊กอินแนวนี้อยุ่ละก็ ขอแนะนำตัวนี้เลยครับ ปลั๊กอิน Cool Timeline เป็นปลั๊กอินที่ใช้งานง่าย สร้าง Timeline Story ได้สวยงาม ถ้าในเวอร์ชั่นฟรีไม่เพียงพอ ก็ยังมีเวอร์ชั่น Premium ที่ราคาค่อนข้างย่อมเยา $29 ต่อปี หรือ $59 ในแบบตลอดชีพ ก็จะมี Timeline Layout ให้เลือกมากกว่า 40 แบบ

Back To Top
Search