WordPress에서 이미지 회전 목마를 만드는 방법은 무엇입니까?

게시 됨: 2021-12-06
Image Carousel

최종 업데이트 - 2022년 3월 8일

회전 목마라는 용어를 알지 못할 수도 있지만 여전히 디지털 시장에서 자주 볼 수 있습니다. 이미지 캐러셀은 대부분의 뉴에이지 웹사이트에서 사용됩니다. 즉, 기업이 제공하는 제품 또는 서비스에 대한 간략한 설명을 포함하는 슬라이드 이미지입니다. 이미지가 자동으로 회전하고 보기 안팎으로 이동합니다.

이미지 캐러셀은 슬라이딩 이미지가 비즈니스가 제공하는 제품이나 서비스에 대해 더 많은 호기심을 갖게 하므로 웹사이트 방문자를 효과적으로 더 오랫동안 사로잡습니다. 경우에 따라 이미지 슬라이딩이 자동화되지 않고 방문자가 수동으로 이미지를 회전하여 다음 슬라이드를 표시해야 합니다.

WordPress에서 이미지 회전 목마 만들기

비즈니스 톤에 따라 이미지 캐러셀에는 대담한 문구가 포함될 수 있으며 긴 형식의 설명 없이도 비즈니스에 대한 많은 정보가 드러날 수 있습니다. 웹사이트에 이미지 캐러셀을 통합하는 방법을 찾고 계셨다면 제대로 찾아오셨습니다.

워드프레스에서 Smart Slider 3 플러그인을 설치하는 과정을 설명하겠습니다. 작업을 위한 몇 가지 다른 도구가 있으며 설치 프로세스는 Smart Slider 3와 유사할 수 있습니다.

튜토리얼을 시작하기 전에 약간의 경고가 있습니다. 웹사이트에서 제품을 판매하는 경우 전환에 관한 한 이미지 캐러셀을 선택하는 것이 가장 현명한 선택이 아닐 수 있습니다. 그러나 사진을 실행하거나 웹 사이트를 디자인하고 미학적으로 보기 좋게 만들고 싶다면 블로그 전체를 읽어보십시오.

이미지 크기 선택부터 시작

Smart Slide 3는 선택한 프레젠테이션 형식을 기반으로 워드프레스에서 이미지 크기를 조정합니다. 따라서 이미지가 크면 도구에서 크기를 줄이고 그 반대의 경우도 마찬가지입니다. 그리고 작은 이미지를 확대하면 품질이 저하되기 시작합니다. 따라서 Carousel의 크기보다 작은 이미지는 포함하지 마십시오.

또한 큰 이미지는 Carousel에서 더 잘 보이지만 다운로드 시간이 더 오래 걸립니다. 따라서 품질과 크기 사이의 균형을 유지해야 슬라이더에서 여전히 멋지게 보입니다.

작은 팁: 이미지 캐러셀은 수평으로 미끄러지므로 넓은 이미지를 선택하는 것이 정사각형 이미지보다 더 매력적입니다.

스마트 슬라이더 3 설치

스마트 슬라이더 3.png 설치

Smart Slider 3 설치 프로세스는 시중에 나와 있는 다른 도구와 거의 동일합니다. 시작하려면 먼저 워드프레스 관리자 대시보드에 로그인합니다. 왼쪽에는 선택할 수 있는 다양한 옵션이 있는 탐색 패널이 표시됩니다. 옵션에서 플러그인을 선택하고 "새로 추가" 링크를 클릭하십시오.

검색 표시줄이 앞에 나타납니다. 그 안에서 Smart Slider 3를 검색하십시오. 플러그인이 설치되면 활성화 옵션을 클릭하십시오.

이미지 캐러셀 여정 시작

Smart Slider 3는 미디어 라이브러리의 이미지를 사용하므로 슬라이더를 만들기 전에 일부 이미지를 업로드해야 합니다. 튜토리얼 비디오를 통해 이미지를 선택하고 프레젠테이션 형식에 추가하는 방법에 대한 더 나은 통찰력을 얻을 수 있습니다. Smart Slider 3를 누르고 도구 사용 방법에 대한 심층 지식을 제공하는 "Learn Smart Slider 3" 소개 비디오를 받으십시오.

비디오의 도움을 받거나 이 기사를 읽고 시작할 수 있습니다.

메뉴에서 기본 옵션을 선택합니다.

  • 한 번에 여러 캐러셀을 처리할 때 캐러셀을 쉽게 찾을 수 있도록 슬라이더에 이름을 지정합니다.
  • 너비와 치수는 슬라이더의 크기와 모양에 영향을 줍니다. 장치 또는 브라우저의 전체 너비를 차지하도록 구성하려는 픽셀을 선택하는 것은 무시하십시오.
  • 기본 너비와 치수를 선택하면 회전 목마가 현재 너비와 크기로 설정되는 반면 "전체 너비" 옵션을 선택하면 모든 치수를 무시하고 회전 목마가 창의 전체 너비를 중심으로 회전하게 됩니다.

이미지를 최적화한 후 "만들기"를 누릅니다.

슬라이더에 이미지 추가

Slider.png에 이미지 추가하기
원천

캐러셀의 기본 크기와 너비를 구성했으면 다음 단계는 캐러셀을 매력적인 이미지로 채우는 것입니다. 이를 위해 다음 단계를 따르십시오.

  • Smart Slider 3에서 슬라이드 이미지 추가를 클릭합니다.
  • 슬라이더의 이미지를 선택할 수 있는 옵션이 표시됩니다. 해당 옵션을 클릭합니다.
  • 워드프레스 라이브러리에서 이미지를 선택합니다.
  • 그러면 Carousel이 선택한 이미지를 표시합니다. 선택한 이미지에 만족하면 "게시"섹션을 클릭하십시오.

코드 내부에 슬라이더를 삽입하려는 경우 도구에서 PHP 코드를 복사하거나 포스트 편집기 옵션을 선택하십시오.

웹 사이트에 대한 새 블로그 작성을 시작하면 페이지에 스마트 슬라이더 3 옵션이 나타납니다. 클래식 편집기를 사용하는 경우 스마트 슬라이더 아이콘을 클릭하십시오. 이제 이전에 준비한 사용자 정의 슬라이더를 선택하고 게시물을 게시하면 슬라이더가 웹 사이트에 업로드되어 방문자가 볼 수 있습니다.

Carousel은 슬라이더의 양쪽에서 앞으로 또는 뒤로 링크되어 이미지를 수동으로 슬라이드합니다.

기본적으로 캐러셀 이미지는 자동으로 슬라이드되지 않지만 변경할 수 있습니다.

캐러셀 이미지의 자동 주기

WordPress 관리 대시보드에서 Smart Slider 3 링크를 클릭하고 편집 옵션을 선택합니다. "자동 재생" 스타일을 선택하고 "사용"을 누릅니다. 스위치 사이의 기본 시간은 8초입니다. 이제 패널의 오른쪽에 있는 저장 버튼에서 업데이트된 설정을 저장합니다.

캐러셀을 위젯으로 사용하기

Smart Slider는 WordPress Slider Image로도 사용할 수 있습니다. 이 슬라이더는 사이드바와 같은 위젯으로 어디에나 추가할 수 있습니다.

  • 왼쪽에 탐색 패널이 표시됩니다. 모양을 클릭한 다음 "위젯" 링크를 클릭합니다.
  • "사용 가능한 위젯" 섹션이 표시되면 "스마트 슬라이더" 버튼을 클릭합니다.
  • 이미지를 표시할 영역을 선택하고 "위젯 추가" 버튼을 선택합니다.

이미지 또는 이미지 없음이 큰 문제입니다.

웹사이트 디자인 및 개발은 주관적이며 다른 사람들은 매력적으로 느낄 수도 있고 그렇지 않을 수도 있습니다. 여러 단계의 업데이트와 수정을 거치며 Image carousel은 기업이 모든 곳에서 통합하기 시작할 때 웹사이트에서 가장 수요가 많았던 요구 사항이었습니다.

위의 논의는 웹사이트에 이미지 캐러셀을 추가하는 것에 대한 단계별 지침을 제공했습니다. 프로세스는 복잡하지 않으며 웹사이트의 외관을 향상시키기 위해 관련 이미지를 선택하는 데 인내심과 전문성이 필요합니다. 캐러셀은 창의적인 웹사이트에 매우 매력적이지만 전자상거래 웹사이트에는 도움이 되지 않습니다.

따라서 다음에 슬라이더에 생생한 이미지를 추가할 계획이라면 이것이 웹사이트에 가치를 더할 것인지 또는 전환율에 상당한 영향을 미칠 것인지 평가하는 것을 고려하십시오.

추가 읽기

  • 제품 이미지 크기를 최적화하는 방법은 무엇입니까?
  • WooCommerce를 위한 최고의 이미지 줌 플러그인
  • 이미지 개선을 위한 스마트 팁