การจัดการเว็บ Thor Chops

การจัดการเว็บ Thor Chops

วีดีโอสอนการจัดการเนื้อหาต่างๆ ของเว็บไซต์ อย่างละเอียด พร้อมรายการอธิบายทีละขั้นตอน

การแก้ไขเนื้อหา Home, About, Service, Team และ  Contact

เว็บไซต์จะแสดงในรูปแบบของ One page parallax เมื่อคลิกตามเมนูต่างๆ ก็จะเลื่อนลงมาที่เนื้อหานั้นๆ ครับ เพราะฉะนั้นในส่วนของ Home, About, Service, Team และ  Contact สามารถเข้าแก้ไขได้ที่หน้าเดียวกันเลยครับ คือหน้า Home

  1. ไปที่เมนู All Pages แล้วคลิก Edit ที่หน้า Home
  2. จะปรากฎกล่องการใช้งานของ Visual Composer ช่วยให้การทำงานง่ายขึ้น ในลักษณะลากวางเนื้อหาแต่ละส่วนได้ตามต้องการ
  3. กรณีต้องการแก้ไข Text ก็คลิกที่เครื่องหมายดินสอ ในกล่อง Text Block ที่เราต้องการ
  4. สามารถ Copy Text Block  ได้ ด้วยการคลิกที่เครื่องหมาย Clone Text Block
  5. หรือต้องการลบทิ้งก็คลิกที่เครื่องหมายถังขยะ
  6. สามารถลากวาง Text Block ไปยังตำแหน่งต่างๆ ที่ต้องการได้
  7. ในการจัดการให้กดปุ่ม Preview Changes เพื่อดูหน้าตาของเว็บไซต์ที่เราได้แก้ไขไป (ห้ามกดปุ่ม Update)
  8. เมื่อแก้ไขหน้านี้เสร็จแล้วทั้งหมด จึงกดปุ่ม Update

การจัดการรูปภาพในเนื้อหา

  1. หากต้องการเพิ่มรูปภาพ จะใช้เครื่องมือที่เรียกว่า Image Block
  2. คลิกที่เครื่องหมายบวกในกล่อง Column ที่ต้องการ จะแสดงหน้าต่างชุดของเครื่องมือต่างๆ ให้เราเลือกใช้งาน ให้เลือก Image Block
  3. เลือกรูปที่ต้องการตรง Image
  4. จะแสดงกล่องหน้าต่าง Media library ที่เก็บรูปของเว็บไซต์ทั้งหมดไว้ สามารถเลือกรูปเก่าใช้งานได้จากที่นี่
  5. สามารถจัดตำแหน่งให้ ซ้าย ขวา กลาง ได้ที่ช่อง Alignment
  6. หากต้องการให้คลิกที่รูปแล้วแสดงเป็น Pouup รูปใหญ่ขึ้นมาให้เลือก Lightbox เป็น Yes
  7. หากต้องการให้รูปลิงก์ไปยังหน้าเว็บไซต์อื่นๆ ที่ช่อง Link To Image ? ให้เลือกเป็น Yes
  8. ใส่ URL ที่ต้องการได้ที่ช่อง Link URL
  9. หากต้องการเลือกรูปใหม่จากเครื่องคอมของตัวเอง ในส่วนของ Media library ให้คลิกที่แถบ Upload File แล้วเลือกรูปจากในเครื่องได้ตามต้องการ

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

การจัดการ Banner Slider

  1. สามารถแก้ไขได้ที่หน้า Home ในกล่องเครื่องมือ Banner Slider บนสุด
  2. จะมีเครื่องมือ Slide Item เรียงอยู่ 3 แถว ก็คือ 3 Banner นั่นเองครับ
  3. สามารถที่จะเพิ่มหรือลบ Banner ได้ด้วยการคลิกที่ไอคอนถังขยะ หรือไอคอน Clone เช่นเดียวกับเครื่องมืออื่นๆ
  4. หากต้องการแก้ไขรูปหรือข้อความ ให้คลิกที่ไอคอนดินสอ จะแสดงกล่อง  Slide Item Settings
  5. เลือกรูปใหม่ได้ที่ช่อง Background
  6. สามารถใส่ตัวหนังสือได้ที่ช่อง Small Heading และ Big Heading
  7. หากต้องการเปลี่ยนสีตัวหนังสือ สามารถแก้ไขได้ที่แถบ Colors Properties
  8. สามารถแก้ไขขนาดของตัวหนังสือได้ที่แถบ Font Size Properties

ขนาดของรูป Background image 1920 x 1080px หรือใกล้เคียง

การจัดการแก้ไข Blog

  1. ไปที่เมนู Posts > All Posts
  2. คลิก Edit ในบทความที่ต้องการแก้ไข
  3. จะมีวิธีการจัดการด้วยเครื่องมือ Visual Composer เช่นเดียวกับหน้า Home ครับ สามารถแก้ไขเนื้อหา และรูปภาพได้ตามต้องการ
  4. ด้านขวามือ ที่กล่อง Format ให้เลือกเป็น Standard
  5. กล่อง Categories ให้เลือกหมวดหมู่ของบทความได้ตามต้องการ ในตัวอย่างจะเลือกที่ Blog
  6. ใส่รูปหลักของบทความที่ Featured Image ด้วยครับ

ขนาดของรูป Featured Image 1920 x 800px โดยประมาณ
รูป Featured Image จะถูกแสดงที่หน้ารวมของ Blog และแสดงเป็น Heading Banner ของบทความครับ

การสร้างหน้า Blog ใหม่

  1. เลือก Copy โค้ดโดยเข้าไปที่หน้าต้นแบบที่เราต้องการ
  2. คลิกที่ปุ่ม CLASSIC MODE จะแสดงกล่อง Visual
  3. ให้ Copy โค้ดทั้งหมดเก็บไว้
  4. ไปที่เมนู Posts > Add New  เพื่อสร้างหน้าใหม่
  5. ตั้งชื่อบทความตามต้องการ
  6. ใน CLASSIC MODE นำโค้ดมาปล่อยลงในกล่อง Visual
  7. จากนั้นให้คลิกที่ปุ่ม BACKEND EDITOR จะสลับไปแสดงหน้าตาของ Visual Composer
  8. หลังจากนั้นก็สามารถจัดการกับเนื้อหา ด้วยวิธีเดียวกันกับการแก้ไข Blog

การสร้างหน้า Blog แบบใส่คลิป YouTube

  1. ไปที่เมนู Posts > Add New  เพื่อสร้างหน้าใหม่
  2. ตั้งชื่อบทความตามต้องการ
  3. ด้านขวามือตรงกล่อง Format เลือกเป็น Video
  4. กล่อง Categories เลือกหมวดหมู่เป็น Video
  5. Copy URL คลิปของ YouTube ที่ต้องการมาใส่ที่ช่อง Video URL
  6. กดปุ่ม Publish

การจัดการหน้า Garage

  1. ไปที่เมนู Pages > All Pages คลิก Edit ที่หน้า Garage
  2. จะแสดงกล่อง Visual Composer เช่นเดียวกับหน้า Home
  3. หากต้องการจัดการรูป Gallery ให้คลิกที่เครื่องหมายดินสอที่กล่องเครื่องมือ Gallery
  4. เพิ่มรูป ลบรูปได้ที่ช่อง Image สามารถลากวางลำดับของรูปได้ตามต้องการ
  5. ช่อง Column  เลือกจำนวนได้ตามต้องการ

ขนาดของรูปใน Gallery ความกว้าง 1000px โดยประมาณ ความสูงตามสัดส่วน

วิธีการเพิ่มผลงานหน้า Work

ใช้วิธีเดียวกันกับ “การสร้างหน้า Blog ใหม่” ครับ คือการ Copy โค้ดมาจากหน้าต้นแบบที่ต้องการ

  1. ไปที่เมนู Portfolio > All Items เลือกเข้าหน้าต้นแบบที่ต้องการ
  2. คลิกที่ปุ่ม CLASSIC MODE จะแสดงกล่อง Visual
  3. Copy โค้ดทั้งหมด แล้วนำไปวางในหน้าใหม่ที่กล่อง Visual
  4. จากนั้นให้คลิกที่ปุ่ม BACKEND EDITOR สลับไปแสดงหน้าตาของ Visual Composer เพื่อแก้ไขเนื้อหาตามต้องการ
  5. เลือกหมวดหมู่ที่กล่อง Categories
  6. ใส่รูปหลักที่กล่อง Featured Image

ขนาดของรูป Portfolio ความกว้าง 1000px โดยประมาณ ความสูงตามสัดส่วน

วิธีเปลี่ยนรูป Heading Banner ในหน้าต่างๆ

เราสามารถเปลี่ยนรูป Banner ในหน้าต่างๆ ได้ครับเช่นหน้า Garage, Bike, Car และในหน้าผลงานของ Work

  1. ไปที่หน้าที่ต้องการแก้ไข
  2. ไปที่ด้านล่างตรงกล่อง Option
  3. คลิกที่แถบ Title Wrapper แล้วเลือกรูปที่ต้องการมาใส่ที่ช่อง Title Background ครับ

ขนากของรูป  Bammer 1920 x 800px โดยประมาณ

ส่วนพิเศษเพิ่มเติม