📋 คู่มือนักพัฒนา

นำ HTML ไปใช้ใน
Elementor Pro Theme Builder

คู่มือทีละขั้นตอน สำหรับ top10bestchoice.com — แปลง HTML Homepage ให้เป็น Elementor Template อย่างถูกต้อง

⚡ Elementor Pro🎨 Astra Theme🔍 RankMath SEO🇹🇭 Thai Content

สารบัญ

0ภาพรวม:3 วิธีหลักที่ใช้ได้1เพิ่ม CSS ลง Elementor Global Custom CSS 2สร้าง Homepage Template ใน Theme Builder 3วิธี A — ใช้ HTML Widget (เร็วที่สุด)4วิธี B — สร้างด้วย Elementor Widgets (แนะนำ)5ตั้งค่า Display Conditions 6สร้าง Header Template 7สร้าง Footer Template 8ปิด Maintenance Mode+ตรวจสอบ SEO

ภาพรวม:มี 3 วิธีที่ทำได้

เลือกวิธีที่เหมาะกับเวลาและทักษะของคุณ

วิธี	เวลา	ยาก	SEO	แนะนำสำหรับ
A:HTML Widget Paste HTML block ตรงๆ	⏱ 30 นาที	●ง่าย	●พอใช้	เริ่มต้นเร็ว / ทดสอบ
B:Elementor Widgets สร้างใหม่ด้วย widget แต่ละตัว	⏱ 2–3 ชั่วโมง	●ปานกลาง	●ดีที่สุด	Production จริง
C:Custom Code (PHP) แปลงเป็น WordPress template file	⏱ 4–6 ชั่วโมง	●ยาก	●ดีที่สุด	Developer เต็มตัว

💡คำแนะนำ:ใช้วิธี A ก่อนเพื่อดูหน้าตาเร็วๆ จากนั้นค่อยๆ แปลงเป็น วิธี B ทีละ Section เพื่อให้ได้ผลลัพธ์ที่ดีที่สุดสำหรับ SEO และการขยายในระยะยาว

เพิ่ม CSS ลง Elementor Global Custom CSS

ต้องทำก่อนทุกวิธี — CSS จากไฟล์ HTML ของเราต้องโหลดทั่วทั้งเว็บไซต์

⚠️ขั้นตอนนี้ ต้องทำก่อนไม่งั้นหน้าเว็บจะไม่มีสไตล์ใดๆ เลย

เส้นทางการตั้งค่า

Elementor →Site Settings →Custom CSS

หรืออีกทาง:WordPress Admin → Appearance → Customize → Additional CSS

ไปที่ Elementor Editor(เปิดหน้าใดก็ได้ → Edit with Elementor)

คลิก ไอคอน Hamburger (≡)มุมบนซ้าย → เลือก Site Settings

เลื่อนลงหา Custom CSSใน panel ซ้าย

Copy CSS ทั้งหมดจากในส่วน <style>...</style>ของไฟล์ HTML แล้ว Paste ลงในช่อง Custom CSS

คลิก Save Changesหรือ Update

CSS ส่วนที่ต้อง Copy
<style>:root {--color-primary:#0f172a;--color-accent:#e53e3e;}</style>

✅ถ้าใช้ Astra Theme(ตามที่เห็นในภาพ) — ยังสามารถเพิ่ม CSS ได้ที่ Appearance → Customize → Additional CSSด้วย ผลเหมือนกัน

สร้าง Homepage Template ใน Theme Builder

สร้าง Page Template เปล่าสำหรับหน้า Homepage โดยเฉพาะ

ไปที่ Elementor → Templates → Theme Builder(จาก WordPress Admin ซ้ายมือ)

คลิกปุ่ม Add New Template(มุมบนขวา)

เลือก Template Type:Page→ ตั้งชื่อว่า "Homepage – Top10BestChoice"→ คลิก Create Template

จะเปิด Elementor Editor— หน้าจอว่างเปล่า พร้อมสำหรับการ build

🔑สำคัญ:ก่อน build ให้ตั้งค่า Page Layout ก่อน — คลิก ⚙️ Settings → Page Layout เลือก "Elementor Canvas"(ไม่มี Header/Footer จาก Theme เพราะเราจะสร้างเอง) หรือ "Elementor Full Width"ถ้าต้องการ Astra header

วิธี A — ใช้ HTML Widget (เร็วที่สุด)

Paste HTML แต่ละ Section เข้า Elementor HTML Widget ทีละส่วน

⚡ วิธีเร็วที่สุด – แนะนำสำหรับเริ่มต้น

ขั้นตอน

ใน Elementor Editor → ค้นหา Widget ชื่อ "HTML"ใน panel ซ้าย (พิมพ์ "html" ในช่องค้นหา)

ลาก HTML Widgetมาวางในพื้นที่ canvas

ใน Content tab → ช่อง HTML Code→ Paste HTML ของ Section นั้นๆ

ทำซ้ำสำหรับทุก Section:Hero,Category Bar,Articles Grid,Category Grid ฯลฯ

แผนการแบ่ง Section

🔷

HTML Widget #1 — Hero Section

Copy จาก <section class="hero">ถึง </section>

🔷

HTML Widget #2 — Category Bar

Copy จาก <div class="category-bar">

🔷

HTML Widget #3 — Latest Articles Grid

Copy จาก <section class="section">(Latest Top 10)

🔷

HTML Widget #4 — Category Grid

Copy Section "เลือกดูตามหมวดหมู่"

🔷

HTML Widget #5 — Top Picks (Product Cards)

Section ที่มีปุ่ม "เช็คราคาล่าสุด"

🔷

HTML Widget #6 — Comparison Table

Section ตารางเปรียบเทียบ Router

🔷

HTML Widget #7 — Popular+Newsletter

Section 2 คอลัมน์ Popular list+Newsletter

🔷

HTML Widget #8 — Trust Signals+CTA Banner

Section "ทำไมต้องเชื่อถือ"+Banner แดง

⚠️ข้อจำกัด HTML Widget:Elementor จะ strip บาง tag ออก (เช่น <script>,<style>inline) — ดังนั้น CSS ต้องอยู่ใน Global Custom CSS เท่านั้น (ขั้นตอน 1)

วิธี B — สร้างด้วย Elementor Widgets (แนะนำ)

สร้าง Section ต่างๆ ด้วย Elementor native widgets — ดีที่สุดสำหรับ SEO และ Performance

⭐ แนะนำสำหรับ Production

การจับคู่ HTML Section → Elementor Widget

การตั้งค่า Global Button Style (สำคัญมาก)

Elementor → Site Settings → Global Colors+Typography

ไปที่ Site Settings → Global Colors→ เพิ่มสี:
Primary:#e53e3e| Secondary:#0f172a| Text:#1a202c

ไปที่ Site Settings → Typography→ ตั้ง Default Font เป็น Sarabun(รองรับภาษาไทย)

ทุก Button Widget ที่ใช้สำหรับ "เช็คราคาล่าสุด" ให้ Set Global Style เพื่อใช้ซ้ำได้ทุกหน้า

การตั้งค่า Loop Builder (สำหรับ Article Cards)

ไปที่ Elementor → Templates → Add New → Loop Item— สร้าง Card Template 1 ชิ้น

ใน Loop Item ใช้ Dynamic Tags:{Post Title},{Post Excerpt},{Featured Image}

ใน Homepage Template → ใช้ Loop Grid Widget→ เลือก Loop Item ที่สร้าง → ตั้ง Columns:3,Posts per page:6

ตั้งค่า Display Conditions

กำหนดว่า Template นี้จะแสดงที่หน้าไหน — ต้องทำทุก Template

🚨ถ้าไม่ตั้ง Conditions— Template จะไม่แสดงในหน้าเว็บจริง แม้จะ Publish แล้วก็ตาม

หลัง Build เสร็จ — คลิกปุ่ม "Publish"หรือ "Update"ใน Elementor

จะมี Popup "Where Do You Want to Display Your Template?"

คลิก Add Condition→ เลือก "Front Page"(หน้าแรก) → คลิก Save &Close

Conditions สำหรับ Templates ต่างๆ

Homepage Template→ Condition:Front Page

Single Post Template→ Condition:Post Type=Posts (All)

Category Archive Template→ Condition:Archives → Category

Header Template→ Condition:Entire Site

Footer Template→ Condition:Entire Site

สร้าง Header Template

Header ที่มี Logo,Navigation,Search Bar

Theme Builder → Add New Template → Header

Template Type → Header→ ชื่อ:"Global Header"

Layout:1 Column Section→ Padding:0 → Min Height:64px

ใช้ Nav Menu Widget (Pro)→ เชื่อมกับ WordPress Menu ที่สร้างไว้ใน Appearance → Menus

เพิ่ม Site Logo Widgetด้านซ้าย+Search Widgetด้านขวา

ใน Advanced → Position → Sticky to Topเพื่อให้ Header ติดบนหน้าจอ

Publish → Conditions → Entire Site

เมนูที่ต้องสร้างใน WordPress

WordPress Admin → Appearance → Menus → Create New Menu

รายการเมนู
ชื่อเมนู:Main Navigationรายการ:อิเล็กทรอนิกส์→ category/electronics/ เครื่องใช้ในบ้าน→ category/home-appliances/ อุปกรณ์สำนักงาน→ category/office-equipment/ ไลฟ์สไตล์→ category/lifestyle/ อุปกรณ์เสริม→ category/accessories/ คู่มือซื้อ→ buying-guide/ Location:Elementor Header Menu

สร้าง Footer Template

Footer 4 คอลัมน์ พร้อม Affiliate Disclosure และ Copyright

Theme Builder → Add New Template → Footer

Template Type → Footer→ ชื่อ:"Global Footer"

สร้าง Section → 4 Columns (เหมือน Footer ใน HTML ที่เราสร้าง) → Background Color:#0f172a

คอลัมน์ 1:Site Logo+Text Widget (คำอธิบาย)+Social Icons Widget

คอลัมน์ 2–4:Nav Menu Widget หรือ Text Widget สำหรับ Footer Links

เพิ่ม Section ล่างสุด → Text Widget สำหรับ Copyright+Affiliate Disclosure

Publish → Conditions → Entire Site

ข้อความ Affiliate Disclosure
© 2026 Top10BestChoice.com · สงวนลิขสิทธิ์เว็บไซต์นี้มีลิงก์พาร์ทเนอร์จาก Shopeeหากซื้อสินค้าผ่านลิงก์ของเรา เราอาจได้รับค่าคอมมิชชันโดยไม่มีค่าใช้จ่ายเพิ่มเติมสำหรับคุณ

ปิด Maintenance Mode+ตรวจสอบ SEO

จากภาพที่เห็น:"Site is undergoing maintenance" — ต้องปิดก่อนเว็บขึ้น Google

🚨จากภาพ screenshot ที่แชร์มา พบว่ามี tab ชื่อ "Site is undergoing m..."— แสดงว่าเว็บยังอยู่ใน Maintenance Mode และ Google จะไม่ indexหน้าเว็บ

ปิด Maintenance Mode (ทำก่อนเลย)

WordPress Admin → Elementor → Tools → Maintenance Mode

ไปที่ Elementor → Tools → แท็บ Maintenance Mode

เปลี่ยน Mode จาก "Coming Soon" หรือ "Maintenance" → Disable

คลิก Save Changes

ตรวจสอบ RankMath SEO (จากภาพ:เห็น RankMath ใน Admin Bar)

WordPress Admin → Rank Math → General Settings

SEO Visibility:ตรวจสอบว่า ไม่ได้ติ๊ก"Discourage search engines from indexing" ใน Settings → Reading

Schema:Rank Math → Titles &Meta → Posts → Schema Type → BlogPosting

Breadcrumbs:Rank Math → General Settings → Breadcrumbs → Enable

Sitemap:Rank Math → Sitemap → เปิด Post/Page/Category Sitemap → Submit ใน Google Search Console

⚠️จาก Admin Bar ที่เห็นมี notice "SEO Notice: Your site is set to No Index"— ให้รีบแก้ไขที่ Settings → Reading → Search Engine Visibility→ ติ๊กออก แล้ว Save

✓

Checklist ก่อน Launch

ตรวจสอบทุกข้อก่อนเปิดเว็บจริง

✅Global CSS เพิ่มใน Elementor Site Settings แล้ว

✅Font Sarabun ตั้งเป็น Default Font แล้ว

✅Homepage Template สร้างและ Publish แล้ว

✅Display Condition:Front Page ตั้งแล้ว

✅Header Template+Conditions:Entire Site

✅Footer Template+Affiliate Disclosure

⏳ปิด Maintenance Mode แล้ว

⏳แก้ไข "No Index" ใน Settings → Reading

⏳RankMath:Schema=BlogPosting,Breadcrumbs ON

⏳Submit Sitemap ใน Google Search Console

⏳ทดสอบบนมือถือ (Mobile Responsive)

⏳ทดสอบปุ่ม "เช็คราคาล่าสุด" ทุกปุ่มเปิดลิงก์ถูกต้อง

🚀ขั้นตอนถัดไป:หลัง Homepage เสร็จแล้ว ขอแนะนำให้สร้าง Single Post Templateสำหรับบทความ Top 10 — ซึ่งจะมี Section:H1,Quick Table,Product Ranking Blocks+ปุ่ม CTA ทุกตัว

นำ HTML ไปใช้ในElementor Pro Theme Builder