หมวด: Page Builder
ฮิต: 431

การดึงข้อมูลจาก Article ส่วนอื่นๆ โดยใช้ Articles 

 

  1. เพิ่ม Addon แล้วเลือก General >> Articles
    Article เป็นการดึงเนื้อหา Article ต่างๆในระบบหลังบ้านขึ้นมาแสดงบนหน้าเว็บโดยลิงค์ไปที่ Article นั้นๆ
    เลือกหมวด General แล้วเลือก Article เพื่อดึงข้อมูล Content Article มาแสดงผล


  2. การกำหนด Article สามารถกำหนดชื่อหัวข้อที่  Title  และสำหรับการกำหนดให้ดึงข้อมูลจากหน้า Article อื่นๆ ได้โดยเลือก Select Catagory แล้วกำหนดรูปแบบที่ต้องการ


    Article จะเป็นแหล่งหน้าเว็บไซต์ต่างๆที่เพิ่มคอนเท้นค์ต่างๆบนนั้น
    การตั้งค่าใช้งาน Article สามารถกำหนดเลือกใช้ Category ให้ดึงข้อมูลออกมาได้



  3. ส่วนนี้จะส่วนการกำหนดการแสดงผลของ Article ที่แสดงว่าจะให้ดึงข้อมูลจำนวน กี่ Aricle และจะใช้ข้อมูลล่าสุดหรือข้อมูลย้อนหลัง เมื่อกำหนดเรียบร้อยแล้ว กด Apply เพื่อบันทึกข้อมูล 


    Article จะเป็นแหล่งหน้าเว็บไซต์ต่างๆที่เพิ่มคอนเท้นค์ต่างๆบนนั้น
    สามารถกำหนดการแสดงผลว่าจะดึงข้อมูล Article มาแสดงสูงสุดได้


  4. เมื่อ Save แล้ว กด Preview เพื่อดูตัวอย่างบนหน้าเว็บไซต์ ก็จะแสดงผล Article ที่ทำการดึงข้อมูล Article จากเมนูอื่นๆมาแสดงผลที่หน้านี้

 

 

 

Article จากส่วนต่างๆมาแสดงบนเว็บไซต์
ตัวอย่างของการดึงข้อมูล Article จากส่วนต่างๆมาแสดง

หมวด: Page Builder
ฮิต: 448

การเพิ่มวิดิโอจากภายในและภายนอก 

 

  1. ทำการเลือก addon ที่ชื่อว่า Video โดยเลือก Media >>  Video 
    การเพิ่ม Video เป็นการนำเสนองานวิดิโอหรือพรีเซ้นเตชั่นเพื่ออธิบายเว็บไซต์หรือวิดิโอภายนอกได้
    การเพิ่ม Video บน Page สามารเข้าได้จาก media



  2. ส่วนของ Video สามารถระบุชื่อ Title และนำลิงค์วิดโอจาก Youtube แนบเข้าแสดงผลได้ หรือ จะอัปโหลดวิดิโอเพิ่มเข้าไปได้เช่นกัน 


    Video นำไว้แสดงงานวิดิโอต่างๆบนเว้บไซต์
    สามารถที่ดึงวิดิโอจาก Youtube มาแสดงบนหน้าเว็บไซต์



  3. กรณีที่ต้องการอัปโหลดวิดิโอเลือก Turn on MP4 Video เพื่อทำการตั้งค่า Video โดยสามารถอัพโหลดข้อมูล และ เลือกหน้าปกสำหรับวิดิโอนี้


    สามารถเพิ่มวิดิโอโดยการอัปโหลดวิดิโอได้ด้วยเช่นกัน
    การอัปโหลดวิดิโอ ต้องทำการเปิด Turn on mp4 ก่อนถึงจะทำการอัปโหลดวิดิโอาส่วนตัวได้



  4. ตรงส่วนนี้สามารถที่จะกำหนดให้วิดิโอวนซ้ำ ปิดเสียง หรือ ให้เล่นวิดิโออัตโนมัติได้  หลังจากนั้นกด Apply เพื่อบันทึกข้อมูล 


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


  5. เมื่อกด Save Page  สามารถกด preview เพื่อดูตัวอย่างบนหน้าเว็บไซต์ได้


    Preview เป็นตัวช่วยให้เพื่อตรวจสอบการแสดงผลของหน้าเว็บและกำหนดจัดวางต่างๆ
    สามารถดู Preview เพื่อตรวจสอบตัวอย่างหน้าเว็บไซต์



  6. ตัวอย่างการแสดงผล Video บนหน้าเว็บไซต์โดยใช้ addon 

 

Video นำไว้แสดงงานวิดิโอต่างๆบนเว้บไซต์
ตัวอย่างการใช้งาน Video

 

หมวด: Page Builder
ฮิต: 449

การจัด layout รูปภาพด้วย Image Layout 

  1. เพิ่ม Addon โดย Media >> Image Layout 
    Image layout เป็นส่วนเสริมที่ชอบให้อธิบายของรูปภาพเป็นบล็อกๆ
    การเพิ่มส่วนเสริม Image layout โดยเลือกที่หมวด Media
  2. ระบุชื่อของ Title แล้วเลือกรูปแบบ  Layout ของรูปภาพ ตามลักษณะงานที่ต้องการ

    Image layout เป็นกลุ่มรูปภาพที่อธิบายข้อความรูปภาพดังกล่าว
    การกำหนด Image layout เพื่อตั้งค่าให้เหมาะกับการใช้งาน



  3. สามารถที่จะอัปโหลดรูปภาพ และกำหนดชื่อ alt text สำหรับทำ SEO  


    Image layout เป็นส่วนเสริมที่ชอบให้อธิบายของรูปภาพเป็นบล็อกๆ ที่เชื่อมโยงลิงค์ต่างๆได้ และ อธิบายรูปภาพได้
    การกำหนด Image layout เพื่ออัปโหลดรูปภาพ และกำหนด SEO


  4. สามารถ กำหนด ลิงค์เชื่อมบนรูปภาพ และ ตั้งค่าให้ขึ้น New tab เมื่อกดที่รูปภาพหรือไม่

    Image layout เป็นส่วนเสริมที่ชอบให้อธิบายของรูปภาพเป็นบล็อกๆ
    สามารถตั้งค่าลำดับของรูป ลิงค์เชื่องโยง ได้



  5. ส่วนนี้จะเป็นส่วนที่กำหนด ขนาด ตำแหน่ง ของตัว Layout รูปภาพ

    Image layout เป็นส่วนเสริมที่ชอบให้อธิบายของรูปภาพเป็นบล็อกๆ ที่เชื่อมโยงลิงค์ต่างๆได้ และ อธิบายรูปภาพได้
    สามารถกำหนดและตั้งค่าของรูปแบบของ Image layout ได้ที่หัวข้อนี้


    คำอธิบายรายละเอียดข้อมูลของการตั้งค่า Image layout

     

    1.Admin label  
    2.Select image layout  
    3.Choose your image  
    4.Image desktop order  
    5.Image Click link   
    6. Open link in new tab  
    7. Content order option  
    8.Text Alignment  
    9.Content Vectical Alignment  
    10.Content options  
    11.Text content  
    12.Button  
  6. ส่วนของ Title เป็นกำหนดชื่อของของรูปภาพที่จะแสดงบนหน้าเว็บไซต์ สามารถปรับตำแหน่ง ขนาดรูปแบบฟอนด์ และสีของข้อความได้ 


    Image layout มีกำหนดส่วนที่ระบุชื่อและข้อความของรูปภาพที่แสดงบนหน้าเว็บ
    กำหนดส่วนที่ระบุชื่อและข้อความของรูปภาพที่แสดงบนหน้าเว็บ


  7. Text content เป็นข้อความย่อที่จะปรากฏบน Layout สามารถกำหนดรูปแบบ ขนาด สีของข้อความได้

    Image layout เป็นกลุ่มรูปภาพที่อธิบายข้อความรูปภาพดังกล่าว
    สามารถระบุข้อความที่จะให้แสดงบนหน้าเว็บ



  8. Button ส่วนนี้จะเป็นปุ่มสำหรับใช้งาน สามารถเชื่อมโยงไปยังลิงค์ต่างๆ รวมถึงปรับขนาด สี พื้นหลังของตัวปุ่มได้


    image layout สามารถเพิ่ม ปุ่มกด เพื่อเชื่อมไปยังลิงค์ต่างๆได้
    การตั้งค่าของ Button สามารถกำหนดสีและพื้นหลัง


  9. หลังจากระบุข้อมูลรายละเอียดครบถ้วนแล้ว กด Apply เพื่อบันทึกข้อมูล 

    Image layout เป็นกลุ่มรูปภาพที่อธิบายข้อความรูปภาพดังกล่าว
    กดบันทึก Apply เพื่อบันทึกข้อมูลการตั้งค่า



  10. เมื่อกด Preview บนหน้าเว็บไซต์จะแสดง Layout ตามที่กำหนดลักษณะดังนี้

 

image layout แสดงคำอธิบายของรูปภาพ และจัดวางได้สวยงามมากขึ้น
ตัวอย่างของการใช้งาน image layout

 



 

หมวด: Page Builder
ฮิต: 445

การเพิ่มรูปภาพด้วย Image 

  1. สามารถเพิ่มรูปภาพได้ โดยเลือก Addon >> Media >> image 
    Image เป็นส่วนเสริมที่จัดวางรูปภาพของแถวๆนั้น
    การเลือกใช้ Image สามารถเข้าได้ที่หมวด Media แล้วเลือก Image



  2. กำหนดรายละเอียดข้อมูลให้ครบถ้วนของรูปภาพ แล้วกด Apply เพื่อบันทึก
    Image ส่วนเสริมที่แนบรูปภาพเพื่อจัดวางสวยงาม
    การตั้งค่า Image สามารถกำหนดหัวเรื่องขนาด เส้นขอบ และลิงค์เชื่อมโยงได้


     

     

    Image ส่วนเสริมที่แนบรูปภาพเพื่อจัดวางสวยงาม
    กำหนดหัวข้อ การจัดวาง และเพิ่มลิงค์

     

    คำอธิบายรายละเอียดของ Image addon 
    1.Title ระบุหัวข้อชื่อรูปภาพ
    2.Choose your image อัปโหลดรูปภาพที่ต้องการ
    3.Alt text ข้อความใต้ภาพ
    4.Image position กำหนดตำแหน่งการวางของรูปภาพ
    5.Link  การกำหนดลิงค์เชื่อมโยงภายนอกหรือภายในเว็บไซต์



  3. กด preview เพื่อดูตัวอย่างบนหน้าเว็บไซต์ได้  

 

การเพิ่ม image บนหน้าเว็บไซต์โดยการกด Preview
ตัวอย่างของการเพิ่ม image บนหน้าเว็บไซต์

 

   

หมวด: Page Builder
ฮิต: 413

การเพิ่มข้อความด้วย Text Block

 

  1.  สร้าง Row ตามที่ต้องการ ตัวอย่างนี้ ได้ทำการเลือก Row แบบ 2 คอลลัม
    Text block เป็นส่วนเสริมที่แสดงข้อความเป็นกล่องข้อความพร้อมแนบรูปภาพได้
    สร้าง Row แล้วกำหนดแบ่งตามความต้องการ เพื่อเพิ่ม Text block


  2.  เลือก Addon  >> Content >> Text block

    การเลือกใช้ Text Block ต้องเลือกในส่วนเสริม เพื่อใช้งาน
    เลือกหมวด Content แล้ว เลือก Text Block



  3. กำหนดหัวข้อได้ที่ Title และ ข้อความรายละเอียดข้างใต้หัวข้อ บนส่วนของ Content

    การจัดรูปแบบของตัวอักษร สามารถจัดด้วยได้เครื่องมือที่ติดมาใน page builder
    การตั้งค่า Text Block สามารถกำหนดรูปแบบ ขนาด ความหนา ของตัวอักษรได้



  4. สามารถจัดการตัวอักษรได้ ตั้งแต่ ฟอร์ตตัวหนังสือ ขนาด ความหนา ความกว้างระยะห่างของตัวอักษร 

    Text block เป็นส่วนเสริมที่แสดงข้อความเป็นกล่องข้อความพร้อมแนบรูปภาพได้
    สามารถกำหนดสี และ ระยะห่าง ของตัวอักษรได้




    รายละเอียดคำอธิบายของการปรับขนาด Font 

    1.Content alignment กำหนดการจัดวางตัวอักษร
    2.Content font family กำหนดรูปแบบของตัวอักษร
    3. Content font size  กำหนดขนาดของตัวอักษร
    4.Content line height กำหนดความสูงของตัวอักษร
    5.Content fonts weight กำหนดความกว้างของตัวอักษร

     

     
  5. กด Apply เมื่อต้องการบันทึกข้อมูล 


    กด Apply เพื่อบันทึกข้อมูลของ Text Block ในระบบ
    กด Apply เพื่อบันทึกข้อมูลของ Text Block



  6. กด Preview เพื่อแสดงตัวอย่างการจัดหน้า 

 

Text Block เป็นการจัดรูปแบบของข้อความ เป็นกล่องข้อความ
ตัวอย่างของการใช้งาน Text Block

 

 



 

  1. การเพิ่มหัวข้อด้วย Heading
  2. การจัดหน้าเว็บไซต์ด้วย Template ตามแต่ละประเภท
  3. การสร้างหน้า Page โดยใช้ SP Page builder
  4. คู่มือการใช้งาน Page Builder