롤오버(Hover)란?
롤오버 또는 Hover란 이미지, 텍스트, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 일종의 전환효과를 말합니다.
이 기능은 디자인 모드 곳곳에서 확인할 수 있습니다. 이미지 위젯, 갤러리 위젯, 버튼 위젯, 쇼핑 위젯 등 롤오버 또는 Hover 옵션이 보이는 경우 적극적으로 이용해 보세요.
롤오버 기능을 모바일에서 사용할 수는 없나요?
모바일의 경우 마우스 포인터를 이미지에 올리는 개념이 없습니다. 이에 따라 롤오버는 PC에서만 사용 가능합니다.
관련 도움말
롤오버(Hover)를 활용한 이미지 전환 효과내기
도움말에 찾으시는 답변이 없으신가요? 문의하기
메뉴 숨김 옵션을 주면 특정 메뉴가 상단 메뉴, 메뉴 위젯, 모바일 서랍 메뉴 등에서 표시되지 않도록 숨길 수 있습니다. URL을 알면 접속은 가능하지만 메뉴에서는 표시되지 않기 때문에 방문자는 이 메뉴의 존재를 알 수 없습니다.
설정방법
새로운 메뉴 추가 시, 추가한 메뉴에는 숫자로 된 페이지 주소(URL)가 자동으로 부여됩니다. 방문자는 이 페이지 주소(URL)를 브라우저 주소창에 입력해 접속할 수 있으며, 페이지 주소는 다음 절차를 통해 언제든 변경할 수 있습니다.
변경방법
새 브라우저 탭을 열고, 위에서 설정한 페이지 URL을 입력해 접속을 테스트합니다.입력 예시: http://내도메인/board-review
상단 메뉴에 마우스 커서를 올렸을 때 메뉴명이 바뀌는 Hover 효과를 간단하게 적용할 수 있습니다.
적용방법
메뉴 추가 이후 언제든 메뉴명을 수정할 수 있습니다. 다음 절차에 따라 기존 메뉴 이름을 변경해 보세요.
상단은 최대 3개 열로 나눌 수 있으며, 각 열에는 위젯을 추가하여 디자인할 수 있습니다. 그러나 메뉴가 표시될 열의 너비가 지나치게 좁은 경우, 아래 그림과 같이 메뉴가 … 으로 표시될 수 있습니다.
상단 메뉴 영역은 마우스 드래그로 간편하게 조절할 수 있으며, 메뉴 개수에 따라 적절하게 조절해 주시면 됩니다.
해결방법
이 문제는 일반적으로 열의 간격이 좁아 생겨납니다. 메뉴 위젯의 경우 모든 메뉴가 모두 표시될 수 있도록 메뉴 위젯이 위치한 열의 가로 간격을 충분히 늘려주세요. 상단 열 간격 조절 방법은 아래의 도움말을 참고할 수 있습니다.
상단 열 간격 조절하기
대체방법
이 문제는 일반적으로 열의 간격이 좁아 생겨납니다. 메뉴 위젯의 경우 모든 메뉴가 모두 표시될 수 있도록 메뉴 위젯이 위치한열의 가로 간격을 충분히 늘려주세요. 상단 열 간격 조절 방법은 아래의 도움말을 참고할 수 있습니다.
본문폭 늘리기
웹사이트의 본문폭이 지나치게 좁은 경우, 상단 영역 좌우의 로고와 로그인/가입 메뉴로 인해 메뉴 표시영역이 좁아질 수 있습니다. 본문폭이 1280픽셀(px) 미만으로 설정된 경우, 아래 도움말을 참고해 본문폭을 늘려볼 수 있습니다.
본문폭 설정하기
그룹 메뉴로 구성하기
여러 관련 메뉴들을 하나의 그룹 메뉴로 구성해 최상위 메뉴를 줄여볼 수 있습니다. 예를 들어, 공지게시판, 문의게시판, 자주 묻는 게시판은 하나의 그룹 메뉴로 만들 수 있습니다. 그룹 메뉴 구성 방법은 아래 도움말을 참고해 주세요.
그룹 메뉴 만들기
상단 영역 가로 100% 확장하기
상단 영역의 본문폭을 100% 확장시켜 더 많은 공간을 확보할 수 있습니다. 이 옵션을 활성화하면 설정한 본문폭을 넘어 브라우저 가로 너비에 꽉 차게 표시됩니다. 상단 영역 가로 확장 방법은 아래 도움말을 참고하세요.
상단 메뉴 가로 100% 확장하기
상단은 필요에 따라 최대 3개의 열로 나눌 수 있으며, 각 열에 위젯을 추가하고 디자인할 수 있습니다. 만약 위젯을 추가하고, 열 간격이 부족하다고 생각된다면 아래의 방법에 따라 열 간격을 조절해 보시길 바랍니다.
조절방법
게시물 작성, 구매하기 버튼 등 특정 버튼의 색상을 강조하여 일반 버튼과 다른 스타일을 지정할 수 있습니다.
기본 버튼과 롤오버 버튼 스타일을 수정합니다.
컬러픽커의 투명도 조절 슬라이더를 사용해 색상을 투명하게 처리할 수 있습니다. 투명 색상은 색상 변경 가능한 옵션이 있는 모든 위젯(텍스트 편집모드 포함), 섹션에 적용할 수 있습니다.
투명도 조절방법
모바일 전용 상단 디자인을 편집할 수 있습니다.
모바일 상단 작업 시 콘텐츠를 과하게 추가하지 마세요. 모바일 기기는 PC 대비 화면이 가로폭이 매우 좁아, 방문자가 보고 터치하는 데 어려움을 겪을 수 있습니다.
편집방법
1.단계: 뷰포트 변경하기
2단계: 모바일 상단 꾸미기
아래 그림과 같이 위젯 추가 ⨁ 버튼이 나오면 클릭합니다.
롤오버(Hover)란?
롤오버 또는 Hover란 이미지, 텍스트, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 일종의 전환효과를 말합니다.
이 기능은 디자인 모드 곳곳에서 확인할 수 있습니다. 이미지 위젯, 갤러리 위젯, 버튼 위젯, 쇼핑 위젯 등 롤오버 또는 Hover 옵션이 보이는 경우 적극적으로 이용해 보세요.
롤오버 기능을 모바일에서 사용할 수는 없나요?
모바일의 경우 마우스 포인터를 이미지에 올리는 개념이 없습니다. 이에 따라 롤오버는 PC에서만 사용 가능합니다.
관련 도움말
롤오버(Hover)를 활용한 이미지 전환 효과내기
도움말에 찾으시는 답변이 없으신가요? 문의하기
메뉴 숨김 옵션을 주면 특정 메뉴가 상단 메뉴, 메뉴 위젯, 모바일 서랍 메뉴 등에서 표시되지 않도록 숨길 수 있습니다. URL을 알면 접속은 가능하지만 메뉴에서는 표시되지 않기 때문에 방문자는 이 메뉴의 존재를 알 수 없습니다.
설정방법
관련 도움말
도움말에 찾으시는 답변이 없으신가요? 문의하기
새로운 메뉴 추가 시, 추가한 메뉴에는 숫자로 된 페이지 주소(URL)가 자동으로 부여됩니다. 방문자는 이 페이지 주소(URL)를 브라우저 주소창에 입력해 접속할 수 있으며, 페이지 주소는 다음 절차를 통해 언제든 변경할 수 있습니다.
변경방법
새 브라우저 탭을 열고, 위에서 설정한 페이지 URL을 입력해 접속을 테스트합니다.
입력 예시: http://내도메인/board-review
도움말에 찾으시는 답변이 없으신가요? 문의하기
상단 메뉴에 마우스 커서를 올렸을 때 메뉴명이 바뀌는 Hover 효과를 간단하게 적용할 수 있습니다.
적용방법
도움말에 찾으시는 답변이 없으신가요? 문의하기
메뉴 추가 이후 언제든 메뉴명을 수정할 수 있습니다. 다음 절차에 따라 기존 메뉴 이름을 변경해 보세요.
변경방법
참고: 메뉴명이 바로 변경되지 않을 시 새로고침(F5) 후 확인해 보세요.
도움말에 찾으시는 답변이 없으신가요? 문의하기
상단은 최대 3개 열로 나눌 수 있으며, 각 열에는 위젯을 추가하여 디자인할 수 있습니다. 그러나 메뉴가 표시될 열의 너비가 지나치게 좁은 경우, 아래 그림과 같이 메뉴가 … 으로 표시될 수 있습니다.
상단 메뉴 영역은 마우스 드래그로 간편하게 조절할 수 있으며, 메뉴 개수에 따라 적절하게 조절해 주시면 됩니다.
해결방법
이 문제는 일반적으로 열의 간격이 좁아 생겨납니다. 메뉴 위젯의 경우 모든 메뉴가 모두 표시될 수 있도록 메뉴 위젯이 위치한 열의 가로 간격을 충분히 늘려주세요. 상단 열 간격 조절 방법은 아래의 도움말을 참고할 수 있습니다.
상단 열 간격 조절하기
대체방법
이 문제는 일반적으로 열의 간격이 좁아 생겨납니다. 메뉴 위젯의 경우 모든 메뉴가 모두 표시될 수 있도록 메뉴 위젯이 위치한열의 가로 간격을 충분히 늘려주세요. 상단 열 간격 조절 방법은 아래의 도움말을 참고할 수 있습니다.
본문폭 늘리기
웹사이트의 본문폭이 지나치게 좁은 경우, 상단 영역 좌우의 로고와 로그인/가입 메뉴로 인해 메뉴 표시영역이 좁아질 수 있습니다. 본문폭이 1280픽셀(px) 미만으로 설정된 경우, 아래 도움말을 참고해 본문폭을 늘려볼 수 있습니다.
본문폭 설정하기
그룹 메뉴로 구성하기
여러 관련 메뉴들을 하나의 그룹 메뉴로 구성해 최상위 메뉴를 줄여볼 수 있습니다. 예를 들어, 공지게시판, 문의게시판, 자주 묻는 게시판은 하나의 그룹 메뉴로 만들 수 있습니다. 그룹 메뉴 구성 방법은 아래 도움말을 참고해 주세요.
그룹 메뉴 만들기
상단 영역 가로 100% 확장하기
상단 영역의 본문폭을 100% 확장시켜 더 많은 공간을 확보할 수 있습니다. 이 옵션을 활성화하면 설정한 본문폭을 넘어 브라우저 가로 너비에 꽉 차게 표시됩니다. 상단 영역 가로 확장 방법은 아래 도움말을 참고하세요.
상단 메뉴 가로 100% 확장하기
도움말에 찾으시는 답변이 없으신가요? 문의하기
상단은 필요에 따라 최대 3개의 열로 나눌 수 있으며, 각 열에 위젯을 추가하고 디자인할 수 있습니다. 만약 위젯을 추가하고, 열 간격이 부족하다고 생각된다면 아래의 방법에 따라 열 간격을 조절해 보시길 바랍니다.
조절방법
도움말에 찾으시는 답변이 없으신가요? 문의하기
게시물 작성, 구매하기 버튼 등 특정 버튼의 색상을 강조하여 일반 버튼과 다른 스타일을 지정할 수 있습니다.
설정방법
기본 버튼과 롤오버 버튼 스타일을 수정합니다.
도움말에 찾으시는 답변이 없으신가요? 문의하기
컬러픽커의 투명도 조절 슬라이더를 사용해 색상을 투명하게 처리할 수 있습니다. 투명 색상은 색상 변경 가능한 옵션이 있는 모든 위젯(텍스트 편집모드 포함), 섹션에 적용할 수 있습니다.
투명도 조절방법
도움말에 찾으시는 답변이 없으신가요? 문의하기
모바일 전용 상단 디자인을 편집할 수 있습니다.
모바일 상단 작업 시 콘텐츠를 과하게 추가하지 마세요. 모바일 기기는 PC 대비 화면이 가로폭이 매우 좁아, 방문자가 보고 터치하는 데 어려움을 겪을 수 있습니다.
편집방법
1.단계: 뷰포트 변경하기
2단계: 모바일 상단 꾸미기
아래 그림과 같이 위젯 추가 ⨁ 버튼이 나오면 클릭합니다.
도움말에 찾으시는 답변이 없으신가요? 문의하기