วิธีการจัดการเนื้อหาของ mitsdecisions

วิธีการจัดการเนื้อหาของ mitsdecisions

วีดีโอสอนการใช้งานเว็บไซต์ พร้อมรายการอธิบายทีละขั้นตอน เพื่อจัดการเนื้อหาในส่วนต่างๆ คือ การแก้ไขเนื้อหาหน้า Home การจัดการรูปภาพ  การเปลี่ยนรูปและสีของ Backgroud การจัดการ Portfolio การจัดการ Blog และการแก้ไข Slide Banner

การแก้ไขเนื้อหาหน้า Home

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

การจัดการรูปภาพในหน้า  Home

  1. หากต้องการเพิ่มรูปภาพ จะใช้เครื่องมือที่เรียกว่า Single Image
  2. คลิกที่เครื่องหมายบวกในกล่อง Column ที่ต้องการ จะแสดงหน้าต่างชุดของเครื่องมือต่างๆ ให้เราเลือกใช้งาน ให้เลือก Single Image
  3. เลือกรูปที่ต้องการตรง Select image from media library
  4. จะแสดงกล่องหน้าต่าง Media library ที่เก็บรูปของเว็บไซต์ทั้งหมดไว้ สามารถเลือกรูปเก่าใช้งานได้ที่นี่
  5. ช่อง Image size ใส่ขนาดตามต้องการ ให้ใส่คำว่า “thumbnail”, “medium”, “large”, “full”
  6. ช่อง On click action สามารถเลือกได้หลายอย่าง เช่นให้แสดงเป็น Pouup หรือลิงก์ไป URL หน้าอื่นๆ ตามตัวอย่างในวีดีโอ
  7. หากต้องการเลือกรูปใหม่จากเครื่องคอมของตัวเอง ในส่วนของ Media library ให้คลิกที่แถบ Upload File แล้วเลือกรูปจากในเครื่องได้ตามต้องการ

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

การเปลี่ยนรูปภาพ และสีของ Backgroud ในแต่ละ Row

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

  1. คลิกที่เครื่องหมายดินสอของ Row ที่ต้องการแก้
  2. ที่ช่อง Background image ให้ใส่ URL ของรูปที่เราต้องการ
  3. วิธีหา URL คือ ไปที่เมนู Media > Library (เปิดเป็นหน้าต่างใหม่) หากต้องการเพิ่มรูปใหม่ให้ใช้เมนู Media > Add New แทน
  4. ค้นหารูป แล้วคลิก Edit รูปที่ต้องการจะใช้
  5. Copy URL ที่ช่อง File URL: แล้วนำไปใส่ที่ช่อง Background image ของ Row
  6. ถ้าต้องการให้ Background เป็นสี ก็สามารถเอา Background image ออกได้ แล้วเลือกสีได้ตามต้องการที่ช่อง Background color

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

 การจัดการ Portfolio

  1.  ไปที่เมนู Portfolio > Portfolio
  2. คลิก Edit Portfolio ที่ต้องการแก้ไข
  3. สามารถแก้ไขเนื้อหาคำอธิบายได้ที่ช่อง Visual
  4. ใส่รูปหลักที่กล่อง Featured Image
  5. เลือกรูปอื่นๆ มาใส่ได้ที่กล่อง Add/Edit Project Media
  6. Page Header Option ให้เลือกเป็น Hide page title
  7. Media Option ตรง Layout settings: ให้เลือกเป็น Media after content area
  8. Show media as: เลือกเป็น Gallery
  9. Columns เลือกตัวเลขได้ตามต้องการ ปกติจะเลือกเป็น 3 กรณีที่มีรูปน้อยจะเลือกเป็น 2
  10. หากติ๊กที่ Make first image large: รูปแรกจะแสดงเป็นรูปใหญ่
  11. Sidebar Option เลือก Disabled

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

ในส่วนของ Media Option ก็สามารถเลือก Option การแสดงผลได้ตามต้องการครับ โดยค่าที่แนะนำไว้เป็นค่าที่ตั้งมาตราฐานสำหรับการทำงานไว้

ในกรณีที่ต้องการเพิ่ม Portfolio ใหม่ ให้ไปที่เมนู Portfolio > Add New แล้วทำตามขั้นตอนเดิมทุกอย่างครับ

 การจัดการ Blog

  1.  ไปที่เมนู Post > All Posts แล้วเลือก Edit Post ที่ต้องการแก้ไข
  2. เมื่อเข้ามาเราก็จะเจอ Visual Composer ที่มีหน้าตาการจัดการเหมือนกับหน้า Home ครับ
  3. วิธีการจัดการแก้ไขเนื้อหาก็เช่นเดียวกันกับหน้า Home ครับ
  4. เพิ่มขึ้นมาคือการตั้งค่า ต้องเลือกรูปใส่ที่กล่อง Feature Image เสมอ
  5. กล่อง Categories เลือกเป็น Blog
  6. Sidebar position: เลือก Right
  7. Page Header Options เลือก Show page title

หากต้องการเพิ่ม Blog ใหม่ ให้ไปที่เมนู Post > Add New แล้วทำตามขั้นตอนเดิมครับ

ขนาดของรูป Feature Image ความกว้าง 1200px  โดยประมาณ

 การจัดการ Slider Banner

  1.  ไปที่เมนู Slider Revolution
  2. คลิกที่ Slider ชื่อ home เพื่อแก้ไข
  3. คลิกที่รูปของ Slide ที่เราต้องการแก้ไข
  4. หากต้องการเปลี่ยนตัวหนังสือ ก็ Double Click เพื่อแก้ไขได้เลย
  5. สามารถลากวางตัวหนังสือ ไปตำแหน่งอื่นได้ตามต้องการ
  6. ถ้าต้องการเปลี่ยนรูป Background ให้คลิกที่ปุ่ม Change Image ตรงตำแหน่ง Main / Background Image
  7. เมื่อแก้ไขเรียบร้อยให้คลิกที่ปุ่มสีเขียว Save Slide ก่อนจะไปแก้ไข Slide ตัวอื่น
  8. สามารถสร้าง Slide เพิ่มได้ด้วยการคลิกที่เมนู Duplicate ของ Slide ต้นแบบ
  9. สามารถลากวางสลับตำแหน่งของ Slide ได้ตามต้องการ

ขนาดของรูปของ Slider 1920 x 1080px โดยประมาณ

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