비주얼 섹션(메인 배너) 설정하기

비주얼섹션이란?

슬라이드 방식으로 동작하는 비주얼섹션은 사이트의 대표적인 아이덴티티를 나타내거나 중요한 정보(이벤트, 행사 등)를 알리는데 사용됩니다.

사용방법

1단계: 비주얼섹션 추가하기

메뉴에 비주얼섹션을 추가합니다.

디자인 모드에 접속합니다.
비주얼섹션을 추가할 메뉴를 추가하거나, 특정 메뉴로 이동합니다.
디자인 모드 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
비주얼섹션 을 클릭합니다.
비주얼섹션 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 비주얼 설정 을 클릭합니다.

2단계: 비주얼 설정하기

비주얼 설정 창이 나오면 아래의 그림과 설명을 참고해, 필요한 만큼 슬라이드를 추가하고 콘텐츠를 작성합니다.

새 슬라이드 추가: 새로운 슬라이드 버튼을 클릭해 새 슬라이드를 추가할 수 있습니다.
슬라이드 순서 변경 및 삭제: 슬라이드 목록에서 기존 슬라이드를 마우스 클릭 후 드래그하여 순서를 변경하거나, ⨂ 아이콘을 클릭해 삭제할 수 있습니다. 삭제한 슬라이드는 복구할 수 없습니다.
슬라이드 에디터: 슬라이드 에디터에 텍스트를 작성하고, 이미지를 첨부하거나 링크를 추가하여 콘텐츠를 편집할 수 있습니다.
슬라이드 배경 설정: 슬라이드 배경으로 이미지 또는 색상을 추가할 수 있습니다.
슬라이드 동영상 배경: 슬라이드 배경으로 동영상을 추가할 수 있습니다. 동영상을 설정하는 경우 단일 슬라이드만 사용할 수 있습니다.
슬라이드 링크: 슬라이드 클릭 시 이동할 링크 설정할 수 있습니다. 링크는 메뉴를 선택하거나 직접 URL을 입력할 수 있습니다.
슬라이드 디자인 설정: 슬라이드 모드, 디자인, 전환 효과, 버튼 등 디자인을 변경할 수 있습니다.

3단계: 비주얼섹션 위치 이동하기

비주얼섹션은 위 또는 아래로 이동할 수 있습니다.

비주얼섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 위로 이동 또는 아래로 이동을 클릭해, 비주얼섹션의 위치를 이동합니다.
참고: 비주얼섹션이 페이지의 최상단 또는 최하단에 위치하는 경우 한 방향으로만 이동 가능합니다.

권장하는 배경 이미지 형태

비주얼섹션 내 배경 이미지는 브라우저 가로폭을 기준으로 꽉 차게 표시됩니다. 비주얼섹션은 하단 끄트머리를 마우스로 드래그하여 높이 조절이 가능하지만, 브라우저 가로폭에 따라 원본 이미지의 상하 또는 좌우가 잘려 표시될 수 있기 때문에, 배경 이미지를 작업하실 때 사방에 여유 공간을 주세요.

사용자 기기의 화면 크기는 매우 다양하고 비주얼섹션에 사용한 이미지는 모바일에서도 그대로 사용됩니다. 따라서 이미지에 텍스트가 포함되거나 특정한 인물 또는 제품에 포커스가 맞춰진 사진은 PC에서 잘 보인다 하더라도, 아래 그림처럼 다른 기기에서는 잘려 보일 수 있습니다.

텍스트는 비주얼섹션에서 텍스트를 사용해 표현합니다.
풍경, 패턴, 특정 사물에 포커스가 맞춰지지 않은 이미지를 선택합니다.