codejaka
builder
포트폴리오
위젯 관리
새 프로젝트
위젯 수정
미리보기
새로고침
렌더 결과는
이미지
로 표시됩니다. 저장 시 동일 이미지가 위젯 목록 썸네일로도 등록됩니다.
기본 정보
위젯 이름
*
구성 위치
Header
Body
Footer
카테고리
헤더
히어로
일반
본문 컨텐츠
공통
상태표시
단계표시
탭메뉴
아이콘
카드
리뷰
가격표
팀
CTA
갤러리
클라이언트
FAQ
댓글
프로필
오시는길
예약
푸터
간단 설명
풀폭 지도 + 자가용·대중교통·주차 3컬럼 카드 안내 + 하단에 업체정보·외부 지도 링크 바. 본격 'How to get here' 섹션 스타일.
HTML 컨텐츠
<div class="container content-space-1"> <div class="w-md-75 text-center mx-md-auto mb-7"> <h2>{{title}}</h2> <p>{{subtitle}}</p> </div> <div class="mb-7"> <div class="ratio ratio-21x9 rounded-2 overflow-hidden shadow-sm"> <iframe src="{{map_embed_src}}" style="border:0" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe> </div> </div> <div class="row mb-5"> <div class="col-md-4 mb-5 mb-md-0"> <div class="card card-bordered h-100"> <div class="card-body"> <div class="d-flex align-items-center mb-3"> <i class="bi-car-front-fill fs-2 text-primary"></i> <h5 class="ms-3 mb-0">자가용 이용 시</h5> </div> <p class="mb-0" style="white-space:pre-line">{{by_car}}</p> </div> </div> </div> <div class="col-md-4 mb-5 mb-md-0"> <div class="card card-bordered h-100"> <div class="card-body"> <div class="d-flex align-items-center mb-3"> <i class="bi-train-front-fill fs-2 text-primary"></i> <h5 class="ms-3 mb-0">대중교통</h5> </div> <p class="mb-0" style="white-space:pre-line">{{by_transit}}</p> </div> </div> </div> <div class="col-md-4"> <div class="card card-bordered h-100"> <div class="card-body"> <div class="d-flex align-items-center mb-3"> <i class="bi-p-square-fill fs-2 text-primary"></i> <h5 class="ms-3 mb-0">주차 안내</h5> </div> <p class="mb-0" style="white-space:pre-line">{{parking}}</p> </div> </div> </div> </div> <div class="row align-items-center justify-content-between bg-soft-dark rounded-2 p-4 p-md-5"> <div class="col-md-7 mb-3 mb-md-0"> <div class="d-flex align-items-center"> <i class="bi-geo-alt-fill fs-2 text-primary me-3"></i> <div> <strong class="d-block">{{company_name}}</strong> <span class="d-block text-body">{{address}}</span> </div> </div> </div> <div class="col-md-5 text-md-end"> <a class="btn btn-primary me-2 mb-2" href="{{naver_url}}" target="_blank" rel="noopener"><i class="bi-map me-2"></i>네이버</a> <a class="btn btn-soft-dark me-2 mb-2" href="{{kakao_url}}" target="_blank" rel="noopener"><i class="bi-pin-map me-2"></i>카카오</a> <a class="btn btn-soft-dark mb-2" href="{{google_url}}" target="_blank" rel="noopener"><i class="bi-google me-2"></i>구글</a> </div> </div> </div>
변수 플레이스홀더:
{{변수명}}
편집 가능 변수
변수 추가
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
삭제
저장