3 วิธีที่สร้างสรรค์ในการจัดรูปแบบ Active Link การนำทางแนวตั้ง Divi ของคุณ

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

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

3 วิธีที่สร้างสรรค์ในการจัดรูปแบบ Active Link การนำทางแนวตั้ง Divi ของคุณ

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

มันทำงานอย่างไร

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

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

หมายเหตุ: โปรด ทราบว่าวิธีนี้ใช้ได้กับเว็บไซต์ที่สร้างจากหน้าเดียวเท่านั้น

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

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

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

แอ็คทีฟลิงค์สไตล์ #1

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

การตั้งค่าแถบเมนูหลัก

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

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

เพิ่มโค้ด CSS ให้กับตัวเลือกธีม

สิ่งต่อไปที่คุณต้องทำคือเพิ่มโค้ด CSS คุณสามารถเพิ่มโค้ด CSS ลงในเว็บไซต์ของคุณได้หลายวิธี เราจะจัดการกับสามวิธีในตัวอย่างเหล่านี้ เริ่มต้นด้วยตัวเลือกธีม หากคุณอยู่บนแดชบอร์ด WordPress ให้ ไปที่ Divi > ตัวเลือกธีม > เลื่อนลงไปที่แท็บทั่วไป และวางโค้ด 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;
}
#top-menu .current-menu-item a.mPS2id-highlight{ 
text-shadow:  0 0 10px #fff,  0 0 30px #fff,  0 0 50px #e3e98e,  0 0 70px #e3e98e, 0 0 90px #e3e98e;
border-top: 1px dotted #FFFFFF;
border-bottom: 1px dotted #FFFFFF;
padding-top: 15px;
}
nav#top-menu-nav {
width:80% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
text-align: center;
margin-bottom: 15px;
padding-left: 25%;
}
#et-top-navigation {
padding-top: 100% !important;
}
#top-menu {
text-align: center;
padding-left: 10%;
}}

แอ็คทีฟลิงค์สไตล์ #2

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

การตั้งค่าแถบเมนูหลัก

เราจะเริ่มต้นด้วยการทำแบบเดียวกับที่เราทำในตัวอย่างแรกของโพสต์นี้ ทำการปรับเปลี่ยนแถบเมนูหลัก ในการทำเช่นนั้น ไปที่ ลักษณะที่ปรากฏภายในแดชบอร์ด WordPress > ปรับแต่ง > ส่วนหัวและการนำทาง > แถบเมนูหลัก และตรวจสอบให้แน่ใจว่าคุณมีการตั้งค่าต่อไปนี้:

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

เพิ่มโค้ด CSS ให้กับเครื่องมือปรับแต่งธีม

ดังที่ได้กล่าวไว้ในตัวอย่างก่อนหน้านี้ คุณสามารถเพิ่มโค้ด CSS ลงในเว็บไซต์ของคุณได้หลายวิธี นอกจากการเพิ่มโค้ดที่กำหนดเองลงในตัวเลือกธีมแล้ว คุณยังสามารถเพิ่มโค้ดนั้นลงในเครื่องมือปรับแต่งธีมได้อีกด้วย หากคุณอยู่บนแดชบอร์ด WordPress ให้ ไปที่ ลักษณะที่ปรากฏ > ปรับแต่ง > CSS เพิ่มเติม แล้ววางโค้ดต่อไปนี้ลงในฟิลด์ 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;
}
#top-menu .current-menu-item a.mPS2id-highlight {
padding: 0.5em 1.9em;
}
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
height: 20px;
width: 20px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
#top-menu .current-menu-item a.mPS2id-highlight:before {
left: 0;
top: 0;
border-left: 4px solid #000000;
border-top: 4px solid #FFFFFF;
-webkit-transform: translate(100%, 50%);
transform: translate(100%, 50%);
}
#top-menu .current-menu-item a.mPS2id-highlight:after {
border-right: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} 
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
nav#top-menu-nav {
width:87% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

แอ็คทีฟลิงค์สไตล์ #3

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

การตั้งค่าแถบเมนูหลัก

สำหรับตัวอย่างสุดท้ายนี้ ให้เริ่มต้นด้วยการเปลี่ยนแปลงบางอย่างในแถบเมนูหลัก หากคุณอยู่บนแดชบอร์ด WordPress ให้ไปที่ ลักษณะที่ปรากฏ > ปรับแต่ง > ส่วนหัวและการนำทาง > แถบเมนูหลัก และทำการเปลี่ยนแปลงต่อไปนี้กับการนำทางแนวตั้ง:

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

เพิ่มโค้ด CSS ลงในหนึ่งหน้าโดยเฉพาะ

อีกทางเลือกหนึ่งที่คุณต้องเพิ่มโค้ด CSS คือการเพิ่มลงในหน้าหนึ่งโดยเฉพาะ เปิดหน้าแรกของคุณ (และด้วยเหตุนี้ หน้าที่คุณได้วางเนื้อหาทั้งหมดไว้) ด้วย Divi Builder และคลิกที่ไอคอนต่อไปนี้:

เมื่อคุณคลิกที่ไอคอนแล้ว ให้วางโค้ด 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;
}
#top-menu .current-menu-item a.mPS2id-highlight {
margin-left: 80px;
text-shadow:0 0 0 #000, -70px 0 0 rgba(255, 255, 255, .4), 70px 0 0 rgba(255, 255, 255, .4), 0 25px 0 rgba(255, 255, 255, .4) , 0 -25px 0 rgba(255, 255, 255, .4) ; }
}
nav#top-menu-nav {
width:95% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

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

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

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

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