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

โชคดีที่ปลั๊กอินสร้างธีม Beaver Themer ของเรานำเสนอวิธีง่ายๆ ในการออกแบบส่วนหัวและส่วนท้ายแบบกำหนดเอง ทำให้ไซต์ทั้งหมดของคุณมีความสอดคล้องกันทางสายตา

ในคู่มือนี้ เราจะสำรวจสี่ขั้นตอนง่ายๆ ในการสร้างส่วนหัวและส่วนท้ายด้วย Beaver Themer มาดำน้ำกันเถอะ!

สารบัญ

• บทนำสู่ธีมบีเวอร์
• วิธีสร้างส่วนหัวด้วยธีม Beaver (ใน 4 ขั้นตอน)
• วิธีสร้างส่วนท้ายด้วยธีม Beaver (ใน 4 ขั้นตอน)
• ความคิดสุดท้าย
• คำถามที่เกี่ยวข้อง

บทนำสู่ธีมบีเวอร์

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

ด้วย Beaver Themer คุณสามารถ:

• ปรับส่วนหัว ส่วนท้าย แถบประกาศ และ CTA
• ออกแบบเค้าโครงที่กำหนดเองสำหรับหน้า 404 หน้าค้นหา และคลังข้อมูลบล็อก
• สร้างเทมเพลตสำหรับประเภทโพสต์ที่กำหนดเอง
• ควบคุมการตั้งค่าการแสดงผลในทุกหน้าหรือเฉพาะหน้าที่เลือก

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

เข้าถึง Beaver Themer ด้วยแผนระดับพรีเมียม

ข่าวดีก็คือ Beaver Themer นั้นรวมอยู่ในแผน Beaver Builder ระดับพรีเมียม:

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

ตอนนี้เราได้สำรวจคุณประโยชน์ของ Beaver Themer แล้ว มาดูกระบวนการสร้างส่วนหัวแบบทีละขั้นตอนด้วย Beaver Themer กันดีกว่า

วิธีสร้างส่วนหัวด้วยธีม Beaver (ใน 4 ขั้นตอน)

ส่วนหัวที่กำหนดเองสามารถช่วยแสดงแบรนด์ของคุณ ทำให้ไซต์ของคุณไปยังส่วนต่างๆ ได้ง่ายขึ้น และเน้น CTA ที่สำคัญ ต่อไปนี้เป็นวิธีสร้างด้วย Beaver Theme:

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

ขั้นตอนที่ 1: สร้างเค้าโครงธีมใหม่

หากต้องการสร้างเค้าโครง Themer ใหม่ ให้คลิกที่ Beaver Builder > Themer Layouts จากพื้นที่ผู้ดูแลระบบ WordPress ของคุณ จากนั้นเลือก เพิ่มใหม่ :

ที่นี่ คุณสามารถตั้งชื่อ Title :

สำหรับ Type ให้เลือก Themer Layout สำหรับ เค้าโครง ให้ใช้เมนูแบบเลื่อนลงเพื่อเลือก ส่วนหัว คลิก เพิ่มเค้าโครง Themer เพื่อดำเนินการต่อ

ขั้นตอนที่ 2: กำหนดการตั้งค่า

ถัดไป ในหน้าการตั้งค่า ให้กำหนดตำแหน่งและวิธีที่ส่วนหัวจะแสดง:

• Sticky Header : สไตล์ส่วนหัวนี้จะคงที่ที่ด้านบนของหน้าต่างเบราว์เซอร์เมื่อคุณเลื่อนหน้าลง
• Overlay Header : เลือกตัวเลือกนี้เพื่อทำให้พื้นหลังของส่วนหัวโปร่งใส โดยอนุญาตให้เนื้อหาอยู่ที่ด้านบนของหน้าจอ
• ตำแหน่ง : เลือกว่าส่วนหัวควรแสดงทั่วทั้งไซต์หรือเฉพาะบางหน้าเท่านั้น
• กฎ : ควบคุมการมองเห็นตามสถานะการเข้าสู่ระบบของผู้ใช้หรือเกณฑ์อื่น ๆ

คลิก เผยแพร่ เพื่อบันทึกการตั้งค่าเหล่านี้

ขั้นตอนที่ 3: ปรับแต่งเค้าโครงส่วนหัวของคุณ

เมื่อกำหนดการตั้งค่าของคุณแล้ว คลิก Launch Beaver Builder เพื่อเปิดส่วนหัวใหม่ในตัวแก้ไข:

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

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

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

บางโมดูลใช้การเชื่อมต่อภาคสนามเพื่อสร้างเนื้อหาแบบไดนามิก ตัวอย่างเช่น ส่วนหัวของเว็บไซต์ของคุณอาจดึงจาก ชื่อไซต์ ของคุณในการตั้งค่า WordPress โดยอัตโนมัติ หากต้องการลบการเชื่อมต่อฟิลด์นี้ เพียงคลิก "X" ถัดจากการเชื่อมต่อ

จากนั้น เพียงพิมพ์ชื่อที่คุณต้องการลงในช่องข้อความ หัวเรื่อง :

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

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

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

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

ขั้นตอนที่ 4: เพิ่มเนื้อหาลงในส่วนหัวของคุณ

คุณอาจพิจารณาเพิ่มโมดูลเพิ่มเติมในส่วนหัวของคุณ ตามที่ระบุไว้ก่อนหน้านี้ Beaver Builder อนุญาตให้มีเนื้อหาแบบไดนามิกผ่านการเชื่อมต่อฟิลด์

หากต้องการตั้งค่าการเชื่อมต่อฟิลด์ของคุณเอง เพียงคลิกไอคอน + ถัดจากช่องเพื่อดูฟิลด์ที่มีอยู่:

จากนั้นคลิก เชื่อมต่อ เพื่อสร้างเนื้อหาแบบไดนามิกของคุณ

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

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

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

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

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

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

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

วิธีสร้างส่วนท้ายด้วยธีม Beaver (ใน 4 ขั้นตอน)

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

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

หากต้องการสร้างส่วนท้ายแบบกำหนดเอง คุณจะต้องทำตามขั้นตอนที่คล้ายกันเช่นเดียวกับการสร้างส่วนหัว โดยใช้ปลั๊กอินตัวสร้างเพจ Beaver Builder ระดับพรีเมียมพร้อมกับ Beaver Themer

ขั้นตอนที่ 1: ตั้งค่าเค้าโครง Themer ใหม่

เช่นเดียวกับส่วนหัว คุณจะเริ่มต้นด้วยการสร้างเค้าโครงสำหรับส่วนท้ายของคุณ ไปที่ Beaver Builder > Themer Layouts และคลิกที่ Add New

ขั้นตอนเกือบจะเหมือนเดิม—ตั้งชื่อส่วนท้ายของคุณ เลือก Themer Layout สำหรับ Type และเลือก Footer สำหรับ Layout :

จากนั้นคลิกที่ เพิ่มเค้าโครงธีม

ขั้นตอนที่ 2: กำหนดการตั้งค่าส่วนท้าย

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

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

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

ทำซ้ำในส่วนกฎ เมื่อคุณพอใจกับการตั้งค่าส่วนท้ายแล้ว ให้คลิก เผยแพร่

ขั้นตอนที่ 3: ปรับแต่งเค้าโครงส่วนท้ายของคุณ

ตอนนี้เลือก Launch Beaver Builde r เพื่อเปิดตัวแก้ไข:

เช่นเดียวกับส่วนหัว Beaver Builder ได้จัดเตรียมเทมเพลตเค้าโครงเริ่มต้นสำหรับส่วนท้ายของคุณ:

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

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

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

คลิกที่ บันทึก เพื่อใช้การเปลี่ยนแปลงของคุณ

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

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

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

Beaver Builder มีประกาศเกี่ยวกับลิขสิทธิ์เป็นค่าเริ่มต้น ปรับได้โดยคลิกที่โมดูลและเพิ่มคำสั่งของคุณเอง:

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

ขั้นตอนที่ 4: เพิ่มเนื้อหาในส่วนท้ายของคุณ

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

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

Beaver Builder ทำงานร่วมกับผู้ให้บริการการตลาดผ่านอีเมลหลายราย ทำให้คุณสามารถเลือกบริการที่คุณต้องการจากเมนูแบบเลื่อนลง:

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

สลับไปที่แท็บ ปุ่ม เพื่อแก้ไขข้อความของปุ่ม ปรับสี เพิ่มช่องว่างภายใน และอื่นๆ อีกมากมาย:

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

ลองเพิ่มลิงก์ไปยังบัญชีโซเชียลของคุณด้วย ใช้โมดูล กลุ่มไอคอน แล้วลากไปไว้ในส่วนท้ายของคุณ:

จากนั้นในแท็บ ไอคอน ของป๊อปอัปของคุณ ให้คลิกที่ แก้ไขไอคอน :

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

คลิก บันทึก เพื่อกลับไปยังตำแหน่งที่คุณสามารถเพิ่มลิงก์โซเชียลที่เหลือได้:

เพิ่มโมดูลในส่วนท้ายของคุณต่อไป เมื่อคุณพอใจกับเค้าโครงแล้ว คลิก เสร็จสิ้น > เผยแพร่

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

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

ต่อไปนี้เป็นข้อมูลสรุปสั้นๆ เกี่ยวกับวิธีสร้างส่วนหัวและส่วนท้ายด้วย Beaver Theme:

1. สร้างเค้าโครง Beaver Themer ใหม่
2. กำหนดการตั้งค่าของคุณ
3. ปรับแต่งเค้าโครงส่วนหัวและส่วนท้ายของคุณ
4. เพิ่มเนื้อหาลงในส่วนหัวหรือส่วนท้ายของคุณ

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

คำถามที่เกี่ยวข้อง

การใช้ Beaver Themer สำหรับส่วนหัวและส่วนท้ายมีประโยชน์อย่างไร

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

คุณใช้ Beaver Themer อย่างไร?

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

ฉันจะทำให้ส่วนหัวของฉันเหมาะกับมือถือได้อย่างไร

หากต้องการทำให้ส่วนหัวของคุณเหมาะกับอุปกรณ์พกพา ให้ตรวจสอบการตั้งค่าตอบสนองใน Beaver Builder คุณสามารถปรับเค้าโครงและขนาดแบบอักษรสำหรับอุปกรณ์มือถือโดยเฉพาะเพื่อปรับปรุงการใช้งาน

เกี่ยวกับ วิล มอร์ริส

Will Morris เป็นนักเขียนที่ WordCandy เมื่อเขาไม่ได้เขียนเกี่ยวกับ WordPress เขาชอบแสดงสแตนด์อัพคอมเมดี้เป็นประจำในท้องถิ่น