codejaka
builder
포트폴리오
위젯 관리
새 프로젝트
위젯 수정
미리보기
새로고침
렌더 결과는
이미지
로 표시됩니다. 저장 시 동일 이미지가 위젯 목록 썸네일로도 등록됩니다.
기본 정보
위젯 이름
*
구성 위치
Header
Body
Footer
카테고리
헤더
히어로
일반
본문 컨텐츠
공통
상태표시
단계표시
탭메뉴
아이콘
카드
리뷰
가격표
팀
CTA
갤러리
클라이언트
FAQ
댓글
프로필
오시는길
예약
푸터
간단 설명
코드자카 dist/snippets/features-navs.html — 컴포넌트 #1 (내비게이션 필 + 탭 패널)
HTML 컨텐츠
<div class="overflow-hidden"><div class="container content-space-1"><div class="w-lg-65 text-center mx-lg-auto mb-5 mb-sm-7 mb-lg-10"><h2>{{title}}</h2><p>{{content}}</p></div><div class="position-relative content-space-1"><div class="row justify-content-lg-between align-items-md-center"><div class="col-md-6 col-lg-5 order-md-2 mb-7 mb-md-0"><div class="mb-5"><h3>{{title2}}</h3></div><ul class="nav nav-pills nav-pills-shadow flex-md-column gap-md-1 position-relative zi-1" id="featuresTab" role="tablist"><li class="nav-item" role="presentation"><a aria-controls="featuresOne" aria-selected="false" class="nav-link active" data-bs-target="#featuresOne" data-bs-toggle="tab" href="{{link}}" id="featuresOne-tab" role="tab"><div class="d-flex"><i class="bi-app-indicator fs-2 text-success"></i><div class="flex-grow-1 ms-4"><h6 class="text-success mb-1">{{title3}}</h6><p class="text-body mb-0">{{content2}}</p></div></div></a></li><li class="nav-item" role="presentation"><a aria-controls="featuresTwo" aria-selected="true" class="nav-link" data-bs-target="#featuresTwo" data-bs-toggle="tab" href="{{link2}}" id="featuresTwo-tab" role="tab"><div class="d-flex"><i class="bi-graph-up fs-2 text-success"></i><div class="flex-grow-1 ms-4"><h6 class="text-success mb-1">{{title4}}</h6><p class="text-body mb-0">{{content3}}</p></div></div></a></li><li class="nav-item" role="presentation"><a aria-controls="featuresThree" aria-selected="false" class="nav-link" data-bs-target="#featuresThree" data-bs-toggle="tab" href="{{link3}}" id="featuresThree-tab" role="tab"><div class="d-flex"><i class="bi-lightning fs-2 text-success"></i><div class="flex-grow-1 ms-4"><h6 class="text-success mb-1">{{title5}}</h6><p class="text-body mb-0">{{content4}}</p></div></div></a></li></ul></div><div class="col-md-6"><div class="position-relative zi-1"><div class="tab-content" id="featuresTabContent"><div aria-labelledby="featuresOne-tab" class="tab-pane fade show active" id="featuresOne" role="tabpanel"><img alt="이미지 설명" class="img-fluid shadow rounded-3" src="{{image}}"/></div><div aria-labelledby="featuresTwo-tab" class="tab-pane fade" id="featuresTwo" role="tabpanel"><img alt="이미지 설명" class="img-fluid shadow rounded-3" src="{{image2}}"/></div><div aria-labelledby="featuresThree-tab" class="tab-pane fade" id="featuresThree" role="tabpanel"><img alt="이미지 설명" class="img-fluid shadow rounded-3" src="{{image3}}"/></div></div><figure class="position-absolute top-0 end-0 mt-n5 me-n10" style="width: 4rem;"><img alt="이미지 설명" class="img-fluid" src="../assets/svg/components/pointer-up.svg"/></figure></div></div></div><div class="position-absolute top-0 end-0 w-100 w-lg-65 h-65 h-md-100 bg-soft-primary rounded-3 me-n5"></div></div></div></div>
변수 플레이스홀더:
{{변수명}}
편집 가능 변수
변수 추가
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
삭제
저장