มีเว็บง่ายๆ ได้แล้ว! วันนี้! กับ Hitztheme เทมเพลตจูมล่า ภาษาไทย รองรับมือถือ 

     ท่านสามารถทำการปรับขนาดของคอลัมน์ Module ในแต่ละตำแหน่งได้ง่ายๆ โดยขอเน้นว่า ให้ปรับในขนาดของ lg ซึ่งเป็นขนาดสำหรับ PC หรือ ถ้าต้องการขนาดในส่วน tablets (แท็บเล็ต) แนวนอน ให้ปรับในส่วน md เท่านั้น ส่วนขนาดที่เล็กกว่าเช่น xs หรือ sm ไม่จำเป็นต้องปรับ เพราะ เทมเพลตที่เราออกแบบมานั้นกำหนด CSS สำหรับ Mobile ไว้ให้อยู่แล้ว

 

<div id="logo" class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
     <jdoc:include type="modules" name="logo" style="xhtml" />
</div>

 

จากตัวอย่าง ท่านจะเห็นว่า ใน class ที่ส่วน lg นั้นกำหนดไว้ที่ col-lg-3 เราสามารถแก้ไขตัวเลขเพื่อปรับขนาดได้ อาทิเช่น ปรับให้เป็น col-lg-5

 

<div id="logo" class="col-xs-12 col-sm-12 col-md-3 col-lg-5">
     <jdoc:include type="modules" name="logo" style="xhtml" />
</div>

 

หรือถ้าจะปรับ ทั้ง PC และส่วน tablets (แท็บเล็ต) แนวนอน ก็จะได้ดังนี้

 

<div id="logo" class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
     <jdoc:include type="modules" name="logo" style="xhtml" />
</div>

 

หากในกรณีที่ Div Set มีการใช้หลาย Module เราก็ต้องปรับให้แต่ละ Module รวมกันแล้ว ไม่เกิน 12 ดังนี้

 

<div id="top" class="container-fluid">
  <div id="top-body" class="container">
      <div id="logo" class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
         <jdoc:include type="modules" name="logo" style="xhtml" />
      </div>
      <div id="menu" class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
         <jdoc:include type="modules" name="menu" style="xhtml" />
      </div>
      <div id="social" class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
         <jdoc:include type="modules" name="social" style="xhtml" />
      </div>
   </div>
</div>

 

จะเห็นว่า class ในส่วน md และ lg ของแต่ละ Module เมื่อรวมกันแล้ว จะได้ 12 พอดี