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

비주얼 섹션(메인 배너)은 섹션 전체가 가로 슬라이드 되는 형태를 말합니다. 사이트의 대표적인 아이덴티티를 나타내거나 중요한 정보를 알리는데 특화되어 있습니다.

슬라이드가 2개 이상인 경우 다음 슬라이드로 전환 시 Fade, Slide 등의 전환 효과가 일어납니다. 단, 슬라이드를 1개만 삽입한 경우 이 전환 효과는 동작하지 않습니다.

비주얼 섹션의 배경으로 사용하기 좋은 이미지는?

비주얼 섹션 내 배경 이미지는 브라우저 가로폭을 기준으로 꽉 차게 표시됩니다. 사용자 기기의 화면 크기는 매우 다양하고 비주얼 섹션에 사용한 이미지는 모바일에서도 그대로 사용됩니다.브라우저 가로폭에 따라 원본 이미지의 상하 또는 좌우가 잘려 표시될 수 있기 때문에, 배경 이미지를 제작하실 때 가장자리에 여유 공간을 주셔야 합니다. 

특히 텍스트가 가득찬 이미지나 특정 인물 또는 특정 제품이 모두 보여야하는 사진은 비주얼 섹션 배경이미지로 부적절합니다. 

PC에서 잘 보인다 하더라도, 다음 그림처럼 다른 기기에서는 잘려 보일 수 있습니다.

 

비주얼 섹션 설정하기 

  1. 디자인 모드 > (왼쪽 윗부분 마술 지팡이 아이콘) 섹션 추가 클릭 > 비주얼 카테고리 선택 > 원하는 이미지 선택합니다.
  2. 섹션 위에서 마우스 우클릭 > 비주얼 설정 클릭 > 비주얼 섹션을 클릭합니다.
  3. 새로운 슬라이드를 클릭하여 이미지 추가합니다.
    1. 추가된 이미지 오른쪽 위의 X 를 눌러 추가된 슬라이드를 삭제할 수 있습니다.
  4. 에디터 툴바 내에서 텍스트를 넣거나 링크를 넣어 버튼을 만들 수 있습니다.

  5. 비주얼 섹션의 슬라이드 속도 및 효과 선택, 버튼의 색상 등은 가운데 윗부분  디자인 을 클릭하여 설정할 수 있습니다.  

적절한 비주얼 섹션 활용 팁💡

- 풍경, 패턴, 특정 이미지의 가장자리가 짤려도 되는 이미지를 활용하세요.
- 텍스트, 버튼, 링크 등은 비주얼 설정에서 적용합니다.
- 비주얼 섹션에 사용한 배경이미지의 해상도가 높은 이미지임에도 초점이 맞지 않고 흐릿하게 보인다면 비주얼 섹션 아래쪽 끄트머리를 마우스로 드래그하여 높이 조절해보세요.  
4. 이미지의 비율을 유지하여 모든 기기에서 표현하고 싶다면 이미지 위젯이나 갤러리 위젯을 이용해 보세요.