대화형 드래그 앤 공개 슬라이더
마법은 상호 작용에 있습니다. “이전”과 “이후”이미지를 업로드 한 다음 초기 가시 비율 – 50%에서 시작하는 것과 같이 설정하여 둘 다 동일하게 표시합니다. 사용자는 핸들을 클릭하고 드래그하여 두 이미지 사이를 슬라이드하여 공개를 직접 제어 할 수 있습니다. 방향 (수평 또는 수직) 을 선택하고 상호 작용을 마우스 드래그 또는 터치 스 와이프로 설정합니다. 변화를 보여주는 몰입 형 방법입니다.
- 직관적 제어: 사용자가 핸들을 드래그하여 두 이미지를 대화식으로 비교합니다.
- 유연한 방향: 가로 (왼쪽/오른쪽) 또는 세로 (위/아래) 비교 슬라이더를 만듭니다.
- 조정 가능한 시작점: 결과를 강조하기 위해 초기 분할 (예를 들어, 30% 이전, 70% 이후) 을 설정합니다.
사용자 정의 가능한 오버레이 및 라벨 지우기
시청자가 보고 있는 내용을 이해했는지 확인합니다. 오버레이가 이미지에 바로 “이전” 및 “이후” 레이블을 표시하도록 활성화합니다. 이러한 레이블을 완전히 사용자 정의합니다: 텍스트,타이포그래피, 색상 및 배경을 변경합니다. 오버레이에 그라디언트를 사용할 수도 있습니다. 일반 상태와 호버 상태를 별도로 스타일링하고 오버레이의 패딩,여백 및 테두리를 제어하여 광택이 나는 통합 모양을 만듭니다.
- 사용자 정의 라벨 텍스트: “이전/후”를 “이전/새,”“원본/향상,”등과 같은 것으로 변경합니다.
- 세련된 오버레이 배경: 라벨 배경에 단색, 그라데이션 또는 이미지까지 사용하십시오.
- 명확한 시각적 컨텍스트: 시청자가 어떤 이미지가 어떤 이미지인지 궁금해하지 않도록 하세요.
전문 핸들 및 컨테이너 스타일링
슬라이더는 일반적인 도구가 아닌 디자인의 일부처럼 보여야 합니다. 핸들을 완전히 사용자 지정: 바 색상과 크기를 변경하고 드래그 박스에 아이콘,색상, 배경을 스타일링하고 박스 섀도우와 테두리 반경을 추가합니다. 그런 다음 테두리,패딩, 그림자로 메인 컨테이너 (레이아웃 스타일) 스타일을 지정합니다. 핸들부터 라벨,컨테이너까지 모든 요소 – 브랜드에 맞게 조정할 수 있습니다.
- 드래그 핸들 디자인: 슬라이더 막대와 드래그 가능한 상자를 아이콘, 색상 및 호버 효과로 스타일링합니다.
- 컨테이너 폴란드어: 위젯에 테두리, 그림자 및 간격을 추가하여 레이아웃에 완벽하게 맞도록 합니다.
- 반응형 터치: 핸들은 데스크탑 및 터치스크린 장치 모두에서 쉽게 잡고 끌 수 있도록 설계되었습니다.
이미지 비교를 위해 자주 묻는 질문
이것을 사용하여 두 개 이상의 이미지를 비교할 수 있습니까?
아니요,이 요소는 두 이미지를 직접 나란히 비교하기 위해 특별히 설계되었습니다. 전후 시나리오에 적합합니다. 여러 이미지 또는 상태를 표시하려면 대신 갤러리 슬라이더 또는 이미지 회전목마를 사용하는 것이 좋습니다.
휴대폰에서는 어떻게 작동하나요?
완벽하게! 슬라이더는 완전히 터치 친화적입니다. 사용자는 왼쪽/오른쪽 (또는 위/아래) 을 스와이프하여 핸들을 이동할 수 있습니다. 요소는 반응형이며 Elementor 의 반응형 편집 모드에서 모바일 용 라벨 크기 및 핸들 크기와 같은 설정을 조정할 수 있습니다.
라벨의 텍스트를 변경할 수 있나요?
절대적으로. 기본 “이전” 및 “이후” 텍스트를 콘텐츠 설정에서 직접 원하는 모든 것으로 변경할 수 있습니다. 이를 통해 “낮/밤,”“없음/함께” 또는 “제품 A/제품 B.”와 같은 모든 시나리오에 대한 레이블을 사용자 정의할 수 있습니다
수직 방향의 가장 좋은 용도는 무엇입니까?
수직 슬라이더는 전체 길이의 인물 사진,건물 정면 또는 “상단 대 하단”변형과 같은 높은 이미지를 비교하는 데 적합합니다. 또한 수평 콘텐츠 페이지에서 비교를 돋보이게 할 수있는 독특한 시각적 선택입니다.
두 개의 고해상도 이미지를 사용하면 페이지 속도가 느려지나요?
이미지가 매우 큰 경우 가능합니다. 이미지 해상도 설정을 현명하게 사용하고 (예를 들어 '전체' 대신 “대형”) 업로드하기 전에 항상 웹에 맞게 이미지를 최적화하십시오. 요소 자체는 가볍지만 이미지 파일 크기는 성능의 주요 요소입니다.
대부분 숨겨져 있는 "After" 이미지로 슬라이더를 시작할 수 있나요?
예,Visible Ratio 설정을 사용합니다. 90%로 설정하면 “Before” 이미지가 공간의 90%를 차지하여 사용자가 핸들을 드래그할 때까지 “After” 이미지의 대부분을 숨깁니다. 이는 깜짝 공개를 만드는 데 좋습니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
