How to manage CTC

How to manage CTC

วิธีการใช้งานเว็บไซต์ CTC.co.th จะเรียงลำดับจากง่ายไปยาก แนะนำให้อ่านคำอธิบายด้านล่างของ Video ก่อน แล้วค่อยเปิด Video ดูทีละขั้นตอน

วิธีแก้ไขข้อมูลในหน้าเว็บไซต์


  1. ไปที่เมนู Pages > All Pages แล้วเลือกหน้าที่ต้องการแก้ไข
  2. ข้อมูลของเว็บจะอยู่ที่ ” Visual Composer “
  3. เมื่อนำเมาส์ไปวางที่ส่วนต่างๆ ของ ” Visual Composer ” บริเวณที่เราต้องการแก้ไข จะมีไอคอนสีเขียวแสดง สำหรับ Edit, Clone และ Delete
  4. เนื้อหาส่วนต่างๆ สามารถ ลาก วาง เพื่อย้ายตำแหน่งได้ตามต้องการ
  5. หากต้องการแก้ไขเนื้อหา สามารถคลิก Edit เพื่อเข้าแก้ไขเนื้อหาในส่วนนั้นๆ ได้ตามต้องการ
  6. กดปุ่ม Preview Changes หรือปุ่ม Preview หากต้องการดูการเปลี่ยนแปลง
  7. เมื่อแก้ไขเรียบร้อยแล้วให้กดปุ่ม Update

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


  1. คลิก Edit ตรงรูปที่ต้องการแก้ไข
  2. จะแสดงกล่อง ” Single Image settings “
  3. เปลี่ยนรูปได้ที่ Image โดยเลือกรูปเก่าจาก Media Library
  4. หรือเพิ่มรูปใหม่โดยคลิกที่แถบ Upload Files
  5. ช่อง Image size ที่กล่อง ” Single Image settings ” ใส่ขนาดรูปโดยพิมพ์คำว่า “full” หรือขนาดอื่นๆ ตามคำแนะนำด้านล่างช่อง
  6. ตั้งค่าอื่นๆ ได้ที่ช่องข้างล่างเช่น Image link, Image alignment, Image style

วิธีจัดการเนื้อหาแบบแถว (ROW)


  1. ” Visual Composer ” จะแบ่งการจัดการเนื้อหาเป็นแบบ Row เราสามารถส้ราง Row ใหม่ได้โดยกดไอคอน Clone ที่ Row ที่ต้องการ
  2. สามารถกดเครื่อง + เพื่อเพิ่ม element อื่นๆ ที่เราต้องการได้
  3. สามารถแบ่ง Colum ตามต้องการได้จากไอคอนด้านบน-ขวา ของในกล่อง Row
  4. เปลี่ยนสี Backgroud ของ Row คลิกที่ไอคอน ” Edit this row ” เลือก Row style เป็น Stripe 1 โดยเปลี่ยนสีที่ ” Background color “
  5. หากต้องการเพิ่มพื้นที่ด้านบนของ Row ให้มีพื้นที่มากขึ้น ในช่อง Top padding กรอกตัวเลขตามต้องการ
  6. เพิ่มพื้นที่ว่างด้านล่างได้ที่ช่อง ” Bottom padding “
  7. หรือจะเพิ่มพื้นที่ว่างโดยใช้เครื่องมือจาก element ที่ชื่อ Empty Space ตามตัวอย่างในวีดีโอก็ได้

วิธีเปลี่ยน Backgroud ของ ROW ให้เป็นรูป


 

  1. คลิกที่ไอคอน ” Edit this row “
  2. ช่อง ” Background image ” ใส่ URL ของรูปที่ต้องการ
  3. วิธีหา URL ของรูปคือ ไปที่เมนู Media > Library จะแสดงรายชื่อรูปเก่าที่เรามีทั้งหมด ให้คลิกเข้าไปในรูปที่เราต้องการ แล้ว copy URL ของรูปได้ที่ช่อง ” File URL: “
  4. หากต้องการให้ Backgroud แสดงแบบ Parallax ให้เลือก ” Enable parallax “
  5. ปรับความเร็วของการเลื่อนได้ที่ช่อง ” Parallax speed ” โดยใช้ตัวเลข 0.1 – 1

วิธีการแก้ไข Slider Banner หน้า WE


  1. ไปที่เมนู ” Revolution Slider “
  2. ที่ Slider ชื่อ ” Home ” คลิกปุ่ม ” Edit Slides “
  3. จะเจอรายการ Slides ทั้งหมด สามารถลากย้าย เพื่อเรียงลำดับของ Slides ได้
  4. หากต้องเปลี่ยนรูปภาพ ให้คลิกที่รูปภาพเพื่อเปลี่ยนได้เลย
  5. ต้องการเพิ่ม Slide ให้ใช้ปุ่ม ” Duplicate ” จาก Slide ต้นแบบ
  6. หากต้องการแก้ไข ตัวหนังสือ ให้คลิกเข้าไปที่ปุ่ม ” Edit Slide “
  7. สามารถลากย้ายตัวหนังสือ ได้ตามต้องการ
  8. แก้ไขตัวหนังสือได้ที่ช่อง ” Text / Htm “
  9. หากต้องการเปลี่ยนรูปแบบตัวหนังสือ สามารถเลือกได้ที่ช่อง ” Style “
  10. แก้ไขเรียบร้อยแล้วให้กดปุ่ม ” Update Slide “

วิธีการแก้ไขหน้า Intro


 

  1. ไปที่เมนู LayerSlider WP > All Sliders
  2. คลิก Slider ที่ชื่อ ” Intro slider ” เพื่อเข้าแก้ไข
  3. ในแถบ Slides จะแสดงเนื้อหาทั้งหมด สามารถ ลาก-วาง ย้ายตำแหน่งของรูปได้
  4. สามารถเปลี่ยนรูปไอคอนได้ที่แถว Layers ด้านล่าง โดยคลิกที่ Layer ที่ต้องการ แล้วเปลี่ยนรูปที่แถบ Content
  5. ใส่ลิงก์ให้กับรูปได้ที่แถบ Link
  6. หากต้องการเปลี่ยน Backgroud ให้คลิกที่แถบ ” Slider Settings ” ด้านบน
  7. เปลี่ยนรูป Backgroud ได้ที่แถบ Appearance
  8. เมื่อแก้ไขเรียบร้อยแล้ว กดปุ่ม ” Save changes “

วิธีการจัดการหน้า DID


  1. เข้าไปที่หน้า DID
  2. ส่วนแสดง Portfolio จะอยู่ที่ ” Portfolio Masonry & Grid ” element คลิก Edit เพื่อดูการตั้งค่า
  3. สามารถเลือกหมวดหมู่ของ Portfolio ได้ที่ “Categories”
  4. ค่าอื่นๆ สามารถเปลี่ยนได้ตามต้องการ

 

ข้อมูลทั้งหมดในหน้า DID จะดึงเนื้อหามาจาก Portfolio วิธีการจัดการ Portfolio ทำดังนี้

  1. ไปที่เมนู Portfolio
  2. คลิกเข้าแก้ไข ในรายการที่ต้องการ
  3. จะมี “Visual Composer” ให้ใช้งานเหมือนหน้า Page สามารถใส่ข้อมูลได้ตามต้องการ
  4. ด้านล่างจะมีกล่อง “Add/Edit Project Media” สามารถใส่รูปของ Project ได้ตามต้องการ ตามตัวอย่างใน Video
  5. โดยสามารถเลือกรูปแบบการแสดงของรูปได้ที่ กล่อง “Media Options”  > “Show media as:”
  6. สามารถเลือกตั้งค่าอื่นๆ ของหน้านี้ได้อีกที่กล่อง “Project Options”
  7. ใสรูปของ Project ได้ที่ “Featured Image” ด้านข้าง ขนาดแนะนำคือ 1000 x 700 pixels

วิธีการจัดการ Portfolio Categories


 

  1. ไปที่เมนู Portfolio > Portfolio Categories
  2. Add Edit Delete ได้ตามต้องการ
  3. ไปที่เมนู Portfolio คลิกเข้าไปที่ Project ที่ต้องการแก้ไข
  4. เลือกหมวดหมู่ได้ที่กล่อง “Portfolio Categories” ด้านข้าง

วิธีการจัดการหน้า News Feed


 

  1. ไปที่หน้า News Feed เพื่อแก้ไข
  2. คลิก edit ที่ “Blog Masonry & Grid” เพื่อตั้งค่า
  3. เลือกหมวดหมู่ได้ที่ “Categories”
  4. กำหนดจำนวนของ Post ได้ที่ “Number of posts to show”

 

ข้อมูลทั้งหมดในหน้า News Feed จะดึงเนื้อหามาจาก Posts วิธีการจัดการ Posts ทำดังนี้

  1. ไปที่เมนู Posts > All Posts จะมีรายชื่อของ Posts ทั้งหมด คลิกเข้าแก้ไขในรายการที่ต้องการ
  2. จะมี “Visual Composer” ให้ใช้งานเหมือนหน้า Page สามารถใส่ข้อมูลได้ตามต้องการ
  3. เลือกรูปแบบของ Post ได้ที่กล่อง “Fomat” ซึ่งปกติจะใช้เป็น Standard
  4. เลือกหมวดหมู่ของ Post ได้ที่กล่อง “Categories”
  5. ใส่รูปของ Post ได้ที่ “Featured Image” ขนาดแนะนำคือ 1000 x 700 pixels

วิธีการจัดการ Post Categories


 

  1. ไปที่เมนู Posts > Categories
  2. สร้างหรือแก้ไข Categories ได้ตามต้องการ
  3. ไปที่เมนู Posts > All Posts เพื่อเข้าแก้ไข Post ที่ต้องการ
  4. เลือกหมวดหมู่ได้ที่กล่อง “Categories”

วิธีการตั้งชื่อ Row สำหรับ หน้า WE & DO


หน้า We และ Do จะถือเป็นหน้าพิเศษ (Microsite) แต่ละหน้าจะต้องมีเมนูเป็นของตัวเอง เพื่อที่จะคลิกที่เมนูแล้ว slide มาหา Row ที่กำหนดไว้ได้ ในหน้า We และ Do เราสามารถตั้งชื่อ Row เพื่อให้สอดคล้องกับเมนูได้ โดยใช้วิธีดังนี้

  1. ใน Row ที่ต้องการคลิกที่ไอคอน ” Edit this row “
  2. ตั้งชื่อในช่อง Anchor โดยใช้ภาษาอังกฤษตัวเล็กทั้งหมด

วิธีการจัดการเมนู


  1. ไปที่เมนู Appearance > Menus
  2. ช่อง Select a menu to edit เลือกเมนูชื่อ Main Menu เพื่อจัดการเมนูหลัก
  3. สามารถลาก ย้าย หรือลบ เมนูต่างๆ ได้ตามต้องการ
  4. ด้านซ้ายจะมีกล่องชื่อ Pages สำหรับเลือกหน้าที่เราต้องการมาใส่เป็นเมนู
  5. sub เมนูของ We และ Do จะต้องใส่แบบ custom โดยใช้กล่องชื่อ Links ด้านซ้าย

 

ตัวอย่าง sub เมนูของ We และ Do

เมนูชื่อ History จะใส่ URL แบบเต็มๆ เป็น “http://223.27.215.152/we/#!/history”

โดยจะมี “#!/history” ต่อจากชื่อ page คือ “we/” เพิ่มขึ้นมา โดย “#!/history” จะต้องสอดคล้องกับการตั้งชื่อ Row ของ History เมนูจึงจะใช้งานได้

วิธีการจัดการเมนูสำหรับหน้า We & Do – CTC.co.th


Main Menu จะมีผลกับทุกหน้าเว็บ ยกเว้นหน้า We และ Do ที่จะต้องมีเมนูเฉพาะสำหรับ 2 หน้านี้ วิธีการจัดการเมนู We และ Do คือ

  1. ช่อง Select a menu to edit สามารถเลือกเมนูชื่อ Do Menu หรือ We Menu เพื่อเข้าจัดการได้
  2. เช่น เลือกแก้ไข We Menu ส่วน sub menu ของ We จะใส่ URL เป็นแค่ “#!/history” ไม่ต้องใส่ชื่อ URL เต็มเหมือน Main Menu
  3. ส่วนอื่นๆ นอกเหนือจากนี้ จะทำเหมือน Main Menu ทุกอย่าง

วิธีสร้าง Page ใหม่


 

  1. ไปที่เมนู Pages > Add New
  2. ตั้งชื่อหน้าตามต้องการ
  3. สามารถสร้างเนื้อหาได้เองแบบเริ่มใหม่ทั้งหมด โดยคลิกที่ปุ่ม “BACKEND EDITOR” แล้วเพิ่ม Element หรือ Row
  4. หรือ เลือก copy โค้ดมาจาก page เก่า แล้วนำมาดัดแปลง โดยให้ไปที่หน้าต้นแบบที่เราต้องการ เลือก “CLASSIC MODE” แล้วเลือกแถบ “Text”
  5. copy โค้ดทั้งหมด แล้วนำไปใส่ในหน้าใหม่ โดยใส่ที่ “CLASSIC MODE” และแถบ “Text” เช่นเดียวกัน
  6. หลังจากนั้นสลับจาก “CLASSIC MODE” มาเป็น  “BACKEND EDITOR” ลาก ย้าย หรือแก้ไข เนื้อหาได้ตามต้องการ
  7. sidebar ด้านข้าง ให้ตั้งค่าต่างๆ ให้เหมือนหน้า page ต้นแบบด้วย
  8. หากไม่ต้องการให้หน้านี้มีระบบ Comment ที่กล่อง Discussion ด้านล่าง ไม่ต้องเลือก Allow comments. และ Allow trackbacks and pingbacks on this page.
  9. สามารถกำหนดชื่อ URL เองได้ โดยคลิก Edit ที่ “Permalink”
  10. ข้อ 7-9 ไม่สามารถกดปุ่ม Preview เพื่อดูการแสดงได้ ต้องกดปุ่ม Publish หรือ Update ก่อนจึงจะ Preview ผลการแก้ไขดูได้

วิธีสร้างหน้าพิเศษแบบหน้า We หรือหน้า Do


 

  1. ทำตามวิธีการสร้าง Page ใหม่ตามด้านบน โดยใช้หน้า We หรือ Do เป็นต้นแบบ
  2. ตรง sidebar ที่กล่อง Page Attributes ให้เลือก Template เป็น Microsite
  3. จะมีกล่อง Microsite แสดงเพิ่มขึ้นมา ให้ตั้งค่าทุกอย่าง ให้เหมือนหน้าต้นแบบทั้งหมด

สร้างเมนูใหม่ให้กับหน้าพิเศษ (Microsite)


 

หน้า Microsite ถ้าต้องการให้คลิกที่เมนูแล้วเลื่อนลงมาหา Row เราต้องสร้างเมนูเฉพาะให้กับหน้านี้ต่างหาก วิธีคือ

  1. ไปที่เมนู Appearance > Menus
  2. คลิกที่ “create a new menu”
  3. ตั้งชื่อตามต้องการ แล้วกดปุ่ม “Create Menu”
  4. จัดการเมนูตามหัวข้อ “วิธีการจัดการเมนู” และ “วิธีการจัดการเมนูสำหรับหน้า WE & DO” ด้านบน
  5. เมื่อเรียบร้อยแล้ว กลับมาที่หน้าพิเศษ ตรงกล่อง Microsite ช่อง Primary menu ให้เลือกเมนูใหม่ที่ได้สร้างไว้

วิธีการตั้งค่า Font และ ขนาด


 

  1. ไปที่เมนู Theme Options > Fonts
  2. เลือก font พื้นฐานของเว็บไซต์ที่ช่อง “Choose basic font-family”
  3. ปรับขนาดต่างๆ ได้ตามต้องการ
  4. ด้านล่างสามารถปรับขนาดของ Heading 1 – Heading 6 ได้ตามต้องการ
  5. หากต้องการให้แสดงเป็นตัวพิมพ์ใหญ่ทั้งหมด ให้เลือกเป็น Uppercase ใน Heading ที่ต้องการ
  6. โดย H1 – H6 จะไม่สามารถแก้ไข Font-family ได้ เนื่องจากได้ผ่านการ Customize ให้มีค่าเริ่มต้นเป็น “NexaHeavy” แล้ว

การตั้งค่า Font ในหน้า Page โดยการใส่ shortcode


 

ค่าเริ่มต้นของ font (body) ทั่วไปคือ Ubantu ส่วนของ Heading คือ NexaHeavy โดยไม่ต้องใส่ shortcode เพิ่มเติม แต่หากต้องการเปลี่ยนชนิดของ font ในส่วนที่ต้องการให้ทำดังนี้

  1. ไปที่หน้า test ซึ่งได้ทำตัวอย่างการกำหนด font ด้วย shortcode ไว้แล้ว
  2. ใส่ shortcode รูปแบบนี้ [div class=”th”]xxx[end-div] ก็จะได้ font ตามต้องการ โดย
  3. class=”th” คือ ThaiSans Neue SemBd
  4. class=”nexa” คือ NexaHeavy
  5. class=”cordia” คือ CordiaUPC

ระบบ 2 ภาษา วิธีการเพิ่มหน้า ภาษาไทย


 

  1. เข้าไปยังหน้า ภาษาอังกฤษ ที่ต้องการ
  2. ที่กล่อง Language ในช่อง Translate yourself ให้เลือก Duplicate ตรงภาษา Thai
  3. ปุ่ม “Duplicate” จะแสดงขึ้นมา ให้กดปุ่ม “Duplicate” เพื่อสร้างหน้าสำหรับภาษาไทย
  4. ช่อง Translate yourself จะหายไป แสดงว่าหน้าภาษาไทยได้ถูกสร้างแล้ว
  5. หากต้องการเข้าจัดการหน้าภาษาไทย ให้ใช้ปุ่มสลับภาษา รูปธงชาติไทยด้านบน
  6. จะแสดงหน้าภาษาไทย โดยเนื้อหาภาษาอังกฤษจะถูก copy มาทั้งหมด สามารถแก้ไขเนื้อหาเป็นภาษาไทยได้ตามต้องการ
  7. เมื่อแก้ไขเสร็จแล้วกดปุ่ม Update

ระบบ 2 ภาษา วิธีการจัดการเมนู ภาษาไทย


 

ก่อนสร้างเมนูภาษาไทย ควรสร้างหน้า Page ภาษาไทยให้ครบทุกหน้าก่อน

  1. ไปที่เมนู Appearance > Menus (ธงด้านบนเป็นภาษาอังกฤษ)
  2. ที่ช่อง “Select a menu to edit” เลือกเมนู (อังกฤษ) ที่ต้องการ เพื่อเพิ่มเวอร์ชั่นภาษาไทยเข้าไป
  3. คลิกที่เครื่องหมาย + ตรง “Translations: Thai”
  4. ตั้งชื่อให้เมนูภาษาไทย แล้วคลิกปุ่ม “Create Menu” (ธงด้านบนเป็นภาษาไทย)
  5. กล่อง Pages จะแสดง page เวอร์ชั่นภาษาไทยที่เราได้สร้างไว้ทั้งหมดขึ้นมา ให้เลือกมาวางตำแหน่งในเมนูภาษาไทยได้ตามต้องการ วิธีเช่นเดียวกับการจัดการเมนู ภาษาอังกฤษ
  6. ที่ Theme locations ด้านล่าง ให้เลือกรูปแบบของเมนูตามต้นแบบภาษาอังกฤษด้วย
  7. เมื่อเรียบร้อยกด Save Menu
เมนูทุกชุด จะต้องสร้างเวอร์ชั่นภาษาไทยด้วยทุกเมนู จึงจะแสดงผลถูกต้อง

คำแนะนำเพิ่มเติม สำหรับการจัดการ Page


 

  1. ในการสร้าง Page ขึ้นมาใหม่ ให้แน่ใจเสมอว่า การตั้งค่ากล่องต่างๆ ที่ sidebar ตรงกับหน้าต้นแบบ
  2. รวมถึงการตั้งค่ากล่องต่างๆ ด้านล่างให้ตรงกับต้นแบบด้วย เช่น Page Header Options หรือ Discussion
  3. ค่าต่างๆ เหล่านี้ ให้ตั้งค่าเฉพาะเวอร์ชั่นภาษาอังกฤษอย่างเดียว

วิธีการแก้ไข Logo


 

  1. ไปที่เมนู Theme Options > Branding
  2. เลือกจัดการ Logo ในตำแหน่งต่างๆ ของเว็บไซต์ ได้ตามต้องการ โดยใช้รูป .png ที่จัดขนาดมาเรียบร้อยแล้ว
  3. หากต้องการให้โลโก้คมชัดในจอ retina ให้เตรียมโลโก้ .png ขนาดใหญ่กว่าปกติ 2 เท่า นำมาใส่ในช่อง High-DPI (retina) logo
การตั้งค่าในส่วน Theme Options อื่นๆ หรือการใช้งานในส่วนอื่นๆ ของเว็บไซต์ที่นอกเหนือจากนี้ สามารถดูได้ใน User Guide ของ Theme