디자인 모드란?
사이트를 목적에 맞게 꾸미는 일은 디자인 모드에서 합니다. 이 장에서는 디자인 모드에서 반드시 숙지해야 할 사항들을 소개해 드리겠습니다.
먼저 다음의 영상을 통해 배워보세요
- 캠페이너스로 웹사이트 제작하기 기초 사용법 -
디자인 모드 접속 방법
- 주소창에 도메인(xxxx.campaignus.me 또는 mydomain.com)을 입력하고, 바로 이어 /admin을 추가 입력합니다.
- 관리자 계정으로 로그인을 하여 관리자 모드에 접속합니다.
- 관리자 모드의 메뉴 중(왼쪽) 디자인 모드를 누릅니다.
참고: 디자인 모드는 고도의 웹기술이 포함되어 있어 원활한 동작을 위해 웹표준을 제대로 준수하지 않는 Internet Explorer 접근은 제한하고 있습니다. (추천 브라우저 다운로드 : Google Chrome)
디자인 모드 작업환경
디자인 모드에는 총 14가지의 메뉴로 구성되어 있으며, 각 메뉴는 아래 그림과 함께 설명을 참조해주세요.
| 1 | 메뉴 관리 | 새로운 메뉴(페이지)를 생성하거나 이동, 메뉴 설정 확인시 사용합니다. |
| 2 | 위젯 추가 | 새로운 위젯을 추가하는 위젯 추가 버튼입니다. |
| 3 | 섹션 추가 | 현재 페이지에 새로운 섹션을 추가합니다. |
| 4 | 현재 메뉴명 |
현재 편집 중인 페이지의 이름을 표시합니다. |
| 5 | 메뉴 설정 |
메뉴의 이름 변경, 검색엔진 최적화용 페이지 설명, 접근 권한 설정, 메뉴를 숨기거나 삭제할 수 있습니다. |
| 6 | 뷰포트 변경 |
모바일 편집 모드와 데스크톱 편집 모드를 전환합니다. |
| 7 | 공통 디자인 설정 |
기본 서체 및 크기, 본문폭 등 사이트에 공통적으로 적용할 디자인을 설정합니다. |
| 8 | 미리보기 |
새 브라우저 탭을 열어 현재 페이지가 실제 브라우저에서 어떻게 보이는지 확인합니다. |
| 9 | 게시하기 |
게시하기를 누르면 방문자들이 작업한 사항을 볼 수 있도록 반영합니다. |
| 10 | 나가기 |
디자인 모드를 종료하고 관리자 모드로 이동합니다. |
| 11 | 겹치기 |
본문 배경 이미지를 상단 메뉴 아래에 겹치는 효과를 줍니다. |
| 12 | 상단설정 |
상단 디자인을 편집할 수 있습니다. |
| |
그 외 기본 개념들
- 위젯: 디자인 모드에서 가장 작은 단위입니다. 이미지, 동영상, 게시판, 텍스트 등의 요소를 위젯이라고 부릅니다.
- 섹션: 위젯을 포함한 영역입니다. 섹션을 이용해 배경색이나 간격을 다르게 구성하실 수 있습니다.
- 상단(또는 헤더): 사이트의 위 영역으로 주로 로고, 메뉴바, 로그인 등을 표시합니다.
- 하단(또는 푸터): 사이트의 아래 영역으로 주로 저작권 정보, 사이트 운영 정보 표시, 약관 및 개인정보처리방침 등을 표시합니다.
- 메뉴(또는 페이지): 위 사항들을 모두 포함한 개념이며, 사이트는 일반적으로 여러개의 메뉴로 구성되어 있습니다.