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

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

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

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

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

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

Step 05: เปิด Header

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

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

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

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

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

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

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

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

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

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

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

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

11.1) เลือกบล็อก Row
11.2) คลิกไอคอน Align บน Block Toolbar
11.3) เลือก Wide width

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

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

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

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

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