ข้ามไปยังเนื้อหาหลัก

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

Divi: ธีม WordPress ที่ใช้ง่ายที่สุด

Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

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

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

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

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

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

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

ตัวอย่างการปรับเปลี่ยนชื่อ Divi

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

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

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

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

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

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

เลือกเทมเพลต Divi

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

แก้ไขส่วนหัว Divi ส่วนกลาง

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

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

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

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

Elementor ช่วยให้คุณสร้างการออกแบบเว็บไซต์ได้อย่างง่ายดายด้วยรูปลักษณ์แบบมืออาชีพ หยุดจ่ายเงินแพงสำหรับสิ่งที่คุณสามารถทำได้ด้วยตัวเอง [ฟรี]

ปรับแต่งชื่อ Divi

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

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

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

ปรับแต่งเอกลักษณ์ของ wordpress

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

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

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

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

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

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

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

การนำเข้าแบบจำลอง Divi

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

ลบเทมเพลตออกจากส่วนท้าย

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

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

คุณกำลังมองหาธีมและปลั๊กอิน WordPress ที่ดีที่สุดหรือไม่?

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

ย้ายโลโก้

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

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

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

ปรับแต่งคำกระตุ้นการตัดสินใจ

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

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

กำหนดค่าคำกระตุ้นการตัดสินใจ

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

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

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

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

เพิ่มสโลแกนเว็บไซต์ Divi

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

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

เพิ่มลิงค์ไปยังโฮมเพจ

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

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

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

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

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

padding-ด้านล่าง: 0px
เพิ่มรหัส Divi css ที่กำหนดเอง

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

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

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

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

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

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

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

สร้างร้านค้าออนไลน์ได้อย่างง่ายดาย

ดาวน์โหลดฟรี WooCommerce ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress [แนะนำ]

ปรับแต่งปุ่มผู้ติดต่อ Divi

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

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

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

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

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

แสดงสโลแกน Divi

ผลสุดท้าย

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

ผลสุดท้าย divi

คิดสุดท้าย

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

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

บทความนี้ประกอบด้วยข้อคิดเห็น 0

แสดงความคิดเห็น

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

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

กลับไปด้านบน
0 หุ้น
หุ้น
ทวีต
Enregistrer