ทำ Header ในแบบของเราเอง ด้วย WordPress FSE แบบไม่ง้อ Page Builder ตอนที่ 1

Step 01: ติดตั้งปลั๊กอิน SVG Support

A) คลิกที่เมนูย่อย Add Plugin ที่อยู่ในเมนู Plugins
B) พิมพ์ “SVG Support” ในช่อง Search Plugins
C) เมื่อพบปลั๊กอิน SVG Support ให้คลิกปุ่ม Install Now

Step 02: เมื่อติดตั้งเสร็จ ให้คลิกปุ่ม Activate เพื่อเปิดใช้งานปลั๊กอิน

Step 03: คลิกที่เมนูย่อย Editor ที่อยู่ในเมนู Appearance เพื่อเปิด Site Editor

Step 04: ทางด้านขวา เราจะเห็นตัวอย่างหน้าแรก (Home) คลิกบริเวณใดก็ได้เพื่อปิดแถบด้านซ้าย และเปิดหน้าแรกในตัวแก้ไข (Editor)

Step 05: เปิด Header

A) คลิกที่ Document Title เพื่อเปิด Command Palette
B) จากนั้นพิมพ์ “Header” ในช่องค้นหา
C) เลือก Header

Step 06: คลิกไอคอนที่มีลักษณะเป็นเส้นแนวนอนสามเส้นซ้อนกัน ซึ่งอยู่ที่มุมซ้ายบนของ Editor เพื่อเปิด Document Overview

ซึ่งช่วยให้เรา

• ดูโครงสร้างบล็อกทั้งหมด (เช่น Group, Header, Navigation ฯลฯ)
• คลิกเลือกบล็อกที่ต้องการได้แม่นยำ โดยเฉพาะเมื่อบล็อกซ้อนกันหลายชั้น
• จัดการ ย้าย หรือเลือกบล็อกได้ง่ายขึ้น

Step 07: ลบบล็อก Group ที่มีอยู่เดิม

A) คลิกไอคอนจุดสามจุด ของบล็อก Group ใน Document Overview เพื่อเปิดเมนู More options
B) จากนั้นเลือก Delete เพื่อลบบล็อก Group

Step 08: เพิ่มบล็อก Group ใหม่

A) ในบล็อก Paragraph ใหม่ (ที่มีข้อความ “Type / to choose a block”) ให้พิมพ์ /group เพื่อค้นหาบล็อก Group
B) เมื่อเห็นบล็อกนี้แล้ว ให้คลิกเพื่อเพิ่มบล็อก Group

Step 09: เลือก Layout แบบ Group

Step 10: เพิ่มบล็อก Row

A) ขณะเลือกบล็อก Group ให้คลิกปุ่ม + เพื่อเพิ่มบล็อกย่อย
B) จากนั้นพิมพ์ row ในช่องค้นหา
C) แล้วคลิกบล็อก Row เพื่อเพิ่มบล็อกใหม่

Step 11: ตั้งค่า Row เป็นแบบ Wide width

A) เลือกบล็อก Row
B) คลิกไอคอน Align บน Block Toolbar
C) เลือก Wide width

Step 12: เพิ่มบล็อก Row ซ้อนในบล็อก Row เดิม

A) ขณะเลือกบล็อก Row ให้คลิกปุ่ม + เพื่อเพิ่มบล็อกย่อย
B) จากนั้นพิมพ์ row ในช่องค้นหา
C) แล้วคลิกบล็อก Row เพื่อเพิ่มบล็อกใหม่

Step 13: เพิ่มบล็อก Paragraph ในบล็อก Row ด้านในสุด

A) ขณะเลือกบล็อก Row ด้านในสุด ให้คลิกปุ่ม + เพื่อเพิ่มบล็อกย่อย
B) แล้วคลิกบล็อก Paragraph เพื่อเพิ่มบล็อกใหม่

Step 14: พิมพ์ข้อความ contact@my.com ลงในบล็อก Paragraph