공통 디자인 설정하기

공통 디자인 설정을 변경해 페이지마다 공통으로 적용할 텍스트의 크기와 색상, 기본 배경색, 본문폭, 글꼴(폰트), 버튼 디자인 등을 설정할 수 있습니다.

공통 디자인 설정에서 설정한 디자인 값들은 일부 항목을 제외하고 개별적으로 수정할 수도 있습니다. 예를 들어, 버튼의 공통 디자인을 설정했다 하더라도, 버튼 위젯마다 다른 디자인으로 만들 수 있습니다.

설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 오른쪽 상단의 톱니바퀴 아이콘을 클릭합니다.
  3. 디자인 모드 오른쪽에서 공통 디자인 설정 메뉴가 나타납니다.
  4. 아래 공통 디자인 설정 세부항목을 살펴보고, 내 사이트에 공통으로 적용할 디자인 항목을 수정합니다.
  5. 모든 설정을 완료했다면 오른쪽 상단의 ✕ 아이콘을 클릭하거나, 공통 디자인 설정 바깥 영역 아무 곳을 클릭합니다.
  6. '공통 디자인 설정을 저장 하시겠습니까?' 문구와 함께 경고 창이 나타납니다.
  7. 저장 버튼을 클릭합니다.
  8. 잠시 후에 변경한 공통 디자인 설정이 적용됩니다.

공통 디자인 설정 세부항목

  1. 브랜드/링크색: 구매하기, 로그인 버튼, 게시물 기본 링크색, 자동 발송 메일의 강조 등에 사용됩니다. 흰색 또는 밝은색 사용시 보이지 않는 경우가 생길 수 있으므로 주의가 필요합니다.
  2. 뱃지색: 알림 카운트 등을 표시하는데 사용하는 뱃지의 배경색을 설정합니다. 뱃지의 숫자는 흰색이므로 너무 밝지 않은 색상 적용이 권장됩니다.
  3. 글자색:본문 텍스트 기본 색상을 변경할 수 있습니다.
  4. 배경색: 내 사이트의 기본 배경색을 설정합니다. 섹션에서 설정한 배경이 있을 경우 기본 배경색 위에 덮어씌우게 됩니다.
  5. 본문폭: 데스크톱(PC) 모드의 기본 본문 가로폭을 설정합니다. 사이트의 모든 페이지에 영향을 주며, 위젯의 가로영역 확장 또는 섹션 가로 100% 확장이 적용된 영역은 본문폭이 적용되지 않습니다.
  6. 그리드 간격: 위젯과 위젯간의 상, 하, 좌, 우 간격을 설정합니다. 섹션 설정에서 그리드 간격 사용 시 섹션 설정이 더 우선시 됩니다.

  1. 텍스트 정의: 내 사이트에서 사용하는 가장 기본적인 텍스트를 설정합니다.
  2. 본문 한/중/일: 단락이 본문(표준)으로 설정된 텍스트의 한글/중국어/일어 글꼴을 변경할 수 있습니다.
  3. 본문 영문 글꼴: 단락이 본문(표준)으로 설정된 텍스트의 영어 글꼴을 변경할 수 있습니다.
  4. 제목 한/중/일: 단락이 제목(Heading)으로 설정된 텍스트의 한글/중국어/일어 글꼴을 변경할 수 있습니다.
  5. 제목 영문 글꼴: 단락이 제목(Heading)으로 설정된 텍스트의 영어 글꼴을 변경할 수 있습니다.

  1. 버튼 스타일: 입력폼 위젯, 상품, 예약 상세페이지, 주문페이지 등 버튼이 포함된 항목의 스타일을 설정합니다. 일부 상황(로그인, 회원가입)에서는 버튼 스타일이 반영되지 않습니다.
  2. 입력 필드: 입력폼 위젯, 상품, 예약 상세페이지, 주문페이지 등 입력요소가 있는 항목의 스타일을 설정합니다. 일부 상황(로그인, 회원가입)에서는 입력 스타일이 반영되지 않습니다.
  3. 말풍선 스타일: 각종 위젯의 링크 타입을 말풍선으로 사용할 경우 표시될 말풍선의 스타일을 설정합니다. 이 설정은 모든 말풍선에 동일하게 적용됩니다.
  4. 페이징 스타일: 비주얼섹션 및 슬라이드 갤러리의 페이징 스타일을 지정합니다.
  5. 기본 No-Image: 게시판 및 최신글 위젯(그리드 및 Masonry 게시판 타입) 등에 공통적으로 표시할 기본 이미지를 지정할 수 있습니다. *게시물에 대표 이미지를 지정한 경우 대표 이미지가 우선 적용됩니다.
  6. 차단 No-Image: 게시판 및 최신글 위젯(그리드 및 Masonry 게시판 타입)에 추가된 게시물이 차단된 게시물일 때, 작성자가 올린 게시물 이미지 대신 표시할 기본 이미지를 지정합니다.

  1. 원페이지 구성: 대메뉴가 원페이지로 구성됩니다. 대메뉴의 하위메뉴(서브메뉴)는 원페이지 적용 대상이 아니며, 미리보기에서만 원페이지 구성을 확인하실 수 있습니다. 상세 설정방법
  2. 모바일 폰트유지: 모바일에서도 설정한 글꼴(폰트)가 로드됩니다. 한글 폰트의 경우 용량이 많은 편이기에 로드 속도가 지연될 수 있으므로 특별한 경우가 아닌한 사용 해제를 권장합니다.
  3. 모바일에서 PC 보기 버튼 사용: 모바일에서 접속 시 페이지 최하단에 PC 보기 버튼을 표시합니다. PC 보기 버튼의 배경색과 글자색은 마지막 섹션을 따릅니다.
  4. 로그인/가입 모달로 사용: 이 옵션을 사용하면 로그인이나 가입창이 현재 페이지에서 모달(팝업) 형태로 나타납니다. 해제 시 메뉴 관리의 글로벌 메뉴에서 로그인, 가입 페이지를 직접 디자인(변경) 할 수 있습니다. 단, 사이트 접속 시 성인인증 페이지 출력 사용 시, 해당 페이지에서는 이 설정에 관계 없이 팝업 형태로 로그인, 가입 페이지가 동작합니다.
  5. 가입완료 후 특정 위치로 이동: 가입완료 후 항상 설정한 메뉴로 이동합니다.
  6. 로그인 후 특정 위치로 이동: 로그인 후 이동할 메뉴를 설정합니다. 로그인 위젯이나 모바일 메뉴의 로그인 영역을 통해서 로그인 시에만 적용되며 이외에는 마지막 접속 메뉴로 이동합니다.
  7. 페이지 전환시 페이드 효과: 사이트 내에서 링크 이동, 메뉴 이동 등 페이지 전환 시 서서히 전환되는 효과를 적용합니다. 디자인 모드가 아닌 미리보기에서 적용 상태를 메뉴 등을 클릭해 확인할 수 있습니다. Safari(사파리) 브라우저에서는 호환성 문제로 지원하지 않습니다.
  8. 위젯에 애니메이션 적용: 상단 섹션을 제외한 모든 위젯에 페이드인 애니메이션 효과가 지속시간 2초로 적용됩니다. 위젯마다 개별 적용한 경우 이 설정을 따르지 않습니다. 개별 애니메이션 설정방법
  9. 첫 로드시에만 애니메이션 실행: 스크롤이 닿을 때마다 애니메이션이 계속 실행되지 않고 처음 로드시에만 애니메이션을 실행합니다. 단, 모바일에서는 속도 저하를 방지하기 위해 항상 첫 로드시에만 애니메이션이 실행됩니다.

공통 디자인 설정 적용 또는 취소하기

설정한 공통 디자인 설정을 적용하거나 취소하는 방법을 설명합니다.

  1. 공통 디자인 설정 오른쪽 상단의 ✕ 를 클릭하거나, 공통 디자인 설정 바깥 영역 아무 곳을 클릭합니다.
  2. 공통 디자인 설정을 저장 하시겠습니까? 문구와 함께 경고 창이 나타납니다.
  3. 적용을 하려면 저장 버튼을, 적용하지 않고 종료하려면 취소 버튼을 클릭합니다.
목록으로