Divi: วิธีสร้างแถบนำทางที่ติดหนึบ

คุณต้องการสร้างแถบนำทางระหว่างโพสต์ที่ติดหนึบใน Divi หรือไม่?

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

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

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

เริ่มกันเลย!

การสำรวจ

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

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

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

นำเข้าเทมเพลตโพสต์บล็อก "ชุดอาหาร" ลงใน Divi Theme Builder

ในการเริ่มต้น ให้ดาวน์โหลด เทมเพลตการโพสต์บล็อกฟรีสำหรับ Divi's Meal Kit Layout Pack . โดยไปที่ โพสต์บล็อก .

จากนั้นป้อนอีเมลของคุณเพื่อดาวน์โหลดไฟล์ zip

หลังจากนั้นให้แตกไฟล์เพื่อให้พร้อมนำเข้า

ในการนำเข้าไฟล์ไปยังตัวแก้ไขธีม ให้ทำตามขั้นตอนเหล่านี้:

1. ไปที่ Divi > ตัวสร้างธีม
2. คลิกที่ไอคอนพกพา
3. ในหน้าต่างป๊อปอัปการพกพา ให้เลือกแท็บการนำเข้า
4. เลือกไฟล์ที่คลายซิปที่ดาวน์โหลดไว้ก่อนหน้านี้เพื่อนำเข้า
5. คลิกที่ « นำเข้าเครื่องมือสร้างธีม Divi แม่แบบ ».
6. คลิกไอคอนแก้ไขเพื่อแก้ไขแบบจำลองที่นำเข้า

สร้างแถบการนำทางที่ติดหนึบใน Divi

ส่วนที่ 1: การสร้างเส้นเหนียว

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

อ่าน: Divi: วิธีใช้ตัวเลือก "Gradient Repeat" เพื่อสร้างรูปแบบพื้นหลังที่กำหนดเอง

ในส่วนที่สองของเค้าโครงเทมเพลต ให้เพิ่มแถวใหม่ใต้แถวที่มีเนื้อหาโพสต์

การตั้งค่าสาย

เปิดการตั้งค่าบรรทัด

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

ภายใต้แท็บ ระดับสูง, ปรับปรุงสิ่งต่อไปนี้:

• ตำแหน่งติดหนึบ: ติดบนและล่าง
• ขีด จำกัด ติดหนึบสูงสุด: Section
• ขีด จำกัด เหนียวด้านล่าง: บริเวณร่างกาย

เพื่อให้แน่ใจว่าคอลัมน์จะไม่ซ้อนกันบนอุปกรณ์เคลื่อนที่ ให้เพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงใน องค์ประกอบหลัก :

display:flex;
flex-wrap:nowrap;
align-items:center;

ภายใต้แท็บ คอนเทนต์เพิ่มสีพื้นหลังสีขาวให้กับบรรทัดในสถานะติดหนึบดังนี้:

• พื้นหลัง: ไม่มี
• แบคกราวด์: #ffffff (เหนียว)

ภายใต้การตั้งค่า ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ช่องว่างภายใน: 0px (บนและล่าง)

ซ่อนคอลัมน์กลางบนแท็บเล็ตและโทรศัพท์

หากต้องการซ่อนคอลัมน์บนมือถือ ให้เปิดการตั้งค่าสำหรับคอลัมน์ 2 (คอลัมน์กลาง) และอัปเดตตัวเลือกการมองเห็นดังนี้:

• ปิดการใช้งานบน: โทรศัพท์, แท็บเล็ต

ส่วนที่ 2: การสร้างลิงก์การนำทางบทความ

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

ลิงค์กระทู้ที่แล้ว

ในคอลัมน์ 1 เพิ่มโมดูลการนำทางโพสต์ใหม่

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

• ลิงก์ก่อนหน้า (ข้อความ): โพสต์ก่อนหน้า
• แสดงลิงก์โพสต์ก่อนหน้า: ใช่
• แสดงลิงก์โพสต์ถัดไป: NO
• พื้นหลัง: #000000

ภายใต้แท็บ ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:

• แบบอักษรของลิงก์: Kumbh Sans
• ลิงค์น้ำหนักแบบอักษร: ตัวหนา
• รูปแบบตัวอักษร: TT
• ลิงค์สีข้อความ: #ffffff
• ขนาดข้อความลิงก์: 26px (เดสก์ท็อป), 16px (แท็บเล็ตและโทรศัพท์)
• ความสูงของสาย: 1,3 em
• แพ็ดดิ้ง: 0,9em (บน), 0,7em (ล่าง), 2em (ซ้ายและขวา)

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

ดูสิ่งนี้ด้วย: Divi: วิธีเปลี่ยนรูปแบบขององค์ประกอบต่าง ๆ เมื่อวางเมาส์เหนือหรือหลังจากคลิก

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

display:block;
width:50vw;
text-align:center;
float:none;

การสร้างลิงก์โพสต์ถัดไป

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

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

• ลิงก์ถัดไป: โพสต์ถัดไป
• แสดงลิงก์โพสต์ก่อนหน้า: NO
• แสดงลิงก์โพสต์ถัดไป: ใช่

• ความเป็นมา: #ffb100

ภายใต้แท็บ ออกแบบอัปเดตสีข้อความลิงก์:

• ลิงค์สีข้อความ: #000000

ส่วนที่ 3: การสร้างชื่อโพสต์แบบไดนามิก

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

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

ในคอลัมน์กลาง เพิ่มโมดูลข้อความใหม่

ภายใต้แท็บ คอนเทนต์คลิกที่ไอคอน “ใช้เนื้อหาแบบไดนามิก” ในบริเวณร่างกาย แล้วเลือก ชื่อกระทู้/เอกสารสำคัญ.

เมื่อเพิ่มชื่อโพสต์แบบไดนามิกแล้ว ให้เปิดการตั้งค่าของ ชื่อกระทู้/เอกสารสำคัญ และอัปเดตเนื้อหาก่อน:

• ก่อน: การอ่าน

จากนั้นบันทึกการเปลี่ยนแปลง

ภายใต้แท็บ ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:

• แบบอักษรของข้อความ: Kumbh Sans
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• รูปแบบตัวอักษร: TT
• สีข้อความ: โปร่งใส (เดสก์ท็อป), #000000 (เหนียว)
• ขนาดตัวอักษร: 16px
• ระยะห่างระหว่างตัวอักษร: 1px
• ความสูงของสาย: 1,3 em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

• ความกว้างสูงสุด: 96%
• โมดูลการจัดตำแหน่ง: center
• ช่องว่างภายใน: 0,5em (บนและล่าง)

ผลสุดท้าย

ดาวน์โหลด DIVI ทันที !!!

สรุป

ในบทช่วยสอนนี้ เราแสดงให้เห็นว่าการสร้างแถบนำทางสำหรับโพสต์แบบติดหนึบสำหรับเทมเพลตการโพสต์บล็อกใน Divi นั้นง่ายเพียงใด 

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

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

ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ

อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...