모바일 디자인 편집하기

스마트폰에서의 디자인 최적화를 위해 일부 섹션과 요소의 모바일 버전 디자인을 별개로 편집할 수 있습니다.

1. 모바일 뷰포트 사용하기

1-1. [디자인 편집 도구 화면 > 뷰포트 >모바일]을 선택하면 모바일 뷰를 확인하며 편집할 수 있습니다.

1-2. 각 섹션과 요소 영역을 선택했을 때 연필이나 팔레트 모양 편집 아이콘이 있는 경우에만 모바일 디자인을 변경할 수 있습니다.

스타일 편집과 개별 편집 개념은 모바일에서도 동일하게 적용됩니다.

2. 데스크탑 / 모바일 뷰포트 비교

모바일 뷰포트에서 설정한 디자인은 데스크탑 디자인에 영향을 끼치지 않습니다.

3. 모바일 뷰포트 글자 최대 크기

제목글, 줄글, 갤러리는 모바일 뷰포트 스타일 편집에서 '글자 최대 크기'를 설정할 수 있습니다. 데스크탑의 글자 크기를 모바일에서 동일하게 적용하지만 최대 크기를 제한하는 설정입니다.

최대 글자 크기 설정은 예시와 마찬가지로 데스크탑의 글자 크기를 따르지만 모바일에서는 설정한 최대 글자 크기로 제한합니다. 반대로 모바일 최대 글자 크기가 데스크탑 글자 크기보다 크면, 모바일에서 데스크탑 설정과 같은 크기로 보입니다.

4. 모바일 메뉴 설정하기

모바일 버전에서 석 삼자 모양의 아이콘을 클릭했을 때 열리는 모바일 전용 메뉴는 데스크탑 버전 메뉴 디자인과 별개로 디자인을 설정할 수 있습니다. [디자인 편집 도구 > 메뉴와 스타일 편집 버튼(Tab키) > 스타일 편집 > 모바일 메뉴]에서 변경할 수 있습니다.

모바일 뷰포트를 활용해 다양한 환경에서 최적화된 디자인으로 편집해보세요.

관련된 안내서 보기

디자인 편집하기

SixShop | 식스샵 안내서입니다.

SixShop | 식스샵 안내서입니다.