คุณเคยมองหาการสร้างตัวติดตามความคืบหน้าในแนวตั้งแทนแถบเลื่อนแบบเดิมหรือไม่? ถ้าไม่เช่นนั้น ให้อ่านบทความนี้จนจบเพื่อดูวิธีสร้างด้วย Elementor มือโปร
แต่ก่อนจะจัดการกับหัวข้อหลัก เรามานึกกันก่อนว่าตัวติดตามความคืบหน้าคืออะไร
ตัวติดตามความคืบหน้าเป็นตัวบ่งชี้ความคืบหน้าที่แจ้งให้ผู้ใช้ทราบถึงความคืบหน้าของกระบวนการต่อเนื่อง เช่น การติดตั้งแอปพลิเคชัน การอัปเดต การอ่านบทความ ฯลฯ และมีสองประเภท:
- le ตัวติดตามความคืบหน้าเชิงเส้น
- le ตัวติดตามความคืบหน้าแบบวงกลม
คุณยังสามารถอ่าน: Elementor: วิธีสร้างการ์ดเอฟเฟกต์จากพอร์ตโฟลิโอ
ในบทช่วยสอนนี้ เราจะแสดงวิธีแทรกตัวบ่งชี้ความคืบหน้าในแนวตั้งทีละขั้นตอนลงในส่วนที่มีที่เก็บถาวรของโพสต์
สร้างตัวติดตามความคืบหน้า
ในแท็บ องค์ประกอบ จากแผงเครื่องมือElementor, พิมพ์ในแถบค้นหา ติดตามความคืบหน้า. จากนั้นลากวิดเจ็ตไปยังส่วน
ตัวบ่งชี้ความคืบหน้าจะปรากฏขึ้น โดยค่าเริ่มต้น จะเป็นการวางแนวในแนวนอน แต่อย่ากังวลไป คุณจะเห็นวิธีการจัดเรียงแนวตั้งในภายหลัง
ตัวบ่งชี้ความคืบหน้าถูกสร้างขึ้นมาทำการปรับเปลี่ยนที่จำเป็นเพื่อให้ได้ผลลัพธ์ที่ต้องการ
ดูเพิ่มเติม: Elementor: วิธีสร้างการ์ดเอฟเฟกต์จากพอร์ตโฟลิโอ
แก้ไขเนื้อหาตัวติดตามความคืบหน้า
ที่นี่คุณจะเลือกประเภทของตัวติดตามและสิ่งที่เกี่ยวข้อง
การตั้งค่าหลักคือ:
- ตัวติดตามทั่วไป: ที่นี่ค่าเริ่มต้นคือ ตามแนวนอน. อย่างไรก็ตาม เมื่อเลื่อนลงมาในรายการ ประเภท กลม ยังเสนอให้คุณ รักษาค่าเริ่มต้นไว้
- ความคืบหน้าสัมพันธ์กับ: ในการตั้งค่าที่สองนี้ ให้เลือกค่า selecteur. ตัวเลือกนี้จะแสดงการตั้งค่าเพิ่มเติม: Selecteur.
- Selecteur: ฟิลด์นี้มีวัตถุประสงค์เพื่อรับตัวระบุของวัตถุที่จะแนบตัวติดตาม
มาเลือกไฟล์เก็บถาวรของสิ่งพิมพ์กันเถอะ เนื่องจากเป็นองค์ประกอบที่ตัวติดตามของเราแนบมาด้วย
ในแผงการตั้งค่า ไปที่แท็บขั้นสูง จากนั้นกรอกค่าในฟิลด์ CSS ID.
จากนั้น กลับไปที่แผงตัวติดตามและกรอกข้อมูลในช่องตัวเลือกในเมนู เนื้อหา.
สุดท้าย กำหนดทิศทางของตัวบ่งชี้ความคืบหน้าไปทางขวา
เปลี่ยนรูปแบบของตัวติดตามความคืบหน้า
ในขั้นตอนนี้ เราจะกำหนดค่าพารามิเตอร์ของตัวบ่งชี้ความคืบหน้ารวมถึงพื้นหลังของส่วนหลัง
เริ่มต้นด้วยการตั้งค่าตัวบ่งชี้ความคืบหน้า
- การปรับ ความคืบหน้าสี ให้คุณเลือกระหว่างความก้าวหน้าแบบคลาสสิกและความก้าวหน้าแบบไล่ระดับสี ในตัวอย่างของเรา ให้เลือกตัวเลือกแรก ไม่ว่าจะเลือกอะไร ก็ปรากฏการตั้งค่า Couleur.
- ตั้งค่ามีสี โดยใช้จานสีร่วมหรือตัวเลือกสี
- ประเภทของเส้นขอบ: คุณมีข้อเสนอหกข้อที่นี่ (ไม่มี, เต็ม, สอง, ประ, ประ, ร่อง). เลือกใช้เส้นขอบแบบเต็ม
- ความกว้าง: นี่คือการเพิ่มความหนาให้กับเส้นขอบของตัวบ่งชี้ความคืบหน้าของคุณ
- รัศมีชายแดน: ตามค่าเริ่มต้น ตัวบ่งชี้ความคืบหน้าจะดูเหมือนสี่เหลี่ยมผืนผ้า โดยการปรับเปลี่ยนรัศมี ปลายของมันจะกลายเป็นมน
สุดท้าย ตั้งค่า ทางสกี การตั้งค่าพื้นหลัง คุณสังเกตเห็นว่าเกือบจะเป็นการตั้งค่าเดียวกันกับที่กลับมา จำกัดคุณไว้เฉพาะที่กล่าวไว้ล่วงหน้า
เปลี่ยนตัวเลือกขั้นสูงของตัวติดตามความคืบหน้า
เพื่อให้งานของเราเสร็จสมบูรณ์ เราจะตั้งค่าแท็บต่อไปนี้: เอฟเฟกต์การเคลื่อนไหว การแปลง และ CSS แบบกำหนดเอง.
มาเริ่มกันที่แท็บกันก่อน CSS ที่กำหนดเอง. เลือกจากนั้นใส่รหัสต่อไปนี้ลงในฟิลด์ที่เหมาะสม อนุญาตให้กำหนดความกว้างของตัวติดตาม ดังนั้นจึงกำหนดความกว้างเป็น 50% ของความสูงของหน้าต่าง
ถัดไป หมุนตัวติดตามในแนวตั้ง ในการดำเนินการนี้ ให้เลือกเมนูย่อย หม้อแปลงไฟฟ้าเปิดใช้งานการหมุน จากนั้นพิมพ์ 90 ลงในช่องว่าง สิ่งนี้จะหมุนวิดเจ็ตของเรา 90 องศาเพื่อให้คุณได้ตำแหน่งแนวตั้งที่ต้องการ
หากต้องการจัดแนววิดเจ็ตของเราให้อยู่ในระดับเดียวกับโพสต์แรก ให้ใช้ค่าชดเชย 145
ในระดับนี้ ถ้าเราเลื่อนหน้าของเรา คุณจะเห็นว่าตัวบ่งชี้ความคืบหน้าของเราหายไปในขณะที่เราเลื่อนของเรา เนื้อหา.
เพื่อแก้ปัญหานี้ คุณจะต้องเปิดแท็บ เอฟเฟกต์การเคลื่อนไหวแล้ววางคำสั่ง เข็มหมุด และเลือก ด้านล่าง.
คราวนี้เมื่อเลื่อนลงมา เราจะเห็นตัวติดตามความคืบหน้าค่อยๆ ปรากฏขึ้นเมื่อเราเลื่อนดูที่เก็บถาวรของโพสต์
รับ Elementor Pro ทันที!
สรุป
ดังนั้น ! บทความนี้จะแสดงวิธีสร้างเครื่องมือติดตามความคืบหน้าในแนวตั้งสำหรับบทความนี้.
การเพิ่มองค์ประกอบแบบโต้ตอบ เช่น ตัวบ่งชี้ความคืบหน้าในแนวตั้งเมื่อสร้าง เว็บไซต์ สามารถยกระดับขึ้นไปอีกขั้นได้ด้วยการทำให้ใช้งานง่ายขึ้น นอกจากนี้ยังสามารถเชื่อมโยงไปยังทั้งหน้าหรือไปยัง เนื้อหา ของสิ่งพิมพ์และแม้แต่องค์ประกอบเฉพาะอื่นๆ ของเพจ การรู้วิธีใช้งานจึงถือเป็นข้อได้เปรียบเพิ่มเติม
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...