วิธีสร้างแถบด้านข้างคงที่ที่ตอบสนองด้วยการเชื่อมโยงสมอเลื่อนที่ราบรื่นด้วย Divi

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

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

ตรวจสอบออก!

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของสิ่งที่เราจะสร้างร่วมกัน

แนวคิด

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

สิ่งที่คุณต้องการเพื่อเริ่มต้น

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

การเพิ่มเลย์เอาต์ให้กับเพจของคุณ

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

ในการเริ่มต้น ให้สร้างหน้าใหม่และปรับใช้ Divi Builder เลือกตัวเลือกเพื่อ "เลือกเค้าโครงที่สร้างไว้ล่วงหน้า" จากป๊อปอัป Load From Library ให้เลือก Food Recipes Layout Pack จากนั้นคลิกเพื่อใช้หน้าสูตรอาหาร

หลังจากโหลดเลย์เอาต์แล้ว ให้คลิกเพื่อสร้างที่ส่วนหน้า

การสร้างส่วนใหม่

จากส่วนหน้าของ Divi Builder ให้สร้างส่วนใหม่และลากไปที่ด้านบนสุดของเค้าโครง

คัดลอกปุ่มในส่วนหัวของเลย์เอาต์แล้ววางลงในแถวหนึ่งคอลัมน์ของส่วนใหม่ที่คุณสร้างขึ้น

เปิดการตั้งค่าปุ่มและเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลักภายใต้แท็บขั้นสูง:

display: block !important;

วิธีนี้ช่วยให้ปุ่มขยายความกว้างเต็มคอลัมน์ได้

เปลี่ยนข้อความปุ่มเป็น "บทนำ" จากนั้นเพิ่มสิ่งต่อไปนี้สำหรับ URL ลิงก์ของปุ่ม:

#การแนะนำ

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

ทำซ้ำปุ่มแล้วทำซ้ำขั้นตอนการให้ปุ่มข้อความปุ่มใหม่และ URL ลิงก์ปุ่มใหม่ เนื่องจากนี่จะเป็นลิงก์สมอที่ข้ามไปยังส่วนอื่นของหน้า ตรวจสอบให้แน่ใจว่า CSS ID (ข้อความหลัง “#”) ไม่ซ้ำกัน และสอดคล้องกับชื่อที่คุณจะให้ส่วนของคุณในภายหลัง

สำหรับปุ่มนี้ ให้เปลี่ยนข้อความของปุ่มเป็น "ส่วนผสม" และ URL ลิงก์ของปุ่มเป็น "#ingredients"

ทำซ้ำปุ่มอีกครั้ง จากนั้นให้ปุ่มใหม่เป็นข้อความปุ่ม "โภชนาการ" และเปลี่ยน URL ลิงก์ของปุ่มเป็น "#nutrition"

ทำซ้ำปุ่มอีกครั้ง จากนั้นให้ปุ่มใหม่เป็นข้อความ "คำแนะนำ" และเปลี่ยน URL ลิงก์ของปุ่มเป็น "#instructions"

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

การเพิ่ม CSS ID ให้กับส่วนและแถว

ตอนนี้เรามีปุ่มทั้งหมดที่สร้างด้วยลิงก์สมอแล้ว เราก็พร้อมที่จะเพิ่มชื่อ CSS ID ที่เกี่ยวข้องลงในส่วนและแถวของเราแล้ว

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

<h2 id="introduction">Introduction</h2>

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

ดังที่เราได้กล่าวไปแล้วก่อนหน้านี้ว่า URL ของปุ่มแต่ละอันที่เราสร้างขึ้นนั้นมีขึ้นเพื่อให้สอดคล้องกับ CSS ID ของส่วนต่างๆ ที่จำเป็นต้องข้ามไป

สำหรับปุ่ม "บทนำ" เราต้องเพิ่ม CSS ID ในส่วนของหน้าที่มีเนื้อหาแนะนำ ในการดำเนินการนี้ ให้เปิดการตั้งค่าส่วนของส่วนที่สามของหน้า (ส่วนใต้ส่วนหัวโดยตรง) และเพิ่ม CSS ID ต่อไปนี้ภายใต้แท็บขั้นสูง:

CSS ID: บทนำ

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

ในส่วนเดียวกัน ให้ค้นหาแถวที่มีหัวข้อ "ส่วนผสม" จากนั้นเปิดการตั้งค่าแถวและเพิ่มรหัส CSS ต่อไปนี้:

CSS ID: ส่วนผสม

ซึ่งจะสอดคล้องกับปุ่มลิงก์สมอส่วนผสมที่เราสร้างไว้ก่อนหน้านี้

เลื่อนลงไปที่ส่วนถัดไปที่มีหัวข้อ "โภชนาการ" และเปิดการตั้งค่าส่วน จากนั้นเพิ่มรหัส CSS ต่อไปนี้:

CSS ID: โภชนาการ

ซึ่งจะสอดคล้องกับปุ่มลิงก์โภชนาการที่เราสร้างไว้ก่อนหน้านี้

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

CSS ID: คำแนะนำ

ซึ่งจะสอดคล้องกับปุ่มลิงก์คำแนะนำที่เราสร้างไว้ก่อนหน้านี้

บันทึกการเปลี่ยนแปลงของคุณ

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

หากไม่ได้ผล ให้กลับไปตรวจสอบ CSS ID ว่าถูกต้องและตรงกัน

การสร้างเค้าโครงแถบด้านข้างคงที่

การเพิ่มระยะขอบซ้ายในส่วนต่างๆ เพื่อสร้างพื้นที่สำหรับแถบด้านข้าง

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

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

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

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

มาร์จิ้นที่กำหนดเอง: เหลือ 20%

ก่อนที่คุณจะบันทึกการตั้งค่า ให้คลิกขวาที่ตัวเลือก Custom Margin แล้วคลิก “Copy Custom Margin” และบันทึกการตั้งค่า

ในแต่ละส่วนที่เหลือตลอดเลย์เอาต์ของหน้า ให้วางระยะขอบแบบกำหนดเองไปที่ส่วนนั้นโดยคลิกขวาที่ส่วนนั้นแล้วคลิก “วางระยะขอบแบบกำหนดเอง”

ซึ่งจะให้ระยะขอบด้านซ้าย 20% แก่ส่วนทั้งหมดของคุณ ยกเว้นส่วนบนสุดที่มีปุ่มลิงก์สมอ

การสร้างแถบด้านข้างคงที่

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

ใต้แท็บ Design ให้อัปเดตความสูงและความกว้าง...

ความกว้าง: 20%
ส่วนสูง: 100%

ใต้แท็บขั้นสูง ให้อัปเดตตำแหน่ง...

ตำแหน่ง: คงที่
ออฟเซ็ตแนวตั้ง: 80px

ซึ่งจะทำให้ส่วนมีตำแหน่งคงที่โดยมีความกว้าง 20% ของหน้า นอกจากนี้ยังจัดตำแหน่งส่วนทางด้านซ้ายของหน้าและ 80px จากด้านบนของหน้าเพื่อรองรับความสูงของการนำทางส่วนหัว ความสูง 100% ช่วยให้แน่ใจว่าส่วนนั้นครอบคลุมความสูงทั้งหมดของหน้า

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

แก้ไขส่วนท้ายที่ทับซ้อนกัน

คุณอาจสังเกตเห็นว่าส่วนนั้นซ้อนทับแถบส่วนท้ายด้านล่างที่ด้านล่างของหน้า

มีสองสามวิธีในการแก้ไขปัญหานี้ ตัวอย่างเช่น ฉันสามารถลบ "ความสูง: 100%" ออกจากส่วน หรือคุณสามารถเพิ่ม CSS บางส่วนในการตั้งค่าหน้าเพื่อปรับความกว้างของแถบส่วนท้าย แต่ถ้าคุณต้องการรักษาความสูงของส่วนไว้ที่ 100% วิธีแก้ไขง่ายๆ คือการนำสีพื้นหลังของส่วนออก เปิดการตั้งค่าส่วนของส่วนที่เราใช้สำหรับแถบด้านข้างและเพิ่มสีพื้นหลังต่อไปนี้:

สีพื้นหลัง: rgba(255,255,255,0)

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

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

การปรับเปลี่ยนสำหรับมือถือ

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

กำหนดความกว้าง: 100
Custom Padding (เดสก์ท็อป): ซ้าย 10%, ขวา 10%
Custom Padding (แท็บเล็ต): 0% ซ้าย 0% ขวา

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

แค่นั้นแหละ. ตอนนี้คุณมีเมนูแถบด้านข้างคงที่ที่ตอบสนองพร้อมลิงก์สมอเลื่อนที่ราบรื่น!

ผลสุดท้าย

ตอนนี้ขอตรวจสอบผลลัพธ์สุดท้าย

และนี่คือสิ่งที่เลย์เอาต์ดูเหมือนบนแท็บเล็ต

เรียนรู้เพิ่มเติมเกี่ยวกับองค์ประกอบคงที่และลิงก์สมอ

หากคุณพบว่าบทช่วยสอนนี้มีประโยชน์ โปรดดูบทแนะนำที่เกี่ยวข้องด้านล่าง:

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

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

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

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

ไชโย!