어떤 것들은 말하기보다 보여주기 쉽다: 보정 된 사진,리폼 후의 방,정리 전후의 디자인. The 이미지 비교 위젯 인 Elementor용 마스터 애드온 두 개의 이미지를 쌓고 그 사이에 드래그 가능한 핸들을 떨어뜨리면 방문자가 슬라이드하여 차이점을 직접 드러냅니다.
이전 이미지와 이후 이미지를 로드하고,라벨을 추가하고,수직 또는 수평 분할을 선택한 다음,사이트에 맞게 핸들과 라벨의 스타일을 지정합니다. 이 가이드는 위젯의 모든 설정을 다룹니다.
이미지 비교 위젯이 수행하는 작업 #
위젯은 같은 프레임에 두 개의 이미지를 보여줍니다. 하나는 다른 하나의 상단에,가운데 아래 슬라이더 핸들과 함께. 핸들을 드래그하면 이전 이미지와 이후 이미지 사이를 닦아냅니다. 각 측면에 레이블을 지정하고 분할을 왼쪽에서 오른쪽으로 위에서 아래로 뒤집고 핸들이 드래그,클릭 또는 호버를 따르는지 결정할 수 있습니다.
작업할 탭이 두 개 있습니다. 콘텐츠 두 이미지, 레이블 및 슬라이더 동작을 유지합니다. 스타일 레이아웃,오버레이 라벨 및 핸들을 제어합니다. 일반적인 Elementor Advanced 옵션이 그 옆에 있습니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 동일한 크기와 프레임으로 정렬된 두 개의 이미지가 슬라이드를 하나의 장면으로 읽습니다.
이미지 비교 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 이미지 비교또는 Master Addons 섹션으로 스크롤합니다(위젯에는 보라색 MA 배지가 있음). 페이지로 드래그하면 두 개의 샘플 이미지와 바로 편집을 시작할 수 있는 슬라이더가 로드됩니다.
두 이미지를 불러옵니다 #
열다 콘텐츠 탭. 그만큼 이미지 섹션에는 다음이 있습니다 전에 그리고 an 이후 탭을 누르면 각각 고유한 이미지, 레이블 및 해상도가 설정됩니다.
- 탭 앞/뒤: 양면 사이를 전환하여 각 이미지를 설정합니다.
- 이미지 선택: 미디어 라이브러리에서 해당 측면의 그림을 선택합니다.
- 라벨: 작업 전이나 최종 결과처럼 측면에 대한 짧은 캡션입니다.
- 이미지 해상도: 전체 또는 대형과 같은 크기가 제공됩니다.
라이브러리에서 각 이미지를 선택합니다 #
클릭 이미지를 선택하세요 그리고 WordPress 미디어 라이브러리가 열립니다. Before 탭에서 before 이미지를 설정한 다음 After 탭으로 전환하고 두 번째 이미지를 선택합니다. 잊기 쉬운 점: 현재 탭이 어느 쪽을 변경할지 결정하므로 선택을 누르기 전에 확인하십시오.
라벨을 설정합니다 #
A를 타자를 치십시오 라벨 각 탭과 위젯에서 이미지의 저쪽에 오버레이로 인쇄합니다. before 레이블은 한쪽에,after 레이블은 다른쪽에 위치하므로 방문자는 철자를 쓰지 않고도 어느 것이 어느 것인지 알 수 있습니다.
슬라이더 설정을 조정합니다 #
열다 설정 슬라이더가 어떻게 동작하는지에 대한 섹션. 시작 위치,분할 방향 및 핸들을 움직이는 것을 설정하는 곳입니다.
- 가시 비율(%): 핸들이 시작되는 곳, 그래서 당신은 전이나 후 측에 열 수 있습니다.
- 오버레이: 전후 라벨을 표시하거나 숨깁니다.
- 핸들 이동: 슬라이더를 이동하려면 드래그하거나 스와이프하거나 클릭하거나 마우스를 가져가세요.
방향을 전환합니다 #
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 오리엔테이션 토글은 분할을 수직에서 수평으로 뒤집습니다. 수직은 왼쪽-오른쪽 닦기를 제공합니다. 수평은 위아래에 위아래 핸들로 이전 이미지를 쌓습니다. 일반적으로 키가 큰 사진에 더 잘 읽혀집니다.
레이아웃, 핸들 및 레이블을 스타일링합니다 #
열다 스타일 탭. 를 위한 단면도가 있습니다 레이아웃 스타일, 오버레이, 핸들, 그리고 라벨따라서 슬라이더는 기본 모양 대신 디자인과 일치합니다.
- 레이아웃 스타일: 전체 슬라이더 주변의 테두리 유형, 반경 및 상자 그림자.
- 손잡이: 드래그 컨트롤의 색상, 크기 및 스타일입니다.
- 라벨: 캡션의 측면별 색상, 타이포그래피, 배경, 테두리 및 간격입니다.
일반적인 사용 사례 #
- 사진 편집 수정된 버전 옆에 원시 샷을 표시합니다.
- 가정 및 개조 리모델링이나 청소 전후.
- 디자인과 개발 오래된 레이아웃과 재설계.
- 건강 및 피트니스 진행 샷 나란히.
- 제품 완성되거나 스타일이 지정된 결과 옆에 있는 일반 항목입니다.
이미지 비교 위젯 작업 팁 #
- 두 이미지를 일치시킵니다. 동일한 크기, 각도 및 자르기로 슬라이드가 두 장의 사진이 함께 걸린 것이 아니라 하나의 장면으로 읽혀집니다.
- 시작 비율을 설정합니다. Visible Ratio로 도중에 열면 방문자가 끌어야 할 것이 있음을 알 수 있습니다.
- 라벨을 짧게 유지하세요. 앞과 뒤, 또는 두 단어는 전체 문장보다 이미지 위에 더 깨끗하게 앉습니다.
- 올바른 트리거를 선택합니다. 드래그 슈트 데스크탑. 호버는 빠른 느낌이지만 터치 사용자를 당황하게 할 수 있으므로 배송하기 전에 전화로 테스트하십시오.
- 키가 큰 샷에는 수평을 사용하십시오. 상하 분할은 좁은 왼쪽-오른쪽 닦기보다 인물 이미지에 더 잘 작동합니다.
비디오 자습서를보십시오 #
화면에서 따라하는 것을 선호하시나요? 아래의 비디오 튜토리얼은 이미지 비교 요소를 처음부터 끝까지 살펴보고 Elementor 편집기에서 이미지,라벨, 슬라이더 설정 및 스타일링이 어떻게 작동하는지 보여줍니다.
자주 묻는 질문 #
Master Addons의 이미지 비교 위젯은 무엇입니까?
드래그 가능한 핸들로 이전 이미지와 이후 이미지를 쌓는 Elementor 위젯입니다. 방문자는 핸들을 밀어서 한 이미지에서 다른 이미지로 닦아냅니다. 각 측면에 선택적 레이블이 있으며 모두 코드 없이 Elementor 패널에서 설정됩니다.
라벨 전후를 어떻게 추가하나요?
이미지 섹션을 열고 이전 탭과 이후 탭에 레이블을 입력합니다. 각 레이블은 이미지 측면에 오버레이로 인쇄됩니다. 설정에서 오버레이 토글을 사용하여 표시하거나 숨기고 스타일 탭의 레이블 섹션에서 스타일을 지정할 수 있습니다.
슬라이더를 수직 또는 수평으로 만들 수 있습니까?
예. 설정 섹션에는 방향 전환이 있습니다. 기본값은 수직 왼쪽-오른쪽 분할입니다; 그것을 전환하고 위아래 핸들로 이미지가 위아래로 쌓입니다. 세로 이미지나 큰 스크린샷에는 수평이 잘 작동합니다.
방문자는 비교 슬라이더를 어떻게 이동합니까?
설정의 이동 핸들 드롭다운은 트리거를 설정합니다. 핸들은 마우스 드래그 또는 스와이프,클릭 시 이동 또는 트랙 호버를 따를 수 있습니다. 드래그는 데스크탑에서 가장 일반적이며 클릭은 터치 스크린에 가장 안전한 선택입니다.
같은 크기의 이미지가 필요합니까?
최상의 결과를 얻으려면 그렇습니다. 두 이미지가 동일한 프레임에 위치하므로 크기,각도 및 자르기가 일치하면 슬라이드가 하나의 장면으로 읽혀집니다. 이미지가 다른 경우 고정 이미지 해상도를 설정하여 둘 다 동일한 치수로 제공됩니다.
감싸는 #
이미지 비교 위젯은 두 이미지를 전후의 인터랙티브로 바꿉니다: 두 그림을 불러오고,라벨을 추가하고,방향과 핸들을 설정한 다음,마치도록 슬라이더를 스타일링합니다. 관련 위젯은 을 참조하세요 이미지 핫스팟 위젯 그리고 the 이미지 호버 효과 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
