콘텐츠 슬라이더에 대한 궁극적인 가이드

요즘은 온라인에서 다른 비즈니스와 경쟁하는 것이 어려울 수 있습니다. 이는 부분적으로 웹사이트 구축 프로세스를 단순화한 WordPress, Joomla 및 Magento와 같은 플랫폼 때문입니다. 전문 웹 디자이너가 제작한 최신판처럼 보입니다(단순한 플러그 앤 플레이 프리미엄 테마일지라도).

물론, 멋지게 보이지만 경쟁 제품과 유사한 웹 사이트를 갖는 것이 잘못된 것은 아닙니다. 그러나 웹사이트는 생존을 위해 전환을 해야 하며, 이는 경쟁에서 이기는 것을 의미합니다. 그렇다면 웹사이트가 수많은 유사품과 차별화되는 방식으로 웹사이트를 디자인하는 방법은 무엇입니까? 이를 수행하는 한 가지 방법은 전문가 수준의 반응형 콘텐츠 슬라이더를 사용하는 것입니다.

콘텐츠 슬라이더가 모든 웹사이트에 적합한 것은 아니지만 적절한 컨텍스트에서 사용하고 제대로 실행하면 청중에게 강력한 영향을 미칠 수 있습니다.

콘텐츠 슬라이더에 대한 이 궁극적인 가이드에서는 콘텐츠 슬라이더가 정확히 무엇이며 웹사이트에서 무엇을 할 수 있는지 좀 더 자세히 알아볼 것입니다. 그런 다음 Smart Slider 3를 사용하여 슬라이더 기능을 다음 단계로 끌어올리는 방법에 대해 논의합니다.

웹사이트에 콘텐츠 슬라이더가 있어야 합니까?

콘텐츠 슬라이더는 슬라이더 , 캐러셀 , 슬라이드쇼 등 다양한 이름으로 불립니다. 이름에 관계없이 회전 요소는 동일한 방식으로 작동합니다. 사이트의 지정된 공간(거의 항상 페이지의 전체(또는 거의 전체) 너비)을 채우고 방문자가 슬라이드를 넘기면서 자신의 속도로 다양한 콘텐츠를 소비할 수 있습니다.

이것은 사용 가능한 부동산을 활용하는 방법에 대해 현명하게 대처하려는 디자이너 또는 개발자뿐 아니라 방문자에게도 사이트에 정말 유용한 추가 기능이 될 수 있습니다.

콘텐츠 슬라이더를 사용하여 다음을 수행할 수 있습니다.

최신 게시물을 전면에 유지하면서 역동적인 방식으로 새 블로그 콘텐츠를 홍보하십시오 .
홈 페이지에 최신 제품, 판촉 또는 뉴스를 광고 하십시오.
지금 회사에서 무슨 일이 일어나고 있는지에 대한 하이라이트 릴을 제공하십시오 .

비디오를 단일 공간으로 통합 하여 방문자가 스토리, 튜토리얼 등 컬렉션을 보려면 어디로 가야 하는지 알 수 있습니다.
제품, 속성 또는 서비스에 대한 관련 이미지 또는 비디오를 그룹화 하여 방문자가 스크롤하거나 새 페이지로 이동할 필요 없이 다양한 보기 또는 용도를 볼 수 있도록 합니다.
간결하면서도 시선을 사로잡는 방식으로 창의적인 포트폴리오를 표시합니다 .
사용자가 클릭하고 따라야 한다고 느낄 수 있는 스토리 를 제공하거나 다른 순차적인 내러티브를 제공하세요.
추천서, 비즈니스에 대한 통계, 최근 기사 또는 귀하가 게시한 인터뷰에서 영감을 주는 인용문 모음이든지 상관없이 텍스트 스니펫을 공유 하세요.

적절한 이유로 슬라이더를 사용하고 청중이 콘텐츠를 보다 빠르고 편리하게 입수할 수 있도록 지원하여 사용자 경험에 긍정적으로 기여하는 한 콘텐츠 슬라이더는 웹사이트에 큰 도움이 될 것입니다. 요약하자면, 다음은 일반적으로 콘텐츠 슬라이더의 적절한 사용과 관련된 이점 중 일부일 뿐입니다.

• 미니멀리즘: 관련 콘텐츠 또는 미디어가 있는 경우 슬라이더로 통합하면 사이트 디자인을 정리하는 데 도움이 될 수 있습니다.
• 사용성: 사용자가 콘텐츠를 훑어보는 능력에도 영향을 미칩니다. 강제로 스크롤하거나 여러 페이지를 방문하는 대신, 이제 모든 것이 편리한 한 위치에 있고 도구 내에서 속도를 제어할 수 있습니다.
• 미학: 슬라이더는 과시할 기회를 제공합니다. 서면 또는 시각적 콘텐츠를 강조 표시하는지 여부는 중요하지 않습니다. 슬라이더는 보기 좋게 만듭니다.
• 참여: 콘텐츠 슬라이더를 자동 재생으로 설정하지 않더라도 방문자가 공간 위로 마우스를 가져가 방향 신호를 보는 순간 더 많이 보기 위해 슬라이더에 참여하도록 트리거됩니다.
• SEO: 슬라이더를 사용하면 사용자가 새로운 콘텐츠를 찾기 위해 더 많은 슬라이드를 이동해야 하므로 페이지에서 보내는 시간이 늘어납니다. 따라서 개선된 SEO로 이어집니다.

보시다시피 웹 사이트에 콘텐츠 슬라이더를 추가하여 많은 것을 달성할 수 있습니다. 이제 실제로 이 작업을 수행하는 방법에 집중해 보겠습니다.

Smart Slider 3를 사용하여 웹사이트에 콘텐츠 슬라이더를 구축하는 방법

물론 슬라이더에 나타나는 콘텐츠도 여기서 중요한 역할을 합니다. 슬라이딩 요소가 홈페이지에서 멋지게 보이도록 결정하거나 이미지 포트폴리오를 호스팅하는 것만으로는 충분하지 않습니다. 슬라이더에 포함할 콘텐츠의 종류 를 파악해야 합니다.

그것이 가능하거나 옵션이라고 생각하지 않았습니까? Smart Slider 3 플러그인을 사용하는 경우 사용 가능한 레이어, 슬라이더 유형, 배경 애니메이션 및 기타 기능으로 무엇이든 만들 수 있습니다.

이제 슬라이더에 추가할 수 있는 다양한 유형의 콘텐츠에 대해 이야기하면서 Smart Slider 3 플러그인으로 추가하는 방법을 자세히 살펴보겠습니다. 슬라이드에 새 콘텐츠 레이어를 추가하려면 왼쪽 상단 모서리에 있는 녹색 더하기 기호를 클릭합니다.

콘텐츠 유형 선택

표제 레이어

표제 레이어는 구조화된 텍스트가 독자에게 읽기 우선 순위를 지정하는 방법을 알려주기 때문에 콘텐츠 슬라이드에 특히 중요합니다. 즉, 일반적으로 슬라이드의 내용을 요약하기 때문에 더 큰 제목 유형을 먼저 읽어야 합니다. 이 레이어를 사용하면 메시지, 글꼴 패밀리, 글꼴 크기, 정렬, 글꼴 색상, 배경색, 불투명도, 애니메이션, 하이퍼링크 텍스트 등을 포함하여 제목 텍스트의 스타일 지정과 관련된 모든 것을 조정할 수 있습니다.

텍스트 레이어

다음은 텍스트 레이어입니다. 머리글은 제목이나 슬라이드의 간결한 요약을 소개하고 텍스트는 더 자세한 설명을 제공합니다. 이 레이어를 사용하면 헤더 레이어와 동일한 컨트롤을 사용할 수 있습니다. 주요 차이점은 다양한 장치 및 화면 크기에서 텍스트를 표시하도록 선택하는 방법에 있습니다.

버튼 레이어

일부 슬라이더 디자인의 경우 버튼(또는 클릭 유도문안) 요소가 필요하지 않을 수 있습니다. 방문자에게 클릭할 수 있는 정보를 제공하려는 경우에만 사용할 수 있습니다. 따라서 슬라이더를 사용하여 제품, 서비스를 홍보하거나 무언가에 대해 교육하려는 경우 다음 단계로 안내하고 전환하는 버튼을 추가할 수 있는 좋은 기회입니다.

이미지 레이어

슬라이드에 전체 너비 이미지 또는 비디오 배경을 사용하지 않는 경우 대신 부분 이미지 콘텐츠로 채울 수 있습니다. 사용하려는 사진을 업로드하고 슬라이드로 드래그하기만 하면 됩니다. 이미지 콘텐츠는 텍스트 콘텐츠의 옆, 위, 아래 및 중간에 위치할 수 있습니다. 슬라이드를 정렬하는 방법은 사용자에게 달려 있습니다.

캡션 레이어

모든 이미지 기반 슬라이드가 텍스트 오버레이를 사용하여 보기에 좋거나 의미가 있는 것은 아닙니다. 대신 슬라이드에 있는 콘텐츠에 대해 방문자에게 일종의 참조를 제공하고 싶지만 경험에 방해가 되지 않으려면 캡션 레이어를 추가할 수 있습니다.

YouTube, Vimeo 및 비디오 레이어

슬라이드에 비디오 콘텐츠를 추가하기 위한 몇 가지 옵션이 있습니다: YouTube, Vimeo 및 비디오. 이들 각각은 다른 소스에서 비디오 콘텐츠를 임베딩하는 프로세스를 단순화하고 표시되는 화면 캡처가 관련성이 있고 보기 좋게 보이도록 자신의 표지 이미지를 업로드할 수 있는 옵션을 제공합니다.

또한 슬라이드에서 팟캐스트 또는 사운드바이트를 공유하려는 경우 Smart Slider 3에서 사용할 수 있는 오디오 레이어 옵션도 있습니다.

아이콘 레이어

아이콘은 방문자에게 많은 정보를 전달하는 동시에 완벽하게 간결한 요소입니다. 일반적으로 CTA 버튼에 아이콘을 추가하지 않는 한 별도로 사용되지 않습니다. 대신 회사 웹 사이트에서 다양한 서비스 또는 제품을 대표하는 아이콘 그룹을 찾을 수 있습니다. Smart Slider 3에서 선택할 수 있는 수백 개의 Font Awesome 아이콘으로 원하는 것을 정확히 찾을 수 있습니다.

목록 레이어

목록 레이어 기능은 해당 제품 설명을 작성할 때나 방문자와 공유할 현장 슬라이드쇼를 만들 때 유용합니다. 사용 방법도 간단합니다. 목록 항목을 입력하고 글머리 기호 스타일을 선택한 다음 다른 텍스트 레이어에서와 같이 텍스트 설정을 적용하기만 하면 됩니다.

진행 표시 줄

진행률 표시줄은 슬라이드 내의 정보를 그래픽으로 표시하는 훌륭한 방법입니다. 팀원들이 보유하고 있는 기술, 모두가 지난달에 몇 잔의 커피를 마셨는지 또는 방문자에게 전달하고 싶은 기타 재미있는 정보를 강조하는 데 적합합니다.

슬라이더에 올바른 유형의 콘텐츠를 추가하는 것 외에도 슬라이더를 디자인할 때 다음 모범 사례를 염두에 두십시오.

• 반응형으로 만들기: 대부분의 슬라이더는 단순히 콘텐츠를 축소합니다. 그러나 Smart Slider 3에는 사용 가능한 공간을 인식하고 그에 따라 조정되는 기본 레이어가 있습니다.
• 가장 중요한 콘텐츠를 첫 번째 또는 두 개의 슬라이더에 배치하십시오 . 연구에 따르면 조회수와 클릭수가 가장 많은 항목이 발견되었으므로 방문자가 좋은 콘텐츠를 기다리게 하지 마십시오.
• 검색 최적화 : 슬라이더를 사이트 디자인의 나머지 부분과 매끄럽게 조화시키는 플러그인을 사용하는 것 외에도 SEO에 도움이 되는 플러그인이 필요합니다. Smart Slider 3에는 슬라이더를 검색하기 쉽게 만들기 위해 모든 HTML 태그와 속성이 포함되어 있습니다.
• 너무 빠르거나 너무 느리지 않은 슬라이드 지속 시간 설정 : 사전 설정이 마음에 들지 않는 경우 사용자가 스스로 속도를 제어할 수 있는 방법을 항상 제공해야 합니다.
• 청중, 마케터, 심지어 일부 개발자는 슬라이더와 애증의 관계를 가지고 있음을 기억하십시오 . 좋은 은혜를 유지하려면 슬라이더에 고품질의 가치 있고 관련성 있는 콘텐츠만 포함해야 합니다.