Elementor 이미지 비교 슬라이더: Before After Showcase를 만드는 방법

정적인 나란히 있는 이미지는 당신의 일을 제대로 해내지 못합니다. 사진 편집,가정 개조,제품 변형,이 모든 것들은 서로 옆에 앉아 있는 두 장의 사진보다 더 나은 가치가 있습니다. An elementor 이미지 비교 슬라이더 그것을 수정합니다. 방문자는 이미지 전체에 핸들을 드래그하여 이전 버전과 이후 버전 자체를 드러내고,그 약간의 상호 작용은 페이지에 더 오래 머물게합니다.

클라이언트 랜딩 페이지에서 Master Addons Image Comparison 위젯을 사용해왔는데,정적 스크린샷보다 지속적으로 더 많은 참여도를 얻습니다. 이 튜토리얼에서는 설정,사용자 정의 및 게시하기 전에 알아둘 가치가 있는 몇 가지 사항을 다룹니다. 위젯은 무료이며 다른 위젯과 마찬가지로 Elementor 의 패널 안에 있으며 약 2 분 안에 실행할 수 있습니다.

이 가이드에서 다루는 내용:

• 이미지 비교 슬라이더란
• 누가 전/후 슬라이더가 필요합니다
• 무료 위젯으로 얻을 수 있는 것
• 하나 만드는 방법 (단계별)
• 더 나은 비교를 위한 팁
• 일반적인 문제 해결
• 마스터 애드온 대 대안
• 왜 마스터 애드온인가
• 시작하세요
• 자주 묻는 질문

이미지 비교 슬라이더란 무엇입니까?

이미지 비교 슬라이더는 두 이미지를 드래그 가능한 구분선으로 겹쳐 놓습니다. 사용자는 왼쪽과 오른쪽 (또는 위아래) 으로 밀어 한 이미지를 다른 이미지 위로 표시합니다. 편집기에서 “이전” 이미지와 “이후” 이미지를 설정하면 위젯이 나머지를 처리합니다.

아마 사진 포트폴리오,치과 웹사이트,또는 부동산 페이지에서 리노베이션 프로젝트를 보여주는 이런 것들을 보셨을 겁니다. 수동적으로 두 장의 개별 사진을 보는 대신 방문자들은 물리적으로 비교 대상과 상호작용합니다. 그 상호작용은 페이지에서의 시간을 늘려주며,이는 여러분의 서 그리고 이탈률을 낮춥니다.

Elementor에서 Before After Slider가 필요한 사람은 누구입니까?

변신을 보여주고 싶은 분. 제가 가장 자주 접하는 사용 사례들입니다:

웹 디자이너 및 대행사

웹사이트 재설계는 비교 슬라이더에서 멋지게 보입니다. 잠재 고객이 기존 디자인과 새 디자인 사이를 드래그하도록 하면 평면 스크린샷보다 더 많은 신뢰가 구축됩니다. 이를 와 페어링할 수 있습니다 이미지 호버 효과 위젯 포트폴리오 페이지에서 추가적인 시각적 다양성을 원한다면.

사진가 및 사진 편집자

아마도 가장 자연스러운 핏일 것입니다. 리터칭,컬러 그레이딩 또는 복원 작업을 수행하면 이미지 비교 슬라이더를 통해 잠재 고객이 무엇을 할 수 있는지 정확히 볼 수 있습니다. 왼쪽의 원시 파일,오른쪽의 편집된 버전 캡션보다 더 많은 것을 말합니다.

전자상거래 매장

스킨케어,청소용품, 눈에 보이는 결과물 판매? A 이미지 비교 전 귀하의 제품 페이지에서 사본의 단락보다 더 설득력이있다. 나는 시각적 차이가 극적 인 화장품 및 주택 개조 제품에 특히 잘이 작품을 보았다.

부동산 및 건축

리노베이션 프로젝트는 자연스럽게 어울립니다. 작업이 시작되기 전에 사진을 찍고,작업이 끝나면 다른 사진을 찍고,두 가지를 모두 비교 위젯에 넣습니다. 포트폴리오가 더욱 상호 작용하게 되고,방문자가 프로젝트를 탐색하는 데 더 많은 시간을 소비하는 경향이 있습니다.

디지털 마케팅 담당자

분석 대시보드,광고 실적,웹사이트 트래픽 차트. 드래그 투 비교 슬라이더로 “저희와 함께 작업하기 전”과 “저희와 작업한 후” 결과를 표시합니다. 사례 연구에 두 개의 스크린샷을 붙여넣는 것보다 더 잘 작동합니다.

마스터 애드온 이미지 비교 위젯: 당신이 얻는 것

a 를 추가하는 방법은 여러 가지가 있습니다 elementor 에서 슬라이더 후 전에니다. 일부는 독립 실행형 플러그인이 필요하고 일부는 사용자 정의 코드가 필요하며 일부는 프리미엄 애드온 구독 뒤에 잠겨 있습니다. 마스터 애드온에는 다음이 포함됩니다 이미지 비교 위젯 무료 버전에서. 대부분의 경쟁 애드온 (Ultimate Addons,PowerPack, The Plus Addons) 이이 기능을 페이월 뒤에 넣기 때문에 주목할 가치가 있습니다.

위젯에는 다음이 포함됩니다:

• 기본 요소 통합: Elementor 패널에서 끌어다 놓기. 단축 코드도 없고 별도의 설정 페이지도 없습니다. 에서 설치 워드 프레스 플러그인 repo 그리고 그것은 바로 위젯 목록에 나타납니다.
• 무료 사용: 이미지 비교 위젯은 무료 버전의 일부입니다. Pro 라이센스가 필요하지 않습니다.
• 다양한 제어 스타일: 슬라이더 핸들 (끌기), 마우스 이동 (호버) 또는 클릭. 가로 및 세로 비교 방향 모두 지원.
• 사용자 정의 라벨: “이전” 및 “이후” 텍스트를 원하는 언어로 원하는 대로 변경합니다. 라벨 색상,타이포그래피 및 위치 지정은 모두 조정 가능합니다.
• 반응형: 데스크톱,태블릿, 모바일에서 작동합니다. 터치 및 스와이프 제스처는 모바일 장치에서 작동합니다.

마스터 애드온이 있습니다 80+ 위젯 및 확장 총. 이미지 비교 위젯은 랜딩 페이지와 포트폴리오 프로젝트에서 많이 나오는 위젯입니다.

Elementor에서 Before After 슬라이더를 만드는 방법(단계별)

시작하기 전에, 둘 다 필요합니다 엘리멘터 그리고 마스터 애드온이 설치되고 활성화되었습니다. 둘 다 무료입니다. 로 이동하십시오 플러그인 > 새로 추가을, 각 플러그인 이름을 검색, 설치, 활성화.

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

이미지 비교 위젯은 기본적으로 활성화되어 있습니다. 패널을 계속 기울이기 위해 일부 위젯을 끈 경우,여전히 켜져 있는지 확인하십시오. 로 이동 마스터 애드온 > 애드온 및 확장 wordpress 대시보드에서 이미지 비교가 켜져 있는지 확인하세요. The 이미지 비교 문서 전체 설정 세부정보가 있습니다. 해당 대시보드에 있는 동안 다음과 같이 켤 가치가 있는 다른 위젯을 발견할 수 있습니다 애니메이션 헤드라인 또는 갤러리 슬라이더.

2단계: Elementor에서 페이지를 엽니다

Elementor 로 새 페이지를 만들거나 기존 페이지를 엽니다. 이 튜토리얼에 대한 새 방문 페이지를 만들었지만 비교 슬라이더는 동일한 방식으로 기존 페이지에 삭제됩니다.

3 단계: 이미지 비교 위젯 추가

왼쪽의 Elementor 패널에서 “이미지 비교”를 검색합니다 (옆에 마스터 애드온 아이콘이 표시됩니다). 슬라이더를 표시할 위치마다 위젯을 페이지로 드래그하십시오.

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

위젯을 클릭하면 두 개의 이미지 업로드 필드가 표시됩니다: 하나는 이전 이미지,하나는 이후 이미지,둘 다 업로드하고 미리보기는 중앙에 분배기 핸들로 즉시 업데이트됩니다.

빠른 헤드업: 두 이미지는 동일한 치수여야 합니다니다. 하나는 1200×800 이고 다른 하나는 900×600 이면 레이아웃이 꺼져 보입니다. 업로드하기 전에 동일한 크기로 자르십시오. 이것은 다른 어떤 것보다 사람들을 넘어 뜨립니다.

5단계: 라벨 텍스트를 사용자 정의합니다

기본 레이블에는 “이전”과 “이후”라고 표시되어 있지만 아무 것으로나 변경할 수 있습니다. 제품 판매? “없음”과 “함께”를 사용하십시오. 개조 표시? “1 일”과 “완료”를 시도하십시오. 레이블 필드는 영어가 아닌 문자를 포함한 모든 텍스트를 허용하므로 현지화는 문제가되지 않습니다.

단계 6: 슬라이더 설정 구성

콘텐츠 탭 아래에는 조정할 가치가 있는 몇 가지 설정이 더 있습니다:

• 방향: 수평 (왼쪽/오른쪽) 과 수직 (위/아래) 비교 사이를 전환합니다. 수평은 기본값이며 대부분의 경우에 작동합니다.
• 가시성 비율: 분배기가 시작되는 위치를 제어합니다. 중앙 분할의 경우 50%로 설정하거나 처음에 하나 이상의 이미지를 표시하도록 이동하십시오.
• 오버레이: 이미지의 색상 오버레이를 활성화하거나 비활성화합니다.
• 핸들 유형: 비교를 위해 마우스 드래그 또는 마우스 호버 중 하나를 선택하십시오. 드래그는 방문자가 클릭하고 드래그해야 합니다. 호버는 마우스 움직임에 드러나며,이는 더 유동적으로 느껴지지만 일부 레이아웃에서는 방향 감각을 잃을 수 있습니다.

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

시각적 사용자 정의를 위해 스타일 탭으로 전환합니다. 구분선 색상을 변경하고,비교 컨테이너 주위에 테두리를 추가하고,라벨 타이포그래피 (글꼴군,크기, 무게) 를 조정하고,상자 그림자를 추가하고,간격을 제어할 수 있습니다. 여기에서 몇 분 정도 시간을 투자하면 사이트의 디자인에 맞게 일반적인 모양의 슬라이더가 나오지 않을 정도로 컨트롤이 가능합니다.

게시를 누르고 귀하의 슬라이더 후 전에 가 라이브입니다. 이미지가 준비되었다고 가정하고 처음부터 끝까지 약 2 분 정도.

더 나은 이미지 비교를 위한 팁

위젯은 기술적인 측면을 다루지만,비교 자체는 여러분의 설정만큼만 좋습니다. 클라이언트 사이트에서 이것들을 구축하면서 제가 집어 들었던 몇 가지:

이미지 치수와 일치하세요

이미 언급했지만 가장 자주 보는 실수입니다. 이전 이미지가 1920×1080 이고 이후 이미지가 800×600 인 경우 슬라이더가 강제로 정렬되고 결과가 왜곡된 것처럼 보입니다. 업로드하기 전에 두 이미지를 정확히 동일한 픽셀 크기로 자를 때마다.

구성을 유사하게 유지하십시오

두 사진을 같은 각도,같은 거리,같은 프레임에서 촬영하세요. before 사진이 와이드 샷이고 after 가 클로즈업이라면 대비가 원하는 대로 떨어지지 않습니다. 두 이미지의 유일한 차이가 실제 변화일 때 슬라이더가 가장 잘 보입니다.

변환을 중심에 두십시오

가장 눈에 띄는 변화를 이미지의 중앙 근처에 놓습니다. 칸막이가 시작되는 곳이 바로 그곳이므로 슬라이더와 상호작용할 때 사람들이 가장 먼저 알아차립니다. 변화가 한쪽으로 어긋나면 가시성 비율을 조정하여 주의를 끌 수 있습니다.

오버하지 마세요

페이지 섹션당 하나의 강력한 비교로 충분합니다. 다섯 개 또는 여섯 개의 슬라이더가 서로 겹쳐진 페이지를 본 적이 있는데,그것이 충격을 약화시킵니다. 가장 좋은 전후 쌍을 선택하고 그 중 하나를 특징으로 합니다. 여러 비교가 있는 경우 a 로 정리하십시오 필터링 가능한 이미지 갤러리 또는 이미지 회전목마 대신.

근처에 CTA를 추가하세요

비교가 판매 또는 포트폴리오 페이지에 있으면 바로 아래에 클릭 유도 문구 버튼을 놓습니다. 인상적인 변형을 방금 끌었던 사람은 이미 종사하고 있습니다. “무료 견적 받기”또는 “지금 쇼핑하기”버튼은 바로 전환이 잘되는 경향이 있습니다.

문제 해결: 슬라이더가 작동하지 않을 때

대부분의 설정은 그냥 작동하지만 몇 가지 일이 사람들을 넘어 뜨립니다. 여기에 내가 묻는 것을 수정하는 방법이 있습니다.

• 슬라이더가 안나오네요. 위젯이 10 번 중 9 번 비활성화되었습니다. 로 이동 마스터 애드온, 그 다음 애드온 및 확장및 확인 이미지 비교가 켜져 있습니다. 켜져 있고 여전히 누락된 경우 캐시 (LiteSpeed,WP Rocket 또는 Cloudflare) 를 지우면 페이지의 이전 복사본이 서비스를 중지합니다.
• 핸들이 끌리지 않습니다. 이것은 거의 항상 자바스크립트 충돌이거나 위젯의 스크립트를 결합하거나 연기한 캐싱 플러그인이다. JS 에서 마스터 애드온 스크립트를 제외하고 결합하고 연기하고 캐시를 지운 후 다시 테스트한다.
• 두 이미지가 늘어나거나 잘못 정렬된 것처럼 보입니다. 차원이 다르죠. 동일한 픽셀 차원으로 자르고 다시 업로드하면 이것이 가장 일반적인 원인입니다.
• 데스크톱에서는 작동하지만 모바일에서는 작동하지 않습니다. 부모 컨테이너에 터치 영역을 클리핑하는 오버플로 숨김 스타일이 없고,슬라이프를 잡는 슬라이더 위에 아무 것도 앉아 있지 않은지 확인합니다. 터치는 상자에서 작동하므로 스와이프 실패는 거의 항상 레이아웃 또는 z-index 문제입니다.
• 전후 라벨이 잘립니다. 라벨 텍스트를 줄이거나 스타일 탭 아래의 라벨 글꼴 크기를 줄입니다; 매우 긴 라벨은 작은 화면의 이미지 외부로 쏟아질 수 있습니다.

이들 중 어느 것도 해결되지 않으면 에 세부 정보를 게시하십시오 마스터 애드온 지원 포럼 테마와 활성 플러그인으로, 일반적으로 고정하기 빠른 충돌입니다.

이미지 비교 위젯과 대안

Master Addons가 다른 애드온과 어떻게 비교되는지 간략하게 살펴보세요 워드프레스 이미지 비교 슬라이더 elementor에 대한 옵션:

큰 차이점은 무료 가용성입니다. 전후 슬라이더를 얻기 위해 Pro 애드온 비용을 지불하고 싶지 않다면 Master Addons 및 ElementsKit 이 옵션입니다. Master Addons 도 포함됩니다 텍스트 오버레이 기술 그리고 이미지 호버 효과 무료 계층에서는 업그레이드하지 않고도 더 넓은 이미지 도구 세트를 얻을 수 있습니다.

이미지 비교를 위한 마스터 애드온이 필요한 이유는 무엇입니까?

이미지 비교 위젯은 80+ 요소 및 확장 중 하나입니다 Elementor용 마스터 애드온니다. 많은 사용자가 하나의 위젯에 설치하고 같은 프로젝트에 다른 여러 가지를 사용하게됩니다. 나도 그렇게 시작했다.

개별 위젯 외에도 다음을 얻을 수 있습니다 테마 빌더 사용자 정의 머리글, 바닥글 및 아카이브 페이지의 경우. There's a 팝업 빌더 종료 인텐트와 스크롤 트리거가 있습니다. 그리고 a 템플릿 라이브러리 사전 구축된 섹션을 사용하면 한 번의 클릭으로 가져올 수 있습니다.

V3.0.0 은 이전 버전보다 눈에 띄게 빠르며 플러그인은 적극적으로 유지 관리되며 40,000 + WordPress 사이트에서 실행됩니다. 마스터 애드온 프로 필요한 경우 위젯 빌더, 화이트 라벨 모드 및 프리미엄 지원을 추가합니다.

시작하기

설정 a 이미지 비교 슬라이더 후 전에 elementor 에서는 Master Addon 으로 몇 분이 걸립니다. 코드도 없고 프리미엄 애드온 구매도 없으며 설치할 비교 플러그인도 없습니다. 위젯은 무료이며 모든 Elementor 설정에서 작동하며 사용자 정의는 라벨 텍스트에서 구분선 색상까지 모든 것을 다룹니다.

무료로 마스터 애드온을 다운로드하세요 그리고 다음 프로젝트에서 이미지 비교 위젯을 사용해 보세요. Elementor 빌드 전반에 걸쳐 더 많은 것이 필요하다면,확인해 보세요 프로 계획.

관련 읽기: Elementor 이미지 회전 목마 자습서 | Elementor 필터링 가능한 갤러리 플러그인 | 25 요소 텍스트 오버 이미지 기술

보는 것을 선호합니까? Elementor: 에서 빠른 연습을 해보십시오

자주 묻는 질문