วิธีเพิ่มแถบด้านบนใน WordPress ด้วย Elementor

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

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

การเพิ่มแถบด้านบนลงใน WordPress นั้นง่ายมากด้วย Elementor ในบทความนี้เราจะครอบคลุมคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการเพิ่มแถบด้านบนใน WordPress ด้วย Elementor อยู่กับเราจนจบ

บาร์ด้านบนคืออะไร?

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

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

แถบยอดนิยมที่เรียกว่าบนเว็บไซต์คืออะไร?

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

• แถบประกาศ - ใช้เพื่อแบ่งปันการประกาศการแจ้งเตือนเหตุการณ์และการอัปเดตที่สำคัญ

• แถบการแจ้งเตือน- แสดงข้อเสนอที่ จำกัด , ข่าวการบำรุงรักษาระบบและข้อความเร่งด่วน

• โปรโมชั่นบาร์ - เน้นโปรโมชั่นพิเศษส่วนลดพิเศษและแคมเปญเพื่อเพิ่มยอดขาย

• ข้อมูลบาร์ - จัดแสดงหมายเลขติดต่อรายละเอียดการช็อปปิ้งที่อยู่ท้องถิ่นและเวลาทำการ

• Sticky Bar - ยังคงแก้ไขได้ที่ด้านบนของเว็บไซต์แม้ว่าผู้ใช้จะเลื่อนโพสต์และหน้า

• Floating Bar - เคลื่อนที่ไปตามเมื่อคุณเลื่อนโพสต์และหน้าเพื่อให้แน่ใจว่ามีการปรากฏตัวที่เห็นได้ชัดเจน

วิธีเพิ่มแถบด้านบนใน WordPress ด้วย Elementor

ส่วนทฤษฎีสิ้นสุดลง ตอนนี้เราจะครอบคลุมส่วนการสอนในส่วนนี้อธิบายคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการเพิ่มแถบด้านบนใน WordPress โดยใช้ Elementor

Pre-requistite: ติดตั้ง Elementor หรือ Happyaddons

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

Happyaddons เป็นส่วนเสริมของปลั๊กอิน Elementor ที่มีคุณสมบัติฟรีมากมายซึ่งปกติจะเป็นพรีเมี่ยมใน Elementor ตัวอย่างเช่น Happyaddons ยังมีตัวสร้างธีมซึ่งค่อนข้างคล้ายกับ Elementor แต่มันใช้งานได้ฟรี

ดังนั้นในส่วนนี้เราจะใช้ปลั๊กอิน Happyaddons เพื่ออธิบายการสอน ติดตั้งและเปิดใช้งานปลั๊กอินต่อไปนี้บนเว็บไซต์ของคุณ

• ผู้ประกอบการ
• Happyaddons

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

ขั้นตอนที่ 01: ไปที่ Happyaddons Theme Builder

นำทางไปยัง Happyaddons> Theme Builder เช่นเดียวกับปลั๊กอิน Elementor คุณสามารถสร้างส่วนหัว, ส่วนท้าย, เทมเพลตโพสต์บล็อกและหน้าเก็บถาวรพร้อมตัวสร้างธีมของปลั๊กอิน HappyAddons

ขั้นตอนที่ 02: ไปที่ส่วนส่วนหัว

เนื่องจากแถบด้านบนแสดงอยู่ด้านบนของส่วนหัวเว็บคุณต้องปรับแต่งจากส่วนส่วนหัว ดังนั้นให้เปิดส่วนหัวด้วยตัวเลือก Editor ด้วยตัวเลือก Elementor

เรียนรู้วิธีการสร้างเนื้อหานอกคาร์วาสใน Elementor

ขั้นตอนที่ 03: เพิ่มคอนเทนเนอร์ใหม่ด้านบนส่วนหัว

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

ขั้นตอนที่ 04: ปรับแต่งแถบด้านบนและเพิ่มเนื้อหาลงไป

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

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

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

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

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

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

ในการเพิ่มสิ่งนี้นำทางไปยัง สไตล์> เอฟเฟกต์อนุภาคที่มีความสุข หลังจากนั้น สลับ เพื่อ เปิดใช้งานพื้นหลังของอนุภาค

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

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

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

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

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

นี่คือคำแนะนำเกี่ยวกับวิธีการสร้างหน้าเว็บอินโฟกราฟิกด้วย Elementor

ขั้นตอนที่ 05: กำหนดค่าการตั้งค่าขั้นสูงสำหรับแถบด้านบน

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

ขั้นตอนที่ 06: ซ่อนแถบด้านบนในประเภทอุปกรณ์

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

ขั้นตอนที่ 07: ทำให้แถบมือถือตอบกลับได้

คลิก ตัวเลือก โหมดตอบสนอง บนส่วนท้ายของแผง Elementor จากนั้น เลือก โหมดภาพวาดมือถือ

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

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

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

ขั้นตอนที่ 08: เผยแพร่/อัปเดตการเปลี่ยนแปลง

เมื่อการปรับแต่งทั้งหมดเสร็จสิ้น ให้คลิก ปุ่ม เผยแพร่/อัปเดต ที่ด้านล่างของแผง Elementor เพื่อรักษาการเปลี่ยนแปลงทั้งหมด

สำรวจวิธีการสร้าง Lightbox ใน WordPress ด้วย Elementor

ขั้นตอนที่ 09: ดูตัวอย่างแถบด้านบนบนเว็บไซต์

ตอนนี้มาที่ส่วนหน้าของเว็บไซต์ของคุณ คุณจะเห็นแถบด้านบนแสดงอยู่ด้านบนไซต์ของคุณ

ดังนั้นคุณสามารถสร้างแถบด้านบนบน WordPress ได้อย่างง่ายดายโดยใช้ปลั๊กอิน Elementor ได้ฟรี

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

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

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

หากคุณยังคงมีความสับสนหรือสอบถามใด ๆ อยู่ในใจแจ้งให้เราทราบเกี่ยวกับพวกเขาผ่านช่องแสดงความคิดเห็นด้านล่าง