วิธีสร้างไทม์ไลน์ใน WordPress ด้วย Elementor

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

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

ในบทความนี้เราจะแสดงคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการสร้างไทม์ไลน์ใน WordPress ด้วย Elementor ก่อนหน้านั้นเราจะครอบคลุมบางส่วนทางทฤษฎีเกี่ยวกับหัวข้อของวันนี้

ประเภทของระยะเวลาและกรณีการใช้งานของพวกเขา

เส้นเวลามีสองประเภท - แนวนอนและแนวตั้ง แต่ละกรณีมีกรณีการใช้งานเฉพาะที่เพิ่มมูลค่าให้กับเว็บไซต์ที่แตกต่างกัน มาสำรวจพวกเขาและกรณีการใช้งานของพวกเขาในการสนทนาด้านล่าง

1. เส้นเวลาแนวตั้ง

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

ใช้กรณีสำหรับระยะเวลาแนวตั้ง:

• ประวัติ บริษัท หรือเส้นทางการเติบโต
• ไฮไลท์ประวัติย่อหรืออาชีพ
• ชุดบล็อกโพสต์หรือความก้าวหน้าของบทความ
• คำอธิบายกระบวนการทีละขั้นตอน
• เหตุการณ์สำคัญในการพัฒนาผลิตภัณฑ์

2. เส้นเวลาแนวนอน

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

ใช้กรณีสำหรับระยะเวลาแนวนอน:

• แผนการทำโครงการหรือขั้นตอนการวางแผน
• ตารางกิจกรรม
• แคมเปญการตลาดหรือการเปิดตัวผลิตภัณฑ์
• การนำเสนอผลงาน
• ระยะเวลาทางการศึกษาหรือภาพรวมทางประวัติศาสตร์

วิธีสร้างไทม์ไลน์ใน WordPress ด้วย Elementor

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

Happyaddons เป็นหนึ่งในนั้น มันมาพร้อมกับวิดเจ็ต 130+ และคุณสมบัติ 22+ ที่สามารถเอาชนะข้อบกพร่องมากมายของ Elementor ดังนั้นด้วยการติดตั้งปลั๊กอิน Happyaddons คุณสามารถเปิดใช้งานคุณสมบัติการออกแบบเพิ่มเติมบนเว็บไซต์ของคุณ ในหลายกรณีคุณไม่จำเป็นต้องใช้ Elementor Pro หากคุณมี Happyaddons

ตอนนี้เรามาสำรวจวิธีการสร้างไทม์ไลน์ใน WordPress ด้วย Elementor และ HappyAddons

วิธีสร้างเส้นเวลาแนวนอนใน WordPress

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

• ผู้ประกอบการ
• Happyaddons

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

ขั้นตอนที่ 01: สร้างส่วนบนผืนผ้าใบ Elementor

เปิดโพสต์หรือหน้าด้วย Elementor สร้างส่วนด้วยโครงสร้างคอลัมน์ FlexBox ที่คุณต้องการเพื่อสร้างไทม์ไลน์

ขั้นตอนที่ 02: เพิ่มวิดเจ็ตไทม์ไลน์แนวนอนลงในผืนผ้าใบ

ค้นหา วิด เจ็ตไทม์ไลน์แนวนอน บนแผง Elementor เมื่อคุณพบแล้วให้ลากแล้ววางวิดเจ็ตไปยังผืนผ้าใบ

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

ขั้นตอนที่ 03: เลือกที่ตั้งไว้ล่วงหน้าสำหรับวิดเจ็ต

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

เลือก ที่ตั้งไว้ล่วงหน้า ที่คุณต้องการสำหรับวิดเจ็ต

ขั้นตอนที่ 04: เพิ่มเนื้อหาลงในวิดเจ็ตไทม์ไลน์แนวนอน

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

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

คุณจะเห็นว่าเราได้เพิ่มเนื้อหาในส่วนที่เกี่ยวข้องของวิดเจ็ตแนวนอน

ในทำนองเดียวกันเพิ่มเนื้อหาลงในแท็บไทม์ไลน์ทั้งหมด คุณจะเห็นว่าเราได้ทำในภาพที่แนบมาด้านล่าง

หากต้องการเพิ่มแท็บเพิ่มเติมไปยังวิดเจ็ต ให้คลิก ปุ่ม + เพิ่มรายการรายการ ภายใต้แท็บไทม์ไลน์

ขั้นตอนที่ 05: กำหนดค่าการตั้งค่าสำหรับวิดเจ็ตไทม์ไลน์แนวนอน

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

สิ่งเหล่านี้ง่ายต่อการกำหนดค่า เราหวังว่าคุณจะสามารถทำคนเดียวได้ด้วยตัวเอง

ขั้นตอนที่ 06: สไตล์วิดเจ็ตไทม์ไลน์แนวนอน

หากต้องการปรับแต่งวิดเจ็ต ให้ ไปที่ แท็บสไตล์ บนแผง Elementor

ขั้นแรก ให้ขยาย ส่วน ไทม์ไลน์

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

สำรวจพวกเขาและทำการปรับแต่งที่จำเป็น

คุณจะเห็นว่าเราได้ทำการเปลี่ยนแปลงบางอย่างในระยะเวลาแนวนอน

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

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

ทำการเปลี่ยนแปลงที่จำเป็น

ขั้นตอนที่ 07: ดูตัวอย่างวิดเจ็ตไทม์ไลน์แนวนอน

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

วิธีสร้างเส้นเวลาแนวตั้งใน WordPress

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

• ผู้ประกอบการ
• Happyaddons
• Happyaddons Pro

เมื่อพวกเขาพร้อมใช้งานบนเว็บไซต์ของคุณเริ่มติดตามการสอนที่อธิบายไว้ด้านล่าง

ขั้นตอนที่ 01: การลากและวางวิดเจ็ตไทม์ไลน์ไปยังผืนผ้าใบ Elementor

พิมพ์ ไทม์ไลน์ ในช่องค้นหา เลือก วิดเจ็ตไทม์ไลน์ นอกเหนือจากไทม์ไลน์แนวนอน ลากแล้ววางลง บนผืนผ้าใบ Elementor

ไทม์ไลน์แนวตั้งจะถูกสร้างขึ้นบนผืนผ้าใบด้วยเค้าโครงเริ่มต้น

ขั้นตอนที่ 02: เลือกที่ตั้งไว้ล่วงหน้าสำหรับวิดเจ็ตไทม์ไลน์แนวตั้ง

หวังว่าคุณจะรู้แล้วว่าสิ่งที่ตั้งไว้ล่วงหน้าคืออะไรที่เราได้กล่าวถึงแล้วข้างต้น เลือกที่ตั้งไว้ล่วงหน้า หากคุณไม่ต้องการออกแบบเส้นเวลาแนวตั้งตั้งแต่เริ่มต้น

ขั้นตอนที่ 03: เพิ่มเนื้อหาลงในไทม์ไลน์แนวตั้ง

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

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

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

เพิ่มเนื้อหาให้กับไทม์ไลน์ให้สมบูรณ์ คุณสามารถเพิ่มรายการเพิ่มเติมลงในไทม์ไลน์ได้โดย คลิก ที่ + เพิ่มรายการ ดังที่แสดงด้านบน

ขั้นตอนที่ 04: กำหนดค่าการตั้งค่าสำหรับวิดเจ็ตไทม์ไลน์แนวตั้ง

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

ทำการตั้งค่าแบบ neeful ด้วยตัวเอง แต่สำหรับเราการจัดตำแหน่งเริ่มต้นดูดี ดังนั้นเราจะยึดติดกับการสอน

ขั้นตอนที่ 05: สไตล์วิดเจ็ตไทม์ไลน์แนวตั้ง

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

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

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

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

ในทำนองเดียวกันปรับแต่งลักษณะที่ปรากฏของ เวลาและวันที่ เราได้เปลี่ยนสีน้ำหนักและการพิมพ์

ในที่สุด ขยาย ส่วนปุ่ม คุณสามารถปรับแต่ง สีพื้นหลังตัวอักษรคัดลอก และ อื่น ๆ

ขั้นตอนที่ 06: ดูตัวอย่างวิดเจ็ตไทม์ไลน์แนวตั้ง

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

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

สิ่งที่คุณสามารถทำได้มากขึ้นด้วย Happyaddons

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

. ใช้ตัวสร้างธีมฟรี

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

ข. เป็นมิตรกับ woocommerce

Happyaddons มาพร้อมกับวิดเจ็ตที่เป็นมิตรกับ woocommerce เก้าตัวเพื่อปรับปรุงเว็บไซต์อีคอมเมิร์ซของคุณ วิดเจ็ตเหล่านั้นคือกริดผลิตภัณฑ์, ม้าหมุนผลิตภัณฑ์, กริดหมวดหมู่ผลิตภัณฑ์, หมวดหมู่ผลิตภัณฑ์ Carousel, ผลิตภัณฑ์เดียว, รถเข็นขนาดเล็ก, รถเข็น, การชำระเงินและแถบการจัดส่ง

ค. การคัดลอกข้ามโดเมน

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

d. ออกแบบเนื้อหาที่สร้างสรรค์

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

ก. แสดงข้อมูลทางสถิติ

ซึ่งแตกต่างจาก add-ons elementor อื่น ๆ อีกมากมายปลั๊กอินนี้มีวิดเจ็ตแผนภูมิหลายตัวซึ่งคุณสามารถแสดงข้อมูลทางสถิติและสร้างโพสต์และหน้าอินโฟกราฟิก เรียนรู้วิธีสร้างหน้าอินโฟกราฟิกด้วย Elementor

นอกจากสิ่งเหล่านี้แล้วยังมีอีกหลายสิ่งที่คุณสามารถทำได้ด้วยปลั๊กอิน Happyaddons

ความคิดสุดท้าย!

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

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

ขอบคุณที่อยู่กับเราจนจบ ขอให้คุณมีความสุขในวันข้างหน้า