วิธีการเพิ่มชื่อไซต์แบบไดนามิกและสโลแกนไปยังส่วนหัว Divi สากล

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

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

ผลลัพธ์ที่เป็นไปได้

นี่คือตัวอย่างของการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

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

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

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

ในการนำเข้าเทมเพลตไปที่ Divi> ตัวสร้างธีม

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

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

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

เมื่อเสร็จสิ้นเทมเพลตส่วนหัวโดยรวมจะพร้อมใช้งานใน Divi Theme Builder

ในสิ่งต่อไปนี้เราจะไปยังการออกแบบ

ชื่อของเว็บไซต์และสโลแกนบน WordPress

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

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

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

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

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

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

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

การนำเข้าเทมเพลตส่วนหัวส่วนกลางที่ออกแบบไว้ล่วงหน้า

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

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

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

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

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

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

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

ย้ายโลโก้

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

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

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

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

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

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

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

เพิ่มสโลแกนไซต์แบบไดนามิก

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

เพิ่มลิงก์หน้าแรกแบบไดนามิก

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

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

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

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

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

เพื่อช่วยในการรวมศูนย์เอา padding เริ่มต้นไว้ด้านล่างเนื้อความโดยเพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงในโปรโมชั่น

padding-ด้านล่าง: 0px

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

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

แนวตั้งตรงกลางคอลัมน์ / เนื้อหา

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

จัดเรียงรายการ: กึ่งกลาง;

การอัพเดตคอลัมน์ด้วยปุ่ม

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

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

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

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

การเพิ่มตัวละครทั้งก่อนและหลังสโลแกน

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

ผลสุดท้าย

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

คิดสุดท้าย

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

ที่มา: ธีมที่สง่างาม