이미지 슬라이더 모듈 사용

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

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

• 콘텐츠로 이동합니다:

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

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

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

• 콘텐츠로 이동합니다:

  • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
  • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
  • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
• 콘텐츠 위로 마우스를 가져간 다음 편집을 클릭합니다.
• 콘텐츠 편집기에서 이미지 슬라이더 모듈을 클릭합니다.
• 사이드바 편집기에서 설정을 클릭하여 모듈의 설정을 편집합니다.
• 슬라이드 옵션을 수정하려면 슬라이드 섹션을 클릭하여 펼칩니다:
  • 페이지당 슬라이드 수 필드에 이미지 슬라이더에 한 번에 표시할 슬라이드 수를 입력합니다. 한 번에 최대 5개의 슬라이드를 표시할 수 있습니다. 한 번에 여러 개의 슬라이드를 선택하면 캡션과 미리보기 이미지가 표시되지 않습니다.
  • 이미지 크기 조정 섹션에서 화면 비율 옵션을 선택합니다. 기본적으로 이미지는 자체 종횡비를 사용하여 표시됩니다. 이미지 전체에 단일 종횡비를 표준화하려면 종횡비 강제를 선택합니다. 이렇게 하면 일부 이미지가 왜곡되어 표시될 수 있습니다.

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

이미지 갤러리 모듈의 스타일 편집

• 콘텐츠로 이동합니다:

  • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
  • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
  • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
• 콘텐츠 위로 마우스를 가져간 다음 편집을 클릭합니다.
• 콘텐츠 편집기에서 이미지 슬라이더 모듈을 클릭합니다.
• 사이드바 편집기에서 스타일 탭을 클릭합니다.
• 이미지의 모서리가 얼마나 둥글게 표시되는지 설정하려면 슬라이드를 클릭한 다음 이미지 섹션을 클릭하여 펼칩니다. 모서리 반경 필드에 픽셀 값을 입력합니다. 값이 클수록 모서리가 더 둥글게 표시됩니다.
  • 캡션 위 또는 아래에 여백을 추가하려면 배경 섹션을 클릭하여 확장한 다음 위 여백 및 아래 여백 필드에 픽셀 값을 입력합니다.
  • 캡션에 여백을 추가하려면 여백 필드에 픽셀 값을 입력합니다. 각 면에 별도의 값을 추가하려면 별도로 편집을 클릭한 다음 필드에 픽셀 값을 입력합니다.
  • 캡션에 배경색을 추가하려면 색상 섹션의 첫 번째 필드에 16진수 값을 입력하거나 색상 선택기를 클릭하고 색상을 선택합니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
  • 배경 색상의 투명도를 설정하려면 색상 섹션의 두 번째 필드에 백분율 값을 입력합니다. 투명도가 100%이면 불투명하고 투명도가 0%이면 아무것도 보이지 않습니다.
  
  • 캡션의 글꼴을 수정하려면 클릭하여 텍스트 섹션을 확장한 다음 글꼴 선택 드롭다운 메뉴를 클릭하고 글꼴을 선택합니다.
  • 글꼴 크기를 변경하려면 크기 드롭다운 메뉴를 클릭하고 글꼴 크기를 선택합니다.
  • 글꼴 색상을 변경하려면 색상 선택기를 클릭하고 색상을 선택합니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
  • 글꼴 굵기, 이탤릭체 또는 밑줄 텍스트의 경우 bold 글꼴 굵기 아이콘을 클릭하고, 이미지 캡션의 모양을 편집하려면 슬라이드를 클릭한 다음 캡션을 클릭합니다:
• 슬라이더 화살표의 모양을 편집하려면 다음과 같이 하세요:
  • 탐색을 클릭합니다.
  • 클릭하여 슬라이더 화살표 섹션을 펼칩니다.
  • 왼쪽 및 오른쪽 아이콘의 배경색을 설정하려면 배경색 섹션의 첫 번째 필드에 16진수 값을 입력하거나 색상 선택기를 클릭하고 색상을 선택합니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
  • 배경 색상의 투명도를 설정하려면 배경 색상 섹션의 두 번째 필드에 백분율 값을 입력합니다. 투명도 100%는 불투명하고 투명도 0%는 표시되지 않습니다.
  • 왼쪽 및 오른쪽 화살표에 사용되는 아이콘을 바꾸려면 왼쪽 아이콘 및 오른쪽 아이콘 필드 위의 바꾸기를 클릭합니다. 오른쪽 패널에서 아이콘을 선택합니다.
  
  • 왼쪽 및 오른쪽 아이콘의 색상을 설정하려면 아이콘 색상 섹션의 첫 번째 필드에 16진수 값을 입력하거나 색상 선택기를 클릭하고 색상을 선택합니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
  • 배경 색상의 투명도를 설정하려면 아이콘 색상 섹션의 두 번째 필드에 백분율 값을 입력합니다. 투명도가 100%이면 불투명하고 투명도가 0%이면 아무것도 보이지 않습니다.
• 이미지 아래의 점과 자동 재생 버튼의 모양을 변경하려면 다음과 같이 하세요:
  • 탐색을 클릭합니다.
  • 클릭하여 점 및 자동 재생 버튼 섹션을 펼칩니다.
  • 색상 섹션의 첫 번째 필드에 16진수 값을 입력하거나 색상 선택기를 클릭하고 색상을 선택합니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
• 썸네일 탐색의 모양을 변경하려면 다음과 같이 하세요:
  • 탐색을 클릭합니다.
  • 클릭하여 썸네일 탐색 섹션을 펼칩니다.

• • 왼쪽 및 오른쪽 화살표 아이콘의 배경색을 설정하려면 화살표 배경색 섹션의 첫 번째 필드에 16진수 값을 입력하거나 색상 선택기를 클릭하고 색상을 선택합니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
  • 배경색의 투명도를 설정하려면 화살표 배경색 섹션의 두 번째 필드에 백분율 값을 입력합니다. 투명도 100%는 불투명하고 투명도 0%는 보이지 않습니다.
  • 왼쪽 및 오른쪽 화살표에 사용되는 아이콘을 바꾸려면 왼쪽 화살표 아이콘 및 오른쪽 화살표 아이콘 필드 위에 있는 바꾸기를 클릭합니다. 오른쪽 패널에서 아이콘을 선택합니다.
• 
  • 왼쪽 및 오른쪽 화살표 아이콘의 색상을 설정하려면 화살표 아이콘 채우기 색상 섹션의 첫 번째 필드에 16진수 값을 입력하거나 색상 선택기를 클릭하고 색상을 선택합니다. 고급 탭에서 사용자 지정 색상을 추가할 수 있습니다.
  • 화살표의 투명도를 설정하려면 아이콘 색상 섹션의 두 번째 필드에 백분율 값을 입력합니다. 투명도 100%는 불투명하고 투명도 0%는 보이지 않습니다.
  • 클릭하여 썸네일 이미지 섹션을 펼칩니다.
  • 모든 썸네일 이미지에 사용할 가로 세로 비율을 설정하려면 가로 세로 비율 드롭다운 메뉴를 클릭하고 가로 세로 비율을 선택합니다.
  • 모든 썸네일 이미지에 사용되는 너비를 설정하려면 너비 필드에 픽셀 값을 입력합니다.
  • 썸네일 이미지의 모서리가 얼마나 둥글게 표시되는지 설정하려면 반경 필드에 픽셀 값을 입력합니다. 값이 클수록 모서리가 더 둥글게 표시됩니다.

• 슬라이더의 간격을 수정하려면 다음과 같이 하세요:
  • 슬라이더를 클릭합니다.
  • 클릭하여 간격 섹션을 펼칩니다.
  • 슬라이더 위와 아래에 여백을 추가하려면 위 여백 및 아래 여백 필드에 픽셀 값을 입력합니다.
  • 슬라이더에 여백을 추가하려면 여백 필드에 픽셀 값을 입력합니다. 각 면에 별도의 값을 추가하려면 별도로 편집을 클릭한 다음 필드에 픽셀 값을 입력합니다.