기본 Elementor 이미지 위젯은 그림을 보여주고 어딘가에 연결합니다. 무료 고급 이미지 위젯 에서 Elementor용 마스터 애드온 더 많은 일을합니다: 호버에서 두 번째 이미지로 교체하고, 상단에 코너 리본을 떨어 뜨리고, 라이트 박스에서 열리고, 3D 틸트 또는 색상화 된 그림자를 추가하며 모두 CSS를 건드리지 않습니다.
Elementor 패널에서 기본 이미지,선택적인 호버 이미지,리본 및 몇 가지 효과를 설정합니다. 따라서 제품 샷,포트폴리오 축소판 또는 레이블이나 약간의 동작이 필요한 모든 이미지에 잘 맞습니다. 이 가이드는 모든 탭과 설정을 거칩니다.
먼저 보는 것을 선호하시나요? 이 짧은 튜토리얼은 고급 이미지 위젯을 끝까지 살펴봅니다:
고급 이미지 위젯이 수행하는 작업 #
그것의 핵심에서 그것은 하나의 이미지를 보여 주지만,그 위에 여분의 레이어. 호버 이미지는 커서가 그 위에있을 때 스왑 인,리본은 “NEW,”와 같은 레이블을 호출하고 설정 탭은 라이트 박스,틸트 효과,색칠 된 그림자를 추가합니다. 모든 것이 패널에서 구성되므로 동일한 이미지가 일반 이미지보다 훨씬 더 많은 것을 할 수 있습니다.
위젯에는 4 개의 탭이 있습니다: 이미지와 리본의 콘텐츠,라이트 박스 및 틸트와 같은 동작에 대한 설정,크기 및 색상에 대한 스타일,일반적인 Elementor 간격 및 가시성 옵션에 대한 고급.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 표시할 이미지 1개와 호버 스왑을 원하는 경우 두 번째 이미지입니다.
고급 이미지 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 고급 이미지또는 마스터 애드온 섹션으로 스크롤합니다. 페이지로 드래그하십시오. 자리 표시자로 시작하므로 첫 번째 단계는 이미지를 선택하는 것입니다.
이미지를 설정합니다 #
에서 콘텐츠 탭, the 이미지 섹션에는 기본 사항이 있습니다. 이미지 상자를 클릭하여 미디어 라이브러리에서 하나를 선택하고 다음을 설정합니다 이미지 해상도 WordPress가 서비스를 제공하고 추가해야 합니다 이미지 링크 그림이 어딘가로 연결되어야 하는 경우.
호버 이미지 추가 #
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 이미지를 호버링합니다 섹션은 위젯이 이름을 얻는 곳입니다. 켜기 호버 이미지를 표시합니다 그리고 두 번째 이미지를 선택합니다. 라이브 페이지에서 위젯은 첫 번째 이미지를 보여주고 누군가가 마우스를 올리면 두 번째 이미지로 크로스 페이드되어 제품 앞면과 뒷면 또는 전후 촬영에 편리합니다.
리본을 추가 #
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 리본 섹션은 이미지 위에 코너 배너를 추가합니다. 켜기 디스플레이 리본을, 텍스트를 설정하고, 어떻게 보이는지 선택합니다.
- 텍스트: NEW 또는 SALE과 같은 라벨입니다.
- 리본 스타일: 단순, 코너 또는 크로스.
- 리본 위치: 오른쪽 상단이나 왼쪽 하단 등 모든 모서리에 배치하세요.
- 리본 두께 및 너비: 텍스트에 맞게 밴드 크기를 조정합니다.
설정: 라이트박스, 틸트, 섀도우 #
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 설정 탭은 동작이 사는 곳입니다. 이것은 일반 이미지에서 위젯을 구분하는 추가 기능입니다.
- 라이트박스에서 열기: 이미지를 클릭하여 팝업에서 전체 크기로 엽니다. 켭니다. 이미지 위에 상징적인 버튼 옵션 (더하기 아이콘과 같은) 을 추가합니다.
- 정렬: 블록 내에서 왼쪽, 중앙 또는 오른쪽입니다.
- 이미지 미리 로드: 흐린 미리 보기, 진행 상자 애니메이션 또는 로딩 스피너와 같이 이미지가 로드되는 동안 자리 표시자를 표시합니다.
- 기울기 효과: 약간의 동작을 위해 커서를 따라가는 3D 기울기를 추가합니다.
- 컬러화된 그림자: 이미지 자체 색상에서 색조된 그림자를 떨어뜨립니다. 호버 이미지가 활성화된 동안에는 사용할 수 없습니다.
이미지와 리본을 스타일링하세요 #
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 스타일 탭은 크기 조정과 색상을 처리합니다. The 이미지 섹션은 그림 자체의 모양을 설정합니다.
- 최대 너비 및 최대 높이: 이미지 크기를 캡핑합니다.
- 테두리 반경: 모서리를 둥글게.
- 일반 및 호버 상태: 휴식과 호버링을 위해 상자 그림자, 테두리 및 배경을 별도로 설정합니다.
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 리본 스타일 섹션은 배너의 모양을 제어합니다: 배경색, 텍스트 색상, 타이포그래피, 그림자, 위치 오프셋 및 테두리 반경.
페이지의 결과 #
게시 또는 미리보기하면 리본이 제자리에 있고 효과가 실시간으로 이미지가 렌더링됩니다: 켠 내용에 따라 이미지를 바꾸려면 마우스를 가져가거나, 기울기를 보려면 마우스를 올리거나, 라이트박스를 열려면 클릭하세요.
일반적인 사용 사례 #
- 제품 샷 호버 스왑을 사용하여 앞뒤로 또는 교대로 각도를 바꿉니다.
- 포트폴리오 썸네일 라이트박스에서 전체 크기를 엽니다.
- 프로모션 이미지 구석에 NEW 또는 SALE 리본이 있습니다.
- 특징 그래픽 움직임을 위한 미묘한 기울기로.
- 영웅 이미지 깊이를 위해 색칠된 그림자를 사용합니다.
고급 이미지 위젯 작업 팁 #
- 호버 스왑에 일치하는 치수를 사용합니다. 같은 크기의 이미지는 크로스 페이드가 점프하지 않도록 해줍니다.
- 올바른 이미지 해상도를 선택하세요. 작은 슬롯에 전체 크기 파일을 제공하면 페이지 속도가 느려집니다; 보통 중간 크기나 큰 크기로 충분합니다.
- 리본 텍스트를 짧게 유지하십시오. 한마디가 코너밴드에 깔끔하게 맞습니다.
- 호버 스왑을 사용할 때 색칠된 그림자 건너뛰기. 둘이 함께 실행되지 않으므로 이미지당 하나를 선택하십시오.
- 기울기에 쉽게 가십시오. 약간의 움직임이 눈을 끌며; 너무 많은 것은 기미처럼 느껴집니다.
자주 묻는 질문 #
마스터 애드온의 고급 이미지 위젯은 무엇입니까?
엑스트라가 내장된 Elementor 이미지 위젯입니다: 호버 이미지 스왑,코너 리본,라이트박스, 3D 틸트 효과,색칠된 그림자. Elementor 패널에서 모두 설정하므로 단일 이미지가 기본 이미지 위젯이 허용하는 것보다 훨씬 더 많은 작업을 수행할 수 있습니다.
호버링 시 이미지를 어떻게 변경하나요?
콘텐츠 탭을 열고 이미지 호버 섹션을 확장한 다음 이미지 호버 표시를 켭니다. 그런 다음 두 번째 이미지를 선택합니다. 라이브 페이지에서 위젯은 첫 번째 이미지를 표시하고 방문자가 그 위에 마우스를 올리면 두 번째 이미지로 크로스페이드됩니다.
이미지에 리본이나 배지를 추가할 수 있나요?
예. 내용 탭에서 리본 섹션을 열고 디스플레이 리본을 켭니다. 텍스트를 설정하고 단순,코너 또는 크로스 스타일을 선택하고 모서리를 선택합니다. 그런 다음 스타일 탭을 사용하여 색상,타이포그래피 및 위치를 설정할 수 있습니다.
기울기 효과는 무엇입니까?
설정 탭에 있는 기울기 효과는 이미지 위로 커서가 움직일 때 커서를 따라가는 3D 기울기를 추가합니다. 평평한 그림에 깊이감과 움직임감을 줍니다. 산만하지 않고 미묘하게 유지되도록 아껴서 사용하십시오.
고급 이미지 위젯은 라이트박스를 지원합니까?
예. 설정 탭에서 라이트박스에서 열기를 켜면 방문자가 이미지를 클릭하여 팝업으로 전체 크기를 볼 수 있습니다. 플러스 아이콘과 같은 상징적인 버튼을 추가하여 이미지 위에 나타나 클릭 가능하다는 신호를 보낼 수도 있습니다.
감싸는 #
고급 이미지 위젯은 한 장의 사진을 찍고 일반적으로 사용자 정의 코드를 취하는 터치를 추가합니다: 호버 스왑,리본, 라이트박스,틸트, 색칠된 그림자. 이미지를 설정하고 원하는 효과를 켜고 패널에서 결과를 스타일링합니다. 더 많은 이미지 도구는 을 참조하십시오 이미지 호버 효과 그리고 이미지 회전목마 위젯, 전체 찾아보기 마스터 애드온 위젯 및 확장, 그리고 보세요 고급 이미지 위젯 페이지 데모용.
