วิธีสร้างการนำทางในแนวตั้งด้วย Divi ที่ขับเคลื่อนธุรกิจ

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

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

ผลลัพธ์

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

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

แรงบันดาลใจ

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

วิธีสร้างการนำทางในแนวตั้งด้วย Divi ที่ขับเคลื่อนธุรกิจ

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

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

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

เปิดใช้งานการนำทางคงที่

การนำทางแนวตั้งที่เรากำลังสร้างใหม่จะได้รับการแก้ไข เช่นเดียวกับเว็บไซต์ Eat Thai Restaurant หากต้องการแก้ไขการนำทางในแนวตั้ง ให้ไปที่ แดชบอร์ด WordPress > Divi > ตัวเลือกธีม > แท็บทั่วไป > เปิดใช้งานการนำทางแบบคงที่

การตั้งค่าเมนูหลัก (ตัวปรับแต่งธีม)

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

• ซ่อนภาพโลโก้: ปิดการใช้งาน
• โลโก้ความสูงสูงสุด: 100
• ขอบบนของเมนู: 0
• ขนาดตัวอักษร: 14
• ระยะห่างระหว่างตัวอักษร: -1
• แบบอักษร: Lato Light
• สีข้อความ: #FFFFFF
• สีของลิงค์ที่ใช้งาน: #FFFFFF
• สีพื้นหลัง: #004159
• สีพื้นหลังของเมนูแบบเลื่อนลง: #004159

แก้ไขการตั้งค่าเมนูนำทาง (ตัวปรับแต่งธีม)

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

เพิ่มรายการเมนู

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

เปิดใช้งานคลาส CSS

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

เพิ่มเมนูใหม่

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

หลังจากเพิ่มรายการเมนูทั้งหมดแล้ว (ซึ่งเราจะแสดงให้คุณเห็นทีละขั้นตอน) เมนูของคุณจะมีลักษณะดังนี้ที่ส่วนหลัง:

หมายเลขโทรศัพท์

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

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

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

ที่อยู่

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

ไอคอนโซเชียล

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

เพิ่ม Font Awesome

สิ่งแรกที่คุณต้องทำ ถ้ายังไม่ได้ทำคือเพิ่ม Font Awesome ให้กับตัวเลือกธีมของคุณ โดยไปที่ แดชบอร์ด WordPress > Divi > Theme Options > Integration > และวางรหัสย่อต่อไปนี้ลงในส่วนหัวของเว็บไซต์ของคุณ:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

รับรหัสย่อ

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

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

เพิ่มไอคอนโซเชียลลงในเมนู

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

<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>

อย่าลืมเพิ่ม URL ให้กับแต่ละไอคอน คลาสที่เราใช้สำหรับไอคอนโซเชียลทั้งสามรวมกันคือ 'icon-wrapper' แต่เรายังได้กำหนดคลาสพิเศษให้กับไอคอนโซเชียลแต่ละรายการเพื่อทำการปรับเปลี่ยนแต่ละรายการ คุณสามารถสังเกตเห็นคลาสเหล่านี้ได้ทันทีหลังจากคลาส Font Awesome พวกเขาถูกเรียกว่า 'facebook', 'instagram' และ 'envelope'

ทิศทาง

สำหรับรายการเมนูถัดไป เราใช้คำว่า 'directions' เป็นชื่อคลาส CSS

เส้น

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

เวลาทำการ

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

CTA 1

ต่อไป เราจะเพิ่ม CTA แรก เราจะกำหนดชื่อคลาส CSS 'cta-1' ให้กับมัน

CTA2

สำหรับ CTA ที่สอง เราจะใช้ชื่อคลาส CSS 'cta-2'

ปุ่ม CTA

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

สร้างปุ่มบนหน้า Landing Page

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

<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> 
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> 
ORDER NOW 
</a> 
</div>

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

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

เพิ่มเป็นรายการเมนู

เมื่อคุณได้คัดลอกโค้ด HTML ที่จำเป็นซึ่งเชื่อมโยงกับปุ่มแล้ว ให้เพิ่มลิงก์ที่กำหนดเองใหม่และเพิ่มโค้ดลงในป้ายกำกับการนำทาง คลาส CSS ที่เราใช้สำหรับรายการเมนูนี้คือ 'cta-3'

เพิ่มบรรทัดโค้ด CSS

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

หากต้องการเพิ่มโค้ด CSS ให้ไปที่ แดชบอร์ด WordPress > Divi > ตัวเลือกธีม > เลื่อนลงไปที่แท็บ "ทั่วไป" และเพิ่มบรรทัดโค้ด CSS ต่อไปนี้ลงในกล่อง CSS ที่กำหนดเอง:

@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}

@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}

#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}

เปลี่ยนสีพื้นหลังของส่วน

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

ผลลัพธ์

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

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

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

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

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