이 페이지는 비밀번호로 보호되어 있습니다.
코드 위젯은 HTML·CSS·JS 로 화면을 직접 만드는 위젯입니다. 한 번 만들어 두면 그 뒤로는 코드를 열지 않고 다른 위젯처럼 글·사진·링크를 그 자리에서 바꾸고, 목록 항목을 더할 수 있습니다.
코드 위젯 넣기
위젯 고르는 창의 콘텐츠 → 코드를 고르면 코드 창이 열립니다. HTML·CSS·JS 를 넣고 적용하면 캔버스에 그려집니다.
편집 화면에서도 손님 화면과 똑같이 스크립트까지 실제로 돌아갑니다. 코드를 다시 고치려면 위젯에 마우스를 올리고 툴바의 코드 단추를 누릅니다.
글·사진·링크 바꾸기
코드 위젯 위에서 바꾸고 싶은 곳에 마우스를 올리면 다른 위젯과 같은 둥근 아이콘 단추가 뜹니다.
- 글 — 글을 누르면 그 자리에서 글 에디터가 열립니다. 고친 뒤 바깥을 누르거나 Esc 를 누르면 저장되고 화면에 반영됩니다. 글자 크기·색 같은 서식도 에디터 도구 줄로 바꿉니다.
- 사진 — 사진 위 둥근 단추 중 이미지 설정을 누르면 다른 위젯과 같은 사진 설정 창이 열립니다.
- 링크 — 링크나 버튼 위 둥근 단추 중 링크 설정을 누르면 링크 설정 창이 열립니다. 주소·전화·이메일·팝업으로 이을 수 있습니다.
- 목록 — 위젯 툴바의 목록 단추를 누르면 오른쪽 서랍이 열립니다. 항목마다 위로·아래로·삭제가 있고, 맨 아래 「+ 항목 추가」로 항목을 더합니다. 새 항목은 첫 항목의 꼴로 들어가니 글과 사진을 고쳐 주세요.
- 게시판 글 — 게시판에서 불러오는 칸은 그 게시판에 글을 쓰거나 고치면 바로 바뀝니다.
코드 쓰는 분 — 고객이 바꿀 곳 정하기
표시를 달지 않아도 사진(img)·링크(a)·버튼(button)·글자만 든 태그(제목·문단 등)는 저절로 서랍에 나옵니다. 표시를 달면 이름이 고정되고 서랍에 보일 이름·묶음·목록을 정할 수 있습니다.
표시 이름은 저장 이름입니다. 코드를 고쳐도 이름이 같으면 고객이 바꾼 값이 그대로 따라옵니다.
표를 좌우로 밀어서 보세요.
| 표시 | 하는 일 |
|---|---|
data-anmok="text:title" | 글 칸 |
data-anmok="image:photo" | 사진 칸(img 가 아니면 배경 사진) |
data-anmok="link:cta" | 링크 칸 |
data-anmok="repeat:cards" | 목록 — 안쪽 첫 항목이 꼴이 되고, 서랍에서 항목을 더하고 빼고 옮깁니다. data-anmok-max="6" 으로 최대 개수를 정합니다. |
data-anmok="toggle:promo" | 보이기·숨기기 칸 |
data-anmok-label="첫 화면 큰 제목" | 서랍에 보일 이름 |
data-anmok-group="첫 화면" | 여기부터 다음 묶음까지 서랍의 한 묶음 |
data-anmok-lock | 안쪽은 저절로 잡지 않습니다. 표시를 단 것만 바꿀 수 있습니다. |
data-anmok-lock="all" | 안쪽은 서랍에 하나도 나오지 않습니다. |
게시하기
서랍에서 바꾼 내용은 다른 위젯처럼 편집 화면에 저장됩니다. 손님 화면에 내보내려면 마지막에 사이트 게시를 누릅니다.
여기까지 확인했나요
- 코드 위젯의 글을 눌러 에디터로 고쳤습니다.
- 사진·링크는 둥근 아이콘 단추로 바꿨습니다.
- 목록은 툴바의 「목록」 서랍에서 항목을 더하거나 지웠습니다.
- 마지막에 「사이트 게시」를 눌렀습니다.
