Part of 10306241 ระบบบริหารจัดการเว็บไซต์ (Web Content Management System)

สร้างหน้า About Me สวย ๆ ด้วยธีม Blocksy และ Elementor

อยากมีหน้าแนะนำตัวที่ดูเป็นมืออาชีพ และอยากลากวางองค์ประกอบได้เห็นผลทันทีใช่ไหมครับ บทความนี้จะพาทำหน้า About Me แบบ Personal Profile ทีละขั้น ด้วยธีม Blocksy กับปลั๊กอิน Elementor (รุ่นฟรี) ซึ่งเป็นชุดเครื่องมือเดียวกับที่ใช้สร้างหน้าต้นแบบ

หน้าที่เราจะทำอิงจากหน้าตัวอย่างนี้ครับ 👉 itscidev.mju.ac.th/w/?page_id=1599

สิ่งที่คุณจะได้เรียนรู้

1. แยกหน้าเว็บตัวอย่างออกเป็นส่วน ๆ แล้วแปลงเป็น Container และ Widget ของ Elementor
2. ติดตั้งและตั้งค่าธีม Blocksy และ Elementor รวมถึงตั้งค่าเฉพาะหน้า (Page Layout, Hide Title)
3. ใช้ Flexbox Container, Image, Heading, Text Editor, Button, Progress Bar, Icon Box, Divider และ Social Icons ทำ layout เต็มความกว้างจอ
4. ปรับหน้าเว็บให้ Responsive ด้วย Responsive Mode ทั้งการตั้งค่าแยกตามอุปกรณ์และ Hide On อุปกรณ์
5. ใช้ Global Colors และบันทึกส่วนที่ใช้ซ้ำเป็น Template
6. เตรียมภาพสำหรับเว็บ และใช้ AI สร้างภาพประกอบอย่างรับผิดชอบ

ทำความรู้จักหน้าต้นแบบก่อนลงมือ

ผลการวิเคราะห์หน้าต้นแบบ

ค่าด้านล่างอ่านมาจาก HTML และไฟล์ CSS ที่ Elementor สร้างให้หน้าต้นแบบ (post-1599.css) จึงเป็นค่าจริงที่ใช้ ไม่ใช่ค่าที่กะด้วยสายตา

โครงร่างหน้า (Wireframe)

สิ่งที่ต้องเตรียมก่อนเริ่ม (Prerequisites)

1. บัญชีผู้ดูแลระบบ (Administrator) ของ WordPress ของตนเอง ทดลองเข้า /wp-admin ให้ได้ก่อนเริ่ม
2. ตรวจเวอร์ชัน ที่ Dashboard → Updates ให้ WordPress เป็นเวอร์ชันล่าสุด (Elementor รุ่นใหม่ไม่รองรับ WordPress รุ่นเก่ามาก ๆ)
3. ไฟล์ภาพ 4 ไฟล์ (ดูขั้นที่ 0)
4. ข้อมูลของตนเอง เตรียมใส่ Notepad ไว้ก่อน

ขั้นที่ 0: เตรียมไฟล์ภาพ (ประมาณ 30 นาที)

ภาพทุกภาพต้องเป็น ภาพของคุณเอง, ภาพฟรีลิขสิทธิ์ (เช่น Unsplash, Pexels) หรือ ภาพที่สร้างด้วย AI อย่าดาวน์โหลดภาพจากหน้าตัวอย่างหรือเว็บอื่นมาใช้

0.1 ข้อกำหนดของภาพ

0.2 หลักการใช้ AI สร้างภาพ

1. เปิดกล่อง Prompt ใต้ภาพแต่ละภาพด้านล่าง แล้วคัดลอก prompt ภาษาอังกฤษไปวางในเครื่องมือสร้างภาพ
2. ถ้าเครื่องมือมีช่อง Negative prompt ให้ใส่ข้อความ Negative ที่ให้ไว้ ถ้าไม่มีช่องนี้ ให้ต่อท้าย prompt ว่า Avoid: …
3. กำหนดสัดส่วนภาพตามตาราง (Midjourney ใช้ --ar 16:9, ส่วน ChatGPT/Gemini ให้เขียนสัดส่วนไว้ใน prompt ซึ่งใส่ไว้ให้แล้ว)
4. สร้าง 3–4 ภาพ แล้วเลือกภาพที่ ตรงกลางภาพไม่มีรายละเอียดมาก เพราะจะมีตัวหนังสือวางทับ
5. ย่อภาพให้ได้ขนาดตามตาราง (ใช้ Squoosh หรือโปรแกรมแต่งภาพ) และตั้งชื่อไฟล์ตามตาราง
6. จริยธรรม: ห้ามสร้างภาพเลียนแบบบุคคลจริง ห้ามใส่โลโก้หรือเครื่องหมายการค้าของผู้อื่น และให้ระบุใน Footer หรือ Caption ว่า "ภาพประกอบสร้างด้วย AI" เมื่อใช้ภาพจาก AI

ขั้นที่ 1: ติดตั้งธีม Blocksy และปลั๊กอิน Elementor (15 นาที)

ทำไมเลือก Blocksy + Elementor

• เป็นชุดเดียวกับหน้าต้นแบบ ใช้ฟรีทั้งคู่
• Blocksy รองรับ Elementor เต็มรูปแบบ และยังมี Header/Footer Builder ใน Customizer ให้ใช้ (ส่วน Header/Footer ของ Elementor เองต้องใช้ Theme Builder ของรุ่น Pro)
• Elementor Free มี widget ครบทุกตัวที่หน้านี้ต้องใช้ รวมถึง Progress Bar และ Icon Box จึงไม่ต้องติดตั้งปลั๊กอินเสริมอื่น

1.1 ติดตั้งธีม Blocksy

1. เข้าสู่ระบบที่ https://itscidev.mju.ac.th/ชื่อผู้ใช้/wp-admin
2. เมนูซ้าย → Appearance → Themes → ปุ่ม Add New Theme ด้านบน
3. ช่อง Search themes… พิมพ์ Blocksy
4. นำเมาส์ไปวางบนการ์ดธีม Blocksy (ผู้พัฒนา Creative Themes) → คลิก Install
5. รอจนปุ่มเปลี่ยนเป็น Activate → คลิก Activate

ผลที่ควรได้: หน้า Appearance → Themes แสดง Blocksy เป็นธีม Active

1.2 ติดตั้ง Blocksy Companion และ Elementor

1. เมนูซ้าย → Plugins → Add New Plugin
2. ค้นหา Blocksy Companion → คลิก Install Now → Activate
3. กลับไปที่ Add New Plugin → ค้นหา Elementor → เลือกการ์ด Elementor Website Builder (ผู้พัฒนา Elementor.com) → Install Now → Activate
   • ระวังอย่าติดตั้งปลั๊กอินเสริมของผู้พัฒนาอื่นที่ชื่อคล้ายกัน (เช่น "… Addons for Elementor") เพราะหน้านี้ไม่ต้องใช้
4. Elementor อาจเปิดหน้า Onboarding / Welcome ขึ้นมาถามเป้าหมายของเว็บ หรือชวนสมัครบัญชี ให้กด Skip จนจบ (เราไม่ต้องใช้บัญชี Elementor และไม่ต้องใช้ Kit สำเร็จรูป)
5. ห้าม Import Starter Site ของ Blocksy และ ห้าม Import Kit ของ Elementor เพราะจะเขียนทับหน้า เมนู และ Global Styles เดิม

1.3 ตั้งค่าเริ่มต้นของ Elementor

เมนู Elementor ในแถบซ้ายของ wp-admin อาจแยกเป็นเมนูย่อยหลายเมนู (เช่น Home, Editor → Settings) ชื่อเมนูอาจต่างกันเล็กน้อยตามเวอร์ชัน ให้หาตัวเลือกจากชื่อที่เป็นตัวหนา

1. Atomic Editor (Editor V4): ตั้งแต่ Elementor 4.0 เว็บที่ติดตั้งใหม่จะเปิด Atomic Editor ไว้เป็นค่าเริ่มต้น แผง widget จะมีองค์ประกอบแบบ Atomic ใหม่ปนอยู่กับ widget แบบเดิม
   • ไม่ต้องปิด บทความนี้ใช้ widget แบบเดิม (Container, Heading, Image, Text Editor, Button, Progress Bar, Icon Box, Divider, Social Icons) ซึ่งยังใช้ได้ตามปกติ ให้ค้นหาจากชื่อในช่องค้นหาของแผง widget
   • ถ้าแผงรกจนหาไม่เจอและยังไม่มีหน้าที่ใช้องค์ประกอบ Atomic ปิดได้ที่ Elementor → Editor → Settings → แท็บ Atomic Editor → Deactivate (ระบบจะเตือนว่าเนื้อหาที่สร้างด้วย Atomic Elements จะหายไป)
2. ตรวจว่าเปิด Elementor ให้หน้า Page แล้ว: Elementor → Settings → General → Post Types ต้องติ๊ก Pages ไว้ (ค่าเริ่มต้นติ๊กไว้แล้ว)
3. โหลด Google Fonts จากเว็บตนเอง: Elementor → Settings → Performance (บางเวอร์ชันอยู่ใต้ Features) → เปิด Load Google Fonts Locally → Save Changes

1.4 ตั้งค่า Header (โลโก้และเมนู) ด้วย Blocksy

Header และ Footer ยังใช้ Blocksy Customizer เหมือนเดิม เพราะ Theme Builder ของ Elementor เป็นฟีเจอร์รุ่น Pro

1. เมนูซ้าย → Appearance → Customize
2. คลิก Header → หน้าจอจะแสดง Header Builder ที่ด้านล่าง
3. คลิกองค์ประกอบ Logo (ถ้าไม่มี ให้คลิก + ในช่องที่ว่างแล้วเลือก Logo)
   • Logo → Select logo → อัปโหลด logo.png
   • Logo Max Height ประมาณ 40–50px
   • ถ้ามีโลโก้แล้ว ให้ปิด Site Title และ Site Tagline
4. (เพื่อให้เหมือนต้นแบบ) เมนูแบบแฮมเบอร์เกอร์
   • ลากองค์ประกอบ Trigger มาไว้ด้านขวาของแถว Main Row
   • ลากองค์ประกอบ Menu ออกจาก Main Row ของ Desktop (ถ้าไม่ต้องการเมนูแนวนอน)
   • ตรวจว่ามีเมนูในส่วน Offcanvas (เมนูจะแสดงเมื่อคลิก Trigger)
5. คลิก Publish

1.5 ตั้งค่า Footer (ข้อความลิขสิทธิ์)

1. ใน Customizer กลับไปหน้าหลัก → คลิก Footer
2. คลิกองค์ประกอบ Copyright ใน Footer Builder
3. แก้ข้อความเป็น

   TEXTCOPY

   Copyright © {current_year} | Website Designed by <ชื่อ-สกุลของคุณ>

   ({current_year} จะเปลี่ยนเป็นปีปัจจุบันให้อัตโนมัติ)
4. ถ้าใช้ภาพจาก AI ให้ต่อท้ายว่า | ภาพประกอบบางส่วนสร้างด้วย AI
5. คลิก Publish

ขั้นที่ 2: เตรียมสื่อใน Media Library (5 นาที)

1. เมนูซ้าย → Media → Add New Media File → ลากไฟล์ภาพทั้ง 4 ไฟล์มาวาง
2. ไปที่ Media → Library → สลับเป็นมุมมอง List หรือ Grid ตามสะดวก
3. คลิกภาพทีละภาพ → กรอกข้อมูลในแผง Attachment details ด้านขวา

4. ตรวจว่า File URL ของทุกภาพไม่มีภาษาไทยหรือช่องว่าง ถ้ามี ให้ลบภาพแล้วเปลี่ยนชื่อไฟล์ในเครื่องก่อนอัปโหลดใหม่

ขั้นที่ 3: สร้างหน้า เปิด Elementor และตั้งค่าหน้า (15 นาที)

3.1 สร้างหน้าใหม่

1. เมนูซ้าย → Pages → Add New Page
2. ถ้ามีหน้าต่าง Choose a pattern ให้กด ปิด (×)
3. คลิกที่ Add title พิมพ์ About
4. แถบขวา แท็บ Page → คลิกที่ Slug (หรือ Link) → ตั้งเป็น about
5. คลิก Save draft

3.2 เปิดหน้าด้วย Elementor

1. คลิกปุ่ม Edit with Elementor ที่แถบด้านบนของ Editor
   • หรือกลับไปที่ Pages → All Pages → วางเมาส์บนหน้า About → คลิก Edit with Elementor
2. รอจน Elementor Editor โหลดเสร็จ

3.3 รู้จักหน้าจอ Elementor

คีย์ลัดที่ใช้บ่อย: Ctrl+S บันทึก · Ctrl+Z ย้อนกลับ · Ctrl+Shift+M Responsive Mode · Ctrl+D Duplicate · Ctrl+Shift+L เปิดแผง Finder

3.4 ตั้งค่าเฉพาะหน้า (Page Settings)

1. คลิกไอคอน Page Settings (รูปเฟือง ⚙) ที่ Top bar
2. แท็บ Settings ตั้งค่าตามตาราง

3. คลิก Save (หรือ Ctrl+S)

3.5 ตั้ง Global Colors และ Global Fonts

ตั้งสีหลักไว้ที่เดียว แล้วเลือกใช้ในทุก widget ถ้าวันหลังต้องการเปลี่ยนสีน้ำเงินทั้งหน้า ก็แก้ที่นี่ที่เดียว

1. Top bar → ไอคอน Site Settings (หรือเมนู Elementor ☰ → Site Settings) → Global Colors
2. แก้สี Primary เป็น #0070FF และ Accent เป็น #0070FF
3. Custom Colors → Add Color เพิ่มสีตามตาราง

4. Global Fonts → ตั้ง Primary และ Text เป็น Roboto
5. คลิก Save Changes แล้วกดปุ่ม ← เพื่อกลับไปแก้ไขหน้า

ขั้นที่ 4: ส่วนที่ 1 — Hero / Profile (25 นาที)

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

โครงสร้าง (ดูได้ใน Navigator):

Container "Hero"            (Full Width, Column, Min Height 632px) ← hero-bg.jpg + Overlay
├── Image                   ← profile.jpg (วงกลม)
├── Heading H1              ← ชื่อ-สกุล
├── Text Editor             ← ตำแหน่ง/สถานะ
├── Divider                 ← เส้นสั้น (Hide On Mobile)
├── Container "Contact"     (Row → Column บนมือถือ)
│   ├── Text Editor         ← หลักสูตร/ที่อยู่คณะ
│   └── Text Editor         ← ห้อง/อีเมล
└── Container "Buttons"     (Row)
    ├── Button "About Me"   → #about
    └── Button "Hire Me"    → mailto:

4.1 สร้าง Container ของ Hero

1. บน Canvas คลิกปุ่ม + (Add New Container) → เลือกโครงสร้าง Flexbox → เลือกแบบ 1 คอลัมน์ (ช่องเดียว)
2. แผงซ้าย แท็บ Layout

3. แท็บ Style → Background
   • Background Type: Classic (ไอคอนพู่กัน) → Image → เลือก hero-bg.jpg
   • Position: Center Center · Attachment: Fixed · Repeat: No-repeat · Display Size: Cover
4. แท็บ Style → Background Overlay
   • Background Type: Classic → Color: #000000
   • Opacity: 0.55
5. แท็บ Advanced → Padding: Top 80, Bottom 60, Left/Right 20 px
6. Navigator → ดับเบิลคลิกชื่อ Container → เปลี่ยนเป็น Hero

4.2 เพิ่มรูปโปรไฟล์

1. คลิก + ที่ Top bar (หรือไอคอน ⋮⋮⋮ ที่แผงซ้าย) → ช่องค้นหาพิมพ์ Image → ลาก widget Image มาวางใน Container Hero
2. แท็บ Content: Choose Image → เลือก profile.jpg · Image Resolution: Medium - 300 x 300
3. แท็บ Style

4.3 เพิ่มชื่อและตำแหน่ง

1. ลาก widget Heading มาไว้ใต้รูป
   • Content → Title: Somchai Jaidee · HTML Tag: H1 · Alignment: Center
   • Style → Text Color: ขาว
   • Style → Typography (ไอคอนดินสอ ✏) → Family Saira Stencil One · Size 54 px · Weight 600
2. ตั้งขนาดตัวอักษรตามอุปกรณ์: ในแผง Typography คลิกไอคอน จอคอมพิวเตอร์ 🖥 ข้างคำว่า Size → เลือก Tablet → ตั้ง 36 → สลับเป็น Mobile → ตั้ง 24
3. ลาก widget Text Editor มาไว้ใต้ Heading → พิมพ์ IT Student, Web Developer and Designer
   • Alignment Center · Text Color ขาว · Typography: Roboto, Size 22 (Mobile 14), Weight 300

4.4 เพิ่มเส้นคั่นที่ซ่อนบนมือถือ (Hide On)

1. ลาก widget Divider มาไว้ใต้ Text Editor
   • Content → Style: Solid · Width 60 px · Alignment Center
   • Style → Color ขาว · Weight 2 px
2. แท็บ Advanced → Responsive
   • Hide On Desktop: ปิด · Hide On Tablet: ปิด · Hide On Mobile: เปิด

ทำไมซ่อนบนมือถือ: จอมือถือมีพื้นที่แนวตั้งจำกัด การตัดเส้นตกแต่งออกช่วยดันปุ่ม About Me และ Hire Me ขึ้นมาอยู่ในหน้าจอแรก โดยไม่เสียข้อมูลใดไป

4.5 เพิ่มข้อมูลติดต่อ 2 คอลัมน์

1. ลาก widget Container มาไว้ใต้ Divider (Container ซ้อนใน Container) → ตั้งชื่อ Contact

   • Layout → Content Width Boxed · Width 1140 px · Direction: Row - horizontal · Gaps 40
   • คลิกไอคอน 🖥 ข้าง Direction → Mobile → Column - vertical (บนมือถือคอลัมน์จะเรียงลงมาเป็นแถว)

2. ลาก Text Editor 2 ตัวมาวางใน Container Contact แล้วพิมพ์ (กด Shift+Enter เพื่อขึ้นบรรทัดใหม่ในย่อหน้าเดิม)

   ตัวซ้าย

   TEXTCOPY

   หลักสูตรวิทยาศาสตรบัณฑิต สาขาวิชาเทคโนโลยีสารสนเทศ
   คณะวิทยาศาสตร์ มหาวิทยาลัยแม่โจ้
   63 หมู่ 4 ต.หนองหาร อ.สันทราย จ.เชียงใหม่ 50290

   ตัวขวา

   TEXTCOPY

   ห้องเรียน/ห้องปฏิบัติการ: <อาคาร/ห้อง>
   อีเมล: <อีเมลมหาวิทยาลัย>

3. ตั้งค่าทั้งสองตัวตามตาราง (ตั้งตัวแรกเสร็จแล้ว คลิกขวา → Copy Style → คลิกขวาที่ตัวที่สอง → Paste Style)

4.6 เพิ่มปุ่ม 2 ปุ่ม

1. ลาก Container อีกตัวมาไว้ใต้ Contact → ตั้งชื่อ Buttons → Direction Row - horizontal · Justify Content Center · Gaps 16 · Wrap Wrap
2. ลาก widget Button 2 ตัวมาวางใน Container Buttons

ขั้นที่ 5: ส่วนที่ 2 — About Me (30 นาที)

เป้าหมาย: หัวข้อ About Me, ประวัติย่อ (ซ้าย) และแถบทักษะ 5 แถบ (ขวา) บนพื้นหลังที่แบ่งสีเป็นสองส่วน โดย Desktop แบ่ง ซ้าย-ขวา (น้ำเงิน | เทา) และ Mobile แบ่ง บน-ล่าง (น้ำเงิน | เทาอมน้ำเงิน)

โครงสร้าง:

Container "About"        (Full Width, Column, CSS ID: about)
│                        พื้น: gradient 90° #0070FF 50% | #A8A8A8 50%  → Mobile: น้ำเงินล้วน
├── Heading H2 "About Me"
└── Container "About Row" (Row → Column บนมือถือ)
    ├── Container "Bio"     (50%) → Text Editor ประวัติย่อ
    └── Container "Skills"  (50%) → Progress Bar × 5
                            พื้น: โปร่งใสบน Desktop → Mobile: #495157

5.1 สร้าง Container ของ About

1. วางเมาส์ใต้ Container Hero → คลิก + → Flexbox → 1 คอลัมน์ (ตรวจใน Navigator ว่าอยู่ระดับเดียวกับ Hero ไม่ได้ซ้อนอยู่ข้างใน)
2. ตั้งชื่อ About → แท็บ Layout: Content Width Full Width · Direction Column - vertical · Gaps 0
3. แท็บ Advanced
   • CSS ID: about
   • Padding: Top 60, Bottom 0, Left/Right 0 px (ซ้าย-ขวาต้องเป็น 0 เพื่อให้พื้นของคอลัมน์ลูกชิดขอบจอบนมือถือ)
4. ลาก Heading มาวาง → Title About Me · HTML Tag H2 · Alignment Center · Color #E4E4E4 (Global: Heading Light) · Typography Roboto 30 px Weight 600

5.2 ตั้งพื้นหลังแบ่งสีแบบ Responsive

เลือก Container About → แท็บ Style → Background → Background Type: Gradient (ไอคอนไล่สี)

• ตั้ง Location ของทั้งสองสี เท่ากัน สีจะแบ่งเป็นเส้นตรง ไม่ไล่สี
• บน Mobile ดันทั้งสองจุดไปที่ 100% พื้นทั้งแถบจึงเป็นน้ำเงินล้วน แล้วให้คอลัมน์ Skills ใส่สีของตัวเองในขั้นที่ 5.4
• วิธีตั้งค่า Mobile: คลิกไอคอน 🖥 ข้าง Location → เลือก Mobile → ตั้งค่า (Tablet ไม่ต้องตั้ง จะใช้ค่าจาก Desktop)

5.3 สร้างแถวและคอลัมน์ประวัติย่อ

1. ลาก Container มาไว้ใต้ Heading → ตั้งชื่อ About Row
   • Content Width Full Width · Direction: Row - horizontal (Mobile: Column - vertical) · Gaps 0 · Align Items Stretch
2. ลาก Container 2 ตัวมาวางใน About Row → ตั้งชื่อ Bio และ Skills
   • ทั้งสองตัว: Layout → Width 50 % (Mobile: 100 %)
   • ทั้งสองตัว: Advanced → Padding 40 px ทุกด้าน (Mobile 30)
3. ใน Bio ลาก Text Editor มาวาง → พิมพ์ประวัติย่อ → Text Color ขาว · Typography Roboto 16, Line Height 1.7 em

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

5.4 เพิ่ม Progress Bar และสีพื้นของคอลัมน์ Skills

1. ใน Skills ลาก widget Progress Bar มาวาง
2. แท็บ Content

3. แท็บ Style

4. เลือก Progress Bar ที่ตั้งเสร็จ → Duplicate (Ctrl+D) 4 ครั้ง → แก้ Title และ Percentage ของแต่ละแถบ

5. สีพื้นของ Skills บนมือถือ: เลือก Container Skills → Style → Background → Gradient

• Desktop: จุดสีทั้งสองอยู่ที่ 100% จึงเห็นเฉพาะสีแรก (โปร่งใส) และเห็นพื้นเทาของ About ทะลุขึ้นมา
• Mobile: จุดสีทั้งสองอยู่ที่ 0% จึงเห็นเฉพาะสีที่สอง (#495157) เต็มคอลัมน์

ขั้นที่ 6: ส่วนที่ 3 — What I can Do! (15 นาที)

เป้าหมาย: หัวข้อ เส้นคั่น และกล่องความสามารถ 3 กล่องบนพื้นหลังสีเทาเข้ม วางเมาส์บนกล่องแล้วพื้นกล่องจะเปลี่ยนเป็นสีดำ

โครงสร้าง:

Container "Skills Overview"  (Full Width, Column, พื้น #505050)
├── Heading H2 "What I can Do!"
├── Divider
└── Container "Boxes"        (Boxed, Row → Column บนมือถือ)
    ├── Container (33%) → Icon Box     ← Hover: พื้นดำ
    ├── Container (33%) → Icon Box
    └── Container (33%) → Icon Box

6.1 สร้าง Container และหัวข้อ

1. วางเมาส์ใต้ Container About → + → Flexbox → 1 คอลัมน์ → ตั้งชื่อ What I can Do
2. Layout: Content Width Full Width · Direction Column · Align Items Center · Style → Background Classic Color #505050 (Global: Dark Grey) · Advanced → Padding Top/Bottom 60 px
3. Heading What I can Do! · H2 · Center · สีขาว · Roboto 44 px Weight 300
4. Divider · Style Solid · Width 100 px · Alignment Center · Color ขาว · Weight 2 px

6.2 สร้างกล่องความสามารถ

1. ลาก Container มาวางใต้ Divider → ตั้งชื่อ Boxes → Content Width Boxed · Direction Row (Mobile: Column) · Gaps 20
2. ลาก Container 1 ตัวมาวางใน Boxes → Width 33 % (Mobile 100 %) · Padding 30 px
3. ตั้ง Hover ของกล่อง: Style → Background → แท็บ Hover → Background Type Classic → Color ดำ #000000 · Transition Duration 0.3 วินาที
4. ลาก widget Icon Box มาวางในกล่อง

5. เลือก Container กล่องที่ 1 (ใน Navigator) → Duplicate (Ctrl+D) 2 ครั้ง ทุกกล่องจะได้การตั้งค่า Hover และ Icon Box เหมือนกัน
6. แก้ไอคอนและข้อความของกล่องที่ 2 และ 3

ขั้นที่ 7: ส่วนที่ 4 — Follow Me on… (10 นาที)

1. วางเมาส์ใต้ Container What I can Do → + → Flexbox → 1 คอลัมน์ → ตั้งชื่อ Follow
2. Content Width Full Width · Direction Column · Align Items Center · Background Classic ขาว · Padding Top 40 / Bottom 60 px
3. Heading Follow Me on… · H2 · Center · สีดำ #000000 · Roboto 44 px Weight 300 (ต้นแบบสะกดผิดเป็น "Fllow" ให้ใช้คำที่ถูกต้องคือ Follow)
4. Divider · Solid · Width 100 px · Center · Color #A8A8A8 (Global: Light Grey)
5. ลาก widget Social Icons มาวาง แล้วตั้งค่าตามตาราง

ขั้นที่ 8: ส่วนที่ 5 — Call to Action + Template (15 นาที)

8.1 สร้างส่วน CTA

1. วางเมาส์ใต้ Container Follow → + → Flexbox → 1 คอลัมน์ → ตั้งชื่อ CTA
2. Layout: Content Width Full Width · Min Height 318 px · Direction Column · Justify Content Center · Align Items Center · Gaps 24
3. Style → Background Classic → Image cta-bg.jpg · Position Center Center · Display Size Cover
4. Style → Background Overlay → Color ดำ #000000 · Opacity 0.5
5. Advanced → Padding Top/Bottom 60 px · CSS ID: hire
6. เพิ่ม widget
   • Heading Need a Professional Developer? · H2 · Center · ขาว · Roboto 44 px Weight 100 (Mobile 30)
   • Text Editor ยินดีรับงานพัฒนาเว็บไซต์และร่วมทำโครงงาน ติดต่อได้ทางอีเมล · Center · ขาว
   • Button Hire Me · Link mailto:อีเมลของคุณ · Alignment Center · Background #FF0051 (Global: CTA Pink) · Border Radius 8 px

8.2 บันทึกเป็น Template แล้วนำไปใช้ในหน้า Contact

1. ใน Navigator คลิกขวา ที่ Container CTA → Save as a Template
2. ตั้งชื่อ CTA – Hire Me → Save
3. คลิก Publish (หรือ Ctrl+S ถ้ายังไม่ต้องการเผยแพร่) เพื่อบันทึกหน้า About
4. ทดสอบการใช้ซ้ำ
   1. Pages → Add New Page → ชื่อ Contact → Edit with Elementor
   2. Page Settings (⚙) → Hide Title เปิด · Page Layout Elementor Full Width (เหมือนขั้นที่ 3.4)
   3. บน Canvas คลิกไอคอน Add Template (รูปแฟ้ม 📁) → แท็บ My Templates → CTA – Hire Me → Insert
   4. Publish หน้า Contact
5. จัดการ Template ทั้งหมดได้ที่ wp-admin → Templates → Saved Templates (บางเวอร์ชันอยู่ใต้เมนู Elementor)

ขั้นที่ 9: เผยแพร่ ตั้งหน้าแรก และเพิ่มในเมนู (10 นาที)

9.1 เผยแพร่

1. ในหน้า About (Elementor) คลิก Publish
2. คลิกไอคอน Preview (รูปตา 👁) ที่ Top bar หรือกลับไปที่ wp-admin → Pages → View เพื่อเปิดหน้าจริง

9.2 ตั้งเป็นหน้าแรก (ถ้าต้องการ)

1. Settings → Reading
2. Your homepage displays → A static page
3. Homepage → About
4. Posts page → เลือกหน้า Blog (ถ้ามี) หรือปล่อยว่าง
5. Save Changes

9.3 เพิ่มหน้าในเมนู

Blocksy เป็นธีมแบบ Classic จึงจัดการเมนูที่ Appearance → Menus

1. Appearance → Menus → create a new menu → ชื่อ Main Menu → Create Menu
2. กล่อง Pages ด้านซ้าย → ติ๊ก About และ Contact → Add to Menu
3. ลากเรียงลำดับ About ไว้บนสุด
4. Menu Settings → Display location → ติ๊กตำแหน่ง Header Menu 1 และ Mobile Menu (ชื่ออาจต่างเล็กน้อยตามเวอร์ชันธีม)
5. Save Menu
6. เปิดหน้าเว็บ → คลิกไอคอนเมนู (≡) ตรวจว่ามีลิงก์ครบ

ขั้นที่ 10: ตรวจสอบ Responsive (10 นาที)

10.1 ตรวจใน Elementor

1. Top bar → ไอคอน Responsive Mode (Ctrl+Shift+M) → สลับ Desktop / Tablet / Mobile
2. ตรวจทีละส่วน: ขนาดชื่อ H1, คอลัมน์ Contact เรียงเป็นแถว, พื้น About เปลี่ยนสี, Divider ใน Hero หายไปบน Mobile

10.2 ตรวจในเบราว์เซอร์ด้วย DevTools

1. เปิดหน้าจริง → กด F12 → คลิกไอคอน Toggle device toolbar (Ctrl+Shift+M)
2. ทดสอบ 3 ขนาด: 375px (Mobile), 768px (Tablet), 1280px (Desktop)
3. กด Ctrl+Shift+R (Hard reload) หลังเปลี่ยนขนาดทุกครั้ง
4. ตรวจตามตาราง

Checklist ตรวจงานก่อนเผยแพร่

ธีมและการตั้งค่า

• ใช้ธีม Blocksy + ปลั๊กอิน Elementor (Free) และไม่มีปลั๊กอินเสริมที่ไม่ได้ใช้
• เปิด Load Google Fonts Locally แล้ว
• Header มีโลโก้และเมนู ส่วน Footer มีข้อความลิขสิทธิ์ของตนเอง
• หน้า About ตั้ง Hide Title และ Elementor Full Width แล้ว ส่วน Hero อยู่ติด Header

เนื้อหา

• มีครบ 5 ส่วนเนื้อหา: Hero, About Me, What I can Do!, Follow Me, CTA
• ข้อมูลทั้งหมดเป็นของตนเอง ไม่มีข้อความจากต้นแบบหรือข้อความตัวอย่างค้างอยู่ (เช่น "Web Designer" ใน Inner Text ของ Progress Bar)
• หัวข้อเรียงลำดับถูกต้อง: H1 มีหนึ่งเดียว (ชื่อ) → H2 (ชื่อส่วน) → H3 (หัวข้อใน Icon Box)
• ไม่มีเบอร์โทรศัพท์ส่วนตัว ที่อยู่บ้าน หรือข้อมูลส่วนบุคคลที่อ่อนไหว

ภาพ

• ภาพทุกภาพย่อขนาดตามขั้นที่ 0 แล้ว
• รูปโปรไฟล์และโลโก้มี Alt text ภาพพื้นหลังเว้น Alt text ไว้
• ถ้าใช้ภาพจาก AI ได้ระบุไว้ใน Footer หรือ Caption

ฟังก์ชัน

• ใช้ Global Colors แทนการพิมพ์รหัสสีซ้ำ
• Divider ใน Hero ซ่อนบน Mobile (Hide On Mobile)
• ปุ่ม About Me เลื่อนไปที่ส่วน About ได้ ทุกอุปกรณ์ ส่วนปุ่ม Hire Me เปิดโปรแกรมอีเมลได้
• มี Template CTA – Hire Me และใช้ในหน้า Contact แล้ว
• ลิงก์โซเชียลทุกลิงก์ใช้ได้และเปิดในแท็บใหม่
• ตรวจครบทั้ง 3 ขนาดจอตามตารางในขั้นที่ 10

ทดสอบความเข้าใจ

1. หน้าเดียวกันนี้สร้างได้ทั้งด้วย Elementor และ Block Editor ข้อดีและข้อจำกัดของแต่ละวิธีคืออะไร (ตอบอย่างน้อย 2 ข้อต่อวิธี และพิจารณาเรื่องขนาด HTML/CSS ที่ส่งไปยังเบราว์เซอร์ด้วย)
2. ต้นแบบทำส่วน About Me 2 ชุดแล้วซ่อนตามอุปกรณ์ ส่วนบทความนี้ทำชุดเดียวแล้วใช้ gradient ที่ตั้ง Location แยกตามอุปกรณ์ ให้เปรียบเทียบสองวิธีในแง่ขนาดหน้าเว็บ การดูแลเนื้อหา และ SEO
3. ถ้าต้องการใช้วิธี 2 ชุดของต้นแบบ แต่ให้ปุ่ม "About Me" ใช้ได้ทั้งบน Desktop และ Mobile ควรแก้อย่างไร (เสนออย่างน้อย 1 วิธี)
4. Template ของ Elementor Free, Global Widget ของ Elementor Pro และ Synced Pattern ของ Block Editor ต่างกันอย่างไร เมื่อใดควรใช้แต่ละแบบ
5. Elementor Free มี Progress Bar ในตัว ส่วน Block Editor ต้องเพิ่มปลั๊กอิน การใช้ Page Builder ขนาดใหญ่หนึ่งตัวกับการใช้ปลั๊กอินเล็กหลายตัว มีผลต่อความปลอดภัยและประสิทธิภาพของเว็บต่างกันอย่างไร (เชื่อมโยงกับบทที่ 08–10)
6. การใช้ภาพที่สร้างด้วย AI บนเว็บไซต์ส่วนตัวมีประเด็นด้านจริยธรรมและลิขสิทธิ์อะไรที่ต้องระวัง

อยากไปต่อ? ลองทำโจทย์ท้าทาย

1. Transparent Header — ทำให้ Header ของ Blocksy ซ้อนอยู่บนภาพ Hero (Customize → Header → Transparent Header) และตั้งให้เป็นแบบนี้เฉพาะหน้า About
2. Entrance Animation — ใส่ Motion Effects → Entrance Animation แบบ Fade In Up ให้ Icon Box ทั้ง 3 กล่อง โดยตั้ง Animation Delay ต่างกัน (0, 150, 300 ms) แล้วตรวจว่าผู้ที่ตั้งค่า ลดการเคลื่อนไหว ในระบบปฏิบัติการยังใช้งานได้ดี
3. หน้า Contact — เพิ่มแบบฟอร์มด้วยปลั๊กอิน Contact Form 7 (วางด้วย widget Shortcode) แล้ววาง Template CTA ไว้ท้ายหน้า
4. Performance — วัดคะแนนด้วย PageSpeed Insights ก่อนและหลังเปิด Elementor → Settings → Performance (เช่น Optimized DOM Output, Improved CSS Loading, Lazy Load Background Images) และปรับภาพเป็น WebP ให้ได้คะแนน Performance ≥ 80 บนมือถือ
5. Contrast — ใช้ WebAIM Contrast Checker ตรวจสีตัวหนังสือบน Hero, About (#E4E4E4 บน #0070FF) และ CTA ให้ผ่านเกณฑ์ WCAG AA ถ้าไม่ผ่านให้ปรับสีแล้วบันทึกเหตุผล

สรุป

ถึงตรงนี้เราได้หน้า About Me ครบทั้ง 5 ส่วน คือ Hero, About Me, What I can Do!, Follow Me และ CTA ด้วย Elementor รุ่นฟรีเพียงปลั๊กอินเดียว โดยใช้ค่าสีและฟอนต์ตรงกับต้นแบบ สิ่งสำคัญที่ได้ฝึกคือการแยกหน้าเว็บออกเป็น Container และ Widget การตั้งค่าแยกตามอุปกรณ์ด้วย Responsive Mode และ Hide On การใช้ gradient แยกตามอุปกรณ์แทนการทำเนื้อหา 2 ชุด การใช้ Global Colors และการบันทึก Template เพื่อลดงานซ้ำ

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

ภาคผนวก ก: ตารางเทียบต้นแบบ, Elementor (บทความนี้) และ Block Editor

ภาคผนวก ข: ปัญหาที่พบบ่อยและวิธีแก้

แหล่งอ้างอิง (ตรวจสอบเมื่อ 22 กันยายน 2569)

ธีมและปลั๊กอิน

• Blocksy (WordPress.org) — https://wordpress.org/themes/blocksy/
• Blocksy Documentation — https://creativethemes.com/blocksy/docs/
• Blocksy: Header Builder Elements — https://creativethemes.com/blocksy/docs/header-elements/header-builder-elements/
• Blocksy Companion — https://wordpress.org/plugins/blocksy-companion/
• Elementor Website Builder (WordPress.org) — https://wordpress.org/plugins/elementor/

Elementor Help Center

• Get started with the Elementor Editor V4 — https://elementor.com/help/get-started-with-the-elementor-editor-v4/
• Container — https://elementor.com/help/container-element/
• Using Elementor's Full Width Page template — https://elementor.com/help/using-elementors-full-width-page-template/
• Global Colors — https://elementor.com/help/global-colors/
• Responsive Mode — https://elementor.com/help/responsive-mode/
• Show or Hide Columns Per Device — https://elementor.com/help/show-or-hide-columns-per-device/
• Navigator — https://elementor.com/help/navigator/
• Progress Bar widget — https://elementor.com/help/progress-bar-widget/
• Icon Box widget — https://elementor.com/help/icon-box-widget/
• Social Icons widget — https://elementor.com/help/social-icons-widget/
• Save as Template — https://elementor.com/help/save-as-template/
• Load Google Fonts Locally — https://elementor.com/help/load-google-fonts-locally/

เครื่องมือเตรียมภาพ

• Squoosh (ย่อและแปลงภาพ) — https://squoosh.app/
• WebAIM Contrast Checker — https://webaim.org/resources/contrastchecker/

เอกสารในรายวิชา

• บทที่ 06 Block Editor (Gutenberg), บทที่ 07 WordPress Themes & FSE, บทที่ 08 Plugins, บทที่ 09 Responsive & Performance, บทที่ 10 Security