วิธีสร้างการนำทางในแนวตั้งที่โปร่งใสซึ่งซ้อนทับเว็บไซต์ Divi ของคุณ

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

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

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

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

ผลลัพธ์สุดท้ายของวันนี้: เมนูแนวตั้งที่เรียบง่ายและสง่างาม

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

การสร้างการออกแบบใน Divi

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

การตั้งค่าทั่วไป

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

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

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

เลือกการตั้งค่าการออกแบบของคุณในเครื่องมือปรับแต่งธีม

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

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

เพิ่มโค้ด CSS

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

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

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

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

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

@media (min-width: 981px) { 
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important; 
}
}

นอกจากนี้ หากคุณต้องการปรับความกว้างของการนำทางแนวตั้งด้วย ให้คัดลอกและวางโค้ด CSS ต่อไปนี้แทน:

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

การสร้างการนำทางแนวตั้งแบบเรียบง่ายขึ้นใหม่

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

เคล็ดลับการออกแบบโดยรวม

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

รวมศูนย์ทุกอย่าง

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

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

พื้นหลังสีเดียวกันทุกที่

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

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

เริ่มสร้างตัวอย่าง

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

สร้างส่วนหัวแบบเต็มความกว้าง

ภายในส่วนเต็มความกว้าง เพิ่มส่วนหัวเต็มความกว้าง จากนั้นไปที่แท็บ Design ใส่ Text & Logo Orientation ไปที่ 'Center' และเปิดใช้งานโหมดเต็มหน้าจอของ Fullwidth Header ด้วยเช่นกัน

การตั้งค่าชื่อเรื่อง

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

• แบบอักษรของชื่อเรื่อง: Lato Light
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่
• รูปแบบตัวอักษรของชื่อเรื่อง: 60 (เดสก์ท็อป), 50 (แท็บเล็ต), 40 (โทรศัพท์)
• สีข้อความของชื่อเรื่อง: #FFFFFF

การตั้งค่าหัวเรื่องย่อย

นอกจากนี้ ให้เลื่อนต่อไปและตรวจสอบให้แน่ใจว่าการตั้งค่าของหมวดหมู่ย่อย Subhead Text มีดังต่อไปนี้:

• แบบอักษรของหัวเรื่องย่อย: Lato Light
• ขนาดตัวอักษรย่อย: 22px (เดสก์ท็อปและแท็บเล็ต), 19 (โทรศัพท์)
• สีข้อความหัวเรื่องย่อย: #c4c4c4

การตั้งค่าปุ่ม

สุดท้าย ทำการเปลี่ยนแปลงต่อไปนี้ในหมวดหมู่ย่อยปุ่มของแท็บออกแบบ:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่มที่หนึ่ง: ใช่
• ขนาดข้อความปุ่มหนึ่ง: 15 (เดสก์ท็อปและแท็บเล็ต), 12 (โทรศัพท์)
• ปุ่มสีข้อความหนึ่ง: #000000
• ปุ่มสีพื้นหลังหนึ่งปุ่ม: #FFFFFF
• แบบอักษรปุ่มหนึ่ง: Lato Light
• รูปแบบตัวอักษรปุ่มเดียว: ตัวหนาและตัวพิมพ์ใหญ่

การตั้งค่าพื้นหลังไล่ระดับสี

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

ในตัวอย่างของเรา เรากำลังใช้พื้นหลังสีเข้ม ดังนั้น เราจะเริ่มด้วยสีดำในการไล่ระดับสี อีกสีหนึ่งที่เราจับคู่กับภาพพื้นหลังคือ 'rgba(0,49,109,0.43)'

นอกจากนี้ การตั้งค่าที่เราใช้สำหรับสีไล่ระดับมีดังต่อไปนี้:

• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 87deg
• ตำแหน่งเริ่มต้น: 0%
• ตำแหน่งสุดท้าย: 62%

ดำเนินการต่อ เพิ่มภาพพื้นหลังและใช้การตั้งค่าต่อไปนี้:

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: ซ้อนทับ

การเปลี่ยนแปลงในเครื่องมือปรับแต่งธีม

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

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

เพิ่มโค้ด 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;
}
#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #FFFFFF;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}

ผลสุดท้าย

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

ห่อ

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

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