Elementor에 이미지 캐러셀을 추가하는 방법 | 쉬운 5단계

현대적인 인터랙티브 방식으로 비주얼, 제품 또는 추천글을 강조하고 싶다면 Elementor의 캐러셀 위젯이 완벽한 도구입니다.

이미지 갤러리부터 제품 슬라이더와 추천 쇼케이스까지, 개발자가 아니더라도 멋진 캐러셀을 쉽게 만들 수 있습니다.

Elementor에서 이미지 캐러셀을 추가하려면 페이지를 열고 다음을 사용하여 편집합니다. Elementor > 이미지 캐러셀 위젯 드래그 > 이미지 업로드 > 도구 설명 및 텍스트 추가, 를 클릭한 다음 원하는 탐색 스타일을 설정합니다.  마지막으로 자동 재생, 속도, 반복 등의 캐러셀 설정을 필요에 맞게 조정하면 모든 설정이 완료됩니다. 더 많은 유연성을 원한다면 고급 캐러셀 옵션이 포함된 Element Pack 이미지 캐러셀 애드온을 사용해 보세요.

이 가이드에서는 이미지 캐러셀 위젯을 사용하고 타사 플러그인을 사용하여 고급 스타일, 탐색 컨트롤 및 사용자 정의 CSS를 향상시키는 방법에 대해 설명합니다.

Elementor의 이미지 캐러셀이란 무엇인가요?

이미지 캐러셀(슬라이더라고도 함)은 여러 이미지를 슬라이딩 갤러리 형식으로 보여줄 수 있는 Elementor의 위젯입니다. Elementor의 드래그 앤 드롭 빌더를 사용하면 캐러셀을 추가하고 스타일을 지정하는 것이 간단합니다.

기본 제공 캐러셀은 기본적인 요구 사항에는 잘 작동하지만 고급 디자인이나 전문적인 레이아웃에는 한계가 있습니다. 유연성을 높이려면 타사 플러그인을 사용하는 것이 좋습니다. 이러한 플러그인은 디자인 옵션을 향상시키고 모바일 응답성을 개선하며 동적 콘텐츠, SEO 및 접근성을 지원합니다.

또한 비디오 슬라이드, 조건부 표시, 레이어 애니메이션과 같은 고급 기능을 사용할 수 있으며, Elementor의 무료 버전에서는 사용할 수 없는 기능입니다.

Elementor 이미지 캐러셀을 추가하는 방법은 무엇인가요?

몇 단계만 거치면 웹사이트 디자인에 완벽하게 어울리는 캐러셀을 설정하고, 사용자 정의하고, 스타일을 지정할 수 있습니다. 이제 단계별 프로세스를 자세히 살펴보겠습니다:

1단계: 이미지 캐러셀 위젯 추가하기

1. 라이브 페이지 빌더에서 페이지 열기 Elementor

2. 검색 “캐러셀 위젯” 또는 “이미지 캐러셀 위젯”(또는 이미지 슬라이더, 플러그인에 따라 다름).
3. 캐러셀을 표시할 섹션으로 드래그합니다.

팁: 타사 플러그인이나 Elementor 템플릿으로 작업하는 경우, 많은 플러그인이 향상된 기능을 제공합니다. 맞춤 캐러셀 확장된 기능, 디자인 유연성 및 사용자 지정 옵션을 갖춘 위젯을 제공합니다. 

이 튜토리얼에서는 Element Pack 애드온을 사용하면 강력한 캐러셀 옵션 세트를 제공합니다.

아래 예시에서는 Element Pack의 로고 캐러셀 위젯 를 사용하여 깔끔하고 반응이 빠른 레이아웃을 만들 수 있습니다.

2단계: 이미지 항목 업로드 및 정렬하기

1. 왼쪽 사이드바에서 콘텐츠 탭 > 로고 캐러셀 항목

2. 를 클릭하고 브랜드 이름 또는 + 항목 추가.

3. 미디어 라이브러리에서 이미지를 선택하거나 새 이미지를 업로드합니다.
4. SEO 및 접근성을 위한 대체 텍스트, 캡션 또는 썸네일 미리보기 추가

5. 표시할 순서대로 정렬합니다.
6. 캐러셀 내에서 제목이나 버튼과 같은 중첩된 요소 사용

3단계: 도구 설명 사용(선택 사항)

마우스오버 시 이미지 제목이나 설명을 표시하고 싶으신가요?

1. 로 이동합니다. 콘텐츠 탭을 클릭합니다.
2. 사용 도구 설명.
3. 텍스트, 위치 및 스타일을 사용자 지정합니다.

제품 이름, 사진 크레딧 또는 간단한 설명에 유용합니다.

4단계: 탐색 설정

사용자가 캐러셀과 상호 작용할 방식을 선택합니다:

• 화살표: 왼쪽/오른쪽 탐색 버튼 추가.
• 도트: 캐러셀 아래에 페이지 매김 점을 표시합니다.
• 둘 다: 화살표와 점을 결합하여 완벽하게 제어할 수 있습니다.

내비게이션을 가리키면 표시할지, 항상 표시할지 선택할 수도 있습니다.

5단계: 캐러셀 동작 구성하기

캐러셀의 작동 방식을 미세 조정하세요:

• 자동 재생: 이미지 자동 회전.
• 속도: 슬라이드가 변경되는 속도를 설정합니다.
• Loop: 연속 회전을 활성화합니다.
• 마우스오버 시 일시정지: 마우스를 가리키면 자동 재생을 중지합니다.

이러한 설정은 원활하고 매력적인 사용자 환경을 만드는 데 도움이 됩니다.

Elementor에서 이미지 캐러셀에 텍스트를 추가하려면 어떻게 하나요?

Element Pack를 사용하여 이미지 캐러셀에 텍스트를 추가하려면 다음 단계에 따라 시각적으로 풍부한 대화형 슬라이더를 만드세요:

1. 텍스트 추가 옵션이 있는 위젯을 선택합니다.
2. 여기서는 패널 슬라이더 위젯의 Element Pack

• 각 슬라이드에 대해 이미지를 업로드합니다.

• 추가 title, 설명, 그리고 심지어 자세히 보기 버튼을 클릭하면 슬라이드 설정으로 바로 이동합니다.

• 텍스트 위치(위쪽, 가운데, 아래쪽)에 스타일을 지정하고 호버 효과를 적용할 수 있습니다.

캐러셀 모양 사용자 지정

이미지 캐러셀을 설정하고 제대로 작동하는지 확인한 후 스타일 탭으로 이동하여 모양을 사용자 지정합니다.

캐러셀 항목 스타일 지정

이미지 캐러셀이 실행되면 이미지 캐러셀이 실행되면 스타일 탭을 사용하여 시각적 표현을 개선할 수 있습니다. 할 수 있습니다:

• 사용자 지정 배경, 테두리, 패딩및 간격 항목 간
• 신청하기 그림자 그리고 호버 효과 인터랙티브한 감각을 위한
• 조정 불투명도 를 사용하여 마우스오버 또는 활성 상태로 사용자 집중을 유도합니다.
• 사용 섀도 모드 을 사용하여 레이아웃에 깊이와 입체감을 더하세요.

내비게이션 스타일링

로고 슬라이더와 마찬가지로 사용 가능한 사용자 지정 옵션은 선택한 탐색 유형에 따라 달라집니다. 이 섹션에서는 다음을 수행할 수 있습니다:

• 개인화 화살표 색상, 배경, 패딩및 크기
• 다음과의 상호 작용을 강화하세요. 호버 효과 색상 전환이나 그림자와 같은
• 미세 조정 수평 포지셔닝 를 사용하여 화살표 오프셋 설정(화살표/화살표 및 점에 적용)

보너스: Element Pack로 기성품 캐러셀 디자인 사용

Element Pack가 전문적으로 디자인된 컬렉션을 제공하는데 왜 처음부터 시작해야 하나요? 캐러셀 템플릿을 사용하시나요? 미리 빌드된 템플릿이 있습니다, 준비된 블록 놀라운 결과를 제공하면서 시간과 노력을 절약할 수 있습니다.

몇 번의 클릭만으로 가능합니다:

• 즉시 적용 세련된 캐러셀 사전 설정 로고, 추천글, 포트폴리오 등을 위한 맞춤형 서비스
• 다음을 즐길 수 있습니다. 반응형 디자인 모든 기기에서 멋지게 보이는
• 브랜드에 맞게 각 템플릿을 사용자 지정하고 색상, 타이포그래피, 간격 및 효과를 조정하세요.
• 다음을 통해 워크플로 속도를 높이세요. 플러그 앤 플레이 레이아웃 최소한의 설정이 필요한

세련된 홈페이지 슬라이더를 만들거나 고객 피드백을 보여줄 때, 이러한 기성 디자인을 사용하면 유연성을 저하시키지 않으면서도 빠르게 시작할 수 있습니다.

최종 생각

마지막으로 이 가이드에서는 Elementor를 사용하여 이미지 캐러셀을 만들고 사용자 지정하는 방법을 보여드리려고 노력했습니다. 고객 로고, 제품 하이라이트 또는 포트폴리오 항목을 표시할 때 캐러셀은 명확하고 흐름이 있는 시각적 요소를 역동적으로 표현할 수 있는 방법을 제공합니다.

기본 위젯으로 시작한 다음 레이아웃, 간격 및 탐색을 디자인에 맞게 조정하는 것이 좋습니다. 시간이 부족하다면 Element Pack에서 미리 만든 템플릿을 사용하면 빠르게 결과를 얻을 수 있습니다.

항상 여러 기기에서 작업을 미리 보고 어디서나 제대로 보이는지 확인하세요. 다양한 스타일을 시도하고 상호 작용을 테스트하여 디자인을 단순하면서도 매력적으로 유지하세요. 몇 가지 사려 깊은 조정으로 캐러셀은 사이트의 시각적 스토리텔링의 중요한 부분이 될 수 있습니다.

FAQ: