이미지 슬라이더 후 Elementor 전에: 무료 비교 위젯
이미지 비교는 핸들이 사이에 있는 하나의 프레임에 이전 이미지와 이후 이미지를 스택하는 무료 Master Addons 위젯입니다. 방문자는 핸들을 드래그하거나 스와이프하여 변경 사항을 표시합니다. 각 측면에 레이블을 추가하고 수평 (왼쪽 및 오른쪽) 또는 수직 (위 및 아래) 을 선택하고 핸들이 시작되는 위치를 설정하고 핸들,레이블 및 오버레이 스타일을 지정합니다. 무료 Elementor 나 Elementor Pro 에는 전후 슬라이더가 없으므로 이 위젯은 무료 Elementor 에서 그 간격을 채웁니다.
Elementor에서 Before After Slider를 추가하는 방법
당신은 Elementor 와 WordPress.org 의 무료 마스터 애드온 플러그인이 필요합니다.
- 아래에서 이미지 비교가 켜져 있는지 확인하세요 마스터 애드온, 위젯.
- Elementor 편집기에서 다음을 검색하세요 이미지 비교 그리고 페이지로 드래그하세요.
- 이전 탭에서 첫 번째 이미지와 레이블을 선택한 다음 이후 탭에서도 동일한 작업을 수행합니다.
- 설정에서 표시 비율을 설정하고 가로 또는 세로를 선택합니다.
- 마우스에서 핸들 이동 유지 휴대폰의 경우 드래그/스와이프하거나 데스크톱 중심 페이지에서 Pro 옵션을 사용하십시오.
- 스타일 탭에서 핸들과 라벨을 스타일링한 다음 휴대폰에서 슬라이더를 테스트합니다.
디자인 팁과 예제를 보려면 다음을 읽어보세요 슬라이더 가이드 전후. 모든 설정은 에 나열되어 있습니다 이미지 비교 위젯 설정.
슬라이더 후 이전에 드래그 앤 스와이프하세요
업로드하세요 전에 그리고 이후 이미지,각각 고유한 Label 및 Image Resolution 을 가지고 있음. In 설정, 가시 비율(%) 핸들이 시작되는 위치를 설정합니다 오리엔테이션 수평(기본값) 또는 수직입니다 오버레이 레이블을 표시하거나 숨깁니다. 핸들 이동 는 무료 플러그인에서 마우스 드래그/스와이프입니다. Master Addons Pro 는 핸들이 커서를 따라가는 Mouse Move 와 Mouse Click 을 추가합니다.
- 데스크탑 및 터치 스크린에서 드래그 앤 스와이프 작업.
- 핸들을 중심에서 벗어나 시작하여 결과를 강조 표시합니다.
- 동일한 픽셀 치수의 이미지를 사용하여 두 면이 정렬되도록 합니다.
사용자 정의 가능한 오버레이 및 라벨 지우기
켜다 오버레이 이미지에 Before 및 After 레이블을 표시하려면. 오버레이 스타일 섹션에는 일반 및 호버 배경이 있습니다. The 라벨 섹션은 색상, 타이포그래피, 테두리, 테두리 반경, 여백 및 패딩으로 각 측면을 별도로 스타일링하므로 “이전” 및 “이후” 를 “이전” 및 “새” 또는 기타 단어로 변경할 수 있습니다.
- 모든 언어로 된 사용자 정의 라벨 텍스트.
- 이전 라벨과 이후 라벨에 대해 별도의 스타일을 지정합니다.
- 호버에 다른 오버레이 배경.
전문 핸들 및 컨테이너 스타일링
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 핸들 섹션은 핸들 바 색상 및 크기, 핸들 상자 너비 및 높이, 아이콘 색상, 일반 및 호버의 경계 및 경계 반경을 설정합니다. 레이아웃 스타일 전체 슬라이더 주위에 테두리,패딩 및 여백을 추가합니다. 컨테이너의 테두리 반경 및 상자 그림자는 마스터 애드온 프로 옵션입니다.
- 손잡이 색깔을 당신의 상표에 맞추십시오.
- 깔끔한 룩을 연출하기 위해 둥근 손잡이 상자가 있는 얇은 바.
- 둥근 모서리와 Pro가 포함된 컨테이너의 그림자.
이미지 비교: 무료 vs Pro
Elementor 는 무료 또는 Pro 플러그인에 이전 및 이후 위젯이 없습니다. 무료 Master Addons 위젯에 포함 된 내용과 Pro 가 추가 한 내용은 다음과 같습니다.
| 특징 | 무료 | 마스터 애드온 프로 |
|---|---|---|
| 라벨이 있는 이미지 전후 | 예 | 예 |
| 수평 및 수직 방향 | 예 | 예 |
| 가시 비율 시작점 | 예 | 예 |
| 마우스 드래그/스와이프 핸들 | 예 | 예 |
| 마우스 이동 및 마우스 클릭 핸들 | 아니요 | 예 |
| 핸들, 라벨 및 오버레이 스타일링 | 예 | 예 |
| 컨테이너 테두리 반경 및 상자 그림자 | 아니요 | 예 |
대부분의 슬라이더 전후의 경우 무료 버전으로 충분합니다. 핸들이 커서를 따르거나 사용자 정의 CSS 없이 둥근 모서리와 그림자가 필요할 때 Pro 가 의미가 있습니다. 대신 하나의 이미지에 메모를 고정하려면 다음을 참조하십시오 이미지 핫스팟 (프로).
이미지 비교를 위해 자주 묻는 질문
이미지 비교 위젯은 무료인가요?
예. 위젯은 드래그 앤 스 와이프,라벨, 방향 및 핸들 스타일링이 모두 무료입니다. Master Addons Pro 는 마우스 이동 및 마우스 클릭 핸들과 컨테이너 테두리 반경 및 상자 그림자를 추가합니다.
폰에서 작동하나요?
예,무료 마우스 드래그/스와이프 핸들 사용. 방문자가 스와이프하여 분배기를 이동합니다. Pro 마우스 이동 옵션은 호버에 의존하므로 터치 스크린에서는 작동하지 않습니다.
Elementor에는 전후 슬라이더가 있습니까?
아니요. 무료 Elementor 나 Elementor Pro 모두 이미지 비교 또는 위젯 전후가 포함되어 있지 않으므로이 것과 같은 애드온이 필요합니다.
Vertical orientation 은 언제 사용해야 하나요?
전체 길이 인물 사진,건물 정면 또는 긴 스크린 샷과 같은 높은 이미지에 수직 사용. before 이미지는 위쪽 및 아래쪽 핸들과 함께 위에 있고 아래쪽 이미지는 아래에 있습니다.
두 개의 고해상도 이미지를 사용하면 페이지 속도가 느려지나요?
이미지가 매우 큰 경우 가능합니다. 이미지 해상도 설정을 현명하게 사용하고 (예를 들어 '전체' 대신 “대형”) 업로드하기 전에 항상 웹에 맞게 이미지를 최적화하십시오. 요소 자체는 가볍지만 이미지 파일 크기는 성능의 주요 요소입니다.
두 개 이상의 이미지를 비교할 수 있나요?
아니요. 각 위젯은 두 개의 이미지를 비교합니다. 더 많은 쌍을 보려면 쌍당 하나의 위젯을 추가하거나 에 여러 이미지를 표시합니다 이미지 회전목마.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
![Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
