อัปเดต : 07/01/2021
โดย sakkarin

วิธีการสร้างหน้าเว็บ WordPress

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

1. ติดตั้งธีมให้เว็บไซต์

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

1. กดที่ Appearance

2. กดที่ Theme

3. กด Add New

1-เพิ่มธีมเพื่อสร้างหน้าเว็บ

4. พิมพ์ Astra ในช่องค้นหา

5. กด Install รอสักครู่จากนั้นกด Activate

2 ค้นหา theme wordpress astra

6. จะเจอข้อความแจ้งเตือนให้เรากด Get Started

3 getstarted astra starter template

7. จะมาเจอหน้า Select Page Buider ให้เรากดเลือก Elementor

4-กดเลือก-elementor

2. ติดตั้ง Template

หลังจากติดตั้งธีมเสร็จต่อไปเราก็ทำการเลือกเทมเพลตให้กับเว็บของเรา Template คือหน้าเว็บต่างๆที่สร้างขึ้นมาให้แล้ว จากนั้นเราก็เข้าไปแก้ไขหน้าเว็บนั้นๆเพื่อให้เป็นเว็บของเราตามที่ต้องการ

เช่น หน้า Home , หน้าติดต่อเรา , หน้าเกี่ยวกับเรา ซึ่งการที่เราติดตั้งเทมเพลตจะช่วยลดเวลาในการสร้างหน้าเว็บขึ้นมาใหม่ด้วยตัวเองทั้งหมด และเหมาะสำหรับมือใหม่ที่อาจจะยังออกแบบหน้าเว็บได้ไม่เก่งนัก

1. กด All

2. เลือก Free (Template เว็บไซต์จะมีทั้งแบบฟรีและเสียเงิน แนะนำให้ใช้ของฟรีก็เพียงพอแล้ว)

1 template wordpress free

3. จะมีเทมเพลตมากมายให้เราเลือก ให้คุณลองกดเข้าไปดูเพื่อชมตัวอย่างของเทมเพลตต่างๆได้ว่าคุณชอบหรือไม่

2 เลือกเทมเพลต wordpress

4. หลังจากเจอเทมเพลตที่ชอบแล้วให้กด Import Complete Site

5. กดเลือก Delete Previously Imported Site

6. กด Import แล้วรอสักครู่ให้ระบบติดตั้งเสร็จ

3 import template wordpress

หลังจากรอสักครู่ก็ระบบก็จะติดตั้งเสร็จ ให้เรากด View Site เพื่อชมหน้าเว็บของเราได้เลย

4 view site wordpress

3. แก้ไขหน้าเว็บ

หลังจากที่เราติดตั้งเทมเพลตให้แก่เว็บของเราเสร็จแล้วเราก็จะได้หน้าเว็บต่างๆมาเช่น หน้า Home , หน้า about us , หน้า contact us เป็นต้น ซึ่งต่อไปเราก็ต้องทำการเข้าไปแก้ไขหน้าเว็บต่างๆเหล่านี้ให้กลายเป็นหน้าเว็บของเราตามที่ต้องการ เช่นการเปลี่ยนข้อความต่างๆ เปลี่ยนรูปภาพ เปลี่ยนหมายเลขโทรศัพท์ และอื่นๆตามที่เราต้องการ

  1. กดไปยังหน้าเว็บที่ต้องการแก้ไข
  2. กด Edit with Elementor
  3. คลิกไปยังข้อความที่ต้องการแก้ไขแล้วพิมพ์ข้อความใหม่ลงไปแทนได้เลย
  4. ปรับแต่งรูปแบบตัวอักษรได้กดที่ Style
  5. แก้ไขปุ่มกดได้ เพียงกดไปที่ปุ่มกดก็สามารถแก้ไจได้เลยทางเมนูด้านซ้าย
  6. แก้ไขรูปภาพได้ เพียงกดไปที่รูปภาพ ก็สามารถเปลี่ยนรูปภาพได้ที่เมนูด้านซ้าย
  7. เปลี่ยนภาพพื้นหลังได้ โดยการกดที่จุดหกจุด จากนั้นกด Style แล้วเลือกภาพได้ตามชอบ
  8. หลังจากแก้ไขเสร็จกด Update

1. กดไปที่หน้าเว็บที่เราต้องการแก้ไข เช่น หน้า Home

1 กดกลับไปที่หน้า home

2. จากนั้นกดที่ Edit With Elementor

2 edit with elementor 1

3. การแก้ไขข้อความ

เราสามารถกดไปที่ข้อความที่เราต้องการแก้ไข จากนั้นพิมพ์ข้อความที่เราต้องการลงไปแทนได้เลน

3 แก้ไขข้อความบนหน้าเว็บ Wordpress

4. การเปลี่ยนรูปแบบตัวอักษร

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

4 แก้ไขรูปแบบตัวหนังสือ wordpreess

5. การแก้ไขปุ่มกด

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

5 แก้ไขปุ่มกด wordpress

6. กดเปลี่ยนรูปภาพ

เราสามารถเปลี่ยนรูปภาพต่างๆได้ตามที่เราต้องการ โดยการคลิกไปที่รูปที่เราต้องการจะเปลี่ยน จากนั้นตรงเมนู Choose Image กดให้เรากดเข้าไปเพื่ออัพโหลดภาพใหม่ตามที่เราต่องการมาแทนที่ได้เลย

6 เปลี่ยนรูปภาพบน wordpress

7. การเปลี่ยนพื้นหลัง

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

7 เปลี่ยนภาพพื้นหลัง wordpress

8. กด UPDATE หลังจากที่แก้ไขทุกอย่างตามต้องการแล้ว

8 กดอัพเดทหน้าเว็บ

4. การเพิ่มสิ่งอื่นๆลงในหน้าเว็บ

เราสามารถเพิ่มสิ่งต่างๆตามที่เราต้องการได้เองนอกเหนือจากที่เทมเพลตสร้างมาให้ได้ ตัวอย่างเช่น

  • หัวข้อ
  • รูปภาพ
  • ข้อความ
  • วิดีโอ
  • ปุ่มกด
  • และอื่นๆอีกมากมาย

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

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

8 การเพิ่มสิ่งอื่นๆลงในหน้าเว็บไซต์

5. การแก้ไขหน้าเว็บอื่นๆ

หลักจากที่คุณแก้ไจเทมเพลตของหน้าเว็บหนึ่งเสร็จแล้ว ต่อไปก็ต้องทำการแก้ไขหน้าเว็บอื่นๆด้วย เช่น หากต้องการแก้ไขหน้า About ก็ให้กดคลิกเข้าไปยังหน้า About จากนั้นกด Edit With Elementor เพื่อทำการแก้ไขปรับแต่งหน้าเว็บได้เลย

9 หากต้องการแก้ไขหน้าเว็บอื่นๆ

6. วิธีการเปลี่ยนโลโก้เว็บไซต์

คุณสามารถใส่โลโก้ให้เว็บได้ตามที่คุณต้องการ

1. ไปที่หน้าเว็บไหนก็ได้ของคุณเช่นหน้า Home จากนั้นกดที่เมนู Customize

1 กดที่ customize

2. เอาเมาส์ไปชี้ที่รูปโลโก้ของเว็บในปัจจุบันของคุณ จากนั้นกดที่รูปดินสอตามภาพ

3. กด Change Image เพื่ออัพโหลดรูปภาพ LOGO เว็บไซต์ของคุณได้ตามต้องการ

2 เปลี่ยนรูปโลโก้ wordpress ตามต้องการ

7. วิธีการเปลี่ยนรูปแบบเมนูของเว็บไซต์

คุณสามารถเปลี่ยนรูปแบบการแสดงผลของเมนูของเว็บได้ อย่างเช่นเปลี่ยนสี เปลี่ยนขนาดอักษร

1. เอาเมาส์ไปชี้ที่เมนูของเว็บ จากนั้นกดที่รูปดินสนตามภาพ

2. ก็จะปรากฏเครื่องมือในการแก้ไขเมนูของเว็บเราเลือกแก้ไขได้ตามชอบเลย

1 เปลี่ยนรูปแบบเมนูเว็บไซต์

3.หลังจากแก้ไขโลโก้และเมนูเสร็จให้เรากด Publish

2 กด publish

หลังจากแก้ไขโลโก้และรูปแบบเมนูของเว็บเสร็จให้กดปุ่ม Publish และกดรูปกากบาท เพื่อออกไปชมเว็บของเรา

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

1. ไปที่หน้าเว็บไหนก็ได้เช่น หน้า home จากนั้นเอาเมาส์ไปชี้ที่เมนูรูปเข็มไมค์รถตามภาพ

2. กด Dashboard

1 ไปที่ dashboard wordpress

3. กดไปเมนู Appearance

4. ไปที่เมนู Header Footer & Blocks

5. จอเจอ Footer ให้กด Edit with Elementor

2 ไปที่ header footer blocks astra

6. ทำการแก้ไขตามที่เราต้องการ เช่น อาจจะใส่ช่องทางการติดต่อ หมวดหมู่ของเว็บ ช่องทางกดติดตามอื่นๆ

7. หลังจากแก้ไขตามที่ชอบแล้วกด UPDATE

3 แก้ไข footer ตามต้องการบน wordpress

9. วิธีเพิ่มหน้าเว็บไซต์

หากคุณต้องการสร้างหน้าเว็บอื่นๆเพิ่มคุณก็สามรถทำได้โดยวิธีการง่ายๆดังต่อไปนี้

1. ไปหน้าเว็บไหนก็ได้เช่นหน้า Home จากนั้นเอาเมาส์ไปชี้ที่ New

2. แล้วกด Page

1 กด New และ กด page

3. ตรงหัวข้อ Add Title ให้กรอกชื่อหัวข้อของหน้าเว็บที่เราต้องการสร้าง

4. จากนั้นกด Edit with elementor

2 ตั้งชื่อหน้าเว็บที่ต้องการสร้าง

5. ตรงเมนูด้านซ้ายจะมีเครื่องมือต่างๆให้เราใช้งานได้มากมาก เช่นหากต้องการใส่รูปภาพให้หน้าเว็บก็ลากเครื่องมือ Image ไปวางไปยังตำแหน่งสีขาวด้านขวาตามที่เราต้องการได้เลย

6. หลังจากสร้างหน้าเว็บเสร็จให้กด PUBLISH เพื่อแสดงหน้าเว็บนี้ให้ผู้คนเข้าชมได้แบบสาธารณะ

3 ใส่สิ่งต่างๆลงในหน้าเว็บตามชอบ

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

อยากอ่านบทความแบบนี้อีกไหม ? เพิ่มเพื่อน LINE เราเลย

เพื่อรับบทความใหม่ๆก่อนใคร หรือถามคำถามที่สงสัย
แชร์
หากชอบบทความนี้ฝากกดแชร์ต่อให้เพื่อนๆได้อ่านด้วยนะครับ
โพสที่เกี่ยวข้อง

ใส่ความเห็น

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

© 2020 Mustketing All Rights Reserved.