วิธีการใช้ Elementor เพื่อสร้างส่วนหัวที่โปร่งใส?

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

แต่คุณสามารถใช้ Elementor เพื่อสร้างส่วนหัวที่โปร่งใสบน WordPress โดยที่ไม่รู้ภาษาการเขียนโปรแกรมใดๆ ได้หรือไม่ คำตอบคือใช่! คุณทำได้แน่นอน บทความนี้จะแสดงคำแนะนำในการสร้างส่วนหัวโปร่งใสของ Elementor อย่างง่ายดาย

ข้อดีของการใช้ส่วนหัวแบบโปร่งใส

คุณสามารถสร้างส่วนหัวโปร่งใสของ Elementor ที่มีส่วนร่วมได้อย่างง่ายดาย แต่ถ้าคุณต้องการ คุณสามารถก้าวไปอีกขั้นและแก้ไขเมื่อผู้เยี่ยมชมเลื่อนดูเนื้อหาของหน้า ด้านล่างนี้เป็นข้อดี:

ยอดเยี่ยมสำหรับเว็บเพจขนาดยาว

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

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

ดีที่สุดสำหรับเว็บไซต์ที่ดำเนินการได้

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

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

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

ปรับปรุงความสามารถในการนำทางเว็บไซต์ของคุณ

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

และแทนที่จะวางโลโก้แบรนด์ของคุณทุกที่บนหน้าแรก คุณสามารถแสดงโลโก้นั้นได้อย่างหรูหราบนส่วนหัวที่โปร่งใส

วิธีใช้ Elementor Pro เพื่อสร้างส่วนหัวที่โปร่งใส

ตอนนี้ มาเรียนรู้วิธีสร้างและปรับแต่งส่วนหัวแบบโปร่งใสโดยใช้ Elementor Pro

ติดตั้งและเปิดใช้งานปลั๊กอิน Elementor Pro

หากเว็บไซต์ของคุณยังไม่มี Elementor Pro คุณต้องติดตั้งและเปิดใช้งาน

1. จากแดชบอร์ด WordPress ให้ไปที่ Plugins > Add New

2. ค้นหาปลั๊กอินโดยป้อน 'Elementor' จากนั้นคุณจะเห็น Elementor Website Builder แสดงรายการเป็นตัวเลือก
3. คลิกปุ่ม ติดตั้ง ทันทีและปุ่ม เปิดใช้งาน ตามลำดับ
4. หลังจากซื้อ Elementor Pro สำเร็จแล้ว ให้ไปที่ my.elementor.com
5. เข้าสู่ระบบด้วยข้อมูลที่คุณได้รับในอีเมลหลังจากซื้อ
6. ถัดไป คุณจะเข้าสู่หน้า โปรไฟล์ คลิกที่ปุ่ม ดาวน์โหลดปลั๊กอิน ที่มุมขวาบนเพื่อดาวน์โหลดไฟล์ .zip ลงในคอมพิวเตอร์ของคุณ

7. จากแดชบอร์ด WordPress ของไซต์ของคุณ ให้คลิกที่ Plugins > Add New จากนั้นคลิกที่ปุ่ม อัปโหลดปลั๊กอิน ที่มุมซ้ายบน
8. คลิกที่ปุ่ม เลือกไฟล์ เลือกไฟล์ .zip ที่คุณเพิ่งดาวน์โหลด ถัดไป คลิก เปิดใช้งาน
9. ที่ด้านบนของแดชบอร์ดของไซต์ คุณจะได้รับการแจ้งเตือนขอให้คุณเปิดใช้งานคีย์ใบอนุญาตของคุณ

สร้างเมนูสำหรับเว็บไซต์ของคุณ

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

1. จากแดชบอร์ด WordPress ให้ไปที่ Appearance > Menus

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

4. คุณสามารถลากและวางรายการเมนูเพื่อจัดเรียงใหม่หรือสร้างเมนูย่อยบนแผงด้านขวา

5. เมื่อคุณมีความสุข อย่าลืมคลิกที่ปุ่ม บันทึกเมนู

ใช้ Elementor Pro เพื่อสร้าง ส่วนหัว ปกติ

1. ไปที่ เทมเพลต > เพิ่มใหม่ จากแดชบอร์ด WordPress

2. หน้าต่างป๊อปอัปจะปรากฏขึ้น เลือกเทมเพลตส่วนหัว Elementor จากเมนูแบบเลื่อนลงและป้อนชื่อในกล่องข้อความตั้ง ชื่อเทมเพลตของคุณ จากนั้นคลิกที่ปุ่ม CREATE TEMPLATE

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

สร้าง Sticky Header แบบโปร่งใส โดยใช้ Elementor Pro

1. ตอนนี้ คุณต้องทำให้ส่วนหัวโปร่งใสโดยใช้ Elementor Pro โดยคลิกที่ปุ่มหกจุดเหนือส่วนหัว

2. ในส่วน 'เค้าโครง' เลือกเมนูที่คุณต้องการใน เมนู แบบเลื่อนลงเมนู

3. ไปที่แท็บ สไตล์ เพื่อเปลี่ยนสีพื้นหลังของส่วนหัวและค่าโปร่งใส ในส่วน "พื้นหลัง" ให้เลือกประเภทพื้นหลัง แบบคลาสสิก (ระบุด้วยพู่กัน)

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

7. เลือกตัวเลือก ทั้งหน้า จากเมนูแบบเลื่อนลง เอฟเฟกต์สัมพันธ์กับ
8. สุดท้าย ให้เลือกตัวเลือก บนสุด จากเมนูดรอปดาวน์ Sticky
9. เมื่อคุณพอใจแล้ว ให้คลิกที่ปุ่ม เผยแพร่ เพื่อใช้การเปลี่ยนแปลง

ผลลัพธ์จะคล้ายกับด้านล่าง:

วิธีการใช้ Elementor เพื่อสร้างส่วนหัวโปร่งใสฟรี ?

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

ในบทความนี้ เราจะใช้ปลั๊กอิน Essential Addons สำหรับ Elementor นี่คือไลบรารีวิดเจ็ตยอดนิยมที่มีผู้ใช้งานมากกว่าหนึ่งล้านคน

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

ติดตั้งและเปิดใช้งาน Elementor และส่วนเสริมที่จำเป็นสำหรับ Elementor Plugin

1. จากแดชบอร์ด WordPress ให้ไปที่ Plugins > Add New

2. ค้นหาปลั๊กอินโดยป้อน ' Elementor ' จากนั้นคุณจะเห็นปลั๊กอิน Elementor แสดงรายการเป็นตัวเลือก
3. คลิกปุ่ม 'ติดตั้งทันที' และปุ่ม 'เปิดใช้งาน' ตามลำดับ
4. ทำซ้ำขั้นตอนข้างต้นด้วยปลั๊กอิน Essential Addons สำหรับ Elementor

สร้างเมนูสำหรับเว็บไซต์ของคุณ

เราได้กล่าวถึงข้างต้นแล้ว กรุณาเลื่อนขึ้นเพื่อความรู้

ใช้ Addons ที่จำเป็นสำหรับ Elementor เพื่อสร้าง Sticky Header ที่โปร่งใส

1. ไปที่ส่วนเสริมที่ จำเป็น > องค์ประกอบ ที่นี่ เปิดใช้งานวิดเจ็ต Simple Menu อย่าลืมคลิกที่ปุ่ม บันทึกการตั้งค่า

2. สร้างหน้า/โพสต์ใหม่หรือเปิดหน้าที่มีอยู่ด้วย Elementor
3. คลิกที่ปุ่ม การตั้งค่า (ระบุด้วยเฟือง) ที่มุมล่างซ้าย เลือก 'Elementor Canvas' ในเมนูแบบเลื่อนลง Page Layout ด้วยวิธีนี้ คุณสามารถกำจัดส่วนหัวที่มาพร้อมกับธีมได้

4. กลับไปที่เมนูวิดเจ็ตโดยคลิกที่ไอคอนเก้าเหลี่ยม ค้นหาวิดเจ็ต Simple Menu ลากและวางไปยังตำแหน่งที่ต้องการ

5. ในส่วน ทั่วไป ให้เลือกเมนูที่คุณต้องการในเมนูแบบเลื่อนลง Select Menu

6. ไปที่แท็บ สไตล์ เพื่อเปลี่ยนสีพื้นหลังของส่วนหัวและค่าโปร่งใส

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

11. กลับไปที่เมนูวิดเจ็ตโดยคลิกที่ไอคอนเก้าเหลี่ยม ค้นหาวิดเจ็ต Spacer ลากแล้ววางด้านล่างวิดเจ็ต Simple Menu

12. ในส่วน Spacer ให้ปรับค่า Space เพื่อให้ตรงกับความสูงของส่วนหัว

13. เมื่อคุณพอใจแล้ว ให้คลิกที่ปุ่ม เผยแพร่ เพื่อใช้การเปลี่ยนแปลง

วิธีสร้างส่วนหัวที่โปร่งใสสำหรับผู้ใช้ Woostify

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

1. ไปที่ ลักษณะที่ ปรากฏ > ปรับแต่ง จากแดชบอร์ด WordPress

2. จากนั้นไปที่ Layout > Header Transparent

3. เปิดสวิตช์ เปิดใช้งานส่วนหัวโปร่งใส

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

5. อย่าลืมคลิกที่ปุ่ม เผยแพร่ เมื่อคุณพอใจกับผลลัพธ์

คำพูดสุดท้าย

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

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