วิธีสร้างไทม์ไลน์สำหรับตารางงานแต่งงานของคุณด้วยปลั๊กอิน Divi & the Divi Timeline Module

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

ในสี่ส่วนแรกของมินิซีรีส์ เราได้แสดงวิธีการสร้าง:

• หน้าประกาศงานแต่งงานที่หรูหรา
• หน้าแกลลอรี่
• หน้ารายการของขวัญ
• และวิธีใช้ปลั๊กอินรับรอง Divi อัตโนมัติบนเว็บไซต์งานแต่งงานของคุณ

เลย์เอาต์ที่เราสร้างนั้นมีความสอดคล้องกันในสไตล์และง่ายต่อการสร้าง

ในส่วนสุดท้ายของมินิซีรีส์นี้ เราจะแสดงวิธีสร้างไทม์ไลน์สำหรับเว็บไซต์งานแต่งงานของคุณด้วยปลั๊กอิน Divi Timeline Module โดย Elegant Marketplace เราจะยกตัวอย่างวิธีสร้างไทม์ไลน์แนวตั้งที่ดูดีซึ่งจะทำให้แขกที่มาร่วมงานแต่งงานของคุณได้รับข้อมูลล่าสุดเกี่ยวกับสิ่งที่จะเกิดขึ้นในวันสำคัญของคู่บ่าวสาว

ตัวอย่างเส้นเวลาแนวตั้ง

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

การซื้อปลั๊กอิน

หากคุณยังไม่ได้เป็นเจ้าของปลั๊กอิน Divi Timeline Module คุณจะต้องซื้อบนเว็บไซต์ของ Elegant Marketplace ปลั๊กอินราคา $11 หลังจากซื้อปลั๊กอินบนเว็บไซต์แล้ว คุณจะได้รับไฟล์ ZIP ที่มีโมดูลใหม่ที่คุณจะเพิ่มลงในเว็บไซต์ของคุณ

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

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

อัปโหลดไฟล์ ZIP ที่คุณได้รับจากการซื้อ

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

สองวิธีที่แตกต่างกันในการใช้ Divi Timeline Module บนเว็บไซต์ของคุณ

กำลังแสดงตารางงานแต่งงาน

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

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

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

แสดงไทม์ไลน์ความสัมพันธ์ของคู่บ่าวสาว

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

โมดูลคำรับรองประเภทต่างๆ

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

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

เริ่ม

เรากำลังแสดงให้คุณเห็นทีละขั้นตอนในการสร้างไทม์ไลน์ต่อไปนี้:

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

เพิ่มรายการไทม์ไลน์และไทม์ไลน์

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

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

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

มีกระแสมาตรฐานที่มักจะตามมาในระหว่างงานแต่งงาน เราจะสร้างรายการไทม์ไลน์ใหม่สำหรับเหตุการณ์ต่อไปนี้:

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

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

การปรับเปลี่ยนโมดูลไทม์ไลน์

แต่ก่อนที่จะเพิ่มรายการไทม์ไลน์ เรามาทำการปรับเปลี่ยนที่จะต้องนำไปใช้กับรายการไทม์ไลน์ทั้งหมดผ่านไทม์ไลน์ – โมดูลแนวตั้ง ไปที่แท็บเนื้อหาของไทม์ไลน์ – โมดูลแนวตั้ง และเปลี่ยนสีเส้นกลางเป็น '#fae4de' ในหมวดหมู่ย่อยพื้นหลัง สีนี้จะใช้กับทุกบรรทัดภายในโมดูลไทม์ไลน์ที่อนุญาตให้รายการไทม์ไลน์ต่างๆ โต้ตอบกัน

ถัดไป ไปที่แท็บออกแบบ ก่อนอื่น เปิดหมวดหมู่ย่อยข้อความและทำการเปลี่ยนแปลงต่อไปนี้:

• แบบอักษรของข้อความ: Raleway Light
• รูปแบบตัวอักษรของข้อความ: ตัวหนา
• ขนาดตัวอักษรของข้อความ: 14px
• สีข้อความ: #9b857b
• ความสูงของบรรทัดข้อความ: 1em

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

• แบบอักษรของป้ายชื่อสินค้า: Raleway Light
• รูปแบบตัวอักษรของป้ายชื่อรายการ: ตัวหนา
• ขนาดตัวอักษรป้ายรายการ: 39px
• ป้ายชื่อสินค้า สีข้อความ: #9b857b
• ความสูงของบรรทัดฉลากสินค้า: 1.5em

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

• แบบอักษรของหัวเรื่อง: Tangerine
• ขนาดตัวอักษรของส่วนหัว: 70px (เดสก์ท็อปและแท็บเล็ต), 60px (แท็บเล็ต)
• หัวเรื่องข้อความสี: #9b857b
• ความสูงของบรรทัดส่วนหัว: 1.5em

การปรับเปลี่ยนทั้งหมดที่กล่าวมาข้างต้นจะนำไปใช้กับแต่ละรายการในไทม์ไลน์ คลิกบันทึกและออก

การปรับเปลี่ยนรายการไทม์ไลน์

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

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

เนื้อหารายการไทม์ไลน์

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

เลื่อนลงไปที่แท็บเดียวกันและมองหาไอคอนรูปหัวใจในรายการไอคอนไอเทม เปลี่ยนสีไอคอนเป็น '#9b857b' และสีพื้นหลังของไอคอนเป็น '#fae4de'

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

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

ห่อ

นี่เป็นส่วนสุดท้ายของละคร How to Create an Elegant Wedding Website with Divi เราหวังว่าบทความนี้จะเป็นชุดบทความที่มีคุณค่าซึ่งจะช่วยให้คุณสร้างเว็บไซต์งานแต่งงานที่สวยงามและสวยงามสำหรับตัวคุณเองหรือลูกค้าของคุณ หากคุณมีคำถามใดๆ เกี่ยวกับบทช่วยสอนนี้ หรือหากคุณมีคำขอเกี่ยวกับบทช่วยสอน/มินิซีรีส์ในอนาคต อย่าลืมแสดงความคิดเห็นในส่วนความคิดเห็นของโพสต์ในบล็อกนี้ เพื่อให้เราติดต่อกลับพร้อมคำตอบ!

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