커서 올리기 효과를 적용하여 이미지를 개선하고 방문자의 관심을 사로잡을 수 있습니다.

호버 효과는 제품 이미지 위에 커서를 올렸을 때 정보를 표시하거나 움직임을 추가합니다. 이렇게 하면 사이트에 섬세한 수준의 상호 작용과 애니메이션이 추가됩니다. 이미지를 가리거나 페이지에서 추가 공간을 차지하지 않고 제목과 캡션을 표시할 수 있는 좋은 방법입니다.

이미지 블록과 슬라이드쇼 갤러리 블록이 있는 모든 사이트에서 커서 올리기 효과를 사용할 수 있습니다. 사이트 버전과 템플릿에 따라, 사이트의 다른 영역에서도 커서 올리기 효과를 지원할 수 있습니다. 이번 가이드는 각 영역을 자세히 설명합니다.

팁: 대부분의 모바일 기기는 커서 올리기 효과를 지원하지 않으므로 방문자가 사이트를 방문할 때 사용하는 기기에 따라 경험이 달라질 수 있습니다.

이미지 블록

플루이드 엔진 섹션에 추가된 이미지 블록은 커서 올리기 효과나 내장 캡션을 지원하지 않습니다. 텍스트 블록을 사용하여 이미지 블록 옆이나 오버레이로 텍스트를 추가하여 캡션을 만드세요.

인라인 이미지 블록에 커서를 올리면 캡션을 표시할 수 있습니다.

1. 새 이미지 블록을 추가하거나 기존 이미지 블록을 엽니다.
2. 디자인 탭을 클릭한 후 인라인을 선택합니다.
3. 콘텐츠 탭을 클릭한 다음 드롭다운 메뉴의 캡션에서 커서를 올리면 캡션 오버레이 를 선택합니다.
4. 이미지 블록 위에 커서를 올리세요. 표시되는 검은색 캡션 오버레이에서 여기에 캡션 쓰기...를 클릭하고 캡션을 입력하세요.
5. 페이지를 저장한 후, 커서를 올리면 캡션이 나타납니다. 스타일 조정을 사용하여 이미지 캡션의 스타일을 지정하세요.

슬라이드쇼 갤러리 블록

슬라이드쇼 갤러리 블록에 커서를 올리면 이미지 제목과 설명을 표시할 수 있습니다.

• 커서 올리기 효과는 슬라이드쇼 갤러리 블록 디자인에서만 사용할 수 있습니다.
• 모바일 기기의 크기가 480픽셀보다 좁으면 제목과 설명이 표시되지 않습니다.
• 커서를 올리면 표시되도록 설정된 캡션은 태블릿과 같은 대형 기기 또는 작은 기기의 가로 모드에서 표시될 수 있습니다. 캡션은 모바일 기기에 따라 항상 표시되거나 탭 또는 길게 누르면 표시됩니다.

텍스트를 추가하고 커서 올리기 효과를 활성화하는 방법:

1. 새로운 슬라이드쇼 갤러리 블록을 추가하거나 기존 슬라이드쇼 갤러리 블록을 여세요.
2. 콘텐츠 탭에서 이미지 위에 커서를 올리고 를 클릭하세요.
3. 제목과 설명을 입력하세요. 선택 사항으로 클릭스루 URL을 추가할 수도 있습니다. 
4. 저장을 클릭하세요.
5. 디자인 탭을 클릭합니다.
6. 제목 및 설명 표시를 확인합니다.
7. 제목 및 설명 위치 드롭다운 메뉴에서 위치를 선택합니다.
8. 커서 올리면 표시를 클릭합니다.
9. 적용을 클릭하세요.

포트폴리오 페이지

일부 포트폴리오 페이지 레이아웃은 커서 올리기 효과를 지원합니다. 포트폴리오 페이지 편집기에서 다음 레이아웃 중 하나를 선택하세요.

• 커서 올리기: 배경 - 프로젝트 제목을 스택형 또는 인라인 레이아웃으로 표시합니다. 제목 위에 커서를 올리면 프로젝트 대표 이미지가 섹션 배경을 대체합니다.
• 커서 올리기: 고정 - 프로젝트 제목을 스택형 또는 인라인 레이아웃으로 표시합니다. 제목 위에 커서를 올리면 프로젝트 대표 이미지가 섹션의 고정된 위치에 작게 표시됩니다.
• 커서 올리기: 커서 따라가기 - 프로젝트 제목을 스택형 또는 인라인 레이아웃으로 표시합니다. 제목 위에 커서를 올리면 프로젝트 대표 이미지가 더 작게 표시되고 커서가 움직일 때 따라갑니다. 

자세히 알아보려면 포트폴리오 페이지를 방문하세요. 

스토어 페이지

커서 올리기 효과는 사이트 버전에 따라 다르게 작동합니다. 

갤러리 페이지 (버전 7.0)

일부 템플릿은 갤러리 페이지에 대한 커서 올리기 효과를 지원합니다. 사이트 스타일을 사용하여 이러한 효과를 활성화하고 조정할 수 있습니다.

다음 템플릿 그룹에서 이미지 제목과 설명은 슬라이드쇼 및 그리드 디자인에서 커서를 올리면 표시됩니다.

• Adirondack
• Aviator
• Bedford
• 소금물
• Farro
• 다섯
• Galapagos
• Native
• Pacific
• Skye
• York

커서 올리기 효과를 활성화하고 맞춤 설정하기

갤러리 페이지에 있는 동안, 사이트 스타일을 열고 갤러리 스타일까지 아래로 스크롤하세요. 갤러리 디자인:을 클릭하고 슬라이드쇼 또는 그리드를 선택하세요.

• 슬라이드쇼 - 갤러리 정보 오버레이 드롭다운 메뉴에서 커서 올리면 표시를 선택하세요. 제목과 설명은 커서를 올리면 표시됩니다. 커서를 올리면 표시되도록 설정된 캡션은 태블릿과 같은 대형 모바일 기기 또는 작은 기기의 가로 모드에서 표시될 수 있습니다. 캡션은 모바일 기기에 따라 항상 표시되거나 탭 또는 길게 누르면 표시됩니다.
• 그리드 - 이미지에 클릭스루 URL이 없는 경우 이미지를 라이트박스에서 열면 커서를 올리면 제목과 설명이 표시됩니다. 자세히 알아보려면 이미지를 라이트박스에서 열도록 설정하기를 방문하세요.

템플릿별 다른 갤러리 페이지 효과

갤러리 페이지는 다음 템플릿 패밀리에서 특별한 커서 올리기 효과를 제공합니다.

• Forte - 갤러리 페이지의 캐러셀 위에 커서를 올리면 탐색 화살표가 나타납니다. 캡션 위에 커서를 올리면 캡션이 위로 올라가 더 긴 설명을 읽을 수 있습니다.
• Momentum - 전체 화면일 때 커서를 올리면 화살표 탐색이 표시됩니다.
• Tremont - 커서를 올리면 캡션이 표시됩니다.
• Wexley - 갤러리 페이지에서 이미지 위로 커서를 올리면 이미지 제목과 오버레이가 표시됩니다.

색인 페이지 (버전 7.0)

색인 페이지는 다음 템플릿 패밀리에서 특별한 커서 올리기 효과를 제공합니다.

• Avenue - 섬네일 위에 커서를 올리면 불투명도가 변경됩니다. 또한, 커서를 올리면 페이지의 탐색 제목을 표시할 수 있습니다.
• Flatiron - 섬네일 위로 커서를 올리면 이미지가 확대되고 이동합니다.
• Montauk - 섬네일 위로 커서를 올리면 불투명도가 변경됩니다.
• Tremont - 색인 탐색에서 페이지 제목 위로 커서를 올리면 해당 페이지의 대표 이미지가 배경 이미지로 표시됩니다.
• York - 커서를 올리면 섬네일 이미지가 흐려지고, 섬네일 제목은 커서를 올렸을 때 표시될 수 있습니다.

더 많은 도움이 필요한 경우 템플릿 가이드를 방문하세요.