Skip to content
สร้าง Header และ Footer บน Elementor Free ด้วยปลั๊กอิน Elementor Header & Footer Builder

Header และ Footer เป็นสองส่วนที่มีความสำคัญสำหรับเว็บไซต์ โดย Header จะเอาไว้ใส่ Logo และเมนู ที่เอาไว้ใส่ Link ไปยังหน้าต่างๆของเว็บไซต์ ซึ่งการสร้าง Header และ Footer ใน WordPress นั้น ปกติแล้วก็จะใช้ Theme ในการสร้างทั้ง 2 ส่วน โดยเข้าไปสร้างได้ที่หน้า Customize

แต่ถ้าใครที่ใช้ Page Builder Elemenotor ตัวฟรี สร้างเว็บอยู่แล้ว แต่อยากใช้ Elementor สร้าง Header & Footer ด้วย โดยไม่อยากเสียเงินซื้อ Elemenotor Pro วันนี้มีปลั๊กอินมาแนะนำ

ปลั๊กอิน Elementor Header & Footer Builder By Brainstorm Force, Nikhil Chavan เป็นปลั๊กอินที่ทำให้ Elementor ฟรี สามารถสร้าง Header & Footer ได้ ซึ่งทำให้ใช้งาน Widget ต่างๆของ Elementor ได้ ทำให้การสร้าง Header & Footer มีความหลากหลายมาขึ้นกว่าการใช้ Theme สร้าง

การติดตั้ง

เข้าไปที่หลังบ้าน Plugins -> Add New Plugin

การติดตั้ง

ที่ช่อง Keyword ให้ Search หาคำว่า Elementor Header & Footer Builder ต้องเป็น Elementor Header & Footer Builder By Brainstorm Force, Nikhil Chavan

Install และ Activate ให้เรียบร้อย

หลังจาก Activate ก็จะมีเมนู Elementor Header & Footer Builder เพิ่มขึ้นมาในเมนู Appearance

การสร้าง Header

เข้าไปที่หลังบ้าน เมนู Appearance -> Elementor Header & Footer Builder

จะมาที่หน้า Elementor Header & Footer Builder ให้คลิกปุ่ม Add New เพื่อเริ่มสร้าง Header

เมื่อคลิกที่ Add New ถ้ามี Popup ขึ้นมาถาม สามารถกด Skip ข้ามได้เลย ก็จะมาที่หน้า Add New Header or Footer

ช่องสีขาวที่ด้านบน ให้ใส่ชื่อที่ต้องการ เช่น จะสร้าง Header ก็ตั้งชื่อเกี่ยวกับ Header

Type of Template เลือกว่าจะสร้างอะไร ในที่นี้จะเลือกเป็น Header

Display On แสดงผลหน้าอะไรบ้าง ให้เลือกเป็น Entire Website เพื่อให้แสดงผลทั้งเว็บไซต์ ซึ่งตรงนี้สามารถ Add Display Rules เพิ่มได้ กรณีที่ต้องการให้ Header ของแต่ละหน้าไม่เหมือนกัน เช่นหน้า Post ใช้ Header แบบ A
ส่วนหน้า Page ใช้ Header แบบ B เป็นต้น

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

Post Attributes เลือกเป็น Default template

จากนั้นคลิกที่ Publish

จากนั้นคลิกที่ปุ่ม Edit with Elementor เพื่อเข้าสู่หน้า Edit ของ Elementor

ที่หน้า Edit Elementor

แถบเมนูทางซ้าย จะมี Widget ของปลั๊กอิน Elementor Header & Footer Builder เป็น Widget เกี่ยวกับ Header เช่น Site Logo, Site Title, Navigation Menu ซึ่ง Widget เหล่านี้เป็นค่าที่มีการ Setting มาแล้ว จากเมนู Appearance

การสร้าง Header นั้น ขั้นตอนก็จะคล้ายๆ กับการสร้างหน้า Page ด้วย Elementor สร้าง Container เลือก Widget มาวาง และตั้งค่าต่างๆ ให้ถูกต้อง

การแสดงผลที่หน้าจอ Tablet และ Mobile นั้น ตัว Plugin จะปรับส่วนของ Nav Menu ให้เป็น hamburger menu โดยอัตโนมัติ เราเพียงแค่กำหนด Flex Direction และปรับขนาดของ Container ให้เหมาะสม ก็จะแสดงผลที่หน้า Tablet, Mobile ได้อย่างถูกต้อง

เมื่อสร้าง Header เสร็จเรียบร้อยแล้ว ให้คลิกที่ปุ่ม Public เพื่อบันทึกและเผยแพร่

ส่วนการสร้าง Footer จะมีขั้นตอนเหมือนกัน โดยขั้นตอนการสร้างให้เลือก Type of Template เป็น Footer จากนั้นก็สร้าง Footer ด้วยหน้า Edit Elementor

ทดลองที่หน้าเว็บ

เมื่อเข้าไปดูที่หน้าเว็บ ก็จะเห็นเมนูที่เราเพิ่งสร้างขึ้น ตรงนี้ไม่ต้องกำหนดอะไรแล้ว เพราะเราได้ต้ั้งค่าตอนสร้าง Header ตัวนี้ไว้แล้วตรง Display On ว่าให้แสดงผลทั้งเว็บไซต์

โหมด Mobile

สรุป

ปลั๊กอิน Elementor Header & Footer Builder By Brainstorm Force, Nikhil Chavan เป็นปลั๊กอินสำหรับสร้างส่วน Header และ Footer ด้วย Page Builder ซึ่งเป็น Page Builder ที่ได้รับความนิยมสูง ช่วยให้การสร้าง Header และ Footer มีความหลากหลายมากขึ้น สร้างได้ตามใจต้องการมากกว่าการสร้าง Header & Footer ด้วย Theme

Back To Top
Search