호버 스왑, 리본 및 틸트가 포함된 무료 Elementor 이미지 위젯
Advanced Image 는 단일 이미지에 엑스트라를 추가하는 무료 Master Addons 위젯입니다. 호버링 시 두 번째 이미지로 교체하고,모든 코너에 Simple,Corner 또는 Cross 리본을 놓고,옵션 플러스 버튼이 있는 라이트박스에서 이미지를 열고,커서 또는 컬러화된 그림자를 따라가는 틸트 효과를 추가합니다. 이미지가 로드되는 동안 흐릿한 자리 표시자 또는 스피너를 표시할 수 있습니다. 스타일 일반 및 호버 상태는 테두리,배경 및 상자 그림자와 함께 표시됩니다.
Elementor에서 호버 이미지 스왑을 추가하는 방법
당신은 Elementor 와 WordPress.org 의 무료 마스터 애드온 플러그인이 필요합니다.
- 아래에서 고급 이미지가 켜져 있는지 확인하세요 마스터 애드온, 위젯.
- Elementor 편집기에서 다음을 검색하세요 고급 이미지 그리고 페이지로 드래그하세요.
- 필요한 경우 기본 이미지와 이미지 링크를 선택합니다.
- 켜다 호버 이미지를 표시합니다 그리고 두 번째 이미지를 선택하세요. 이상적으로는 동일한 크기입니다.
- 콘텐츠 및 설정 섹션에서 리본,라이트박스, 기울기 또는 색칠된 그림자를 추가합니다. 색칠된 그림자는 호버 이미지와 함께 작동하지 않습니다.
- 스타일 탭에서 일반 상태와 호버 상태를 스타일링합니다.
모든 설정은 에서 다룹니다 고급 이미지 위젯 설정.
이미지 및 스마트 효과를 마우스를 가져가세요
즉각적인 “전후” 비교를 생성하거나 간단한 호버를 통해 공개합니다. 메인 이미지를 업로드한 다음 호버 이미지를 활성화하여 두 번째 사진을 업로드합니다. 방문자가 호버를 누르면 이미지가 원활하게 전환됩니다. 틸트 효과로 세련된 레이어를 추가하면 마우스가 그 위로 이동할 때 이미지가 약간 기울어져 미묘한 3D 느낌을 더할 수 있습니다. 추가 깊이를 위해 Colorized Shadow 를 활성화하여 이미지 뒤에 부드럽고 색상이 지정된 그림자를 배치하여 페이지에서 튀어 나오게 합니다.
- 대화형 비교: 전후의 제품 또는 숙소의 낮/밤 모습을 보여주는 데 적합합니다.
- 매력적인 기울기 효과: 커서 움직임에 반응하는 현대적인 대화형 레이어를 추가합니다.
- 시각적 깊이: Colorized Shadow를 사용하여 추가 디자인 요소 없이 분리 및 초점을 만듭니다.
사용자 정의 가능한 리본 및 라벨
전문적인 리본으로 이미지를 돋보이게 만드세요. 리본 기능을 활성화하여 “NEW DESIGN,”“BESTSELLER,”또는 “SOLD OUT”과 같은 라벨을 추가하세요. 다양한 리본 스타일 (코너 또는 크로스 또는 심플 등) 중에서 선택하고 위치 (상단/하단,왼쪽/오른쪽) 를 설정하세요. 리본의 색상,타이포그래피 및 두께를 완벽하게 사용자 정의하여 이미지와 브랜드를 완벽하게 보완할 수 있습니다.
- 주요 정보 강조: 이미지에서 상태, 프로모션 또는 카테고리를 직접 즉시 전달합니다.
- 유연한 위치 지정: 그림의 중요한 부분을 덮지 않도록 리본을 모서리에 놓습니다.
- 완벽한 스타일 제어: 리본의 배경, 텍스트 색상 및 글꼴을 사이트의 디자인 언어와 일치시킵니다.
링크 및 라이트박스 통합을 추가합니다
추가 이미지 링크 방문자를 제품이나 페이지로 보내거나 켜십시오 라이트박스에서 열기 따라서 클릭하면 이미지 전체 크기가 표시됩니다. The 아이코닉 버튼 옵션은 이미지 위에 더하기 아이콘을 추가합니다. 켜기 이미지 미리 로드 이미지가 로드되는 동안 자리 표시자를 표시하려면: 흐릿한 미리보기, 진행률 상자 또는 파란색, 밝은 또는 어두운 스피너.
- 제품 페이지에 연결하거나 전체 크기 라이트박스를 엽니다.
- 열의 왼쪽, 중앙 또는 오른쪽 정렬입니다.
- 큰 이미지를 위한 로딩 자리 표시자입니다.
상세한 스타일링 및 크기 조절
이미지의 프레젠테이션을 완벽하게 디자인 제어하십시오. 정확한 최대 너비와 최대 높이를 설정하십시오. 테두리 반경을 각 모서리에 개별적으로 적용하여 독특한 모양을 만듭니다. 테두리,배경 및 상자 그림자로 Normal 및 Hover 상태를 별도로 스타일링하면 모든 컨텍스트와 모든 상호 작용 중에 이미지가 완벽하게 보입니다.
- 반응형 크기 조정: 예측할 수 없는 자동 크기 조정에 의존하지 않고 이미지의 치수를 정확하게 제어합니다.
- 사용자 정의 모양: 원형 이미지, 둥근 직사각형 또는 고유한 비대칭 테두리를 만듭니다.
- 상태별 스타일링: 호버에만 테두리나 그림자를 추가하여 이미지가 대화형임을 시각적으로 나타냅니다.
고급 이미지에 대해 자주 묻는 질문
호버 이미지 효과는 모바일 터치스크린과 호환됩니까?
예,하지만 약간 다르게 작동합니다. 터치 장치에서 라이트박스를 활성화하지 않은 경우 첫 번째 탭이 호버 효과(이미지 교환)를 트리거하는 경우가 많습니다. 하지만 라이트박스를 활성화한 경우 라이트박스가 더 우선시되고 탭하면 첫 번째 이미지가 라이트박스에서 열립니다.
고급 이미지 위젯은 무료입니까?
예. 고급 이미지는 호버 이미지,리본, 라이트 박스,틸트, 색칠 된 그림자 및 모든 스타일링 옵션이있는 무료 Master Addons 플러그인의 일부입니다.
Elementor의 기본 Image 위젯과 어떻게 다른가요?
Elementor 의 기본 위젯을 사용하면 이미지,링크, 캡션 및 몇 가지 간단한 스타일링을 추가할 수 있습니다. 고급 이미지 요소는 전문적인 기능 제품군을 추가합니다: 호버 이미지 스왑,리본/라벨,틸트 효과,컬러화된 그림자,별도의 일반/호버 상태 스타일링,보다 세분화된 라이트박스 컨트롤을 통해 더욱 매력적이고 인터랙티브한 이미지 프레젠테이션을 만들 수 있도록 설계되었습니다.
호버 이미지나 다른 효과 없이 리본 기능을 사용할 수 있나요?
절대! 각 기능은 독립적입니다. 리본이 있는 이미지만 가질 수도 있고,틸트 효과가 있는 이미지만 가질 수도 있습니다. 원하는 대로 기능을 혼합하고 일치시킬 수 있습니다. 특정 디자인 목표에 필요한 기능만 활성화하세요.
Preload Image 설정은 어떤 역할을 하나요?
미리 불러오기 이미지는 이미지가 로드되는 동안 위치 지정자를 보여 주므로 방문자는 빈 공간을 볼 수 없습니다. 공백,흐릿한 위치 지정자 이미지,진행 중인 상자 애니메이션 또는 파란색,밝음 또는 어두운색 로딩 스피너를 선택합니다. 큰 이미지에 가장 유용합니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
![Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
