วิธีเพิ่มป้ายกำกับมุม "ใหม่" หรือ "แนะนำ" ให้กับรายการเมนูในส่วนหัว Divi ที่กำหนดเองของคุณ

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

ไปกันเถอะ

ดูตัวอย่าง

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

ดาวน์โหลดเทมเพลต Global Header ฟรี

หากต้องการใช้เทมเพลตส่วนหัวส่วนกลางฟรี ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

1. เพิ่มป้ายกำกับในรายการเมนู WordPress

ไปที่เมนูในลักษณะที่ปรากฏ

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

เพิ่มป้ายกำกับให้กับรายการเมนูเด่น

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

• <label class="menu-label featured-label">Featured</label>

  บริการ

เพิ่มป้ายกำกับให้กับรายการเมนูใหม่

เราจะทำเช่นเดียวกันสำหรับรายการเมนูอื่นที่เราเลือกและเปลี่ยนคลาส CSS ภายในแท็กพร้อมกับสำเนาป้ายกำกับ

• <label class="menu-label new-label">New</label>

  หลักสูตรฟรี

2. ไปที่ตัวสร้างธีม Divi

ไปที่ตัวสร้างธีม Divi และเพิ่มส่วนหัวส่วนกลาง

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

เริ่มสร้างตั้งแต่เริ่มต้น

จากนั้นเลือก "สร้างส่วนหัวส่วนกลาง" เพื่อเปลี่ยนเส้นทางไปยังตัวแก้ไขเทมเพลต

3. สร้างส่วนหัวระดับโลก

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

สีพื้นหลัง

เมื่ออยู่ในตัวแก้ไขเทมเพลต คุณจะสังเกตเห็นส่วน เปิดส่วนนั้นและเพิ่มสีพื้นหลัง การออกแบบส่วนหัวที่เราจะสร้างนั้นเข้ากันได้ดีกับ Tutor Layout Pack แต่คุณสามารถสร้างการออกแบบส่วนหัวได้ตามต้องการ ตราบใดที่คุณรวม Code Module (ในภายหลัง) ไว้ในนั้น

• สีพื้นหลัง: #2a3749

ระยะห่าง

ไปที่แท็บการออกแบบของส่วนและลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดในการตั้งค่าการเว้นวรรค

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ทัศนวิสัย

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

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

สีพื้นหลัง

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

• สีพื้นหลัง: #FFFFFF

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

เราจะนำค่าช่องว่างภายในที่กำหนดเองไปใช้กับการตั้งค่าการเว้นวรรคด้วย

• ช่องว่างภายในด้านบน: 25px
• ช่องว่างภายในด้านล่าง: 25px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

ชายแดน

พร้อมด้วยมุมโค้งมนบางส่วน

• ทุกมุม: 6px

กล่องเงา

และเงากล่องที่บอบบาง

• ตำแหน่งแนวตั้งเงาของกล่อง: 16px
• เงาสี: rgba(0,0,0,0.07)

แปลงแปล

ต่อไป เราจะปรับตำแหน่งแถวโดยใช้การตั้งค่าการแปลงการแปลงในแท็บการออกแบบ

• เปลี่ยนแปลให้ถูกต้อง: 50px

ล้น

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

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

เพิ่มโมดูลเมนูไปที่คอลัมน์

เลือกเมนู

ได้เวลาเพิ่มโมดูลเมนู เลือกเมนูที่คุณแก้ไขในส่วนแรกของบทช่วยสอนนี้

อัพโหลดโลโก้

อัปโหลดโลโก้ต่อไป

การตั้งค่าข้อความเมนู

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

• แบบอักษรของเมนู: PT Sans
• สีข้อความของเมนู: #000000
• ขนาดข้อความของเมนู: 16px
• การจัดตำแหน่งข้อความ: ขวา

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

แก้ไขสีบรรทัดของเมนูดรอปดาวน์ด้วย

• Dropdown Menu Line สี: #007aff

ไอคอน

ดำเนินการต่อโดยเปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์ในการตั้งค่าไอคอน

• ไอคอนเมนูแฮมเบอร์เกอร์ สี: #007aff

ขนาด

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยกำหนดความกว้างสูงสุดของโลโก้ให้กับการตั้งค่าการปรับขนาด

• โลโก้ความกว้างสูงสุด: 40%

เพิ่มโมดูลโค้ดลงในคอลัมน์

เมื่อคุณเสร็จสิ้นรูปลักษณ์โดยรวมของโมดูลเมนูของคุณแล้ว ให้ดำเนินการต่อโดยเพิ่มโมดูลโค้ดด้านล่าง

เพิ่มโค้ด CSS

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

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

4. บันทึกการเปลี่ยนแปลงตัวสร้างธีมทั้งหมด & ดูตัวอย่างผลลัพธ์

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

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ของหน้าจอขนาดต่างๆ กัน

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

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

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