thumbnail

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

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

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

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

  1. 디자인 모드에 접속합니다. 

  2. 비주얼섹션을 추가할 메뉴를 추가하거나, 특정 메뉴로 이동합니다. 

  3. 디자인 모드 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.

  4. 비주얼섹션을 클릭합니다.

  5. 비주얼섹션 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

  6. 컨텍스트 메뉴가 나오면 비주얼 설정을 클릭합니다.

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

  • 새 슬라이드 추가

    새로운 슬라이드 버튼을 클릭해 새 슬라이드를 추가할 수 있습니다.

  • 슬라이드 순서 변경 및 삭제

    : 슬라이드 목록에서 기존 슬라이드를 마우스 클릭 후 드래그하여 순서를 변경하거나, ⨂ 아이콘을 클릭해 삭제할 수 있습니다. 삭제한 슬라이드는 복구할 수 없습니다.

  • 슬라이드 에디터

    : 슬라이드 에디터에 텍스트를 작성하고, 이미지를 첨부하거나 링크를 추가하여 콘텐츠를 편집할 수 있습니다.

  • 슬라이드 배경 설정

    : 슬라이드 배경으로 이미지 또는 색상을 추가할 수 있습니다.

  • 슬라이드 동영상 배경

    : 슬라이드 배경으로 동영상을 추가할 수 있습니다. 동영상을 설정하는 경우 단일 슬라이드만 사용할 수 있습니다.

  • 슬라이드 링크

    : 슬라이드 클릭 시 이동할 링크 설정할 수 있습니다. 링크는 메뉴를 선택하거나 직접 URL을 입력할 수 있습니다.

  • 슬라이드 디자인 설정

    : 슬라이드 모드, 디자인, 전환 효과, 버튼 등 디자인을 변경할 수 있습니다.

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

  1. 비주얼섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

  2. 컨텍스트 메뉴가 나오면 위로 이동 또는 아래로 이동을 클릭해, 비주얼섹션의 위치를 이동합니다.

    참고: 비주얼섹션이 페이지의 최상단 또는 최하단에 위치하는 경우 한 방향으로만 이동 가능합니다.


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

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

  • 텍스트는 비주얼섹션에서 텍스트를 사용해 표현합니다.

  • 풍경, 패턴, 특정 사물에 포커스가 맞춰지지 않은 이미지를 선택합니다.