SiteOrigin Page Builder แสดง Layout แยก Mobile/Desktop?

กำลังดู 7 ความเห็น
  • ผู้เขียน
    ข้อความ
    • #12215
      Facebook Profile photoMenn
      Keymaster

      มีถามมาหลังไมค์ว่า

      อยากทราบว่า siteorigin page builder มันสามารถใช้ออกแบบ layout แยกระหว่างหน้าจอแบบ desktop กับ mobile ได้มั้ยครับ

      วิธีที่ผมมองว่าสะดวกสุด ถ้าใช้ seed ก็คือใส่คลาส `_desktop` กับ `_mobile` ไปครับ มันจะซ่อน Widget / Row นั้นไป เวลาอยู่ในหน้าจอที่กำหนด

      เช่น หน้าเว็บ http://u000.todsorb.com/ ผมใส่รูปไป 2 รูป เมื่อหน้าจอต่างกัน จะให้แสดงผลคนละรูป ตามด้านล่าง

         

      วิธีการคือ สร้าง Widget ใส่รูปไป 2 วิดเจ็ตเลย

      เสร็จแล้ว Widget ที่ต้องการแสดงเฉพาะบนมือถือ ก็ใส่คลาส _mobile ตามรูป

      ส่วนอีกอัน ก็ใส่คลาส _desktop ตามรูป

      ก็จะได้แล้วนะครับ สามารถใช้กับระดับ Widget หรือระดับ Row ก็ได้ครับ

    • #12217
      SeedThemes
      Keymaster

      เพิ่มเติม:

      ถ้าอยากปรับการแสดง/ซ่อน ให้ละเอียดก็กว่านี้ ก็ใช้คลาสของ Bootstrap ได้ครับ ตามลิงก์นี้ http://getbootstrap.com/css/#responsive-utilities

    • #14449
      Facebook Profile photoสุทิน
      Participant

      ถ้าใช้ Site Origin  Layout Slider สามารถแยกโมบาย กับ desktop ได้ไหมครับ

    • #14457
      Facebook Profile photoMenn
      Keymaster

      เหมือนกันครับ หลักการคือใส่คลาส `_mobile` กับคลาส `_desktop` สำหรับ widget ที่เราต้องการแสดงในแต่ละกรณีครับ

    • #18694
      mr1000
      Participant

      ลองทำแล้วครับ แต่พอใส่ widget class แล้วมันไม่แยกครับ มันแสดงทั้ง  2 row ใน desktop เลยครับ

    • #18697
      mr1000
      Participant

      ตั้งค่าแบบนี้ครับ

       

       

      ผลที่ได้มาเป็นแบบนี้ครับ

       

    • #18739
      Facebook Profile photoMenn
      Keymaster

      แหะๆ อันนี้ตามที่คุยกันนะครับ คือไม่ได้ใช้ธีม Seed น่ะครับ

      ถ้าจะเอาไปใช้กับธีมอื่น ต้องเอา CSS ไปด้วยครับ ใช้ SiteOrigin CSS ก็ได้ แล้วใส่โค้ดไปตามนี้ครับ

      “`css
      ._desktop,
      ._desktop-inline,
      ._desktop-inline-block {display: none !important;}
      @media (min-width:992px){
      ._mobile{display: none !important;}
      ._desktop {display: block !important;}
      ._desktop-inline {display: inline !important;}
      ._desktop-inline-block {display: inline-block !important;}
      }
      “`

    • #23217
      machecommerce
      Participant

      “`css
      ._desktop,
      ._desktop-inline,
      ._desktop-inline-block {display: none !important;}
      @media (min-width:992px){
      ._mobile{display: none !important;}
      ._desktop {display: block !important;}
      ._desktop-inline {display: inline !important;}
      ._desktop-inline-block {display: inline-block !important;}
      }
      “`

      ตรงโค้ดนี้ไส่เพิ่ม CSS ใช่ไหมครับ ส่วนเวลาใช้ ก็เพิ่ม _mobile กับคลาส _desktop ใน Widget เลย ผมเข้าใจถูดใช่ไหมครับ

      • #23233
        Facebook Profile photoMenn
        Keymaster

        ถูกต้องแล้วครับผม 🙂

กำลังดู 7 ความเห็น

  • คุณต้องเข้าสู่ระบบเพื่อตอบกลับกระทู้นี้