ส่วนไทม์ไลน์นี้ทำให้ผู้ใช้สามารถแสดงเหตุการณ์สำคัญของโครงการและงานตามลำดับเวลาได้
สิ่งนี้มีประโยชน์อย่างยิ่งในการเน้นย้ำความคืบหน้าของโครงการ แสดงขั้นตอนการสมัคร การจัดแสดงความสำเร็จ เช่น รางวัล และการนำเสนอตัวเลือกที่ปรับแต่งได้อื่นๆ
โดยนำเสนอวิธีการที่มีโครงสร้างและดึงดูดสายตาในการนำเสนอข้อมูลในรูปแบบไทม์ไลน์ ปรับปรุงประสบการณ์ผู้ใช้และการมีส่วนร่วม
ในบทความนี้:
- เพิ่มส่วนลงในเพจของคุณ
- เพิ่ม/แก้ไขรายการ
- ลำดับรายการ
- การจัดการองค์ประกอบ
- เปลี่ยนเค้าโครงส่วน
- ตัวเลือกสไตล์
เพิ่มส่วนลงในเพจของคุณ
- สามารถเพิ่มส่วนลงในเพจได้ คุณสามารถเพิ่มส่วนลงในเพจที่มีอยู่แล้วหรือ สร้างเพจใหม่ ภายในเว็บไซต์ของคุณ
- บนหน้าของคุณ, คลิกที่ สีน้ำเงิน + ไอคอน เพื่อเพิ่ม ส่วนใหม่ ไปที่หน้าของคุณ
- ตอนนี้คุณจะเห็น หมวดหมู่ส่วน ด้านซ้าย
- คลิกที่ ปฏิบัติการ แท็บ (1) ที่คุณสามารถเลือกได้ เค้าโครงที่แตกต่างกัน ของส่วนไทม์ไลน์ (2)
- ตอนนี้ส่วนจะถูกเพิ่มลงในหน้า คลิกที่ ลด (3) ปุ่มเพื่อเก็บการเปลี่ยนแปลง
เพิ่มและแก้ไขรายการ
เพิ่มรายการ
เมื่อคุณเพิ่มส่วนนี้แล้ว:
- คลิกที่ แก้ไขไทม์ไลน์ (1) ปุ่มเพื่อเปิดแผงรายการ
- คลิกที่ เพิ่มรายการ (2) ปุ่มเพื่อเพิ่มรายการใหม่
- คุณสามารถเลือกที่จะ ทำซ้ำหรือลบ (3) รายการ
- ระบุก พาดหัว (4) สำหรับส่วนไทม์ไลน์
แก้ไขรายการ
คลิกที่รายการที่คุณต้องการแก้ไข จะเปิดตัวเลือกการแก้ไขของรายการนั้นๆ
จากที่นี่คุณสามารถ:
- อัพโหลด/ลบรูปภาพหลักและรอง (1)
คุณสามารถอัปโหลดไฟล์ ภาพรอง พร้อมกับ รูปภาพหลัก สำหรับแต่ละรายการ เมื่อผู้ใช้เลื่อนเมาส์ไปเหนือรายการ รูปภาพรองจะปรากฏขึ้นแทนที่รูปภาพหลัก นอกจากนี้ คุณยังสามารถตั้งค่า ภาพเน้นสีซึ่งจะแสดงเมื่อวางเมาส์เหนือภาพ - เพิ่ม ชื่อหนังสือ (2),คำบรรยาย (3)และคำอธิบาย (4) ของรายการ
- คุณอาจไม่พบตัวเลือกของคำบรรยายและคำอธิบายในรายการเฉพาะ ทั้งนี้ขึ้นอยู่กับเค้าโครงที่คุณเลือก
ก่อนเพิ่มคำอธิบาย ให้ตรวจสอบ นี้ บทความ
5. การดำเนินการเมื่อคลิก – ชื่อเรื่องและรูปภาพ
คุณสามารถปรับแต่งพฤติกรรมการคลิกของรายการแต่ละรายการได้ใน ปฏิบัติการ ส่วนด้านล่างนี้เป็นตัวเลือกที่สามารถใช้ได้:
- ไปที่ลิงค์
การเลือกตัวเลือกนี้จะเปิด ตัวสร้างลิงค์ช่วยให้คุณสามารถเพิ่มไฮเปอร์ลิงก์ไปยังรายการนี้ได้ ลิงก์ดังกล่าวสามารถนำผู้ใช้ไปยังหน้าอื่นภายในเว็บไซต์ของคุณหรือ URL ภายนอกได้ รู้มากกว่านั้น เกี่ยวกับ ตัวสร้างลิงค์. - เปิดในไลท์บ็อกซ์
ตัวเลือกนี้จะแสดงรายการในรูปแบบขยาย Lightbox ดูเมื่อคลิก ในโหมดนี้ หัวเรื่องย่อย และ รายละเอียด ที่เกี่ยวข้องกับรายการจะไม่ปรากฏในมุมมองกริด แต่จะมองเห็นได้ในโหมดไลท์บ็อกซ์ - ไม่มีการกระทำ
เลือกตัวเลือกนี้เพื่อให้ไม่สามารถคลิกรายการได้ เมื่อเลือกตัวเลือกนี้แล้ว การคลิกที่รายการจะไม่ทำให้เกิดการกระทำใดๆ
6. เปิดลิงค์ในหน้าต่างใหม่: กำหนดให้ลิงค์เปิดใน แท็บใหม่หรือในแท็บเดียวกัน สิ่งนี้จะมองเห็นได้เมื่อ ไปที่ลิงค์ ตัวเลือกถูกเลือกภายใต้ การกระทำเมื่อคลิก เมนู
7. ปุ่มและลิงค์: ใส่แบบไหนก็ได้ ลิงค์ ลงในรายการ คุณสามารถเพิ่มปุ่ม/ลิงก์รูปภาพ/ไอคอนโซเชียล/ลิงก์ข้อความได้ อ่านเพิ่ม.
8. การกำหนดรูปแบบการ์ดใหม่
คุณสามารถแทนที่การตั้งค่ารูปแบบการ์ดทั่วโลกจากส่วนได้ การตั้งค่าสไตล์ และปรับแต่งการ์ดของแต่ละรายการในส่วนไทม์ไลน์ทีละรายการ วิธีนี้ช่วยให้คุณสามารถใช้รูปแบบเฉพาะกับรายการต่างๆ ในรายการเพื่อการปรับแต่งที่ดียิ่งขึ้น
อ่านเพิ่ม เกี่ยวกับตัวเลือกการ์ดในส่วนไดนามิก
9. การกำหนดรูปแบบรูปร่าง
ใช้ตัวเลือกการแทนที่เพื่อกำหนดรูปร่างที่แตกต่างกันให้กับแต่ละภาพในแต่ละส่วนไทม์ไลน์ ช่วยให้คุณควบคุมรูปแบบภาพของแต่ละรายการได้ดียิ่งขึ้น อ่านเพิ่ม เกี่ยวกับ Shape Mask
10. บันทึก: หลังจากปรับแต่งแล้วให้บันทึกการเปลี่ยนแปลง
ลำดับรายการ
การจัดการองค์ประกอบของส่วนไทม์ไลน์
ส่วนไทม์ไลน์ประกอบด้วย แท็บองค์ประกอบ ที่ช่วยให้คุณจัดการการมองเห็นขององค์ประกอบต่างๆ ภายในส่วนต่างๆ ได้อย่างง่ายดาย โดยใช้สวิตช์สลับง่ายๆ คุณสามารถเปิดหรือปิดองค์ประกอบเฉพาะได้โดยไม่ต้องลบหรือแก้ไของค์ประกอบนั้นๆ
- คลิกที่ แก้ไขไทม์ไลน์ (1) ปุ่ม
- เลือกกระเป๋า องค์ประกอบ (2) แท็บ
- หลังจากทำการเปลี่ยนแปลงแล้วให้กด ลด (3) ปุ่ม
ตัวเลือกส่วน
- แสดงหัวข้อข่าว: เปิดใช้งานหรือปิดใช้งานการมองเห็นหัวข้อข่าวสำหรับส่วนไทม์ไลน์
- แสดงปุ่ม: ควบคุมว่าจะแสดงปุ่มในระดับส่วนหรือไม่
รายการ ตัวเลือก
- แสดงภาพ: สลับการมองเห็นของรูปภาพ
- แสดงชื่อเรื่อง: ควบคุมว่าจะแสดงชื่อเรื่องหรือไม่
- แสดงคำบรรยาย: เปิดหรือปิดคำบรรยาย
- แสดงคำอธิบาย:จัดการการมองเห็นคำอธิบายรายการ
- แสดงปุ่ม:ตัดสินใจว่าควรแสดงปุ่มสำหรับรายการแต่ละรายการหรือไม่
เปลี่ยนเค้าโครงส่วน
- คลิกที่ แก้ไขไทม์ไลน์ ปุ่มเพื่อเปิดแผงแก้ไขส่วน
- เลือกกระเป๋า แบบ แถบ
- จากที่นี่ คุณสามารถเปลี่ยนเค้าโครงของส่วนต่างๆ ได้อย่างง่ายดายแม้ว่าจะเพิ่มส่วนนั้นลงในเพจแล้วก็ตาม
ขณะที่เปลี่ยนเค้าโครง คุณจะเห็นเค้าโครงที่เกี่ยวข้องกับส่วนด้านบน
นอกเหนือจากนี้ คุณยังมีตัวเลือกในการเลือกเค้าโครงจากส่วนอื่นๆ ภายใต้ เค้าโครงเพิ่มเติม หัวข้อ
ตัวเลือกสไตล์
- คลิกที่ แก้ไขรายการรูปภาพ ปุ่ม
- เลือกกระเป๋า สไตล์ (1) แถบ
- เปลี่ยนสไตล์สำหรับองค์ประกอบส่วนและ บันทึก (2) การเปลี่ยนแปลงของคุณ
คุณจะมีตัวเลือกสไตล์มากมายสำหรับส่วนนี้:
- แสดงตัวเลือก
- การวางแนว
- ขนาดข้อความ
- การเว้นวรรค
- หัวเรื่องมาตรา
- ตัวเลือกสไตล์ไทม์ไลน์
- ตัวเลือกรูปภาพ
- หน้ากากรูปทรง
- ตัวเลือกการโฮเวอร์รูปภาพ
- ขอบภาพ
- ตัวเลือกการ์ด
- ตัวเลือกเงา
- ปุ่ม & ลิงค์
ตัวเลือกการแสดงผล
- ระบุ ช่องว่างระหว่างแถว ของรายการ
การวางแนว
- เป็นเส้นตรง ข้อความแนวนอน ในส่วนนี้ คุณสามารถตั้งค่าให้จัดชิดซ้าย ชิดขวา หรือตรงกลางได้
- เป็นเส้นตรง เนื้อหาในแนวตั้ง ในส่วนนี้ คุณสามารถตั้งค่าให้จัดตำแหน่งให้อยู่ด้านบน ตรงกลาง และด้านล่างได้
- เลือกกระเป๋า ลำดับเนื้อหา คือรูปภาพของรายการที่จะแสดงก่อนหรือข้อความที่เกี่ยวข้อง
ขนาดข้อความ
- คลิกที่ เปลี่ยนรูปแบบข้อความ ปุ่มเพื่อเยี่ยมชม ออกแบบ ส่วนและ จัดการขนาดและรูปแบบตัวอักษรของคุณ
- ตั้ง ชื่อหนังสือ รูปแบบตัวอักษรสำหรับรายการของส่วน
- ตั้ง หัวเรื่องย่อย รูปแบบตัวอักษรสำหรับรายการของส่วน
- ตั้งค่าเริ่มต้น รายละเอียด รูปแบบตัวอักษรสำหรับรายการของส่วน
- เปิดใช้งานตัวเลือกนี้เพื่อ สร้างภาพเคลื่อนไหวให้กับตัวเลขใดๆ ก็ได้ ปัจจุบันใน ชื่อหนังสือ และ หัวเรื่องย่อย ช่องข้อมูล เมื่อเปิดใช้งาน ค่าตัวเลขจะปรากฏพร้อมแอนิเมชั่นการนับแบบไดนามิก ทำให้ดูน่าสนใจยิ่งขึ้น
การเว้นวรรค
- ระบุ ความกว้างของภาพ สำหรับรายการ.
- ระบุ เว้นวรรคใต้หัวเรื่อง ในพิกเซล
- ระบุ พื้นที่เหนือภาพ ของรายการ (เป็น %)
- ระบุ พื้นที่รอบ ๆ วงเวียน แนวนอนของรายการ (เป็น%)
- ระบุ ช่องว่างด้านล่างชื่อเรื่อง ของรายการ (เป็น %)
- ระบุ เว้นวรรคใต้คำบรรยาย ของรายการ (เป็น %)
หัวเรื่องมาตรา
- จัดวางแนวนอน ข้อความหัวข้อส่วน คุณสามารถตั้งค่าเป็นซ้าย กลาง และขวาได้
- เปิดใช้งาน/ปิดใช้งาน divider ระหว่างหัวข้อส่วนและเนื้อหาของส่วน
- ตั้ง ความหนาของตัวแบ่ง (เป็นพิกเซล)
- ระบุ สีตัวแบ่ง จากเครื่องมือเลือกสี
- เลือกหลักสูตรเตรียมความพร้อมสอบ สไตล์ตัวแบ่ง จากเมนูแบบเลื่อนลง
- ตั้ง ความกว้างของหัวเรื่อง เพื่อกำหนดความกว้างของชื่อหัวข้อโดยเริ่มต้นจากขั้นต่ำ 50%
ตัวเลือกสไตล์ไทม์ไลน์
- เปิดใช้งานสิ่งนี้หากคุณต้องการให้ทุกวินาทีในส่วนนี้ปรากฏ สลับกัน (ฝั่งตรงข้าม.
- เลือก ทิศทาง ของรายการ
- ระบุ ความกว้างของเส้นแบ่ง สำหรับส่วนนี้
- ระบุ เส้นฐาน (พื้นหลัง) สีสำหรับตัวแบ่ง
- ระบุ สายที่ใช้งานอยู่ (เน้น) สีสำหรับตัวแบ่ง
ภาพ
- เลือกกระเป๋า Iครอบตัดผู้วิเศษ สำหรับรายการ. คุณสามารถตั้งค่ารูปภาพเป็นสี่เหลี่ยม วงกลม แนวนอน แนวตั้ง และต้นฉบับได้
- เลือกให้มีรัศมีมุมร่วมกันหรือรัศมีมุมที่แตกต่างกันสำหรับแต่ละด้านของรายการ และตั้งค่าตัวเลข (เป็น px) สำหรับ Cรัศมีมุม ของภาพรายการ รู้มากกว่านั้น.
หน้ากากรูปทรง
- หน้ากากรูปทรง: เปิดใช้งานการสลับนี้เพื่อใช้หน้ากากรูปร่างกับรูปภาพในส่วนไทม์ไลน์ เมื่อเปิดใช้งานแล้ว รูปร่างที่เลือกจะตัดรูปภาพลงในแบบฟอร์มนั้น
- เลือกรูปร่าง: เลือกจากรูปทรงต่างๆ ที่กำหนดไว้ล่วงหน้าเพื่อนำไปใช้กับภาพของคุณ ช่วยให้คุณสามารถออกแบบเนื้อหาของคุณอย่างสร้างสรรค์ด้วยการแสดงภาพในรูปแบบที่ไม่ซ้ำใคร เช่น ทรงกลม เพชร หยดน้ำ เป็นต้น
- ตัวเลือกหน้ากากรูปร่างจะขึ้นอยู่กับเค้าโครง – อาจไม่ปรากฏภายใต้เค้าโครงที่มีข้อความ เช่น ชื่อเรื่องหรือคำบรรยายใต้ภาพแสดงอยู่เหนือรูปภาพ
- การตั้งค่าการยืดขึ้นอยู่กับหลายปัจจัย – รวมถึงขนาดรูปภาพ การจัดตำแหน่ง และการตั้งค่าครอบตัดที่กำหนดไว้ภายใต้แท็บสไตล์
- หากตั้งค่าการครอบตัดรูปภาพเป็นต้นฉบับขนาดจริงของรูปภาพจะกำหนดว่าภาพจะถูกยืดในแนวตั้งหรือแนวนอน
เลื่อนภาพ
- เลือกกระเป๋า ภาพโฮเวอร์สี ที่จะเป็น เน้นสี หรือจะเป็น ที่ระบุไว้. หากคุณเลือก เน้นสีจากนั้นระบุไฟล์ ความทึบแสงคุณสามารถระบุสีเน้นสำหรับแต่ละรายการได้จาก แก้ไขรายการ แผงหน้าปัด.
- หากคุณเลือกไฟล์ ระบุสี ตัวเลือกจากนั้นตั้งค่า สีทับและความทึบแสง.
- เลือกที่จะ ทำให้รูปภาพรายการเคลื่อนไหว เมื่อวางเมาส์เหนือโดยคลิกที่ใช่ ตรวจสอบคุณสมบัตินี้ในหน้าสด.
- เลือก สไตล์แอนิเมชั่น สำหรับรูปภาพเมื่อเคอร์เซอร์อยู่เหนือรูปภาพ
- เลือกหากคุณต้องการอนุญาต การเปลี่ยนผ่านของภาพ เลื่อนเมาส์ไปเหนือหรือไม่
- เลือก สไตล์การเปลี่ยนผ่าน สำหรับการเปลี่ยนผ่านแบบโฮเวอร์ มีตัวเลือกให้เลือกคือ Fade และ Flip
ขอบภาพ
- เปิด / ปิดเส้นขอบ รอบๆ ภาพโดยการสลับปุ่มสลับ
- เลือกที่จะมี ชายแดนทั่วไป ในทุกด้านของภาพหรือจะระบุก็ได้ เส้นขอบแยกจากกัน สำหรับแต่ละด้าน
- ระบุ ความกว้าง ของชายแดน หากตั้งค่าเป็น 0 เส้นขอบจะไม่ปรากฏ คุณยังมีตัวเลือกในการตั้งค่าความกว้างของเส้นขอบสำหรับแต่ละด้านของรูปภาพแยกกัน
- เลือก สีขอบ จากเครื่องมือเลือกสี
- เลือกที่ต้องการ สไตล์ชายแดน จากเมนูแบบเลื่อนลง
- กำหนด ความกว้างของเส้นขอบสำหรับมือถือ อุปกรณ์ต่างๆ ให้สอดคล้องกับความกว้างที่เลือกไว้สำหรับเดสก์ท็อป
การ์ด
- มาดูกันว่า เพื่อจัดการการ์ด
เงา
- แสดง – เลือกให้แสดงเงาด้านหลังรายการเสมอหรือเมื่อโฮเวอร์เท่านั้น
- สไตล์ – เลือกจากค่าที่ตั้งไว้ล่วงหน้าที่มีอยู่หรือสร้างเงาแบบกำหนดเอง
ในกรณีที่คุณเลือกตัวเลือกกำหนดเอง ให้ไปที่สิ่งนี้ กล่องสร้างเงา เพื่อสร้างเงาแบบกำหนดเอง สุดท้าย คัดลอกและวาง กล่องเงา CSS. - ในกรณีที่คุณได้เลือกตัวเลือกที่ตั้งไว้ล่วงหน้าแล้ว เลือกสไตล์เงา จากเมนูแบบเลื่อนลง
ปุ่ม & ลิงค์
- มาดูกันว่า เพื่อจัดการสไตล์ของ ปุ่มและลิงค์
