วิธีเพิ่มชื่อไซต์แบบไดนามิกและแท็กไลน์ให้กับ Divi Global Header

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

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

ดาวน์โหลด Dynamic Site Title และ Tagline Divi Global Header Template ฟรี

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

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

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

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

ดาวน์โหลด

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

หากต้องการนำเข้าเทมเพลต ให้ไปที่ Divi > Theme Builder

คลิกไอคอนการพกพาที่ด้านบนขวาของหน้า

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

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว Global Header Template จะพร้อมใช้งานใน Divi Theme Builder

ไปกวดวิชากันเถอะ

ชื่อไซต์และสโลแกนใน WordPress

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

ไม่ใช่เรื่องแปลกที่จะเพิ่มชื่อเว็บไซต์เมื่อติดตั้ง WordPress แล้วลืมมันไป

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

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

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

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

วิธีเพิ่มชื่อไซต์แบบไดนามิกและแท็กไลน์ให้กับส่วนหัวส่วนกลางใน Divi

การนำเข้า Premade Global Header Template

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

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

จากนั้นไปที่ Divi > Theme Builder

คลิกไอคอนการพกพาที่ด้านบนขวา ภายในป๊อปอัปการพกพา ให้เลือกไฟล์ JSON เทมเพลตเว็บไซต์เริ่มต้นแล้วคลิกปุ่มนำเข้า

เมื่อเพิ่มเทมเพลตลงในตัวสร้างธีมแล้ว ให้ลบเทมเพลตส่วนท้ายและคลิกเพื่อแก้ไข Global Header

การเพิ่มชื่อไซต์แบบไดนามิกและแท็กไลน์ให้กับส่วนหัว

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

ย้ายโลโก้

ในการเริ่มต้น ให้ลากโมดูลรูปภาพที่แสดงโลโก้ (แบบไดนามิก) จากคอลัมน์กลางในแถวบนสุดไปที่คอลัมน์ด้านซ้ายในแถวบนสุด

เพิ่มโมดูลการเรียกร้องให้ดำเนินการเพื่อแสดงชื่อไซต์และแท็กไลน์

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

เราจะใช้โมดูลการเรียกร้องให้ดำเนินการเพื่อแสดงชื่อไซต์และสโลแกน

แต่ก่อนที่เราจะเริ่มเพิ่มเนื้อหา ก่อนอื่นให้เลือกไม่ใช้สีพื้นหลัง

เพิ่มชื่อไซต์แบบไดนามิก

ภายใต้การตั้งค่าเนื้อหา ให้วางเมาส์เหนือช่องป้อนชื่อและคลิกไอคอน "ใช้เนื้อหาแบบไดนามิก" จากนั้นเลือก "ชื่อเว็บไซต์" จากรายการ

เพิ่มแท็กไลน์เว็บไซต์แบบไดนามิก

ถัดไป วางเมาส์เหนือบริเวณลำตัวและเลือกไอคอน "ใช้เนื้อหาแบบไดนามิก" จากนั้นเลือก “แท็กไลน์ของเว็บไซต์” จากรายการ

เพิ่มลิงค์โฮมเพจแบบไดนามิก

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

การออกแบบข้อความชื่อไซต์และแท็กไลน์

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

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

• แบบอักษรของชื่อเรื่อง: Heebo
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• รูปแบบตัวอักษรของชื่อเรื่อง: TT
• ขนาดข้อความชื่อเรื่อง: 32px (เดสก์ท็อป), 24px (แท็บเล็ตและโทรศัพท์)
• ระยะห่างของตัวอักษรชื่อเรื่อง: 0.3em
• แบบอักษรของร่างกาย: Roboto
• รูปแบบตัวอักษรของตัวหนังสือ: ตัวเอียง
• สีข้อความเนื้อหา:
• ขนาดข้อความเนื้อหา: 13px
• ระยะห่างระหว่างตัวอักษร: 0.1em
• ความสูงของเส้นร่างกาย: 1em

เพื่อช่วยในการจัดกึ่งกลาง ให้นำช่องว่างภายในเริ่มต้นออกใต้ข้อความเนื้อหาโดยเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในคำอธิบายโปรโมชัน:

padding-bottom: 0px

การปรับแต่งการออกแบบเพิ่มเติม

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

การจัดกึ่งกลางคอลัมน์/เนื้อหาในแนวตั้ง

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

align-items: center;

กำลังอัปเดตคอลัมน์ด้วยปุ่ม

ถัดไป เปิดการตั้งค่าสำหรับคอลัมน์ 3 ในแถวบนสุด และนำสีพื้นหลังและช่องว่างภายในออก

กำลังอัปเดตพื้นหลังปุ่ม

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

• ไล่สีพื้นหลังซ้ายสี: #ffffff
• สีพื้นหลังไล่ระดับด้านขวา: #1dbf73
• ทิศทางการไล่ระดับสี: 135deg
• ตำแหน่งเริ่มต้น: 10%
• ตำแหน่งสุดท้าย: 0%

การเพิ่มอักขระก่อนและหลังลงในสโลแกน

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

ผลสุดท้าย

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

นี่คือวิธีการวางซ้อนกันบนแท็บเล็ตและโทรศัพท์

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!