정적 이미지의 행은 공간을 먹고 방문자에게 모든 하나를지나 스크롤하도록 요청합니다. 회전 목마는 사람들이 실제로 만지는 작고 스 와이프 가능한 슬라이더에 동일한 세트를 보여줍니다. 그만큼 이미지 회전목마 위젯 인 Elementor용 마스터 애드온 일반 WordPress 갤러리에서 해당 슬라이더를 빌드한 다음 Elementor 패널에서 자동 재생, 라이트박스, 여러 탐색 스타일 및 커버플로 모드를 추가합니다.
이미지를 선택하고,한 번에 몇 개의 쇼를 선택하며,방문자가 이미지 사이를 이동하는 방법을 결정합니다. 단축 코드도 없고 별도의 슬라이더 플러그인도 없습니다. 이 가이드는 갤러리 로딩부터 화살표 스타일링까지 위젯의 모든 설정을 안내합니다. 데모 및 Elementor 자체 회전목마와의 비교는 다음을 참조하세요 Elementor 이미지 캐러셀 위젯 페이지.
먼저 보는 것을 선호하시나요? 이 짧은 튜토리얼은 갤러리부터 스타일링까지 이미지 회전목마를 다룹니다:
이미지 회전목마 위젯이 수행하는 작업 #
위젯은 이미지들의 선택을 슬라이딩 캐러셀로 바꿉니다. 한 뷰에 하나 또는 여러 개의 이미지를 보여주고,스스로 또는 클릭으로 진행하며,라이트박스에 있는 각 이미지를 열어 풀사이즈 룩을 연출합니다. 캡션,테두리, 오버레이,화살표 스타일링이 모두 내장되어 있습니다.
Swiper 엔진에서 실행되므로 슬라이더는 처음부터 터치 친화적이며 반응성이 뛰어납니다. 전화에서는 동일한 캐러셀이 더 적은 열로 리플로우되며 방해가되면 모바일에서 화살표를 숨길 수 있습니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 미디어 라이브러리에 업로드되었거나 업로드할 준비가 된 소수의 이미지입니다.
이미지 회전목마 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 이미지 회전목마또는 마스터 애드온 섹션으로 스크롤합니다. 위젯을 페이지로 드래그합니다. 이미지를 추가할 때까지 비어 있는 상태로 로드되므로 갤러리가 항상 첫 번째 단계입니다.
이미지를 추가하고 주문하세요 #
에서 콘텐츠 탭, 열기 이미지 섹션과 갤러리 필드를 클릭하여 WordPress 미디어 선택기를 실행합니다. 원하는 이미지를 선택한 다음 사용하십시오 갤러리 편집 순서로 드래그하려면 캡션을 추가하거나 X 아이콘으로 캡션을 삭제하세요.
패널로 돌아가서 이미지 섹션은 세 가지 컨트롤을 더 제공합니다:
- 이미지 해상도: 썸네일부터 전체까지 WordPress 서비스 크기를 선택하거나 사용자 정의 크기를 설정하세요. 중간 또는 큰 크기는 슬라이더에서 여전히 선명하게 보이면서 페이지를 밝게 유지합니다.
- 라이트박스 갤러리 활성화: 방문자가 이미지를 클릭하여 팝업에서 전체 크기로 열 수 있도록 이 기능을 켭니다. 이 기능을 끄면 이미지만 표시됩니다.
- 라이트박스 라이브러리: 팝업 엔진을 선택, Fancybox 또는 Elementor 자신의 라이트 박스. 둘 다 방문자가 팝업 내부를 통해 단계 수 있도록 캐러셀 이미지를 그룹화.
탐색 설정 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 네비게이션 섹션은 사람들이 슬라이드를 통해 이동하는 방법을 제어합니다. Start with the 네비게이션 제어 스타일을 설정하는 드롭다운: 화살표 및 점, 화살표 및 분수, 화살표, 점, 진행률 또는 없음.
- 스크롤바 표시: 슬라이더 아래에 드래그 가능한 진행률 표시줄을 추가합니다.
- 화살표 위치: 화살표를 상단, 중앙 또는 하단에 배치하고 그 안에 왼쪽, 중앙 또는 오른쪽에 배치합니다.
- 배치: 화살표를 슬라이더 내부 또는 외부에 설정합니다.
- 모바일에서 화살표 숨기기: 스와이프가 자연스러운 동작인 작은 화면에 화살표를 떨어뜨립니다.
- 다음 아이콘 및 이전 아이콘: elementor 아이콘 라이브러리에서 기본 화살표를 모든 아이콘으로 바꿉니다.
회전목마 동작을 조정합니다 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 회전목마 설정 섹션은 슬라이더가 모션을 얻는 부분입니다. 얼마나 많은 이미지가 표시되는지,얼마나 빨리 움직이는지,슬라이더가 반복되는지 여부를 결정하는 부분입니다.
- 열당 슬라이드: 슬라이더를 수직 방향으로 실행할 때의 행 수입니다.
- 레이아웃: 표준 평면 슬라이더의 경우 회전목마를 선택하고 3D 효과의 경우 커버플로우를 선택합니다.
- 자동 높이: 슬라이더 높이를 현재 이미지에 맞게 조정합니다.
- 자동 재생 및 자동 재생 속도: 자동 슬라이딩을 켜고 슬라이드 사이의 지연 시간을 밀리초 단위로 설정합니다(5000은 5초).
- 호버링 시 일시 중지: 커서가 슬라이더 위에 있는 동안 자동 재생을 중지합니다.
- 스크롤할 슬라이드: 단계당 얼마나 많은 이미지가 진행됩니까.
- 중앙 슬라이드, 커서 잡기, 드래그 프리 모드: 활성 슬라이드의 중심을 맞추고, 잡기 커서를 표시하고, 자유롭게 흐르는 드래그 스크롤을 위한 옵션입니다.
- 루프: 마지막 이미지에서 멈추는 대신 회전목마를 무한 루프로 실행하세요.
3D 효과를 위해 Coverflow 레이아웃을 사용합니다 #
스위치 레이아웃 에 커버플로우 그리고 슬라이드는 3D 스택으로 기울어지며 활성 이미지는 중앙에 평평하고 이웃은 뒤로 기울어집니다. A 커버플로우 효과 컨트롤이 나타나 깊이와 회전을 미세 조정할 수 있습니다. 슬라이더 자체가 디자인의 일부인 사진 및 포트폴리오 섹션에 적합합니다.
회전목마 스타일링하기 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 스타일 탭은 네 부분으로 나뉩니다: 회전목마 품목, 라이트박스, 네비게이션, 그리고 패턴. 함께 슬라이드, 팝업, 화살표 모양을 덮습니다.
회전목마 품목 #
이 섹션에서는 이미지 슬라이드의 스타일을 지정합니다. Normal,Hover, Active 상태가 있으므로 가운데 있는 슬라이드를 나머지 슬라이드보다 돋보이게 할 수 있습니다.
- 배경, 테두리 유형, 테두리 반경, 상자 그림자: 각 슬라이드의 표준 프레이밍. 테두리 반경이 이미지 모서리를 둥글게 만듭니다.
- 패딩 및 아이템 갭: 각 슬라이드 내부의 공간과 슬라이드 사이의 간격.
- 섀도우 모드 및 불투명도: 비활성 슬라이드의 깊이와 투명성이 더욱 향상되었습니다.
라이트박스, 오버레이 및 캡션 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 라이트박스 섹션에서는 각 이미지에 있는 미리보기 아이콘과 그 뒤에 있는 오버레이, 캡션 텍스트를 스타일링합니다.
- 사용자 정의 미리보기 아이콘: 기본 줌 아이콘을 바꾸고 색상, 호버 색상, 크기 및 위치를 아이콘 간격으로 왼쪽과 상단으로 설정합니다.
- 오버레이: 이미지 위에 배경 색조를 추가하면 아이콘과 캡션을 계속 읽을 수 있도록 하는 데 도움이 됩니다.
- 캡션 제목: 갤러리에 추가한 캡션의 타이포그래피, 배경, 색상 및 호버링 색상입니다.
탐색 화살표 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 네비게이션 스타일 섹션은 일반 및 호버 상태로 화살표 모양을 제어합니다.
- 색상 및 배경: 화살표 아이콘 색상과 그 뒤에있는 버튼.
- 테두리 유형, 테두리 반경, 패딩, 크기: 전체 반경이 있는 둥근 버튼을 포함하여 화살표 버튼의 모양과 크기를 조정합니다.
- 상자 그림자 및 오프셋: 깊이를 추가하고 수평 오프셋으로 화살표를 안팎으로 밀어냅니다.
페이지의 결과 #
게시 또는 미리보기 및 회전 목마는 라이브 실행: 그것은 이미지를 통해 자동 재생, 당신이 그것을 켠 경우 루프, 클릭 라이트 박스에서 각 하나를 엽니 다. 귀하의 스타일링은 사용자 정의 화살표 버튼에 둥근 테두리 슬라이드에서, 통해 수행.
일반적인 사용 사례 #
- 사진 및 포트폴리오 라이트박스를 통해 방문객이 전체 크기 사진을 볼 수 있는 갤러리입니다.
- 제품 이미지 슬라이더 랜딩 페이지에서 자동 재생이 눈을 사로잡습니다.
- 로고 또는 파트너 스트립 보기당 여러 슬라이드와 루프를 사용합니다.
- 추천사 또는 이벤트 사진 컴팩트하고 스와이프 가능한 블록입니다.
- 영웅 커버플로 슬라이더 디자인 포워드 섹션의 경우.
이미지 회전목마 작업 팁 #
- 이미지 해상도를 슬라이드 크기에 일치시킵니다. 작은 슬라이드에 전체 크기의 파일을 제공하면 페이지 속도가 느려집니다; 보통 중간 또는 큰 것은 충분합니다.
- 자동 재생 속도를 편안하게 유지하십시오. 약 4000~6000ms는 사람들이 서두르지 않고 볼 시간을 제공합니다.
- 자동 재생으로 호버에서 일시 중지를 켭니다. 캡션을 읽는 사람 아래에서 슬라이더가 미끄러지는 것을 중지합니다.
- 모바일에서 화살표 숨기기. 스와이프는 터치 스크린의 자연스러운 제스처이므로 화살표가 종종 어수선합니다.
- 활성 상태를 사용하여 중앙 슬라이드를 강조 표시합니다. 활성 슬라이드의 미묘한 테두리 또는 완전한 불투명도가 눈을 안내합니다.
자주 묻는 질문 #
마스터 애드온의 이미지 캐러셀 위젯은 무엇입니까?
워드프레스 갤러리를 반응형 이미지 슬라이더로 바꾸는 Elementor 위젯입니다. 이미지를 선택하고,뷰당 몇 개의 쇼를 설정하며,네비게이션 및 자동 재생 옵션을 선택합니다. 내장 라이트박스,캡션, 커버플로우 레이아웃,전체 스타일링 컨트롤이 포함되어 있습니다.
Elementor 이미지 캐러셀에 라이트박스를 어떻게 추가하나요?
콘텐츠 탭에서 이미지 섹션을 열고 라이트박스 갤러리 사용 을 켭니다. 그런 다음 Fancybox 또는 Elementor 중 하나의 라이트박스 라이브러리를 선택합니다. 방문자는 모든 이미지를 클릭하여 팝업으로 전체 크기를 열고 거기에서 나머지 캐러셀을 단계별로 살펴볼 수 있습니다.
이미지 캐러셀이 자동 재생 및 루프될 수 있습니까?
예. 캐러셀 설정에서 자동 재생을 켜고 자동 재생 속도를 밀리초 단위로 설정합니다. 마지막 이미지에서 멈추는 대신 슬라이더가 끝없이 실행되도록 루프를 활성화합니다. 호버에서 일시 중지를 켜면 누군가가 보고 있는 동안 자동 재생이 중지됩니다.
커버플로우 레이아웃은 무엇입니까?
Coverflow 는 캐러셀 설정 아래의 3D 레이아웃 옵션입니다. 활성 이미지는 중앙에 평평하게 위치하며 이웃 슬라이드는 스택에서 뒤로 기울어집니다. Coverflow Effect 컨트롤을 사용하면 깊이와 회전을 조정할 수 있습니다. 사진 및 포트폴리오 슬라이더에 적합합니다.
Image Carousel 위젯이 반응성이 있습니까?
예. Swiper 엔진에서 실행되므로 터치 친화적이며 화면 크기에 자동으로 적응합니다. 장치별로 보기당 다른 슬라이드를 설정하고 스와이프가 이를 대체하는 모바일에서 탐색 화살표를 숨길 수 있습니다.
감싸는 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 이미지 회전목마 위젯 별도의 플러그인 없이 모든 기능을 갖춘 Elementor 이미지 슬라이더를 빌드합니다: 갤러리를 로드하고,자동 재생 및 루프를 설정하고,라이트박스를 켜고,디자인에 맞게 슬라이드와 화살표를 스타일링합니다. 이미지를 표시하는 다른 방법은 다음을 참조하세요 갤러리 슬라이더 그리고 필터링 가능한 갤러리 위젯. 전체 찾아보기 마스터 애드온 위젯 및 확장 또 무엇이 포함되는지 보려면.
