이미지 목록 섹션

일련의 이미지 및 관련 텍스트를 표시하려면 이미지 목록 섹션을 사용하십시오.

이 섹션을 사용하면 웹사이트 내의 다른 페이지를 쉽게 연결하거나 각 링크에 대한 이미지와 설명을 추가하려는 링크를 추가할 수 있습니다.


이 기사는 다음 주제들로 구성되어 있습니다 :

  1. 이미지 목록이란 무엇입니까?
  2. 페이지에 이미지 목록 섹션 추가
  3. 목록 항목 추가 및 편집
  4. 시퀀싱 목록 항목
  5. 목록 항목 삭제
  6. 섹션 레이아웃 변경
  7. 스타일 옵션
  8. 회전 목마 스타일
  9. 라이브 예

이미지 목록

  • 이미지 목록은 이미지에 대한 설명을 추가하고 웹 사이트의 다른 페이지 또는 다른 링크와 연결하기 위한 링크 또는 버튼을 추가할 수 있는 이미지 모음입니다.

이미지 목록 섹션 추가

  • 페이지에 섹션을 추가할 수 있습니다. 이미 존재하는 페이지에 섹션을 추가하거나 새 페이지 만들기 귀하의 웹사이트 내에서.
  • 귀하의 페이지에서은 클릭 파란색 + 아이콘 추가 새 섹션 귀하의 페이지에.

  • 이제 섹션 카테고리 왼쪽에
  • 선택 목록(1) 카테고리를 클릭하고 이미지 목록 선택할 수 있는 탭(2) 다른 레이아웃 이미지 목록의 (3).

  • 섹션 레이아웃을 선택하고 클릭하여 페이지에 추가하십시오.
참고 :

  1. 섹션 폭을 관리할 수 있습니다. 설정 섹션 및 콘텐츠 너비 콘텐츠 스타일.
  2. 이 섹션에서 업로드해야 하는 이상적인 이미지 크기는 열 수에 따라 다릅니다. 더 많이 알아라..
  3. 제목, 부제 및 설명을 짧고 선명하게 유지하십시오.
  4. 설명 필드에서 엔터 버튼 줄 바꿈을 제공하는 버튼과 Shift + Enter 바로 다음 줄부터 시작하는 버튼입니다.


목록 항목 추가 및 편집

목록 항목 추가

섹션을 추가한 후:

  • 온 클릭 이미지 목록 편집 (1) 버튼을 눌러 목록 항목 패널을 엽니다.

  • 온 클릭 항목 추가(2) 버튼을 눌러 새 목록 항목을 추가합니다.
  • 당신은 선택할 수 있습니다 D복제 또는 삭제 (3) 목록 항목.


목록 항목 편집

편집할 목록 항목을 클릭합니다. 특정 목록 항목 편집 옵션이 열립니다.

여기에서 다음을 수행할 수 있습니다.

  • 이미지 업로드/제거 (1) 목록 항목의 경우. 다음을 설정할 수도 있습니다. 이미지 강조 색상 여기에서 이미지 호버에 표시됩니다.
  • 추가 할 Title (2), 자막 (3), 및 설명 (4) 목록 항목의.
  • 선택한 레이아웃에 따라 특정 목록 항목에서 자막 및 설명 옵션을 찾지 못할 수 있습니다.
    설명을 추가하기 전에 확인하십시오. 문서를 참조하십시오.

  • 의 Link Builder 아이콘을 클릭합니다. 제목 링크 (5) 링크 빌더를 열어 목록 항목 제목을 페이지에 연결합니다. 더 많이 알아라. about 링크 빌더.
  • 다음에서 열리도록 링크 설정 새 탭 또는 같은 탭에서 (6).
  • 모든 유형 추가 (링크) (7) 목록 항목에. 버튼/이미지 링크/소셜 아이콘/텍스트 링크를 추가할 수 있습니다. 자세히 알아보기.
  • 찜하기 (8) 귀하의 변경 사항.


작동 중인 이미지 목록 항목 편집을 참조하십시오.


시퀀스 목록 항목

  • 목록 항목을 쉽게 드래그 앤 드롭하여 순서를 변경할 수 있습니다.

작동 중인 이미지 목록 항목의 시퀀싱을 참조하십시오. 


목록 항목 삭제

목록 항목을 추가한 후에는 항목을 수정하고 삭제할 수 있습니다.

  • 온 클릭 . 이미지 목록 항목 옆에 있는 아이콘.
  • 네, 클릭 . 확인 팝업의 버튼.
  • 마지막으로, 저장 당신의 변경.

작동 중인 이미지 목록 항목 삭제를 참조하십시오. 

주의 사항

한 번 삭제된 목록 항목은 복구할 수 없습니다.


섹션 레이아웃

  • 온 클릭 이미지 목록 관리 (1) 버튼.
  • 선택 레이아웃 (2) 탭.
  • 선택 (3) 섹션의 레이아웃 및 찜하기 (4) 변경 사항.

 

프로 팁

전체 너비 섹션/탭 목록 섹션을 만들려면 25~29 범위의 레이아웃을 선택하세요.

노트

  • 페이지에 탭 목록 레이아웃을 쉽게 추가할 수 있습니다.
  • 가로 탭/세로 탭 레이아웃 중에서 선택할 수 있는 옵션이 있습니다.
  • 비교 기반 섹션을 만드는 데 도움이 됩니다.


섹션 스타일 지정

  • 를 클릭하십시오 이미지 목록 관리(1) 버튼을 클릭합니다.
  • 선택 스타일 (2) 탭.
  • 섹션 요소의 스타일을 변경하고 저장 (3) 당신의 변경.


섹션에 대한 여러 스타일 옵션이 있습니다. 

항목 

  1. 로 선택 항목 표시 in 행과 열 or 회전 목마 
    • 당신이 선택한 경우 행과 열 옵션을 선택하면 목록 항목이 행과 열로 정렬됩니다. 이 경우 행과 열의 수를 지정해야 합니다.
    • 당신이 선택한 경우 회전 목마 옵션을 선택하면 목록 항목이 슬라이드쇼로 표시됩니다. 더 많이 알아라..
  2. 설정 열 수 이미지 목록의 경우. 1~10열 중에서 선택할 수 있습니다.
  3. 지정 열 사이의 공간 목록 항목 중.
  4. 지정 행 사이의 공백 목록 항목 중.
  5. 선택 콘텐츠 순서 즉, 먼저 표시될 목록 항목의 이미지 또는 관련 텍스트입니다.
  6. 정렬 콘텐츠를 가로로 이미지 목록에서. 왼쪽, 오른쪽 또는 가운데 정렬로 설정할 수 있습니다.
  7. 정렬 콘텐츠를 세로로 이미지 목록에서 상단, 중앙, 하단 정렬로 설정할 수 있습니다.

1단계에서 회전판 옵션을 선택한 경우 다음과 같은 추가 옵션이 표시됩니다.

  1. 로 선택 회전 목마 반복 아니면 않습니다.
  2. 캐러셀의 경우 탐색 컨트롤. 컨트롤 없음, 화살표 – 중앙 하단/오른쪽 상단/오른쪽 하단, 쉐브론 또는 점 중에서 선택할 수 있습니다.

모바일 디스플레이

  1. 수를 설정 그리드 기둥 모바일 장치용. 최대 3개 열까지 설정할 수 있습니다.
  2. 정의 간격 그리드 사이(픽셀 단위).

이미지 

  1. 선택 I마법사 자르기 목록 항목의 경우. 이미지를 정사각형, 원형, 가로, 세로, 원본으로 설정할 수 있습니다.
  2. 목록 항목의 각 측면에 대해 공통 모서리 반경 또는 다른 모서리 반경을 갖도록 선택하고 C반경 목록 항목 이미지 중. 더 많이 알아라..

사용법 - 모서리 반경 필드에서 다양한 모양의 목록 항목 이미지를 만들 수 있습니다. 여기서 500px를 지정하면 이미지가 원 모양으로 표시됩니다.

  • 분할 모서리를 선택한 경우 각 모서리에 대해 서로 다른 모서리 반경을 설정할 수 있습니다.

이미지 호버 시 

  1. 선택 이미지 호버 색상 너는 악센트 색상 또는 될 지정. 선택했다면 악센트 색상을 지정한 다음 불투명.
  2. 당신이 선택한 경우 색상 지정 옵션을 설정한 다음 기본 호버 색상 및 불투명도 목록 항목에 대해.
  3. 설정 요소 섹션의 목록 항목에 대한 색상입니다.
  4. 로 선택 목록 항목 이미지에 애니메이션 적용 마우스를 올리면 예를 클릭합니다. 라이브 페이지에서 이 기능을 확인하십시오..
  5. 선택 애니메이션 스타일 커서를 이미지 위로 가져갈 때의 이미지.

크기 및 공간 

  1. 지정 이미지 폭 목록 항목의 경우.
  2. 지정 콘텐츠 너비 목록 항목에 대해.
  3. 지정 섹션 제목 아래 공간 px에서.
  4. 지정 이미지 아래 공간 목록 항목의 (%).
  5. 지정 제목 아래 공간 목록 항목의 (%).
  6. 지정 자막 아래 공간 목록 항목의 (%).

본문 

  1. 온 클릭 텍스트 스타일 변경 방문하기 버튼 디자인 섹션 글꼴 크기와 스타일을 관리하세요. 
  2. 설정 Title 섹션의 목록 항목에 대한 글꼴 스타일.
  3. 설정 부제 섹션의 목록 항목에 대한 글꼴 스타일.
  4. 기본값 설정 상품 설명 섹션의 목록 항목에 대한 글꼴 스타일.

카드 

  1. 방법을 참조하십시오 카드를 관리합니다.

그림자

  1. 디스플레이 – 항상 목록 항목 뒤에 그림자를 표시하거나 가리키기만 하면 표시되도록 선택합니다.
  2. 스타일 – 기존 사전 설정에서 선택하거나 사용자 지정 그림자를 만듭니다.
    사용자 정의 옵션을 선택한 경우 다음을 방문하십시오. 상자 그림자 생성기 사용자 지정 그림자를 만듭니다. 마지막으로 복사 붙여넣기 상자 그림자 CSS.
  3. 사전 설정 옵션을 선택한 경우 그림자 스타일 선택 드롭 다운에서

  1. 방법을 참조하십시오 스타일링을 관리하기 위해 버튼 및 링크.
  2. 찜하기 모든 스타일이 변경됩니다.


회전 목마 스타일

Carousel 스타일은 목록 항목을 슬라이드쇼로 표시합니다. 즉, 목록 항목이 차례로 순환됩니다.

캐러셀 스타일이 어떻게 작동하는지 확인하세요. 


라이브 이미지 목록은 다음과 같습니다. 

라이브 데모 사이트를 봅니다. 


코너 반경이 어떻게 작동하는지 확인하십시오. 


원하는 것을 찾을 수 없습니까?

Pixpa 전문가에게 문의하세요.