Divi Plugin Highlight – Divi Breadcrumbs Module

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

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

การใช้โมดูลเบรดครัมบ์ คุณสามารถวางเบรดครัมบ์บนแต่ละหน้าและโพสต์ที่ใช้ Divi Builder นอกจากนี้ยังทำงานร่วมกับปลั๊กอินพิเศษและ Divi Builder ในไฮไลท์ของปลั๊กอินนี้ เราจะมาดูที่ปลั๊กอินทั้งใน Divi และ Extra และดูวิธีการปรับแต่งบางอย่าง

ทำไมต้องใช้เบรดครัมบ์

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

Divi Breadcrumbs Module ปรับปรุง SEO โดยให้ข้อมูลลำดับชั้นเกี่ยวกับเว็บไซต์ของคุณแก่ Google ซึ่งหมายความว่าคุณควรเลือกคำหลักสำหรับหมวดหมู่ที่คุณต้องการจัดอันดับ นอกจากนี้ยังบังคับให้นักออกแบบใช้ชื่อหมวดหมู่ที่เข้าใจง่ายขึ้น

เบรดครัมบ์ช่วยปรับปรุงทั้ง UX และ UI ไม่ควรใช้แทนการนำทางเมนูมาตรฐานของคุณ แต่สามารถสร้างความสนใจและทำให้ผู้เข้าชมอยู่ในไซต์ของคุณได้นานขึ้น

Divi Breadcrumbs โมดูล

อัปโหลดและเปิดใช้งานปลั๊กอินตามปกติ โมดูลจะปรากฏเป็นสีแดงสดที่เรียกว่า Hollywood Cerise ปลั๊กอินเบรดครัมบ์จำนวนมากต้องการ Yoast เนื่องจากกำลังดึงเบรดครัมบ์จากปลั๊กอิน Yoast แต่ Divi Breadcrumbs Module ไม่ต้องการ Yoast แทนที่จะสร้าง breadcrumbs ของตัวเอง ดังนั้นจึงไม่มีปลั๊กอินอื่นที่จำเป็น

การตั้งค่าเนื้อหารวมถึงการซ่อนเบรดครัมบ์ของหน้าแรก การเพิ่มข้อความเบรดครัมบ์หน้าแรกของคุณเอง เลือกไอคอนตัวคั่น (จากตัวเลือก 12 ตัว) การซ่อนหน้าปัจจุบัน การตั้งค่าพื้นหลัง และป้ายกำกับของผู้ดูแลระบบ การตั้งค่าการออกแบบรวมถึงสไตล์สำหรับไอคอน ข้อความ และลิงก์ และตัวเลือกระยะห่างมาตรฐาน

Divi Breadcrumb ตัวอย่างโมดูล

นี่คือเลย์เอาต์บทความพื้นฐานที่มีโมดูลชื่อโพสต์พร้อมรูปภาพ โมดูลเบรดครัมบ์ และโมดูลข้อความของบทความ ฉันทิ้งการตั้งค่าเบรดครัมบ์ไว้เป็นค่าเริ่มต้น

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

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

การเพิ่ม Breadcrumbs ภายใต้เมนู Fullwidth

ตำแหน่งที่ดีที่สุดในการเพิ่มเบรดครัมบ์อยู่ที่ด้านบนสุดของหน้า ในตัวอย่างนี้ ฉันสร้างโพสต์โดยใช้เมนูเต็มความกว้าง และตั้งค่าช่องว่างภายในและระยะขอบเป็น 0 สำหรับทั้งส่วนเต็มความกว้างและส่วนมาตรฐาน ฉันฝังหมวดหมู่เพื่อแสดงลำดับชั้น

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

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

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

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

จัดแต่งทรงผมตัวคั่น

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

ตัวอย่างนี้ใช้ฟอนต์เริ่มต้นเป็นสีม่วงและขนาดฟอนต์ 20 สำหรับตัวคั่น

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

นี่คือตัวคั่นเดียวกันที่ใช้แบบอักษร Black Ops One โดดเด่นและโดดเด่นยิ่งขึ้น

นี่คือฟอนต์ Droid Serif ที่ขนาด 20 พอยท์ โดยมีระยะห่างระหว่างบรรทัด 4 พิกเซล ฉันทำให้แบบอักษรเป็นสีแดงเข้ม

แม้แต่จุดจะเปลี่ยนรูปร่างด้วยตัวเลือกแบบอักษร อันนี้คือ Passion One ที่ 24 จุด คุ้มค่าที่จะใช้เวลาทดลองแบบอักษร สี และขนาดเพื่อสร้างสิ่งที่ไม่เหมือนใคร ใช้งานง่ายด้วยปุ่มควบคุมการจัดรูปแบบมาตรฐาน

การใช้ Divi Breadcrumbs Module กับ Extra

Divi Breadcrumbs Module ทำงานร่วมกับปลั๊กอินพิเศษและ Divi Builder มาดู Extra พร้อม breadcrumbs ด้านล่างภาพด้านขวา ฉันรวมชื่อโพสต์ไว้ด้วยเนื่องจากเบรดครัมบ์อยู่ห่างจากชื่อที่ด้านบนของหน้าจอมาก มันใช้ตัวคั่นแบบแท่ง

ตามหลักแล้ว breadcrumbs จะอยู่ที่ด้านบนของหน้า ในเค้าโครงหน้าของฉัน โมดูล breadcrumbs อยู่ที่ด้านบนสุด สาเหตุที่แสดงด้านล่างภาพคือ ฉันอนุญาตให้ Extra แสดงรูปภาพเด่น

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

ใบอนุญาต อัปเดต การสนับสนุน

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

• คลิกที่นี่เพื่อซื้อ: Divi Breadcrumbs Module

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

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

หากคุณสนใจที่จะเพิ่มเบรดครัมบ์ลงในเลย์เอาต์ Divi ของคุณ Divi Breadcrumbs Module อาจเป็นปลั๊กอินที่คุณต้องการ

เราอยากได้ยินจากคุณ! คุณลอง Divi Breadcrumbs Module แล้วหรือยัง? แจ้งให้เราทราบเกี่ยวกับประสบการณ์ของคุณในความคิดเห็นด้านล่าง

ภาพเด่นผ่าน Yevgenij_D / shutterstock.com