본 매뉴얼은 숏코드 외부에
div
태그와 클래스를 추가하여 위젯의 컬럼, 크기, 간격, 위치 변경하는 방법에 대해 설명합니다.
컬럼 #
pafw-checkout-row
: 2개 이상 위젯을 1개의 행으로 하고자 할 때 추가합니다.
pafw-checkout-row-basic
: pafw-checkout-col
와 같이 사용되며, 크기, 여백을 조정합니다.
크기 #
pafw-checkout-col
: pafw-checkout-row
하위의 위젯 태그에 추가하는 클래스 입니다.
pafw-colbasic-3
: pafw-checkout-col
와 같이 추가하는 클래스로 3/12 크기 입니다.
pafw-colbasic-6
: pafw-checkout-col
와 같이 추가하는 클래스로 6/12 크기 입니다.
pafw-colbasic-9
: pafw-checkout-col
와 같이 추가하는 클래스로 9/12 크기 입니다.
pafw-colbasic-sm350
: 크기를 350px 로 설정하며 pafw-colbasic-lg350
와 함께 사용됩니다.
pafw-colbasic-lg350
: 전체 크기 – 350px 로 설정하며 pafw-colbasic-sm350
와 함께 사용됩니다.
pafw-colbasic-sm500
: 크기를 500px 로 설정하며 pafw-colbasic-lg500
와 함께 사용됩니다.
pafw-colbasic-lg500
: 전체 크기 – 500px 로 설정하며 pafw-colbasic-lg500
와 함께 사용됩니다.
간격 #
pafw-pt15
: 상단에 padding 을 15px 추가합니다.
pafw-pb15
: 하단에 padding 을 15px 추가합니다.
pafw-mt15
: 상단에 margin 을 15px 추가합니다.
pafw-mb15
: 하단에 margin 을 15px 추가합니다.
pafw-pt50
: 상단에 padding 을 50px 추가합니다.
pafw-pb50
: 하단에 padding 을 50px 추가합니다.
pafw-mt50
: 상단에 margin 을 50px 추가합니다.
pafw-mb50
: 하단에 margin 을 50px 추가합니다.
전환 #
pafw-checkout-row-reverse
: 모바일에서 pafw-checkout-col
의 위치를 변경합니다.
샘플 A #
<div class="pafw-mb50">[pafw_dc_login template="type-b"]</div> <div class="pafw-mb50">[pafw_dc_cart template="type-b"]</div> <div class="pafw-checkout-row pafw-checkout-row-basic"> <div class="pafw-checkout-col pafw-colbasic-6">[pafw_dc_billing_fields field_style="flex"]</div> <div class="pafw-checkout-col pafw-colbasic-6">[pafw_dc_shipping_fields field_style="flex"]</div> </div> <div class="pafw-checkout-row pafw-checkout-row-basic"> <div class="pafw-checkout-col pafw-colbasic-6">[pafw_dc_order_fields field_style="flex"]</div> <div class="pafw-checkout-col pafw-colbasic-6">[pafw_dc_discount template="type-b"]</div> </div>
샘플 B #
<div class="pafw-checkout-row pafw-checkout-row-basic"> <div class="pafw-checkout-col pafw-colbasic-lg350"> <div class="pafw-mb15">[pafw_dc_billing_fields field_style="overlap" theme="orange_yellow"]</div> <div class="pafw-mb15">[pafw_dc_shipping_fields field_style="overlap" theme="orange_yellow"]</div> <div class="pafw-mb15">[pafw_dc_order_fields field_style="overlap" theme="orange_yellow"]</div> <div class="pafw-mb50">[pafw_dc_discount template="type-a" theme="orange_yellow"]</div> <div class="pafw-mb50">[pafw_dc_payment_methods template="type-a" theme="orange_yellow" column="2"]</div> </div> <div class="pafw-checkout-col pafw-colbasic-sm350"> <div class="pafw-mb15">[pafw_dc_cart template="type-b" theme="orange_yellow"]</div> <div class="pafw-mb50">[pafw_dc_order_total template="type-b" theme="orange_yellow"]</div> </div> </div>