codejaka
builder
포트폴리오
위젯 관리
새 프로젝트
위젯 수정
미리보기
새로고침
렌더 결과는
이미지
로 표시됩니다. 저장 시 동일 이미지가 위젯 목록 썸네일로도 등록됩니다.
기본 정보
위젯 이름
*
구성 위치
Header
Body
Footer
카테고리
헤더
히어로
일반
본문 컨텐츠
공통
상태표시
단계표시
탭메뉴
아이콘
카드
리뷰
가격표
팀
CTA
갤러리
클라이언트
FAQ
댓글
프로필
오시는길
예약
푸터
간단 설명
프리미엄 라인 예약 위젯: 상단에 체크인·체크아웃·인원 검색 폼, 하단에 정렬 옵션과 함께 사진형 카드 3종 그리드.
HTML 컨텐츠
<div class="container content-space-1"><div class="text-center mb-7"><span class="text-cap text-primary">{{badge_text}}</span><h2>{{title}}</h2><p class="w-md-75 mx-md-auto">{{subtitle}}</p></div><div class="card card-bordered shadow-sm mb-7"><div class="card-body p-4 p-md-5"><form action="{{search_action}}" method="get" no-error-return-url="true" class="row g-3 align-items-end"><div class="col-md-3"><label class="form-label small text-body" for="ures-checkin">체크인</label><input id="ures-checkin" type="date" name="checkin" class="form-control form-control-lg" value="{{default_checkin}}"></div><div class="col-md-3"><label class="form-label small text-body" for="ures-checkout">체크아웃</label><input id="ures-checkout" type="date" name="checkout" class="form-control form-control-lg" value="{{default_checkout}}"></div><div class="col-md-3"><label class="form-label small text-body" for="ures-guests">인원</label><select id="ures-guests" name="guests" class="form-select form-select-lg"><option value="2">성인 2명</option><option value="3">성인 3명</option><option value="4">성인 4명</option><option value="5">성인 5명 이상</option></select></div><div class="col-md-3 d-grid"><button type="submit" class="btn btn-primary btn-lg"><i class="bi-search me-2"></i>{{search_label}}</button></div></form><hr class="my-4"><div class="d-flex flex-wrap align-items-center justify-content-between gap-2 small text-body"><span><i class="bi-info-circle me-1 text-primary"></i>{{search_notice}}</span><a class="link link-pointer" href="{{calendar_link}}"><i class="bi-calendar-week me-1"></i>월별 캘린더로 보기</a></div></div></div><div class="d-flex align-items-baseline justify-content-between mb-4"><div><h4 class="mb-1">{{site_list_title}}</h4><span class="small text-body">선택하신 기간에 예약 가능한 프리미엄 사이트입니다.</span></div><div class="d-flex align-items-center gap-2"><label class="small text-body mb-0" for="ures-sort">정렬</label><select id="ures-sort" class="form-select form-select-sm" style="width:auto"><option>추천순</option><option>가격 낮은순</option><option>가격 높은순</option></select></div></div><div class="row"><div class="col-md-6 col-lg-4 mb-4"> <div class="card card-bordered shadow-sm h-100"> <div class="position-relative"> <img class="card-img-top" src="{{site1_image}}" alt="" style="height:200px;object-fit:cover"> <span class="badge bg-soft-success text-success position-absolute top-0 end-0 m-3"><i class="bi-circle-fill me-1" style="font-size:0.5rem"></i>예약 가능</span> </div> <div class="card-body"> <h5 class="mb-2">{{site1_name}}</h5> <ul class="list-inline small text-body mb-3"> <li class="list-inline-item me-3"><i class="bi-aspect-ratio me-1"></i>{{site1_size}}</li> <li class="list-inline-item"><i class="bi-people me-1"></i>{{site1_capacity}}</li> </ul> <p class="small text-body mb-3">{{site1_desc}}</p> <div class="d-flex justify-content-between align-items-center"> <div><span class="text-primary fw-bold fs-5">{{site1_price}}</span><span class="small text-body ms-1">/ 1박</span></div> <a class="btn btn-primary btn-sm" href="{{site1_link}}">선택하기 <i class="bi-chevron-right ms-1"></i></a> </div> </div> </div></div><div class="col-md-6 col-lg-4 mb-4"> <div class="card card-bordered shadow-sm h-100"> <div class="position-relative"> <img class="card-img-top" src="{{site2_image}}" alt="" style="height:200px;object-fit:cover"> <span class="badge bg-soft-success text-success position-absolute top-0 end-0 m-3"><i class="bi-circle-fill me-1" style="font-size:0.5rem"></i>예약 가능</span> </div> <div class="card-body"> <h5 class="mb-2">{{site2_name}}</h5> <ul class="list-inline small text-body mb-3"> <li class="list-inline-item me-3"><i class="bi-aspect-ratio me-1"></i>{{site2_size}}</li> <li class="list-inline-item"><i class="bi-people me-1"></i>{{site2_capacity}}</li> </ul> <p class="small text-body mb-3">{{site2_desc}}</p> <div class="d-flex justify-content-between align-items-center"> <div><span class="text-primary fw-bold fs-5">{{site2_price}}</span><span class="small text-body ms-1">/ 1박</span></div> <a class="btn btn-primary btn-sm" href="{{site2_link}}">선택하기 <i class="bi-chevron-right ms-1"></i></a> </div> </div> </div></div><div class="col-md-6 col-lg-4 mb-4"> <div class="card card-bordered shadow-sm h-100"> <div class="position-relative"> <img class="card-img-top" src="{{site3_image}}" alt="" style="height:200px;object-fit:cover"> <span class="badge bg-soft-success text-success position-absolute top-0 end-0 m-3"><i class="bi-circle-fill me-1" style="font-size:0.5rem"></i>예약 가능</span> </div> <div class="card-body"> <h5 class="mb-2">{{site3_name}}</h5> <ul class="list-inline small text-body mb-3"> <li class="list-inline-item me-3"><i class="bi-aspect-ratio me-1"></i>{{site3_size}}</li> <li class="list-inline-item"><i class="bi-people me-1"></i>{{site3_capacity}}</li> </ul> <p class="small text-body mb-3">{{site3_desc}}</p> <div class="d-flex justify-content-between align-items-center"> <div><span class="text-primary fw-bold fs-5">{{site3_price}}</span><span class="small text-body ms-1">/ 1박</span></div> <a class="btn btn-primary btn-sm" href="{{site3_link}}">선택하기 <i class="bi-chevron-right ms-1"></i></a> </div> </div> </div></div></div></div>
변수 플레이스홀더:
{{변수명}}
편집 가능 변수
변수 추가
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
삭제
저장