스타일 편집 및 개별 편집 수정

스타일 편집이란?

쇼핑몰 디자인의 핵심인 스타일 편집 기능은 주로 글꼴 설정, 색 변경 등 눈에 보이는 디자인 위주의 설정을 일괄적으로 담당합니다. 섹션이나 요소의 태그 부분에 있는 팔레트 모양 아이콘이나 스타일 편집 메뉴를 통해 설정할 수 있습니다.

스타일 편집은, 구성품(섹션 & 요소)의 디자인 항목의 설정 & 변경하고 모든 페이지에 흩어져 있는 동일 구성품(섹션 & 요소)에 일괄적으로 디자인을 적용하는 것 입니다.

1. 스타일 편집 수정 방법 및 종류

1-1. 디자인 설정, 우선순위와 초기화

개별 편집 > 스타일 편집 의 우선 순위로 디자인 설정 값이 지정되는데요. 사용자가 직접 변경한 사항을 기본값으로 되돌리고 싶을 경우, 각 패널에 보이는 버튼을 통해 되돌릴 수 있습니다.

스타일 편집 값은 사용 중인 템플릿의 기본값으로 초기화되고, 개별 편집값은 지금 설정된 스타일 편집 값으로 초기화 됩니다.

1-2. 스타일 편집 진입 및 수정 방법

2개의 경로를 통해 진입하고 수정할 수 있어요.

첫 번째. 좌측 하단의 [ ≡ ] 메뉴 버튼 혹은, 키보드의 [tab] 키를 누른 후, 좌측 메뉴 가장 아래 있는 [스타일 편집] 버튼을 통해 진입하는 방법과

두 번째. 특정 섹션 & 요소의 [스타일 편집] 버튼을 통해 진입하는 방법이 있습니다.

또 다른 팁을 알려드리자면, 두개의 어떤 경로를 통해 진입해도 뒤로가기 버튼을 통해, 다른 영역의 스타일 편집으로 이동할 수 있습니다.

1-3. 스타일 편집 종류

스타일 편집은 크게 4개의 영역을 기준으로 28개 구성품 (섹션 및 요소)의 디자인을 관리할 수 있고 동일 구성품(섹션 & 요소)에 일괄적으로 디자인을 적용 할 수 있습니다.

1) 전체 영역이고 1개의 구성품 (섹션 및 요소)의 디자인을 관리할 수 있어요.

2) 머리글 영역이고 5개의 구성품 (섹션 및 요소)의 디자인을 관리할 수 있어요.

세 번째 영역은, 본문 영역이고 16개의 구성품 (섹션 및 요소)의 디자인을 관리할 수 있어요.

3) 본문_메인배너 섹션

4) 본문_상품 목록 섹션

5) 본문_상품 슬라이드 섹션

6) 본문_갤러리 섹션

7) 본문_게시판 섹션

목록형 게시글보다, 격자형 게시판을 선택하신 경우 사용할 수 있는 스타일 편집이 다양합니다.

8) 본문_블로그 섹션

나열형 블로그보다, 격자형 블로그을 선택하신 경우 사용할 수 있는 스타일 편집이 다양합니다.

9) 본문_사용자 편집 섹션

자유로운 구성품 조립이 목적인 만큼, 스타일 편집으로 일괄 적용하는 항목이 굉장히 적어요.

10) 본문_제목글

제목글은, 10개의 사용 영역따라 스타일 편집 적용 사항에 다른점이 있으니 참고해 주세요.

11) 본문_줄글

줄글은 12개의 사용 영역에 스타일 편집값이 적용되고 첨부 이미지를 살펴보세요 🙂

12) 본문_보조글

보조글은 6개의 기본 제공 페이지에 적용중이고, 등록일, 댓글, 삭제하기, 좋아요, 공유하기 등의 페이지 내 보조적인 글자 영역의 색상을 변경할 수 있는 디자인 편집 값입니다.

13) 본문_링크

14) 본문_선

상품 상세 페이지의 내비게이션 경계선을 제외한 모든 선과 테두리에 적용되는 값입니다. 상품 상세 페이지 내비게이션 경계선 설정은 상품 상세 설명 영역을 참고해주세요 :)

15) 본문_버튼

버튼이 사용되는 모든 페이지에 적용되지만 메인 배너 섹션의 경우, 버튼 색상과 글자를 제외하고 적용되는 점 참고 부탁드려요.

16) 본문_아이콘

설정 위치에 따라 스타일 편집 경로가 다릅니다.

17) 본문_쪽번호

페이지 내 상품 목록이나 게시글의 목록 개수가 다음 페이지로 넘어가게 되는 경우, 해당 목록 아래 보이는 숫자를 쪽번호라고 하구요. 어떤 것들을 디자인 편집할 수 있는지 알아볼까요?

18) 본문_맨 위로 버튼

맨 위로 버튼은 스타일 편집에서 설정 해주셔야 노출됩니다.

19) 바닥글 입니다.

바닥글 영역은 5개의 구성품(섹션 및 요소)의 디자인을 관리할 수 있어요.

20) 기본 제공 페이지

8가지의 분류의 기본 제공 페이지는, 별도 디자인 편집 없이 사용되는 페이지로 디자인 편집 도구의 스타일 편집 값을 공유합니다.

기본 페이지의 종류 1.모든 게시판 ( 블로그, 질문하기, 후기, 일반 게시판) 2.로그인 및 회원가입 3.아이디 및 비밀번호 찾기 4.상품 상세 5.장바구니 6.결제하기 7.이용약관 8.마이 페이지

기본 제공 페이지에 적용되는 스타일 편집 값은 총 9가지이고, 이 외 기본 페이지에서 디자인 편집은 적용되지 않는 점을 참고해 주세요 :)

21) 상품 상세 페이지

상품 상세 페이지는 상품 목록 섹션, 줄글, 선, 버튼의 스타일 편집 값을 함께 적용되지만, 기본 제공 페이지 중 예외적으로 여러가지 스타일 편집이 가능한 곳이 있죠?

상품 판매에 있어 가장 중요한 영역 중 하나이기에, 원하는 구성으로 디자인할 수 있도록 구성된 영역이구요.

어떤 것들을 할 수 있는지 살펴볼까요?

개별 편집이란?

스타일 편집에서 설정한 디자인과 별개로 개별 편집을 통해 해당 요소만 디자인을 다르게 수정하거나 스타일 편집에 없는 기타 설정(이미지 너비, 구글 지도 주소 값 등)을 적용할 수 있습니다. 태그의 연필 모양 아이콘이나 더블 클릭으로 설정할 수 있습니다.

개별 편집은, 단일 구성품(섹션 & 요소)의 디자인 항목의 설정 & 변경하고 개별적으로 디자인을 적용하는 것 입니다 🙂

2. 개별 편집 수정 방법 및 종류

개별 편집의 경우, 디자인 편집하기 안내서에서 다뤘던 내용들은 간략하게 설명하고 넘어가는 형태입니다.

구체적인 사용방법이 궁금하신 분들은 디자인 편집하기 부분을 확인해주세요 🙂

2-1. 개별 편집 진입 방법

수정을 원하는 섹션 혹은 요소를 클릭하고, 개별 편집 클릭~!

2-2. 개별 편집 종류

개별 편집은 크게 3개의 영역을 기준하고, 27개 구성품 (섹션 및 요소)의 개별 디자인을 편집할 수 있습니다.

1)머리글 섹션

머리글 항목 중 4가지의 사용 여부를 설정할 수 있어요. (아이콘, 장바구니, 로그인, 상품 검색)

2)머리글 섹션 _로고

글자를 작성하거나, 이미지를 업로드하여 로고를 관리할 수 있어요. 메인배너와 머리글을 합쳐서 기존의 로고가 잘 보이지 않는다면,

메인 배너와 머리글을 합쳤을 때 이미지 영역에 반전 효과를 추가한 로고를 추가로 사용하실 수 있어요.

3)머리글 섹션_메뉴

메뉴(내비게이션)를 추가 및 수정할 때, 사용하실 수 있어요. 페이지를 추가하거나, 이름을 수정하는 안내서에서 확인했었죠?

4)머리글 섹션_아이콘

아이콘 추가 할 항목에 링크를 삽입하세요 🙂 아이콘을 제거하고 싶다면, 링크를 지워보세요.

5)본문_메인 배너 섹션

이미지나 동영상 중 선택할 수 있고, 업로드 및 글자를 입력하거나 링크를 삽입할 수 있어요. 메인 배너를 수정하는 안내서에서 확인했었죠?

6)본문_상품 목록 섹션

노출할 상품 카테고리를 선택하거나, 카테고리의 이름을 수정할 수 있고 노출 개수를 설정하고, 상품 카테고리 내비게이션(필터)을 설정할 수 있어요. 해당 내용의 방법은, 디자인 편집하기 상품 페이지에 구성품 넣기에서 확인했었죠?

7)본문_상품 슬라이드 섹션

상품 목록 섹션과 기본적인 방식은 동일합니다. 차이점은 크게 2가지 인데요. 첫 번째. 한 줄로만 노출할 수 있고, 두 번째. 상품 카테고리 내비게이션인 필터를 사용할 수 없는 것 이에요.

8)본문_갤러리 섹션

갤러리 섹션 내에 추가한 이미지를 나열할 수 있습니다. 이미지를 클릭했을 때 링크를 삽입하거나, 라이트박스로 크게 보여줄 수도 있는데요.

다양하게 활용 가능한 갤러리 섹션에 대해 안내드릴게요. 먼저 기본적인 형태로 사용하는 갤러리 섹션 개별 편집입니다.

응용형 1. 라이트박스 갤러리 갤러리 섹션에 추가한 이미지나 동영상을 클릭했을 때 배경을 밝거나 어둡게 처리하여 해당 내용을 돋보이게 할 수 있어요.

Step 1. 보여주고 싶은 이미지나 동영상을 추가하세요.

Step 2. 갤러리 > 개별 편집 클릭 디자인 탭에서 썸네일 클릭할 때 설정을 팝업창으로 확대하기로 선택합니다.

Step 3.[스타일 편집 > 갤러리 섹션]에서 스타일과 글꼴 디자인을 설정하면 끝~!

라이트박스 배경과 제목 및 설명이 적힌 박스가 투명 감 있는 흰색, 글자는 검은색입니다. 위의 예시는 썸네일에 마우스를 올렸을 때, 제목과 설명이 보여지게 설정해두었기 때문에 썸네일 배경색을 50% 투명도의 흰색으로 설정했습니다.

응용형 2. 슬라이드형 갤러리 사용자 편집 섹션의 슬라이드 요소처럼 갤러리를 슬라이드 형태로 만들어 볼게요.

Step 1.보여주고 싶은 이미지나 동영상을 추가하세요.

Step 2.갤러리 > 개별 편집 클릭 , 디자인 탭에서 종류 설정을 슬라이드로 선택합니다.

Step 3.기타 디자인 설정을 변경하시면 끝~!

응용형 3. 컬렉션 버튼 만들기

Step 1. 이미지나 동영상을 추가하고,이동할 페이지 주소를 연결합니다.

Step 2.갤러리 > 개별 편집 클릭 , 디자인 탭에서 썸네일 클릭할 때 링크 열기로 선택하고 이동할 페이지를 설정하면 끝~!

9)본문_게시판 섹션

게시판 설정 및 관리는 관리하기 영역에서 진행하는거 잊지 않으셨죠? [수정필요] 안내서 연결

게시판의 개별 편집은 항목을 노출할 것인지를 설정할 수 있고, (질문 게시판 제외) 게시판 노출 종류를 선택할 수 있어요.

10)본문_블로그 섹션

블로그는, 앞의 게시판 보다 디자인 관리 기능이 조금 더 있어요.

디자인 시작하기에서 4.이벤트 페이지에 구성품 넣기로 블로그 게시판을 추가하고 편집하는 작업을 진행했었죠?

다른 게시판의 개별 편집과 달리, 상품 목록 이나 슬라이드 개별 편집과 비슷하지 않은가요?

게시글을 노출하기 위해 카테고리를 선택하고, 노출 개수를 설정하고, 게시글 카테고리 내비게이션인 필터를 설정할 수 있어요.

11)본문_사용자 편집 섹션

자유도 높은 사용 목적을 위해, 사용자 편집 섹션의 개별 편집은 배경 영역 부분을 수정하는 기능만 제공되고 있어요.

상세한 사용법이나 활용은 디자인 시작하기 26~32 (2-4. 요소를 추가하고 맞춤 제작 구성품을 설정하자) 부분을 다시 한번 살펴보세요 🙂

12)본문_제목글 및 줄글

사용자 편집 섹션에서, 요소를 통해 제목글 및 줄글을 추가한 경우 개별 편집을 사용하여 스타일 편집값과 다른 글자 디자인을 설정할 수 있어요. 링크하고 싶은 부분을 드래그하여 개별 편집의 사슬 모양 아이콘을 클릭하시면 링크 주소를 입력할 수 있습니다.

다만, 글꼴 모양은 사이트의 통일성을 위해, 스타일 편집에서 설정한 공통 값으로 사용됩니다.