디자인 편집
각 디자인 스킨마다 원하는 내용으로 HTML/CSS/JS 를 활용해 디자인 편집 작업을 진행할 수 있어요.
관리자 메뉴 위치
디자인 > 디자인 스킨 관리 > 디자인 편집
디자인 스킨 편집 화면 열기
수정 원하는 디자인 스킨의 [디자인 편집] 버튼을 누르면 편집 창이 노출돼요.
디자인 편집 화면 상단
① FTP 열기
FTP란 메이크샵 서버에 파일을 업로드 할 수 있는 프로그램으로 웹FTP, 마이FTP 중 하나를 선택해서실행할 수 있어요.
② 스킨명
현재 편집중인 디자인 스킨명과 내 쇼핑몰 스킨 또는 보관스킨 아이콘이 표시돼요.
③ http// 일괄수정
페이지마다작업된 디자인 소스 중 'http://' 경로를 일괄로 '//' 경로로 변경하는 기능이에요.
④ 페이지 주소
디자인 편집 관련 내용 또는 관리자 끼리 공유해야 할 메시지가 있을 경우 메모해두실 수 있어요.
⑤ 간단메모
쇼핑몰 페이지별 URL을 확인할 수 있어요.
⑥ 가상태그 팝업열기 / 가상태그 오른쪽열기
상단/측면/하단 또는 중앙 디자인 편집 시 노출되며, 가상태그와 편집태그 리스트를 화면 오른쪽에 노출시키거나 팝업으로 띄워 확인하실 수 있어요.
디자인 환경 설정
① 쇼핑몰 정렬타입 설정
브라우저에 노출되는 쇼핑몰 디자인을 HTML 디자인 정렬 또는 가운데 정렬되어 노출 되도록 설정할 수 있어요.
② 쇼핑몰 주소 표시
쇼핑몰 주소창의 표시를 도메인 주소 고정 또는 페이지별로 주소가 변경될 수 있도록 설정할 수 있어요.
③ DTD 설정
디자인 화면을 구성하는 요소와 속성 등을 어떤 타입의 표준을 따를 것인지 설정할 수 있어요.
디자인 편집 사용하기
디자인 편집 기본 개념
기본적으로 디자인 화면 구성은 “상단/측면/하단”디자인과 “중앙 디자인”으로 구분돼요.
상단/측면/하단은 모든 페이지에 같은 소스를 넣어야 하는 불필요한 작업을 줄이실 수 있도록 나누어 놓은 영역이고, 디자인 영역에서 가장 큰 비중을 차지하는 화면이 바로 중앙 디자인 영역이에요.
중앙 디자인 영역 디자인 편집 시 상단/측면/하단의 각 영역 편집 후 생성되는 태그를 중앙 디자인 편집 시 입력하시면 해당 영역의 디자인을 불러오게 돼요.
디자인 편집하기
디자인 편집 화면은 왼쪽과 상단의 메뉴이동을 통해 확인할 수 있어요.
① 디자인 편집~임시 저장소스 탭
현재 적용중인 각 화면의 소스를 확인/수정하실 수 있어요.
CSS : 각 페이지별 스타일 시트 소스를 확인/수정하실 수 있어요.
임시 저장 소스 : 편집한 소스 저장 시 저장하기 이전 소스에 대해 최대 5개 까지 저장 가능하고, 저장된 소스는 필요 시 언제든 복구가 가능해요.
③ 디자인~JS 명칭
페이지의 디자인 파일명이에요.
디자인 스킨 관리에서 HTML 파일 업로드 시 HTML파일명을 동일하게 맞춰 tar파일로 압축 후 업로드하면 간편하게 소스를 덮어씌울 수 있어요.
④ 기본 소스 보기
클릭 시 디자인 편집 소스 아래에 최초 기본 소스를 확인하실 수 있습어요.
디자인 편집 시 소스 입력 방법 등을 확인하거나 최초 디자인 소스로 변경을 원하실 경우 복사하여 사용이 가능해요.
⑤ 최근 저장 소스 되돌리기
디자인 편집 소스 수정 중 잘못 입력하여 최초 수정하기 전 상태로 돌아가고 싶을 경우 간편하게 클릭 한번으로 수정 전 소스로 복구시킬 수 있어요.
⑥ 저장~디자인 복사
저장 : 디자인 편집 이후 저장 버튼을 클릭하시면 최종 적용이 완료돼요.
디자인 복사 : 해당 화면의 페이지 추가가 가능할 경우 디자인 복사를 선택하여 동일한 소스의 페이지를 추가하실 수 있어요.
가상태그 목록 열기
디자인 편집창 오른쪽 상단에 [가상태그 팝업 열기]와 [가상태그 오른쪽 열기] 버튼이 있어요. 편한 버튼으로 가상태그를 확인해 보세요. - 가상태그 팝업 열기 : 가상태그 목록을 팝업으로 띄워 확인할 수 있어요. - 가상태그 오른쪽 열기 : 가상태그 목록이 편집화면 오른쪽에 노출돼요.
① 가상태그 검색 태그설명 또는 태그명을 선택하여 원하시는 단어를 검색하실 수 있어요. 검색은 입력하신 단어를 포함한 모든 태그가 검색됩니다. 초기화를 클릭하면 태그목록을 검색 전 상태로 되돌릴 수 있어요.
페이지 추가하기
왼쪽 메뉴에서 페이지 추가 버튼을 선택하시면 페이지 추가 레이어 팝업창이 노출되며, 페이지명을 입력하고 화면 선택 이후 디자인 페이지 추가할 수 있어요.
단, 상품 분류와 상품 상세는 디자인 적용 분류를 선택할 수 있는 옵션이 노출되며 개별 분류와 전체 분류를 선택하여 디자인 적용이 가능해요.
개별 분류
관리자에서 생성해둔 대,중,소분류에 대해 특정 분류 화면에만 디자인 변경을 해야할 경우 선택하여 추가하실 수 있어요.
최종 선택한 분류를 포함한 하위분류에 디자인이 일괄 적용돼요.
작업 예시 A대분류, B중분류, C소분류 중 B중분류 까지만 선택하여 페이지를 추가하고 디자인했을 경우 B중분류와 하위 분류인 C소분류에 디자인이 적용돼요.
전체 대,중,소 분류
전체 대,중,소분류는 해당 분류의 전체 디자인을 변경 시 사용돼요.
작업 예시
관리자에 아래와 같이 대,중,소분류가 생성되었을 경우
전체 대분류 선택 : 모든 대분류“A,B,C,D” 디자인을 일괄 변경하실 수 있어요. 전체 중분류 선택 : 모든 중분류“A1,B1,C1,D1” 디자인을 일괄 변경하실 수 있어요. 전체 소분류 선택 : 모든 소분류“A2,B2,C2,D2” 디자인을 일괄 변경하실 수 있어요.
Last updated