คุณต้องการสร้างส่วนหัวที่กำหนดเองใน WordPress ด้วย Elementor หรือไม่?

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

ค้นพบ วิธีการติดตั้ง Elementor บน WordPress

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

แต่เป็นไปได้ไหมที่จะสร้างส่วนหัวที่กำหนดเองใน WordPress เพื่อแทนที่ส่วนหัวของ ธีม WordPress สินทรัพย์ ?

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

หากคุณมีทักษะการเขียนโปรแกรม (PHP ในกรณีนี้) ให้สร้างส่วนหัวที่กำหนดเองสำหรับ a ธีม WordPress ไม่ใช่ปัญหาใหญ่ หากคุณไม่มีทักษะการเขียนโปรแกรม Elementor ให้คุณสร้างส่วนหัวที่กำหนดเองโดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว คุณสามารถสร้างส่วนหัวโดยใช้ตัวแก้ไขแบบลากแล้วปล่อย

หมายเหตุ: ตัวสร้างธีมมีเฉพาะใน Elementor Pro เท่านั้น

วิธีสร้างส่วนหัวที่กำหนดเองใน WordPress ด้วย Elementor

Elementor รุ่นโปรมาพร้อมกับคุณสมบัติที่เรียกว่า feature ตัวสร้างธีม คุณสมบัตินี้ช่วยให้คุณสร้าง ธีม WordPress โดยไม่ต้องเข้ารหัส องค์ประกอบธีมที่คุณสามารถสร้างได้ด้วยตัวสร้างธีมของ Elementor ได้แก่:

  • ส่วนหัว
  • ฟุตบอล
  • เทมเพลตโพสต์เดียว
  • เทมเพลตหน้าที่เก็บถาวร
  • เทมเพลตหน้า 404

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

ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งแล้ว Elementor Pro บนเว็บไซต์ WordPress ของคุณ

ก่อนอื่น ไปที่ เทมเพลต -> ตัวสร้างธีม.

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

หน้าต่างป๊อปอัปจะปรากฏขึ้นเพื่อขอให้คุณตั้งชื่อแม่แบบของคุณ พิมพ์ชื่อรุ่นของคุณและคลิกที่ปุ่ม click สร้างแบบจำลอง.

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

คุณยังสามารถสร้างส่วนหัวตั้งแต่เริ่มต้น หากคุณต้องการสร้างส่วนหัวตั้งแต่เริ่มต้น คุณสามารถปิดไลบรารีเทมเพลตเพื่อเปิดตัวแก้ไข Elementor

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

อ่านคำแนะนำของเรา: Elementor Free vs Elementor Pro: การเปรียบเทียบคุณสมบัติโดยละเอียด

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

เพิ่มส่วนคอลัมน์

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

 

  • เพิ่มโลโก้เว็บไซต์

หากต้องการเพิ่มโลโก้เว็บไซต์ ให้ลากวิดเจ็ต โลโก้ของเว็บไซต์ จากแผงด้านซ้ายไปยังหนึ่งในคอลัมน์ในตัวแก้ไข Elementor

วิดเจ็ต โลโก้ของเว็บไซต์ จะโหลดโลโก้เว็บไซต์ของคุณ หากคุณไม่ได้ระบุโลโก้เว็บไซต์ของคุณ คุณสามารถไปที่ ลักษณะที่ปรากฏ -> ปรับแต่ง เพื่อเพิ่มโลโก้ของคุณ

อ่าน: วิธีการนำเข้าหรือส่งออกโมเดลใน Elementor 

คุณสามารถปรับแต่งโลโก้ของคุณได้ทางแผงด้านซ้าย คุณสามารถกำหนดองค์ประกอบต่างๆ เช่น การจัดตำแหน่ง ลิงค์ ความกว้าง ฯลฯ

เพียงแค่เล่นกับแผงด้านซ้ายจนกว่าคุณจะพอใจกับผลลัพธ์

  • เพิ่มเมนูนำทาง

หากต้องการเพิ่มเมนูการนำทาง ให้ลากวิดเจ็ต เมนูนำทาง ไปยังคอลัมน์ใดคอลัมน์หนึ่งในเอดิเตอร์ Elementor

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

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

  • เพิ่มแถบค้นหา

หากต้องการเพิ่มแถบค้นหา คุณสามารถลากวิดเจ็ต แบบฟอร์มการค้นหา ในคอลัมน์ที่เหลือ

เมื่อ ฟอร์ม เพิ่ม คุณสามารถไปที่แผงด้านซ้ายเพื่อปรับแต่ง

ปรับแต่งส่วนหัว

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

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

วิธีสร้างส่วนหัวใน WordPress ด้วย Elementor

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

อ่าน: Elementor Pro: 10 คุณสมบัติที่ยอดเยี่ยมในการปลดล็อก - ตอนที่ I

หากคุณต้องการปิดเอฟเฟกต์ Sticky บนอุปกรณ์บางประเภท เพียงแค่ลบอุปกรณ์ออกจากฟิลด์

วิธีสร้างส่วนหัวใน WordPress ด้วย Elementor

เผยแพร่ส่วนหัวที่กำหนดเองของคุณ

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

ดูเพิ่มเติม: วิธีสร้างเทมเพลตโพสต์ที่ไม่ซ้ำกับ Elementor Pro

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

ในขั้นตอนต่อไป คุณจะถูกขอให้ตั้งค่าเงื่อนไขการแสดงผล คลิกที่ปุ่ม เพิ่มเงื่อนไข

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

อ่าน: วิธีสร้างส่วนท้ายใน WordPress ด้วย Elementor

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

วิธีสร้างส่วนหัวใน WordPress ด้วย Elementor

รับ Elementor Pro ทันที!

สรุป

ที่นี่ ! บทความนี้จะแสดงวิธีสร้างส่วนหัวที่กำหนดเองใน WordPress ด้วย Elementor หากคุณมีข้อสงสัยเกี่ยวกับวิธีการไปที่นั่น โปรดแจ้งให้เราทราบใน ความเห็น.

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...