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 마스터 애드온 이미지 비교 위젯 elementor Pro 및 추가 플러그인 구독이 없는 모든 Elementor 페이지에 무료 전후 슬라이더를 놓을 수 있습니다. Master Addon을 설치하고 위젯을 페이지로 드래그한 다음 두 개의 이미지를 업로드하면 방문자가 그 사이를 지우는 드래그 가능한 핸들을 얻을 수 있습니다.

이 가이드는 모든 설정을 통해 걷는다: 위젯을 활성화, 페이지에 추가, 그들의 첫 번째 시도에 거의 모든 사람을 위로 트립 차원 규칙, 방향, 보이는 비율, 핸들 유형, 스타일링, 그리고 슬라이더가 모바일에서 잘못 동작 할 때 무엇을 할 수 있습니다, 그리고 기계가 클릭하면 더 많은 전후 디자인 아이디어를 보려면 다음을 참조하십시오 전체 전후 쇼케이스 가이드.

시작하기 전에 필요한 것

• Elementor 가 설치되어 있고 활성화된 WordPress. Elementor 의 무료 버전으로 충분합니다.
• Elementor 용 마스터 애드온이 설치되고 활성화되었습니다. 무료 플랜은 이 위젯을 다룹니다. 참조 설치 가이드 플러그인이 당신에게 새로운 경우.
• 정확히 같은 픽셀 차원으로 잘린 두 이미지. 잠시 후 왜 사람들이 기대하는 것보다 더 중요한지에 대한 자세한 내용.

1 단계: 이미지 비교 위젯을 활성화합니다

마스터 애드온은 수십 개의 위젯과 함께 제공되며,모든 설치 시 기본적으로 모든 위젯이 로드되는 것은 아닙니다. 바로가기 마스터 애드온 → 위젯 wordpress 대시보드에서 확인하세요 이미지 비교 가 켜져 있습니다. 잠시 후 Elementor 의 Elements 패널에 나타나지 않으면 거의 항상 이런 이유입니다.

2단계: 페이지에 위젯을 추가합니다

Elementor 로 페이지를 열고 Elements 패널에서 이미지 비교를 검색한 후 (보라색 MA 배지를 찾으십시오) 페이지로 드래그하십시오. 두 개의 자리 표시자 이미지와 작업 슬라이더가 로드되므로 단일 설정을 터치하기 전에 레이아웃을 볼 수 있습니다.

3단계: 전후 이미지를 업로드하세요

열다 콘텐츠 탭, 그 다음 이미지 단면도. 그것은 a 를 가지고 있습니다 전에 탭과 an 이후 탭,그리고 각각은 자신의 이미지 필드,라벨 필드,이미지 해상도 설정을 선택합니다. Before 탭에서 before 사진을 설정하고 After 로 전환한 후 두 번째 사진을 설정합니다. 실수로 두 이미지를 동일한 탭에 업로드하기 쉽기 때문에 이미지를 선택하기 전에 어느 탭이 활성화되어 있는지 확인하십시오.

오버레이 캡션을 원하는 경우 각 탭에 짧은 레이블을 입력하십시오. “이전” 및 “이후” 또는 “오래된 디자인” 및 “재설계.”와 같은

모두를 넘어뜨리는 규칙: 이미지 차원 일치

두 이미지 모두 정확히 동일한 픽셀 치수,동일한 너비 및 동일한 높이가어야 합니다. 한 사진이 1600×1000 이고 다른 사진이 1200×800 인 경우 슬라이더가 그 중 하나를 늘리거나 작물을 맞춰서,누군가가 핸들을 드래그하는 순간 비교가 뒤틀리거나 잘못 정렬된 것처럼 보입니다.

업로드하기 전에, 일반적으로 사용하는 편집기에서 또는 WordPress의 편집기에서 두 이미지를 동일한 차원으로 잘라내어 이 문제를 해결하세요 내장 이미지 편집기 업로드 후. 위젯의 두 탭에 고정 된 이미지 해상도를 설정하면 도움이되지만 두 소스 사진간에 크게 다른 종횡비를 수정하지는 않습니다.

4 단계: 방향 설정

설정 섹션에서 방향 전환은 수직 분할 (왼쪽-오른쪽 지우기,기본값) 과 수평 분할 (위-아래 지우기) 사이를 전환합니다. 수직은 넓은 가로 샷에 적합합니다. 좁은 왼쪽-오른쪽 슬라이버가 한 번에 키가 큰 사진을 충분히 표시하지 않기 때문에 수평은 일반적으로 키가 크거나 세로 이미지에 대해 더 잘 읽습니다.

5 단계: 가시 비율 및 핸들 유형을 설정합니다

Visible Ratio 는 페이지가 로드될 때 핸들이 놓이는 위치를 백분율로 설정합니다. 중립적인 첫인상을 위해 약 50% 정도 열거나,로드 시 전후 이미지가 지배적이기를 원한다면 한쪽에 더 가깝게 시작하십시오.

핸들 이동은 슬라이드를 트리거하는 요소를 결정합니다: 드래그 또는 스와이프,클릭 또는 호버. 드래그는 방문자가 잡고 당길 것으로 예상되는 데스크탑에서 잘 작동합니다. 호버는 마우스에서 매끄럽게 느껴지지만 전혀 호버링하지 않는 터치 사용자에게는 실화가 발생할 수 있으므로 드래그/스와이프 또는 클릭은 많은 트래픽이 모바일 인 경우 더 안전한 기본값입니다.

6 단계: 슬라이더 스타일 지정

스타일 탭은 레이아웃 스타일 (경계,반경, 전체 위젯 주변의 상자 그림자), 핸들 (색상,크기, 아이콘), 라벨 (자막 오버레이의 측면별 색상,타이포그래피, 배경 및 간격) 을 다룹니다. 이 중 어느 것도 슬라이더의 작동 방식을 변경하지 않고 보이는 방식만 변경하므로 첫 번째 패스를 건너뛰고 메커니즘이 올바르면 다시 돌아오는 것이 안전합니다.

모바일 및 터치 동작

Elementor 는 기본적으로 반응형이므로 추가 설정 없이 뷰포트로 위젯의 크기가 조정됩니다. 휴대폰에서 실제로 테스트해야 하는 것은 이동 핸들 설정입니다. 손가락으로 자연스럽게 드래그 앤 스와이프 작업을 수행하고 클릭도 작동합니다. 터치스크린에는 호버가 존재하지 않으므로 호버로 설정된 슬라이더는 모바일 방문자를 위해 가만히 앉아 이동할 방법이 없는 시작 가시 비율만 표시합니다.

Elementor 의 자체 가이드 on 반응형 디자인 핸들 동작과 별도로 태블릿이나 모바일용 위젯 자체의 크기를 조정해야 하는 경우 중단점 기본 사항을 다룹니다.

마스터 애드온과 기타 요소 비교 옵션

무료 또는 Pro 인 Elementor 코어에는 자체 고유 이미지 비교 위젯이 없습니다. 어느 경로를 택하든 타사 위젯을 어느 쪽이든 설치하므로 정직한 비교는 플러그인과 “내장 Elementor”가 아닌 해당 위젯 간의 비교입니다

일반적인 문제 해결

• 요소 패널에서 누락된 위젯: 마스터 애드온 → 위젯을 다시 확인하고 이미지 비교가 활성화되었는지 확인하세요.
• 슬라이더가 늘어나거나 기울어 보입니다: 두 이미지는 동일한 픽셀 크기가 아닙니다; 일치하도록 자릅니다.
• 핸들은 전화로 움직이지 않습니다: 핸들 이동이 호버; 드래그/스와이프 또는 클릭으로 전환합니다.
• 라벨이 표시되지 않습니다: 설정에서 오버레이 토글이 켜져 있고 레이블이 실제로 두 탭 모두에 입력되어 있는지 확인합니다.

이 드래그-투-공개 상호 작용이 마음에 드신다면, 이미지 핫스팟 위젯 그리고 the 이미지 호버 효과 위젯 이미지에 주석을 달거나 애니메이션을 적용하려면 유사한 호버링 및 클릭 패턴을 사용하십시오.

자주 묻는 질문

관련 읽기

• 전체 전후 쇼케이스 가이드
• 이미지 비교 문서
• 마스터 애드온 위젯 및 확장 라이브러리