วิธีสร้างลิงค์ที่ใช้งานบน Scroll สำหรับเว็บไซต์ Divi หน้าเดียว

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

สำหรับผู้ที่มีปัญหาในการถ่ายภาพเอฟเฟกต์นี้ในใจ เราได้แสดงตัวอย่างไว้ด้านล่าง

ผลลัพธ์

มาดูผลลัพธ์สุดท้ายที่คุณจะได้รับหลังจากทำตามโพสต์นี้:

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

แรงบันดาลใจ

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

วิธีสร้างลิงค์ที่ใช้งานบน Scroll สำหรับเว็บไซต์ Divi หน้าเดียว

สมัครสมาชิกช่อง Youtube ของเรา

เริ่มต้นใช้งาน: ดาวน์โหลดเพจ เลื่อนไปที่ ID Plugin

ในการดึงการออกแบบนี้ออก เราจะเริ่มต้นด้วยการใช้ปลั๊กอิน Page Scroll to ID ที่ฟรีและได้รับคะแนนดี ซึ่งคุณสามารถหาได้ที่นี่ คลิกที่ปุ่ม 'ดาวน์โหลด' และบันทึกไฟล์ ZIP ของปลั๊กอินในที่ที่คุณสามารถหาได้ทันที

อัปโหลดและเปิดใช้งานเพจ เลื่อนไปที่ ID Plugin

สิ่งต่อไปที่คุณต้องทำคือไปที่ แดชบอร์ด WordPress > ปลั๊กอิน > เพิ่มใหม่ > เลือกไฟล์ ZIP ที่คุณเพิ่งดาวน์โหลดและอัปโหลด

หลังจากนั้นอย่าลืมเปิดใช้งานปลั๊กอินด้วย

เปิดใช้งานการนำทางแนวตั้ง

ก่อนที่เราจะเข้าสู่การตั้งค่าของปลั๊กอิน Page Scroll to ID เราจะเปิดใช้งานการนำทางแนวตั้ง (และการนำทางคงที่ในขั้นตอนต่อไป) ก่อน หากคุณอยู่บนแดชบอร์ด WordPress ให้ไปที่ ลักษณะที่ปรากฏ > ปรับแต่ง > ส่วนหัวและการนำทาง > รูปแบบส่วนหัว > และเปิดใช้งานการนำทางในแนวตั้ง

เปิดใช้งานการนำทางคงที่

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

เลื่อนหน้าไปที่การตั้งค่าปลั๊กอิน ID

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

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

• เปิดใช้งานบนลิงค์เมนู WordPress: ใช่
• ระยะเวลาการเลื่อน: 200 มิลลิวินาที
• ปรับระยะเวลาการเลื่อนอัตโนมัติ: ใช่
• การค่อยๆ เปลี่ยนภาพเคลื่อนไหวแบบเลื่อน: Linear
• เลื่อนอย่างราบรื่นเสมอเมื่อถึงจุดสิ้นสุดของหน้า/เอกสาร: ใช่
• หยุดการเลื่อนหน้าด้วยเมาส์วีลหรือการปัดแบบสัมผัส: ใช่
• เค้าโครงหน้า: auto
• อนุญาตให้ใช้องค์ประกอบที่ไฮไลต์ได้ครั้งละหนึ่งรายการเท่านั้น: ใช่
• เน้นองค์ประกอบปัจจุบันไว้จนกว่าจะเห็นองค์ประกอบถัดไป: ใช่
• ไฮไลท์ตามเป้าหมายถัดไป: ใช่
• เพิ่มค่าแฮชของลิงก์ที่คลิกต่อท้าย URL/แถบที่อยู่ของเบราว์เซอร์: ใช่
• เลื่อนจาก/ไปยังหน้าอื่น: ใช่
• 0 มิลลิวินาทีล่าช้าสำหรับการเลื่อนไปยังเป้าหมายในการโหลดหน้า
• ป้องกันไม่ให้สคริปต์อื่นจัดการลิงก์ของปลั๊กอิน (ถ้าเป็นไปได้): ใช่
• ทำให้เป้าหมายจุดยึดเป็นปกติ: ใช่

เพิ่ม CSS ID & Class ให้กับ Sections

สิ่งต่อไปที่คุณต้องทำคือกำหนด CSS ID ต่างๆ และ Page Scroll บน ID CSS Class ให้กับส่วนต่างๆ ในเพจเจอร์เดียวของคุณ ในการทำเช่นนั้น ให้เปิดการตั้งค่าของแต่ละส่วนของคุณและไปที่แท็บขั้นสูง ภายในแท็บขั้นสูง ให้เลือก CSS ID ต่างๆ ที่คุณต้องการใช้สำหรับหัวข้อของคุณ โปรดทราบว่าเพื่อให้ใช้งานได้ คุณจะต้องกำหนด CSS ID ที่แตกต่างกันให้กับแต่ละส่วนในเพจเจอร์เดียวของคุณ

ในตัวอย่างนี้ เราใช้ 'home' เป็น CSS ID แรกของเรา อย่างไรก็ตาม คลาส CSS จะเหมือนกันในแต่ละส่วน และช่วยให้คุณเชื่อมโยงส่วนนั้นกับปลั๊กอิน Page Scroll to ID ชื่อคลาส CSS คือ 'ps2id'

เพิ่ม ID ในรายการเมนู

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

ใช้ลิงก์ที่กำหนดเอง

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

เปิดใช้งานคลาส CSS

สิ่งต่อไปที่คุณต้องทำ หากคุณยังไม่ได้ทำคือเปิดใช้งานคลาส CSS สำหรับรายการเมนูของคุณ ในการทำเช่นนั้น ให้คลิกที่ตัวเลือก 'ตัวเลือกหน้าจอ' ที่มุมขวา เมื่อความเป็นไปได้ปรากฏขึ้น ให้เปิดใช้งานคลาส CSS

ใช้การเลื่อนหน้าไปที่ ID CSS Class

เมื่อคุณเปิดใช้งานคลาส CSS สำหรับรายการเมนูของคุณแล้ว คุณสามารถดำเนินการต่อและเชื่อมโยง Page Scroll กับคลาส ID กับแต่ละรายการในเมนูได้ด้วยตนเอง คลาส CSS นั้นเหมือนกับที่เราเคยกำหนด ID ให้กับส่วนของเรา นั่นคือ 'ps2id'

ทำการปรับเปลี่ยนรูปลักษณ์

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

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

เครื่องมือปรับแต่งธีม

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

• ซ่อนภาพโลโก้: ใช่
• โลโก้ความสูงสูงสุด: 83
• ขอบบนของเมนู: 0
• ขนาดตัวอักษร: 14
• ระยะห่างระหว่างตัวอักษร: -1
• แบบอักษร: Lato Light
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่
• สีข้อความ: #FFFFFF
• สีของลิงค์ที่ใช้งาน: #FFFFFF
• สีพื้นหลัง: rgba(255,255,255,0)
• สีพื้นหลังของเมนูแบบเลื่อนลง: rgba(255,255,255,0)

ตัวเลือกธีม CSS ที่กำหนดเอง

ในการเปลี่ยนรูปแบบลิงก์ที่ใช้งาน เราจะต้องเพิ่มโค้ด CSS ที่กำหนดเอง หากคุณอยู่ในแดชบอร์ด WordPress ให้ไปที่ Divi > ตัวเลือกธีม > เลื่อนลงไปที่แท็บทั่วไป แล้ววางโค้ด CSS ต่อไปนี้ลงในช่อง Custom CSS:

#top-menu .current-menu-item a.mPS2id-highlight{
background: black;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 15px;
}

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

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
}

ผลลัพธ์

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

แน่นอน คุณสามารถปรับเปลี่ยนสไตล์ตามที่คุณต้องการได้ (หรือใช้สำหรับการนำทางด้านบนเช่นกัน)

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

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

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

ภาพเด่นโดย Yurlick / shutterstock.com