Elementor에서 이미지 캐러셀을 만드는 방법

드롭 더 이미지 회전목마 위젯 페이지로 미디어 라이브러리에서 이미지를 선택하고 각 장치에 대해 보기당 슬라이드를 설정한 다음 자동 재생을 켭니다. 4단계, 약 2분, 그리고 라이센스가 필요하지 않습니다.

짧은 버전입니다. 이 나머지 부분에서는 작동하는 캐러셀과 휴대폰에서 약간 잘못 보이는 캐러셀을 구분하는 설정과 더불어 커버플로우 레이아웃,라이트박스, 그리고 다른 면에서는 미세한 캐러셀을 느리게 만드는 두 가지 이미지 실수에 대해 다룹니다. 이미지 캐러셀이 올바른 모양인지조차 모르시겠습니까? The 전체 회전 목마 위젯 라인업 모든 유형을 한 곳에서 비교합니다 회전목마 대 슬라이더 고장 명명 정산.

필요한 것

Elementor free 와 Master Addons free. Elementor 자신의 Image Carousel 은 존재하지만 슬라이드 캡션이 없고 응답 제어가 제한되어 있으므로 이 연습에서는 마스터 애드온 이미지 회전목마또한 무료이며 캡션, 라이트박스 및 커버플로 레이아웃이 추가됩니다.

1 단계: 위젯 추가

Elementor 에서 페이지를 열고 위젯 패널에서 “이미지 캐러셀.”을 검색합니다. 컨테이너로 드래그하십시오.

콘텐츠를 커밋하기 전에 모양을 볼 수 있도록 자리 표시자 이미지로 렌더링합니다. 일단 남겨두세요. 크기가 모두 다른 실제 사진보다 일관된 자리 표시자에 대해 레이아웃을 설정하는 것이 더 쉽습니다.

2 단계: 이미지를 추가하십시오

갤러리 필드를 클릭하고 미디어 라이브러리에서 선택하거나 업로드하세요. 주문이 중요하고 드래그 투 리오더 작업이므로 가장 강력한 이미지를 먼저 설정하세요. 모바일에서는 누구나 볼 수 있는 유일한 이미지일 수 있기 때문입니다.

콘텐츠 설정에서 이미지 크기, 캡션 소스 및 링크 동작을 찾을 수 있습니다.

이미지 크기는 사람들이 Full에 남겨두고 후회하는 설정입니다. 전체는 원래 업로드를 의미: 4000px 카메라 내보내기는 400px 슬라이드로 제공. 워드 프레스는 이미 작은 버전을 생성; 선택 medium_large 또는 large 그리고 회전목마의 무게를 눈에 띄는 차이 없이 대부분 줄일 수 있습니다.

캡션 미디어 라이브러리의 캡션 또는 설명 필드에서 가져오기 때문에 슬라이드에 텍스트가 필요한 경우 위젯에서 슬라이드당 텍스트 상자를 찾기보다는 거기에 작성하십시오.

3 단계: 탐색

화살표, 점, 분수, 또는 스크롤바. 얼마나 많은 슬라이드를 가지고 있는가에 따라 고르세요:

• 8개 슬라이드 미만: 점. 사람들은 한 눈에 전체 세트를 볼 수 있고 뛰어 다닐 수 있습니다.
• 8~20: 화살표만요 스무 점은 대조군이 아니라 얼룩이에요.
• 20세 이상: 화살표 더하기 분수 (“04 / 32”). 숫자는 누군가에게 그들이 어디에 있는지 알려주는 유일한 것입니다.

모바일에서 화살표 크기를 확인합니다. 데스크톱 기본값은 30px 대상인 경우가 많으며 탭에 액세스할 수 있는 최소값은 44px 입니다. 모바일 중단점에 충돌하거나 화살표를 완전히 떨어뜨리고 스와이프에 의존합니다.

4단계: 회전목마 동작

회전목마가 옳다고 느끼는지 여부를 결정하는 패널입니다.

보기당 슬라이드: 세 번 설정합니다. 설정 상단의 장치 아이콘을 클릭하고 데스크톱,태블릿 및 모바일 고유의 값을 제공합니다. 4,2, 1 은 안전한 기본값입니다. 이 단일 단계는 휴대폰에서 작동하는 캐러셀과 4 개의 스쿼시 썸네일을 표시하는 캐러셀의 차이입니다.

스크롤할 슬라이드. 연속 브라우징 느낌을 위해 1 로 설정하거나,페이지 스타일 페이징을 위해 slides-per-view 와 일치시킵니다. 슬라이드가 그룹을 형성할 때 매칭이 더 좋습니다; 1 은 길고 미분화된 세트에 더 좋습니다.

자동 재생. 장식 갤러리를 위해 켜십시오. 슬라이드를 클릭 할 수 있으면 누군가가 이미지에 도달하고 이미지를 대체 한 이미지를 클릭하기 때문에 끄십시오. 일시 중지 - 온 - 호버 커버 데스크톱이지만 터치에는 호버가 없습니다.

무한 루프는 충분한 슬라이드가 필요합니다. 스와이퍼 클론 슬라이드를 가짜로 만들어서,적어도 슬라이드를 두 배 이상 볼 필요가 있습니다. 3 회 뷰에서 4 개의 이미지가 눈에 띄게 점프합니다. 이미지 추가 또는 루프 끄기.

속도. 300 에서 500ms. 200 아래는 전환이 아닌 컷처럼 보입니다; 800 명 이상이 두 번 클릭하기 시작합니다.

커버플로우 레이아웃

레이아웃을 표준에서 커버플로우로 전환하면 측면 슬라이드가 3D로 회전하여 어두워지고 뒤로 물러나며 중앙 슬라이드만 읽을 수 있습니다.

포트폴리오와 사례 연구,한 번에 하나의 이미지가 포인트가 되는 모든 것에 적합합니다. 사람들이 비교해야 하는 것은 잘못된 것입니다. 왜냐하면 전체 디자인은 이웃을 보지 못하게 하기 위해 존재하기 때문입니다.

오른쪽으로 이동하려면 두 가지 설정: 30~40도(50도를 지나면 측면 슬라이드가 읽을 수 없는 슬라이드가 됨) 사이를 회전하고 중앙 슬라이드를 돌리거나 활성 이미지가 왼쪽 플러시 위치에 있고 구성이 축소됩니다.

커버플로는 깊이 기반 스타일 4 가지 중 하나입니다. 플립,아크 및 궤도는 다른 세 가지이며,그리고 Elementor 3D 캐러셀 가이드 각각이 좋은 것을 다룹니다.

슬라이드 스타일링

스타일 탭은 슬라이드, 테두리 반경, 그림자 및 호버 상태 사이의 간격을 처리합니다.

다시 생각해 볼 가치가 있는 설정은 다음과 같습니다 갭. 영 간격은 회전 목마를 1 개의 지속적인 이미지 지구로 읽힌다,파노라마를 위해 맞은 및 명백한 품목을 위해 틀린 만든다. 16 에 24px 는 활주가 행 보기 희소 없이 분리되는 카드로 읽는 범위이다.

호버 효과 (스케일, 오버레이, 캡션 공개) 는 슬라이드 당이 아닌 전체 세트에 적용됩니다. 스케일을 1.05 미만으로 유지합니다. 호버에서 15% 성장하는 슬라이드는 이웃을 밀어 넣으며 레이아웃 버그처럼 보입니다.

라이트박스 및 캡션

라이트박스를 켜고 슬라이드를 클릭하면 페이지 위에 전체 크기 이미지가 열리고 자체 다음 및 이전 컨트롤이 전체 캐러셀을 통과합니다.

이것이 사진 촬영을 위해 그리드가 아닌 캐러셀을 사용하는 이유입니다. 캐러셀은 인덱스입니다; 라이트박스는 뷰어입니다. 제목과 자막이 라이트박스로 전달되므로 캡션이 한 번 있으면 두 곳 모두에서 작동합니다. 페이지에 클릭 뒤에 숨겨지지 않고 썸네일 스트립으로 표시되는 인덱스를 원한다면,그것이 바로 갤러리 슬라이더 대신 Pro가 필요한 위젯입니다.

한 가지 주의 사항: 라이트박스는 축소판이 아닌 전체 크기 이미지를 제공합니다. 이미지 크기를 로 설정한 경우 medium_large 캐러셀과 원본이 8MB 카메라 파일인 경우 라이트박스는 여전히 8MB 버전을 가져옵니다. 디스플레이 크기뿐만 아니라 업로드 시 원본을 압축합니다.

썸네일 네비게이션을 원하신다면

이미지 회전목마는 단일 행입니다. 큰 미리보기를 구동하는 축소판 스트립이 없습니다. 그 두 부분으로 구성된 레이아웃이 당신이 추구하는 것이라면,를 가져옵니다 비트린 플레이트 갤러리 대신 무료 디자인 중 하나입니다 슬라이더 템플릿 컬렉션: 장소,시간, 렌즈,조리개, 셔터 및 ISO 에 대한 편집 가능한 프레임 데이터 테이블이 포함된 캡션 패널이 있는 썸네일 스트립 아래의 단일 플레이트입니다. 사진 촬영을 위해 제작되었습니다. 동일한 미리보기 플러스 썸네일 모양은 대부분의 사람들이 비디오 캐러셀을 요청할 때 의미하는 바입니다 비디오 회전 목마와 갤러리 슬라이더 가이드 해당 버전을 다룹니다.

라이브 데모

가져오려면: 마스터 애드온 → 위젯 빌더 → 위젯 가져오기,JSON 을 끌어 넣으면 즐겨찾기 아래의 Elementor 에 나타납니다. 무료 플러그인에서 실행되며 Pro 라이센스가 필요하지 않습니다. 동일한 컬렉션에는 주각 영웅 슬라이더슬라이드당 링크가 있는 풀 블리드 영웅 슬라이더도 무료로 가져올 수 있습니다. 총 20개의 디자인이 명명되었습니다, 그 중 8개는 무료입니다.

화살표 스타일링

크기, 색상, 배경, 테두리 반경 및 위치: 캐러셀 내부, 외부 또는 가장자리와 겹치는 부분.

회전목마 바깥에 위치한 화살표는 수평 공간이 필요하고,전폭 컨테이너에는 아무 것도 없습니다. 클립으로 고정할 것입니다. 컨테이너를 뷰포트보다 좁게 유지하거나 화살표를 안쪽에 위치시키세요.

결과

통화가 완료되기 전에 셀룰러를 통해 실제 전화기에 페이지를로드하십시오. 뷰포트의 크기를 조정하지만 데스크톱의 연결 및 GPU 를 유지하는 브라우저의 장치 에뮬레이터가 아닙니다. 대부분의 캐러셀 문제는 실제 네트워크의 실제 하드웨어에서만 나타납니다.

회전목마를 느리게 만드는 두 가지 실수

전체 크기 이미지 제공. 위에 덮어두었는데,큰 거요. 사진 촬영 현장에서 Full size 의 10 슬라이드 회전목마는 20MB 가 될 수 있습니다. 에서 같은 회전목마 large 2MB 미만이고 아무도 알 수 없습니다.

자동 재생을 통해 접힌 부분 위에 놓습니다. 회전목마는 가장 큰 만족 페인트가 되며, 자동 재생은 페이지 로드 중 가장 성능에 민감한 초 동안 브라우저가 애니메이션을 생성한다는 것을 의미합니다. 회전목마가 맨 위에 있어야 하는 경우 자동 재생을 끄고 페이지가 안정될 때까지 가만히 놓아두세요.

로고는 사진과는 다른 직업입니다. 모양과 색상이 일치하지 않아 일렬로 앉기 전에 저녁 식사를 해야 합니다 로고 회전목마 연습 통과합니다.

자주 묻는 질문