이미지 슬라이더 모듈 사용

이미지 슬라이더 모듈을 사용하여 동일한 모듈에 여러 이미지를 표시할 수 있습니다. 이미지를 자동으로 순환하도록 설정하거나 방문자가 이미지를 수동으로 전환하도록 지원할 수 있습니다.

이미지 슬라이더 모듈에서 슬라이드 추가 및 편집하기

1. 콘텐츠로 이동합니다:

   • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
   • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
   • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
2. 콘텐츠의 이름을 클릭합니다.
3. 콘텐츠 편집기에서 왼쪽 사이드바의 add 추가 아이콘을 클릭합니다.
4. 클릭하여 미디어 카테고리를 확장한 다음 이미지 슬라이더 모듈을 클릭하고 제자리로 끌어다 놓습니다.
5. 왼쪽 사이드바에서 슬라이드 위로 마우스를 가져간 다음 edit 편집 아이콘을 클릭하여 해당 슬라이드에 이미지를 추가합니다:
   
   • 이미지 섹션에서 업로드를 클릭하여 컴퓨터에서 이미지를 선택하거나 이미지 찾아보기를 클릭하여 파일 도구에서 이미지를 선택합니다. 이미지를 생성하려면 AI로 생성을 클릭합니다.
   • 캡션 필드에 이미지 아래에 표시할 캡션을 입력합니다. 캡션 없이 이미지를 표시하려면 기본 텍스트를 삭제합니다.
   
   • 슬라이드에 링크를 추가하려면 다음과 같이 하세요:
     • 링크 대상 드롭다운 메뉴를 클릭하고 링크 유형을 선택합니다.
     • 표시되는 필드에서 링크 대상을 지정합니다. HubSpot에서 링크 작업에 대해 자세히 알아보세요.
     • 콘텐츠를 계속 열어두고 링크를 새 창에서 열려면 새 창에서 링크 열기 스위치를 켭니다.
     • 링크 대상을 검색 엔진에 웹사이트의 일부가 아닌 것으로 식별하려면 팔로우 안 함 확인란을 선택합니다.
   • 변경 사항 적용을 클릭하여 이 슬라이드에 변경 사항을 저장합니다.
6. 사이드바 편집기 상단에서 이미지 슬라이더를 클릭하여 모듈 개요로 돌아갑니다.

7. 슬라이드를 더 추가하려면 다른 슬라이드 위로 마우스를 가져간 다음 edit 편집 아이콘을 클릭합니다.
8. 변경 사항을 마무리하려면 변경 사항 적용을 클릭합니다.

이미지 슬라이더 모듈의 설정 편집

1. 콘텐츠로 이동합니다:

   • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
   • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
   • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
2. 콘텐츠의 이름을 클릭합니다.
3. 콘텐츠 편집기에서 이미지 슬라이더 모듈을 클릭합니다.
4. 사이드바 편집기에서 설정을 클릭하여 모듈의 설정을 편집합니다.
5. 슬라이드 옵션을 편집하려면 슬라이드 섹션을 클릭하여 펼칩니다:
   • 페이지당 슬라이드 수 필드에 이미지 슬라이더에 한 번에 표시할 슬라이드 수를 입력합니다. 한 번에 최대 5개의 슬라이드를 표시할 수 있습니다. 한 번에 여러 개의 슬라이드를 선택하면 캡션과 미리보기 이미지가 표시되지 않습니다.
   • 이미지 크기 필드에서 화면 비율 옵션을 선택합니다. 기본적으로 이미지는 업로드된 종횡비를 사용하여 표시됩니다. 이미지 전체에 단일 종횡비를 표준화하려면 종횡비 강제를 선택합니다. 이로 인해 일부 이미지가 왜곡되어 표시될 수 있습니다.
   • 슬라이드에서 캡션을 추가하거나 제거하려면 캡션 표시 확인란을 선택합니다. 기본적으로 캡션 표시 확인란이 선택되어 있습니다.
   • 캡션 위치 드롭다운 메뉴에서 캡션의 위치를 선택합니다.

6. 슬라이드 전환 옵션을 편집하려면 이동 섹션을 클릭하여 펼칩니다:
   • 슬라이드 전환 방법을 구성하려면 전환 옵션 (예: 페이드)을 선택합니다.
   • 마지막 슬라이드에 도달할 때 슬라이드가 반복되도록 하려면 슬라이드 반복 확인란을 선택합니다.
   • 슬라이드가 자동으로 순환되도록 하려면 자동 재생 확인란을 선택합니다. 페이지당 슬라이드 수 설정보다 슬라이드 수가 적은 경우 순환이 발생하지 않을 수 있습니다.
7. 탐색 옵션을 편집하려면 탐색 섹션을 클릭하여 펼칩니다:
   • 방문자가 슬라이드 사이를 수동으로 전환할 수 있는 화살표를 표시하려면 탐색 화살표 표시 확인란을 선택합니다.
   • 탐색 아래에 이미지 썸네일을 표시하려면 썸네일 표시 확인란을 선택합니다.
   • 이미지 아래에 총 슬라이드 수를 표시하고 방문자가 특정 이미지를 선택할 수 있는 점을 표시하려면 점 탐색 표시를 선택합니다.
8. 완료했으면 변경 사항 적용을 클릭합니다.

이미지 슬라이더 모듈의 스타일 편집

슬라이드, 탐색 및 슬라이더의 스타일을 포함하여 이미지 슬라이더 모듈의 스타일을 편집할 수 있습니다.

1. 콘텐츠로 이동합니다:

   • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
   • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
   • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
2. 콘텐츠의 이름을 클릭합니다.
3. 콘텐츠 편집기에서 이미지 슬라이더 모듈을 클릭합니다.
4. 사이드바 편집기에서 스타일 탭을 클릭합니다.
5. 이미지 슬라이더 모듈의 스타일을 계속 편집하려면 슬라이드, 탐색 또는 슬라이더를 클릭합니다.

슬라이드 스타일 편집

슬라이드에 이미지가 표시되는 방식에 대한 스타일을 편집하려면 다음과 같이 하세요:

1. 슬라이드를 클릭합니다 .
2. 클릭하여 이미지 섹션을 펼칩니다.
3. 모서리 반경 필드에 픽셀 값을 입력합니다. 값이 클수록 모서리가 더 둥글게 나타납니다.
4. 완료했으면 변경 사항 적용을 클릭합니다.

슬라이드에 캡션이 표시되는 방식에 대한 스타일을 편집하려면 다음과 같이 하세요:

1. 캡션을 클릭합니다.
2. 배경 섹션을 클릭하여 펼칩니다.
   • 캡션 위 또는 아래에 여백을 추가하려면 위 여백 및 아래 여백 필드에 픽셀 값을 입력합니다.
   • 캡션에 여백을 추가하려면 여백 필드에 픽셀 값을 입력합니다. 각 면에 별도의 값을 추가하려면 별도로 편집을 클릭한 다음 필드에 픽셀 값을 입력합니다.
   • 캡션에 배경색을 추가하려면 색상 섹션의 첫 번째 필드에 16진수 값을 입력하거나 색상 선택기를 클릭하고 색상을 선택합니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
   • 배경 색상의 투명도를 설정하려면 색상 섹션의 두 번째 필드에 백분율 값을 입력합니다. 투명도가 100%이면 불투명하고 투명도가 0%이면 아무것도 보이지 않습니다.
3. 클릭하여 텍스트 섹션을 펼칩니다.
   • 글꼴 유형을 변경하려면 글꼴 선택 드롭다운 메뉴를 클릭하고 글꼴을 선택합니다.
   • 글꼴 크기를 변경하려면 크기 드롭다운 메뉴를 클릭하고 글꼴 크기를 선택합니다.
   • 글꼴 색상을 변경하려면 색상 선택기를 클릭하고 색상을 선택합니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
   • 글꼴 굵기를 변경하려면 굵은 글꼴, italicIcon 이탤릭체 또는 underlineIcon 밑줄 텍스트의 경우 bold 글꼴 굵기 아이콘을 클릭합니다.
4. 완료했으면 변경사항 적용을 클릭합니다.

탐색 스타일 편집하기

슬라이더 화살표, 점 및 자동 재생 버튼, 썸네일 탐색 등 탐색에 대한 스타일을 편집할 수 있습니다. 사용 가능한 스타일 옵션은 이미지 슬라이더 모듈의 탐색 설정에 따라 달라집니다.

슬라이더 화살표

1. 탐색을 클릭합니다.
2. 클릭하여 슬라이더 화살표 섹션을 펼칩니다.
3. 배경색 섹션에 16진수 값을 입력합니다. 색상 선택기를 클릭하고 색상을 선택할 수도 있습니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
4. 배경 색상의 투명도를 설정하려면 배경 색상 섹션의 두 번째 필드에 백분율 값을 입력합니다. 예를 들어 투명도 100%는 불투명하고 투명도 0%는 표시되지 않습니다.
5. 왼쪽 및 오른쪽 화살표에 사용되는 아이콘을 바꾸려면 왼쪽 아이콘 및 오른쪽 아이콘 필드 위에 있는 바꾸기를 클릭합니다. 오른쪽 패널에서 아이콘을 선택합니다.
6. 왼쪽 및 오른쪽 아이콘의 색상을 설정하려면 아이콘 색상 섹션의 첫 번째 필드에 16진수 값을 입력합니다. 색상 선택기를 클릭하고 색상을 선택할 수도 있습니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
7. 아이콘의 배경색 투명도를 설정하려면 아이콘 색상 섹션의 두 번째 필드에 백분율 값을 입력합니다. 예를 들어 투명도 100%는 불투명하고 투명도 0%는 표시되지 않습니다.
8. 완료했으면 변경사항 적용을 클릭합니다.

점 및 자동 재생 버튼

1. 클릭하여 점 및 자동 재생 버튼 섹션을 펼칩니다.
2. 색상 섹션의 첫 번째 필드에 16진수 값을 입력하거나 색상 선택기를 클릭하고 색상을 선택합니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
3. 완료했으면 변경사항 적용을 클릭합니다.

썸네일 탐색

1. 클릭하여 썸네일 탐색 섹션을 펼칩니다.
2. 배경색을 편집하려면 화살표 배경색 섹션의 첫 번째 필드에 16진수 값을 입력하거나 색상 선택기를 클릭하고 색상을 선택합니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
3. 배경색 투명도를 편집하려면 화살표 배경색 섹션의 두 번째 필드에 백분율 값을 입력합니다. 투명도 100%는 불투명하고 투명도 0%는 표시되지 않습니다.
4. 왼쪽 및 오른쪽 화살표에 사용되는 아이콘을 바꾸려면 왼쪽 화살표 아이콘 및 오른쪽 화살표 아이콘 필드 위의 바꾸기를 클릭합니다. 오른쪽 패널에서 아이콘을 선택합니다.

5. 왼쪽 및 오른쪽 화살표 아이콘의 색상을 편집하려면 화살표 아이콘 채우기 색상 섹션의 첫 번째 필드에 16진수 값을 입력합니다. 색상 선택기를 클릭하고 색상을 선택할 수도 있습니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
6. 화살표의 투명도를 설정하려면 아이콘 색상 섹션의 두 번째 필드에 백분율 값을 입력합니다. 예를 들어 투명도가 100%이면 불투명하게 표시되고 투명도가 0%이면 표시되지 않습니다.
7. 썸네일 이미지 비율, 너비 및 둥근 모서리를 편집하려면 다음과 같이 하세요:
   • 클릭하여 썸네일 이미지 섹션을 펼칩니다.
   • 모든 썸네일 이미지에 사용되는 가로 세로 비율을 설정하려면 가로 세로 비율 드롭다운 메뉴를 클릭하고 가로 세로 비율을 선택합니다.
   • 모든 썸네일 이미지에 사용되는 너비를 설정하려면 너비 필드에 픽셀 값을 입력합니다.
   • 썸네일 이미지의 모서리가 얼마나 둥글게 표시되는지 설정하려면 반경 필드에 픽셀 값을 입력합니다. 값이 클수록 모서리가 더 둥글게 표시됩니다.
8. 완료했으면 변경 사항 적용을 클릭합니다.

슬라이더 스타일 편집

1. 슬라이더를 클릭합니다.
2. 클릭하여 간격 섹션을 펼칩니다.
3. 슬라이더 위와 아래에 여백을 추가하려면 위 여백 및 아래 여백 필드에 픽셀 값을 입력합니다.
4. 슬라이더에 여백을 추가하려면 여백 필드에 픽셀 값을 입력합니다. 각 면에 별도의 값을 추가하려면 별도로 편집을 클릭한 다음 필드에 픽셀 값을 입력합니다.
5. 완료했으면 변경 사항 적용을 클릭합니다.