그만큼 이미지 비교 widget lets you showcase transformation effects with an interactive, side-by-side slider. With ElementsKit, you can easily customize the layout and handle styles to create a seamless visual experience.
Image Comparison is a feature that lets you display two images side by side with a draggable slider, so users can easily compare differences (like before vs after).
Quick Steps:
✅ Insert the Image Comparison widget into your page
✅ Add both images (before and after)
✅ Choose the comparison layout (horizontal or vertical)
✅ Customize labels, slider handle, and styling as needed
✅ Preview and publish the page
예: You can show a before-and-after photo of photo editing, skin retouching, or any of your products, users drag the slider to see the changes clearly.
Takeaway: Image Comparison helps present visual differences in a simple, interactive way, making your content more engaging and easy to understand.
Using ElementsKit Image Comparison #
From your WordPress dashboard, open the page or post where you want to use the ElementsKit Image Comparison.
Get ElementsKit Image Comparison Widget #
Search ElementsKit Image Comparison widget and drag and drop it.
Customize the Content Part #
This part allows you to manage individual 품목 (Before and After images) and configure the 설정 for the slider’s layout and behavior.
품목 #
- Container Style: 수평 또는 수직
- 업로드 전 이미지
- 추가 또는 편집 이미지 라벨 이전
- 이미지 업로드 후
- 추가 또는 편집 이미지 레이블 이후
설정 #
- Set Offset: Starting position of the slider handle.
- Enable to Remove Overlay: Hides the “Before/After” labels.
- Enable Moving on Hover: Slider follows your mouse cursor.
- Enable to Move by Click: Slider snaps to where you click.
Customize the Style Part #
It lets you customize the visual appearance of the widget.
일반적인 #
- Border Type (None/Default): Allows you to adjust only the 테두리 반경 그리고 심 for a clean look.
- Border Type (Solid, Dotted, Dashed, etc.): Unlocks full control over 테두리 너비, 색상, 반지름, 심, 그리고 박스 섀도우 to fully style the frame.
Handle #
- Control Width: Adjusts the horizontal size of the handle.
- 키: Sets the vertical size of the handle.
- 배경 유형: Choose between a solid color or a gradient for the handle’s base.
- 색상: Sets the specific background color of the handle.
- 영상: Allows you to upload a custom graphic or icon for the handle.
- Arrow Color: Changes the color of the directional arrows on the slider.
- 상자 그림자: Adds a shadow effect around the handle for a 3D look.
- 여유: Adjusts the spacing around the outer edges of the handle.
- 국경 반경: Rounds the corners of the handle to make it circular or curved.
- Handle Divider: Enables or disables the vertical line that splits the two images.
- Divider Thickness: Controls the width of the vertical divider line.
- Divider Color: Sets the specific color for the vertical divider line.
