สร้างและออกแบบเว็บเพจ แบบมืออาชีพ (ด้วย WordPress Page Builder)

คุณรู้หรือไม่ว่าปัจจุบันคุณสามารถสร้างเว็บเพจให้สวยงามแบบมืออาชีพได้

วิธีการคือ คุณต้องใช้ page builder ครับ

Page builder คือปลั๊กอินชนิดหนึ่งของ WordPress ที่ทำให้คุณสามารถสร้างและออกแบบเว็บเพจได้อย่างอิสระ (คุณสามารถกำหนด layout อย่างไรก็ได้)

หน้าตาของ Page Builder

Page builder ใช้งานง่าย เพราะเป็นโปรแกรมแบบลาก-วาง (drag & drop) คนทั่วไปที่ไม่ใช่นักออกแบบเว็บไซต์ก็ใช้งานได้ (ไม่ต้องเขียนโค้ดใดๆ ทั้งสิ้น)

ผมมีเว็บสอนภาษาอังกฤษอยู่เว็บหนึ่ง ก่อนใช้ page builder โฮมเพจเว็บผมมีหน้าตาเห่ยๆ แบบนี้

แต่หลังจากที่ผมใช้ page builder โฮมเพจผมมีหน้าตาแบบนี้

จะเห็นได้ว่าโฮมเพจผมมีสกุลรุณชาติขึ้นมาทันที

เรานิยมใช้ page builder ออกแบบหน้าเว็บสำคัญๆ อย่างโฮมเพจหรือหน้าแสดงสินค้า เพราะหน้าเว็บพวกนี้ต้องการดีไซน์ที่สวยงามและโดดเด่น (หรือถ้าคุณอยากใช้ page builder ออกแบบหน้าเว็บทุกหน้าของเว็บไซต์ ก็ทำได้เหมือนกันครับ)

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

อารัมภบทมากพอแล้ว มาเริ่มออกแบบหน้าเว็บสวยๆ กันเลยดีกว่าครับ

ติดตั้งปลั๊กอิน Page Builder

Page builder ที่เราจะใช้มีชื่อว่า Elementor ซึ่งเป็นปลั๊กอิน page builder ที่ดีที่สุด

ให้เข้าไปที่ WordPress Dashboard ของเว็บไซต์คุณ เลือกเมนู Plugins >> Add New จากนั้นพิมพ์ elementor ลงในช่องค้นหา คุณจะเห็นปลั๊กอิน Elementor แสดงขึ้นมา (ตามรูปด้านล่าง) ให้กดปุ่ม Install Now ตามด้วย Activate

Elementor Page Builder

พอ Activate เสร็จ Dashboard ของคุณจะมีเมนู Elementor แสดงขึ้นมาตามรูปด้านล่าง แสดงว่าติดตั้งเรียบร้อย

การสร้างเว็บเพจด้วย Elementor

ให้เลือกเมนู Pages >> Add New คุณจะเห็นปุ่ม Edit with Elementor ด้านบน

ตอนนี้คุณเลือกสร้างเว็บเพจได้สองวิธีครับ

  1. ถ้าคุณต้องการสร้างเว็บเพจแบบปกติ คุณไม่ต้องสนใจปุ่ม Edit with Elementor ให้ใช้ editor ของ WordPress ตามปกติ
  2. ถ้าคุณต้องการใช้ Elementor สร้างเว็บเพจ ให้กดปุ่ม Edit with Elementor

ถ้าคุณกดปุ่ม Edit with Elementor จะมี editor ของ Elementor แสดงขึ้นมา

ตอนนี้คุณพร้อมจะออกแบบเว็บเพจสวยๆ ด้วย Elementor แล้วครับ

กำหนด Layout เว็บเพจ

ก่อนที่จะเริ่มใส่เนื้อหาหรือออกแบบหน้าเว็บ สิ่งแรกที่ต้องทำคือกำหนด layout ของเว็บเพจก่อน

ให้คลิกที่เครื่องหมายเฟืองตรงมุมล่างซ้าย (ตามรูปด้านล่าง) แล้วเลื่อนลงไปจนเจอคำว่า Page Layout

คุณสามารถเลือก layout ได้สามแบบ

  1. Default เว็บเพจจะมี layout เหมือนเว็บเพจอื่นๆ ในเว็บคุณ (สมมุติเว็บเพจอื่นมี sidebar ด้านขวา เว็บเพจ Elementor ก็จะมี sidebar ด้านขวาเช่นกัน)
  2. Elementor Canvas เว็บเพจเปล่า ไม่มีองค์ประกอบใดๆ (เราต้องสร้างทุกอย่างขึ้นมาเองหมด)
  3. Elementor Full Width เว็บเพจจะมีแต่ header, เมนู, และ footer ส่วนตรงกลางจะเป็นพื้นที่ว่าง

โดยปกติ ผมมักจะใช้ layout แบบ Elementor Full Width ถ้าคุณไม่แน่ใจว่าจะใช้ layout แบบไหนดี เลือก Full Width ไปก่อนก็ได้ คุณสามารถเปลี่ยน layout ทีหลังได้ครับ

เรียนรู้การใช้งานตัว Editor

ได้เวลาลองใช้ Elementor ออกแบบหน้าเว็บแล้วครับ

ตอนนี้อย่าพึ่งพยายามทำหน้าเว็บให้สวยๆ นะครับ ให้ลองทำตามบทความไปเรื่อยๆ เพื่อทำความคุ้นเคยกับการใช้ Elementor ก่อน

รู้จักกับ sections

Section คือ “กรอบ” ที่กำหนดลักษณะโครงสร้างของหน้าเว็บแต่ละส่วน (เช่น ความกว้าง และจำนวน column)

อย่างหน้าเว็บด้านล่างมี 2 sections (section แรกมี 2 คอลัมน์ section ที่สองมี 4 คอลัมน์)

ถ้าต้องการสร้าง section ให้กดเครื่องหมายบวก (+) ตามรูปด้านล่าง

จากนั้นเราต้องเลือกว่าจะให้ section มีกี่คอลัมน์ (เราสามารถแก้จำนวนคอลัมน์และความกว้างภายหลังได้)

หลังจากนั้น section ใหม่ก็จะถูกสร้างขึ้นมา ถ้าคุณลองกดปุ่ม Edit section (ตามรูปด้านล่าง) คุณจะสามารถแก้ค่า settings ของ section นั้นได้ (เช่น ความสูง, สีพื้นหลัง)

ปกติหน้าเว็บ Elementor จะมีหลายๆ sections แต่ละ section ก็จะมีโครงสร้างและ content ต่างกัน (เช่น section แรกอาจจะมี 3 คอลัมน์ มีพื้นหลังสีขาว section ถัดมาอาจจะมี 2 คอลัมน์ มีพื้นหลังสีเขียว เป็นต้น)

รู้จักกับ widgets

Widgets คือองค์ประกอบต่างๆ ของเว็บเพจ เช่น paragraph (ย่อหน้า), รูปภาพ, ปุ่ม, วิดีโอ, ฯลฯ

ก่อนจะใส่ widget ลงไปในเว็บเพจเราได้ เราต้องสร้าง section ขึ้นมาก่อน (ก็คือขั้นตอนที่แล้วนั่นเอง) แล้วค่อยลาก widget ไปใส่ใน section ที่ต้องการ

คุณสามารถดูว่ามี widgets อะไรบ้างโดยการกดตรงที่ลูกศรชี้ตามรูปด้านล่าง (คุณจะเห็น widgets ทั้งหลายด้านซ้ายมือ)

คุณสามารถใส่ widget โดยการคลิกที่ widget ที่ต้องการค้างไว้ แล้วลากมาที่ section ที่ต้องการ

หลังจากใส่ widget ให้ดูเมนูด้านซ้ายมือ คุณจะเห็น settings สำหรับปรับแต่ง widget นั้น (หากไม่เห็น settings ให้คลิกเลือก widget นั้นก่อน)

ประหยัดเวลาด้วย Templates

ฟีเจอร์เด็ดอย่างหนึ่งของ Elementor คือคุณสามารถ import เทมเพลตสำเร็จรูปที่ทีมงาน Elementor ออกแบบไว้ให้ ทำให้ไม่ต้องเสียเวลาสร้างเว็บเพจจากศูนย์

วิธี import ก็ง่ายๆ ให้กดสัญลักษณ์โฟลเดอร์ตามรูปด้านล่าง (Add Template)

จะมีเทมเพลตให้คุณเลือก 3 ชนิด

  • Blocks คือเทมเพลตสำหรับพวก header, footer, testimonials, contact, FAQ (ส่วนหนึ่งของเว็บเพจ)
  • Pages คือเทมเพลตที่เป็นเว็บเพจทั้งหน้า
  • My Templates คือเทมเพลตที่เราสร้างเอง (เดี๋ยวบอกวิธีครับ)
Elementor Library

ถ้าถูกใจอันไหน ให้คลิกเทมเพลตนั้นๆ แล้วกดปุ่ม Insert (แต่บางอันจะ insert ไม่ได้เพราะมันสำหรับผู้ใช้ Elementor แบบ Pro ซึ่งเป็นเวอร์ชันเสียเงิน)

ตอนผมยังใช้งาน Elementor ไม่เก่ง ผมก็ใช้วิธี import เทมเพลตสำเร็จรูปพวกนี้มาศึกษาเอานี่แหละครับ

นอกจากการ import เทมเพลตของคนอื่นแล้ว คุณยังสามารถสร้างเทมเพลตของตัวเอง แล้ว save เก็บไว้ใช้งานทีหลังได้อีกด้วย

ยกตัวอย่างเช่น ถ้าหน้าเว็บคุณมี section ที่อาจต้องใช้ในหน้าอื่นหลายๆ หน้า คุณสามารถคลิกขวาบน section นั้น (ดูรูปด้านล่าง) แล้วกด Save as Template

นอกจากนี้คุณยังสามารถ save หน้าเว็บทั้งหน้าเก็บไว้เป็นเทมเพลตได้อีกด้วย (ตามรูปด้านล่าง)

ทำให้หน้าเว็บดูดีในทุกๆ ขนาดหน้าจอ

ปัจจุบันคนนิยมท่องเว็บบนมือถือมากกว่าใช้คอมพิวเตอร์

เพราะฉะนั้น หลังจากออกแบบหน้าเว็บเสร็จแล้ว คุณต้องเช็คการแสดงผลบนมือถือด้วยนะครับ ว่าโอเคไหม

ซึ่ง Elementor รองรับตรงนี้อยู่แล้ว ถ้าคุณอยากรู้ว่าหน้าเว็บเวลาดูบนมือถือเป็นยังไง ให้กดสัญลักษณ์จอมอนิเตอร์ (ตามรูปด้านล่าง) แล้วเลือก Mobile

หน้า preview ด้านขวาจะเปลี่ยนเป็นขนาดเท่าจอมือถือ ให้ลองเช็คดูว่าหน้าเว็บมีส่วนไหนแสดงผลแปลกๆ หรือไม่

ข้อดีอย่างนึงของ Elementor คือคุณสามารถกำหนดค่า settings ตามขนาดหน้าจอได้ เช่น

  1. กำหนดให้ตัวอักษรมีขนาด 30 พิกเซล เวลาแสดงผลบนจอคอมพิวเตอร์
  2. กำหนดให้ตัวอักษรมีขนาด 25 พิกเซล เวลาแสดงผลบนมือถือ

ถ้าคุณลองคลิกเลือก section หรือ widget ดู (ตัวไหนก็ได้) คุณจะเป็นว่าค่า settings บางตัวจะมีไอคอนรูปจอมอนิเตอร์, แท็บเล็ต, และมือถือ แสดงอยู่ นั่นแปลว่า settings พวกนี้เราตั้งค่าตามขนาดหน้าจอได้ครับ

การตั้งค่าแสดงผลสำหรับมือถือ ผมแนะนำว่าอย่าทำพร่ำเพรื่อ ให้ทำกับเฉพาะส่วนที่แสดงผลแปลกๆ เวลาดูบนมือถือเท่านั้นนะครับ (ถ้าส่วนไหนแสดงผลปกติก็อย่าไปเสียเวลากับมันครับ)

สรุป: การสร้างเว็บเพจ/ออกแบบหน้าเว็บ แบบมืออาชีพ

การสร้างเว็บเพจสวยๆ ไม่ยากอย่างที่คิดใช่ไหมครับ

สิ่งที่คุณต้องทำก็คือ

  1. ลอง import เทมเพลตที่คุณถูกใจมาศึกษาดูหลายๆ อัน สังเกตุว่าเค้าจัดโครงสร้างหน้าเพจยังไง ลงกดดู widgets ต่างๆ ว่ามีการตั้งค่า settings อะไรบ้าง
  2. ลองออกแบบหน้าเว็บที่ต้องการบนกระดาษดู และพยายามใช้ Elementor สร้างเว็บเพจให้ได้แบบนั้น
  3. เสร็จแล้วให้เช็คการแสดงผลบนมือถือ ถ้ามีส่วนไหนที่แสดงผลแปลกๆ ให้ตั้งค่า settings สำหรับแสดงผลบนมือถือให้เหมาะสม

ถึงแม้ตอนนี้คุณจะยังออกแบบหน้าเว็บสวยๆ ไม่ได้ (เพราะยังใช้ Elementor ไม่คล่อง) ก็อย่าท้อใจไปครับ

อย่างน้อยคุณก็รู้แล้วว่าพวกนักออกแบบเว็บไซต์เค้าใช้เครื่องมืออะไร

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

และถ้าผู้อ่านอยากเรียนวิธีใช้งาน Elementor เพิ่มเติม ผู้อ่านสามารถเปิดดู วิดีโอสอนการใช้งานบน YouTube ได้ครับ

หวังว่าบทความนี้จะเป็นประโยชน์กับผู้อ่านนะครับ

3 thoughts on “สร้างและออกแบบเว็บเพจ แบบมืออาชีพ (ด้วย WordPress Page Builder)”

  1. ขอรบกวนสอบถามหน่อยค่ะ
    ลาก widgets มาใส่ใน section ไม่ได้เลยค่ะ มันขึ้น วงกลมสีแดงแล้วมีขีดคาดทับ ไม่ทราบว่าแก้ไขได้อย่างไรหรอคะ ลองถอนการติดตั้งแล้วโหลดใหม่ก็ยังเป็นเหมือนเดิมค่ะ

    ตอบกลับ
    • คือเป็นกับ widget ทุกตัวเลยใช่ไหมครับ ไม่ทราบว่าใช้ browser อะไรครับ ผมอ่านเจอว่าถ้าใช้ Microsoft Edge แล้วอาจมีปัญหานี้ ถ้าใช้ Edge อยู่ลองเปลี่ยนไปใช้ Google Chrome ดูครับ

      ตอบกลับ
  2. ขอบคุณมากค่ะ มีประโยชน์สำหรับมือใหม่ หัดเรียนรู้มากค่ะ
    ทำ content ดีๆ แบบนี้บ่อยๆ นะคะ
    เป็นกำลังใจให้ค่ะ

    ตอบกลับ

Leave a Comment