호버 이미지 링크

참고 자료 모든 요금제 2 분 소요

큰 이미지 옆에 링크 목록이 있고, 마우스를 올리면 이미지가 각 링크의 사진으로 바뀝니다. 전체 이미지 그리드만큼 공간을 쓰지 않고 카테고리(“New arrivals”, “Best sellers”, “Sale”)를 시각적으로 미리 보여 줄 때 사용하세요.

블록 추가하기

1. 레이아웃 선택하기

   미리 보기의 메가 메뉴 패널에서 블록 추가를 클릭합니다. 링크 목록을 클릭하고 Hover image links(호버 이미지 링크)에 마우스를 올린 다음 선택을 클릭합니다. “Collections” 제목과 샘플 링크 3개로 시작합니다.

   

   (1) 링크 목록 클릭, (2) Hover image links 선택.

2. 제목과 기본 이미지 설정하기

   항목 편집의 일반에서 제목을 입력하고 Default image(기본 이미지)를 고른 다음 Button label on image(이미지 위 버튼 라벨)를 입력합니다.

   

   미리 보기의 Hover image links 블록과 항목 편집의 설정.

3. 각 링크 설정하기

   제목을 입력하고 링크를 선택한 다음 Image on hover(호버 시 이미지)를 고릅니다. 추가를 클릭해 링크를 추가하거나 제거를 클릭해 삭제합니다.

4. 저장 및 게시하기

   Style(스타일)에서 이미지를 조정한 다음 저장과 게시를 클릭합니다.

설정

일반

제목기본값: Collections

링크 위의 텍스트입니다.

Default image기본값: 없음

자체 Image on hover가 없는 링크에 표시됩니다.

Button label on image기본값: Shop now

이미지 위, 링크 제목 아래에 표시되는 텍스트입니다. 비워 두면 제목만 표시됩니다.

너비기본값: 66.66%

블록이 메가 메뉴 줄에서 차지하는 비율입니다: 자동 또는 8.33%~100%.

Style

Image position기본값: 오른쪽

링크의 오른쪽 또는 왼쪽입니다.

이미지 비율기본값: 4:3

1:1, 4:3, 3:4, 16:9 또는 9:16.

각 링크

제목기본값: New arrivals, Best sellers, Sale

링크 텍스트입니다.

링크기본값: 없음

링크가 연결되는 곳입니다.

Image on hover기본값: 없음

쇼핑객이 이 링크에 마우스를 올리는 동안 표시되는 사진입니다.

블록당 링크는 최대 10개입니다. 각 링크는 요소 목록의 블록 아래에도 Add link(링크 추가) 버튼과 함께 표시됩니다. 링크를 끌어 순서를 바꾸거나, 목록이나 미리 보기에서 링크를 클릭해 자체 표시 여부를 포함한 그 링크만 편집할 수 있습니다. 블록 전체의 표시 여부는 모든 블록과 같습니다. 모든 블록에 공통인 설정을 참고하세요.

팁

• 링크를 바꿀 때 이미지 영역이 흔들리지 않도록 같은 모양의 이미지를 사용하고 이미지 비율을 그에 맞게 설정하세요.
• 링크 제목은 짧게 유지하세요. 제목은 이미지 위에도 표시됩니다.

관련 페이지

• 링크 목록메가 메뉴의 대표 블록인 링크 열을 추가하고, 아이콘, 이미지, 배지를 넣을 수 있습니다.
• 이미지제목, 설명, 링크가 있는 배너 또는 프로모션 이미지를 표시합니다.
• 블록 개요메가 메뉴나 탭에 링크, 이미지, 제품, 카운트다운 같은 블록을 추가합니다.

도움이 되었나요?

문제 신고