03 ปรับแต่ง/แก้ไข หน้าหลัก (Home)

Noted : ไม่แนะนำให้ปรับแต่งหรือแก้ไขหน้าอื่น ๆ

1. ไปที่เมนูซ้ายมือ Pages > All Pages
2. ค้นหาหน้า Home เท่านั้น

3. นำเมาส์ไป hover ที่รายการ home และคลิก > edit with elementor

หลักการทำงานที่ทีมเขียนไว้ให้ตัวหน้า home สามารถปรับแต่งได้จะมีรูปแบบเป็น Block Section

5. กรณีที่ต้องการแก้ไขส่วนไหนให้คลิกไปที่ section นั้นๆ แล้วดูที่แถบเครื่องมือ Option ซ้ายมือ (ยกตัวอย่างเช่นภาพด้านล่าง)

6. กรณีที่ต้องการเพิ่ม Block Section เพิ่มเติมให้คลิกดูเครื่องหมาย +

7. เครื่องมือหรือ Section ที่สามารถเพิ่มได้จะมีทั้งแบบ Block Section ทั่วไปและแบบปรับแต่งมาแล้ว ดูได้จากแถบซ้ายมือ กรณีที่ต้องการเพิ่มอันไหน สามารถเลือกและล่างไปพื้นที่หรือตำแหน่งที่ต้องการด้านขวาได้เลย

8. ทุกครั้งที่มีการปรับแต่งหรือปรับเปลี่ยนสามารถเลือกดูพรีวิวก่อนอัพเดทจริงได้ที่ icon ลูกตา / และเมื่อเรียบร้อยแล้วให้กดปุ่ม Update

Noted: กรณีที่ไม่เข้าใจหรือนึกภาพ ทำไม่ถูกต้อง แนะนำให้ถามก่อนได้เลยนะครับ จะได้ช่วยแนะนำได้ เพราะมันมีวิธีการหรือการปรับแต่งได้หลากหลายแบบครับ

---

โครงสร้างของ Elementor

1. พื้นที่สร้างเว็บไซต์สามารถใส่เนื้อหาและจัดรูปแบบเว็บไซต์โดยใช้Widget ต่างๆ
2. เครื่องมือสําหรับใส่เนื้อหาและจัดรูปแบบเว็บไซต์ ( Widget )
3. Responsive View = ดูรูปแบบเว็บไซต์ในขนาดหน้าจออื่นๆ เช่น Desktop, Tablet หรือ Mobile
4. Preview Website = แสดงตัวอย่างเว็บไซต์
5. ปุ่ม Update&Publish = บันทึกและเผยแพร่เว็บไซต์

การเพิ่ม Section และการแบ่ง Column

Section คือ รูปแบบโครงสร้างของหน้าเว็บแต่ละส่วนเป็นแถวแนวยาว ซึ่งก่อนที่จะเพิ่มเนื้อหาในเว็บไซต์ ต้องสร้าง Section เพื่อจัดรูปแบบของตําแหน่งเนื้อหา ดังตัวอย่างรูปด้านล่างมี 1 sections และมี 2 คอลัมน์

การใช้ Widget สำหรับใส่เนื้อหาเว็บไซต์

Widgets คือ ชุดเครื่องมือสําหรับใส่เนื้อหา องค์ประกอบต่างๆ และปรับแต่งเว็บไซต์ให้สวยงาม แบ่งเป็นประเภท ต่างๆ เช่น ข้อความ, รูปภาพ, ปุ่ม, วิดีโอ, ฯลฯ ซึ่งก่อนจะใส่ Widget ลงไปในเว็บไซต์ ให้สร้าง section ขึ้นมาก่อน ตามขั้นตอนก่อนหน้านี้ Widgets ทั้งหมดจะอยู่ในแถบ Elements ด้านซ้ายมือ

สามารถลาก widget ที่ต้องการใช้งานโดยการคลิกที่ widget จากแถบ Elements ด้านซ้ายมือมาวางในคอลัมน์ที่ต้องการ

หลังจากใส่ widget ให้ดูเมนูด้านซ้ายมือ จะเห็น settings สําหรับปรับแต่ง widget นั้น ซึ่งจะประกอบไปด้วยแถบ

1. Content = สําหรับตั้งค่าในส่วนของเนื้อหาของ widget นั้นๆ

2. Style = กําหนดรูปแบบ เช่น สี,ขนาดตัวอักษร,สีพื้นหลังเป็นต้น

3. Advanced = เกี่ยวกับการกําหนด layout (หากไม่เห็น settings ให้คลิกเลือก widget ที่ลากมาวางใน Section อีกครั้ง)

แนะนำ Elementor Widgets

Heading
สําหรับใส่หัวข้อ ชื่อเรื่อง พาดหัวหรือข้อความที่เราต้องการเน้นหรือทําให้ดูน่าสนใจ

Text Editor สําหรับใส่ข้อความหรือเนื้อหาต่างๆ

Image สําหรับใส่รูปภาพ

Image size = ปรับขนาดรูปภาพ
Aligment = ปรับตําแหน่งของรูปภาพ
Link = ใส่ลิงค์ให้รูปภาพ

Video สําหรับใส่วิดีโอ

Basic Gallery สําหรับการแทรกรูปภาพเป็นแกลลอรี่

Button สร้างปุ่มสําหรับใส่ลิงก์เชื่อมโยงไปยังหน้าอื่นๆ

การบันทึกและเผยแพร่หน้าเว็บไซต์

ออกจากการใช้งาน Elementor

การออกจากการใช้งาน Elementor เพื่อกลับไปยังหน้าระบบหลังบ้านของ WordPress สามารถทําได้
โดยการคลิกที่ปุ่ม Hamburger Menu มุมบนซ้ายและคลิกที่ EXIT TO DASHBOARD