장바구니

등록된 상품이 없습니다
합계: 0

최근 본 상품

등록된 상품이 없습니다
    망보드 강의
    글보기
    제목상품 갤러리 가로 이미지 개수 설정방법2019-03-29 09:59:56
    작성자user icon

    = 반응형 클래스를 이용하여 상품 갤러리 가로 이미지 개수 설정하기 =



    1. 반응형 클래스 이해하기

    반응형 클래스 : col-543,col-532,col-432,col-421,col-321,col-221,col-111
    반응형 클래스는 브라우져 크기에 따라 한줄에 보여주는 이미지의 개수를 다르게 하기 위한 것으로
    col-543 반응형 클래스는 브라우져 크기(992px 이상, 768~992px, 768px 이하)에 따라
    갤러리 이미지를  5개-4개-3개 형태로 자동으로 설정해줍니다.

    col-543: 5개-4개-3개
    col-432: 4개-3개-2개
    - col-421: 4개-2개-1개
    - col-321: 3개-2개-1개
    - col-221: 2개-2개-1개
     


    2. 상품 목록 페이지 > 추천상품 위젯 반응형 클래스 적용하기

    망보드 커머스 추천상품 위젯에서 반응형 클래스와 반응형 템플릿 2가지 방식을 지원하며 2가지 방식중에
    한가지를 선택해서 숏코드에 넣어주시면 됩니다.

    반응형 템플릿 : template="gallery-basic-532"
    gallery-basic-543,gallery-basic-532,gallery-basic-432,gallery-basic-421,gallery-basic-422,gallery-basic-321,gallery-basic-221
    [mb_commerce_gallery name="commerce_product" title="추천 상품" list_size="5" template="gallery-basic-532" style=""]
     => 템플릿 이름의 3자리 숫자는 반응형 클래스와 동일합니다

    반응형 클래스 responsive_class="col-421"
    col-543,col-532,col-432,col-421,col-321,col-221,col-111
    [mb_commerce_gallery name="commerce_product" title="추천 상품" list_size="4" responsive_class="col-421" style=""]

    반응형 이미지 높이 : height="160px" tablet_height="200px" mobile_height="260px"
    반응형 클래스에 따라 추천상품 이미지의 높이를 다르게 설정할 수 있습니다
    [mb_commerce_gallery name="commerce_product" title="추천 상품" list_size="4" responsive_class="col-421" height="160px" tablet_height="200px" mobile_height="260px" style=""]
     => responsive_class="col-421" height="160px" tablet_height="200px" mobile_height="260px"
          4개(이미지 높이 160px) - 2(이미지 높이 200px) - 1(이미지 높이 260px) 



    3. 상품 목록 페이지 > 상품 갤러리 목록 반응형 클래스 적용하기

    반응형 클래스 responsive_class="col-421"
    col-543,col-532,col-432,col-421,col-321,col-221,col-111
    [mb_commerce name="commerce_product" responsive_class="col-421" template="gallery-basic-m1"]
     => 한줄에 표시되는 상품 갤러리의 이미지가 4개-2개-1개 형태로 설정됩니다

    반응형 이미지 높이 : height="160px" tablet_height="200px" mobile_height="260px"
    반응형 클래스에 따라 상품 갤러리 이미지의 높이를 다르게 설정할 수 있습니다
    [mb_commerce name="commerce_product" responsive_class="col-421" height="160px" tablet_height="200px" mobile_height="260px" style=""]
     => responsive_class="col-421" height="160px" tablet_height="200px" mobile_height="260px"
          4개(이미지 높이 160px) - 2(이미지 높이 200px) - 1(이미지 높이 260px) 



    4. 상품 보기 페이지 > 관련 상품 반응형 클래스 적용하기

    반응형 클래스 related_responsive_class="col-421"
    col-543,col-532,col-432,col-421,col-321,col-221,col-111
    [mb_commerce name="commerce_product" related_product_list_size="4" related_responsive_class="col-421" template="gallery-basic-m1"]
     => 상품보기 페이지 하단에 있는 관련 상품 이미지가 4개-2개-1개 형태로 설정됩니다

    반응형 이미지 높이 related_img_height="160px" related_img_tablet_height="200px" related_img_mobile_height="260px"
    반응형 클래스에 따라 관련 상품 이미지의 높이를 다르게 설정할 수 있습니다
    [mb_commerce name="commerce_product" responsive_class="col-421" height="160px" tablet_height="200px" mobile_height="260px" related_product_list_size="4" related_responsive_class="col-421" related_img_height="160px" related_img_tablet_height="200px" related_img_mobile_height="260px" style=""]
     => related_responsive_class="col-421" related_img_height="160px" related_img_tablet_height="200px" related_img_mobile_height="260px"
          4개(이미지 높이 160px) - 2(이미지 높이 200px) - 1(이미지 높이 260px) 

     

    5. 망보드 커머스 숏코드 속성

    망보드 커머스는 다양한 숏코드 속성을 지원하고 있기 때문에 초보자도 쉽게 다양한 설정이 가능합니다.
    커머스의 세부적인 숏코드 속성은 아래 주소의 내용을 참고해 보시기 바랍니다.

     

    최근 본 상품

    등록된 상품이 없습니다

    장바구니

    등록된 상품이 없습니다
    합계: 0