วิธีเพิ่มไอคอนโซเชียลลงในเมนูหลักของ Divi
เผยแพร่แล้ว: 2017-06-27ในบทช่วยสอน Divi วันนี้ เราจะแสดงวิธีเพิ่มไอคอนโซเชียลให้กับเมนูหลักของเว็บไซต์ Divi ของคุณ เมื่อทำตามบทช่วยสอนนี้ทีละขั้นตอน คุณจะสามารถเพิ่มไอคอนโซเชียลลงในเว็บไซต์ใดๆ ที่คุณสร้างขึ้น ไม่ว่าจะเป็นสำหรับตัวคุณเองหรือลูกค้า
เรามีความสามารถในการเพิ่มไอคอนโซเชียลลงในส่วนหัวและส่วนท้ายของเว็บไซต์โดยตรงด้วยเครื่องมือปรับแต่งธีม Divi แต่ถ้านั่นไม่ใช่สิ่งที่คุณกำลังมองหา บทช่วยสอนนี้อาจช่วยคุณได้เพราะในหลายกรณี ผู้คนต้องการมีไอคอนโซเชียลในเมนูหลักแทนที่จะเป็นส่วนหัวหรือส่วนท้ายของเว็บไซต์
เราจะแสดงให้คุณเห็นว่าคุณสามารถเพิ่มได้อย่างไร ปรับแต่งได้อย่างไรบ้าง และวิธีเปิดในแท็บใหม่ นี่คือสิ่งที่คุณจำเป็นต้องรู้จริงๆ เพื่อให้ไอคอนโซเชียลในเมนูหลักของคุณสามารถเพิ่มมูลค่าให้กับทั้งเว็บไซต์ของคุณได้
เหตุใดจึงต้องเพิ่มไอคอนโซเชียลลงในเมนูหลัก
เว็บไซต์และช่องทางโซเชียลมีเดียมีหลายกรณีเสริมกัน เนื้อหาที่แชร์บนเว็บไซต์ไม่ปรากฏในช่องทางโซเชียลมีเดียและในทางกลับกัน นั่นคือเหตุผลที่การโปรโมตเว็บไซต์ของคุณบนช่องทางโซเชียลมีเดียและช่องทางโซเชียลมีเดียบนเว็บไซต์ของคุณจึงไม่ใช่เรื่องแปลกและตรงไปตรงมา กำลังใจอย่างสูง
คุณต้องการให้ผู้คนโต้ตอบกับบริษัทหรือแบรนด์ของคุณในแบบที่พวกเขาคุ้นเคยมากที่สุด เว็บไซต์ของคุณมักจะเป็น ' อาณาเขตที่ไม่รู้จัก ' สำหรับพวกเขา อุปสรรคในการติดต่อคุณโดยตรงผ่านเว็บไซต์ของคุณจึงอาจมากกว่าช่องทางโซเชียลมีเดีย คนส่วนใหญ่ที่เข้าชมหน้า Facebook หรือหน้า Twitter ของคุณถูกรวมเข้ากับแพลตฟอร์มแล้ว และความรู้สึกสบายใจสามารถมีอิทธิพลต่อพฤติกรรมของพวกเขาในทางบวก
ด้วยเหตุนี้ โดยรวมแล้ว การวางไอคอนโซเชียลบนเว็บไซต์ของคุณจึงแนะนำได้ดีมาก แต่ทำไมต้องแบ่งปันอย่างชัดเจนในเมนูหลักของคุณ? เราได้ระบุสาเหตุหลักสองประการ
หาง่าย/เมนูติดตามผู้เยี่ยมชมระหว่างการเยี่ยมชม
เมื่อคุณเพิ่มไอคอนโซเชียลลงในเว็บไซต์ของคุณ คุณต้องการให้ไอคอนเหล่านั้นปรากฏให้เห็นมากที่สุด ผู้คนไม่ควรพยายามค้นหาไอคอนโซเชียลบนเว็บไซต์ของคุณ นั่นคือสิ่งที่การวางไอคอนโซเชียลในเมนูหลักสามารถสร้างความแตกต่างได้ เมนูหลักจะติดตามบุคคลตลอดการเข้าพักบนเว็บไซต์ของคุณ ไม่จำเป็นต้องไปหาไอคอน ไอคอนจะมาหาคุณ สิ่งเดียวที่บุคคลนั้นต้องทำคือคลิกแล้วพวกเขาจะไปถึงที่นั่น
เมนูหลักจะติดตามบุคคลตลอดการเข้าพักบนเว็บไซต์ของคุณ ไม่จำเป็นต้องไปหาไอคอน ไอคอนจะมาหาคุณเอง สิ่งเดียวที่ผู้เข้าชมต้องทำคือคลิกที่พวกเขาและพวกเขาจะไปที่นั่น
ทริกเกอร์การดำเนินการ
ดังที่ได้กล่าวมาแล้ว ช่องทางโซเชียลมีเดียและเว็บไซต์เป็นส่วนเสริม พวกเขาทำงานร่วมกันและมักจะมีเป้าหมายเดียวกัน เช่น แจ้งผู้มีโอกาสเป็นลูกค้าและดึงดูดพวกเขาให้มาใช้บริการหรือผลิตภัณฑ์ที่นำเสนอ ยิ่งเผชิญหน้ากับพวกเขามากเท่าไหร่ ความอยากรู้ของพวกเขาก็จะยิ่งถูกกระตุ้นมากขึ้นเท่านั้น
เพื่อสนับสนุนการเชื่อมต่อระหว่างเว็บไซต์และช่องทางโซเชียลมีเดีย เป็นการดีที่จะเผชิญหน้ากับผู้เยี่ยมชมด้วยไอคอนโซเชียลให้บ่อยที่สุด ยิ่งพวกเขาเผชิญหน้ากับพวกเขามากเท่าไหร่ ความอยากรู้ของพวกเขาก็จะยิ่งกระตุ้นมากขึ้นเท่านั้น และยิ่งมีโอกาสมากขึ้นที่พวกเขาจะคลิกที่พวกเขาในที่สุด
วิธีเพิ่มไอคอนโซเชียลลงในเมนูหลักของ Divi
สมัครสมาชิกช่อง Youtube ของเรา
ติดตั้ง Font Awesome
ก่อนอื่น เราต้องติดตั้ง Font Awesome ลงในเว็บไซต์ WordPress ของเรา เราจะทำสิ่งนี้โดยการเพิ่มโค้ด CSS ลงใน Theme Options ของ Divi
เปิดเว็บไซต์ WordPress ของคุณ ไปที่ Divi > Theme Options > Integration และวางโค้ดต่อไปนี้ในส่วน <head>:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
ตอนนี้ควรเพิ่มแบบอักษรที่ยอดเยี่ยมลงในแบบอักษรที่ใช้บนเว็บไซต์ของคุณ คุณสามารถเพิ่มไอคอนเหล่านี้ในเมนูหลักของคุณโดยทำตามส่วนถัดไปของโพสต์ของเราทีละขั้นตอน
เริ่มสร้างเมนูหลัก
เป็นไปได้มากว่า คุณได้สร้างเมนูหลักแบบกำหนดเองแล้ว โดยที่คุณได้ระบุหน้าทั้งหมดที่คุณต้องการให้ปรากฏในเมนูหลักของเว็บไซต์ของคุณ หากคุณยังไม่ได้ดำเนินการดังกล่าว ให้ไปที่หน้า 'เมนู' ภายใน Appearance และสร้างเมนูใหม่
ถัดไป ตั้งชื่อเมนู เพิ่มหน้าเว็บที่คุณต้องการให้ปรากฏในเมนูหลัก แล้วเลือกตัวเลือก 'เมนูหลัก' ด้านล่าง
เพิ่มไอคอนโซเชียล
ต่อไปเราต้องการเพิ่มไอคอนโซเชียล เมื่อสร้างเมนูหลัก คุณสามารถเลือกตำแหน่งที่คุณต้องการให้ไอคอนโซเชียลของคุณปรากฏ ในกรณีส่วนใหญ่ พวกมันจะมาต่อจากหน้าเพจโดยตรง แต่คุณสามารถใส่พวกมันไว้ก่อนได้เช่นกัน มีไอคอนโซเชียลมีเดียสำหรับเว็บไซต์ที่สำคัญและเป็นที่นิยมมากที่สุดทั้งหมด จาก Facebook ถึง Twitter, Instagram, LinkedIn และอื่นๆ
เริ่มต้นด้วยการเปิดลิงก์ต่อไปนี้บนเว็บไซต์ Font Awesome เราต้องการเว็บไซต์นี้สำหรับส่วนถัดไปของโพสต์นี้ โดยเราจะเพิ่มไอคอนด้วยตนเอง
เพิ่มไอคอนด้วยตนเอง
วิธีการทำงานแบบเดียวกันกับแต่ละไอคอนโซเชียลที่คุณเพิ่มในเมนูหลักของคุณ ตัวอย่างเช่น เราจะแสดงวิธีเพิ่มไอคอน Instagram สำหรับไอคอนอื่นๆ ทั้งหมดที่คุณต้องการเพิ่มด้วย รู้ว่ามันเป็นวิธีการทำงานแบบเดียวกัน (เฉพาะไอคอน โค้ด HTML และ URL ที่แตกต่างกันเท่านั้น)
เปิดตัวเลือก 'ลิงก์ที่กำหนดเอง' แล้วคุณจะเห็นสองฟิลด์ปรากฏขึ้น: URL และป้ายกำกับการนำทาง เห็นได้ชัดว่าฟิลด์ URL เป็นที่ที่คุณพิมพ์ URL ที่นำผู้เยี่ยมชมไปยังช่องทางโซเชียลมีเดีย ในตัวอย่างนี้ เราต้องการให้ไอคอนนำไปสู่ Instagram ดังนั้นเพียงพิมพ์ URL Instagram ของคุณ
จากนั้นไปที่เว็บไซต์ Font Awesome ในเบราว์เซอร์ของคุณและค้นหาไอคอน Instagram ผ่านแถบค้นหา ในทำนองเดียวกัน คุณสามารถค้นหา Facebook, LinkedIn และไอคอนอื่นๆ ได้
เมื่อคุณคลิกที่ไอคอน Instagram แล้ว คุณจะเห็นว่าเว็บไซต์มีโค้ด HTML ต่อไปนี้:
<i class="fa fa-instagram" aria-hidden="true"></i>
นี่คือรหัสที่แน่นอนที่เราต้องใช้ในช่องป้ายการนำทาง ดังนั้นให้กรอกลิงก์ที่กำหนดเองโดยคัดลอกและวางรหัสลงในช่อง
ทำขั้นตอนเดียวกันซ้ำสำหรับไอคอนโซเชียลแต่ละรายการที่คุณต้องการให้ปรากฏในเมนูหลักของคุณ และดูว่าหน้าตาเป็นอย่างไรที่ส่วนหน้าของเว็บไซต์ของคุณ
เปลี่ยนรูปลักษณ์ของไอคอนโซเชียล
การเปลี่ยนแปลงโดยรวมของเมนูหลัก (รวมถึงไอคอนโซเชียล)
เครื่องมือปรับแต่งธีมช่วยให้คุณทำการเปลี่ยนแปลงลักษณะที่ปรากฏทั้งหมดที่คุณต้องการทำกับเมนูหลักของคุณได้ในที่เดียว
การเปลี่ยนแปลงที่คุณทำกับเมนูหลักด้วยตัวเลือก Divi จะมีผลกับไอคอนโซเชียลด้วย เมื่อคุณกำหนดสีให้กับเมนูหลักของคุณ ตัวอย่างเช่น ไอคอนโซเชียลจะมีสีเดียวกัน นั่นเป็นเพราะว่าเราใช้ฟอนต์แทนรูปภาพเพื่อให้ใช้งานได้
คุณสามารถทำการเปลี่ยนแปลงทั้งหมดที่คุณต้องการทำให้ปรากฏในเครื่องมือปรับแต่งธีมได้โดยไปที่ ส่วนหัวและการนำทาง > แถบเมนูหลัก การเปลี่ยนแปลงที่คุณทำจะมีผลในแบบเรียลไทม์และให้มุมมองที่ดีว่าคุณต้องการให้เมนูหลักของคุณมีหน้าตาเป็นอย่างไร
เปิดไอคอนโซเชียลในแท็บใหม่
ส่วนนี้ของโพสต์เป็นสิ่งพิเศษที่คุณสามารถทำได้ด้วยไอคอนโซเชียล คุณอาจไม่ต้องการส่งผู้เยี่ยมชมออกจากเว็บไซต์ แม้ว่าพวกเขาจะไปที่ช่องทางโซเชียลมีเดียของคุณก็ตาม คุณต้องการให้การโต้ตอบทั้งสองยังคงอยู่ให้นานที่สุดโดยเปิดลิงก์โซเชียลมีเดียในแท็บใหม่ทุกครั้งที่มีคนคลิก
เราสามารถทำให้ตัวเลือก 'เปิดในแท็บใหม่' ทำงานบนไอคอนโซเชียลมีเดียทั้งหมดได้อย่างง่ายดาย โดยกลับไปที่เมนูที่เราเคยสร้างไว้ก่อนหน้านี้ เราจำเป็นต้องทำการปรับเปลี่ยนทั้งหมดด้วยตนเองสำหรับไอคอนแต่ละรายการ ในตัวอย่างนี้ เราจะทำการเปลี่ยนแปลงไอคอน Instagram
ดำเนินการต่อและลบ URL ที่คุณระบุในช่อง URL แล้ววางโค้ดต่อไปนี้ลงใน URL การนำทางแทน:
<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
ทำสิ่งเดียวกันกับแต่ละไอคอนหากคุณต้องการให้เปิดในแท็บใหม่ ทุกครั้งที่ผู้เยี่ยมชมคลิกที่พวกเขา พวกเขาจะเปิดในแท็บใหม่ซึ่งช่วยให้คุณรักษาผู้เยี่ยมชมของคุณไว้ให้นานที่สุด
ความคิดสุดท้าย
บทช่วยสอนนี้จะช่วยให้คุณรวมไอคอนโซเชียลเข้ากับเว็บไซต์ Divi ของคุณในแบบที่คุณต้องการอย่างแน่นอน คุณสามารถปรับแต่งและปรับให้เข้ากับเมนูหลักที่เหลือของคุณได้ หากคุณมีคำถามหรือข้อเสนอแนะ ตรวจสอบให้แน่ใจว่าคุณแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง เราจะติดต่อกลับและพยายามตอบคำถามหรือข้อเสนอแนะทั้งหมดที่คุณมี
อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!
ภาพเด่นผ่าน Oceans / shutterstock.com