codejaka
builder
포트폴리오
위젯 관리
새 프로젝트
위젯 수정
미리보기
새로고침
렌더 결과는
이미지
로 표시됩니다. 저장 시 동일 이미지가 위젯 목록 썸네일로도 등록됩니다.
기본 정보
위젯 이름
*
구성 위치
Header
Body
Footer
카테고리
헤더
히어로
일반
본문 컨텐츠
공통
상태표시
단계표시
탭메뉴
아이콘
카드
리뷰
가격표
팀
CTA
갤러리
클라이언트
FAQ
댓글
프로필
오시는길
예약
푸터
간단 설명
코드자카 dist/snippets/contact-sections.html — 문의 섹션 컴포넌트 #1 (푸터 카테고리)
HTML 컨텐츠
<div class="container content-space-t-1"> <div class="text-center mb-7"> <h1>{{title}}</h1> </div> <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3"> <div class="col mb-4 mb-lg-0"> <div class="card card-lg text-center h-100"> <div class="card-body"> <div class="mb-3"> <i class="bi-person-circle fs-1 text-dark"></i> </div> <div class="mb-5"> <h4>{{title2}}</h4> </div> <div class="mb-5"> <span class="d-block">{{text}}</span> <span class="d-block">{{text2}}</span> </div> <div class="d-grid mb-3"> <a class="btn btn-white" href="{{link}}"><i class="bi-envelope-open me-2"></i> support@site.com</a> </div> <a class="btn btn-ghost-dark btn-sm" href="{{link2}}"><i class="bi-telephone me-2"></i> (062) 8324923</a> </div> </div> </div> <div class="col mb-4 mb-lg-0"> <div class="card card-lg text-center h-100"> <div class="card-body"> <div class="mb-3"> <i class="bi-wallet2 fs-1 text-dark"></i> </div> <div class="mb-5"> <h4>{{title3}}</h4> </div> <div class="mb-5"> <span class="d-block">{{text3}}</span> <span class="d-block">{{text4}}</span> </div> <div class="d-grid mb-3"> <a class="btn btn-white" href="{{link2}}"><i class="bi-envelope-open me-2"></i> billing@site.com</a> </div> <a class="btn btn-ghost-dark btn-sm" href="{{link3}}"><i class="bi-telephone me-2"></i> (062) 1099222</a> </div> </div> </div> <div class="col"> <div class="card card-lg text-center h-100"> <div class="card-body"> <div class="mb-3"> <i class="bi-currency-exchange fs-1 text-dark"></i> </div> <div class="mb-5"> <h4>{{title4}}</h4> </div> <div class="mb-5"> <span class="d-block">{{text5}}</span> <span class="d-block">{{text6}}</span> </div> <div class="d-grid mb-3"> <a class="btn btn-white" href="{{link3}}"><i class="bi-envelope-open me-2"></i> sale@site.com</a> </div> <a class="btn btn-ghost-dark btn-sm" href="{{link4}}"><i class="bi-telephone me-2"></i> (062) 3383314</a> </div> </div> </div> </div> </div> <div class="overflow-hidden"> <div class="container content-space-2"> <div class="row"> <div class="col-lg-6 mb-10 mb-lg-0"> <div class="pe-lg-10"> <div class="mb-5"> <h3>{{title5}}</h3> </div> <div class="mb-5"> <img alt="이미지 설명" class="img-fluid" src="{{image}}"/> </div> <address> <span class="d-block fs-3 fw-bold text-dark mb-2">{{text7}}</span> 300 Bath Street<br/> Tay House<br/> Glasgow G2 4JR<br/> 영국 </address> </div> </div> <div class="col-lg-6"> <div class="position-relative"> <div class="card card-lg"> <div class="card-body"> <h4 class="mb-4">{{title6}}</h4> <form> <div class="row"> <div class="col-sm-6 mb-4 mb-sm-0"> <div class="mb-4"> <label class="form-label" for="contactsFormFirstName">이름</label> <input aria-label="길동" class="form-control" id="contactsFormFirstName" name="contactsFormNameFirstName" placeholder="길동" type="text"/> </div> </div> <div class="col-sm-6"> <div class="mb-4"> <label class="form-label" for="contactsFormLasttName">성</label> <input aria-label="홍" class="form-control" id="contactsFormLasttName" name="contactsFormNameLastName" placeholder="홍" type="text"/> </div> </div> </div> <div class="row"> <div class="col-sm-6 mb-4 mb-sm-0"> <div class="mb-4"> <label class="form-label" for="contactsFormCompany">회사명</label> <input aria-label="코드자카" class="form-control" id="contactsFormCompany" name="contactsFormNameCompany" placeholder="코드자카" type="text"/> </div> </div> <div class="col-sm-6"> <div class="mb-4"> <label class="form-label" for="contactsFormCompanyWebsite">회사 웹사이트</label> <input aria-label="codejaka.com" class="form-control" id="contactsFormCompanyWebsite" name="contactsFormNameCompanyWebsite" placeholder="codejaka.com" type="text"/> </div> </div> </div> <div class="mb-4"> <label class="form-label" for="contactsFormWorkEmail">업무용 이메일</label> <input aria-label="email@site.com" class="form-control" id="contactsFormWorkEmail" name="contactsFormNameWorkEmail" placeholder="email@site.com" type="text"/> </div> <div class="mb-4"> <label class="form-label" for="contactsFormDetails">상세 내용</label> <textarea aria-label="결제 및 영업 관련 문의 내용을 입력해주세요" class="form-control" id="contactsFormDetails" name="contactsFormNameDetails" placeholder="결제 및 영업 관련 문의 내용을 입력해주세요" rows="4"></textarea> </div> <div class="d-grid"> <button class="btn btn-primary btn-lg" type="submit">{{text8}}</button> </div> </form> </div> </div> <figure class="position-absolute bottom-0 end-0 zi-n1 d-none d-md-block mb-n10" style="width: 15rem; margin-right: -8rem;"> <img alt="이미지 설명" class="img-fluid" src="../assets/svg/illustrations/grid-grey.svg"/> </figure> <figure class="position-absolute bottom-0 end-0 d-none d-md-block me-n5 mb-n5" style="width: 10rem;"> <img alt="이미지 설명" class="img-fluid" src="../assets/svg/illustrations/plane.svg"/> </figure> </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
이미지
숫자
기본값
삭제
저장