고급 이미지
웹 사이트의 이미지는 단순히 앉아있는 것 이상의 역할을해야합니다. Advanced Image 요소는 스마트하고 상호 작용하는 기능으로 기본 그림을 과급합니다. 눈길을 끄는 “전후”호버 효과를 만들고 세련된 “NEW”또는 “SALE”리본을 추가하고 마우스 이동에 동적 틸트 효과를 적용하고 심지어 다채로운 그림자를 추가합니다. 라이트 박스,링크 및 스타일링의 모든 측면을 완벽하게 제어하면 모든 이미지를 방문자를 안내하고 상호 작용을 촉진하는 매력적인 콘텐츠로 변환 할 수 있습니다. 제품 쇼케이스,포트폴리오 또는 특집 배너에 적합합니다.
이미지 및 스마트 효과를 마우스를 가져가세요
즉각적인 “전후” 비교를 생성하거나 간단한 호버를 통해 공개합니다. 메인 이미지를 업로드한 다음 호버 이미지를 활성화하여 두 번째 사진을 업로드합니다. 방문자가 호버를 누르면 이미지가 원활하게 전환됩니다. 틸트 효과로 세련된 레이어를 추가하면 마우스가 그 위로 이동할 때 이미지가 약간 기울어져 미묘한 3D 느낌을 더할 수 있습니다. 추가 깊이를 위해 Colorized Shadow 를 활성화하여 이미지 뒤에 부드럽고 색상이 지정된 그림자를 배치하여 페이지에서 튀어 나오게 합니다.
- 대화형 비교: 전후의 제품 또는 숙소의 낮/밤 모습을 보여주는 데 적합합니다.
- 매력적인 기울기 효과: 커서 움직임에 반응하는 현대적인 대화형 레이어를 추가합니다.
- 시각적 깊이: Colorized Shadow를 사용하여 추가 디자인 요소 없이 분리 및 초점을 만듭니다.
사용자 정의 가능한 리본 및 라벨
전문적인 리본으로 이미지를 돋보이게 만드세요. 리본 기능을 활성화하여 “NEW DESIGN,”“BESTSELLER,”또는 “SOLD OUT”과 같은 라벨을 추가하세요. 다양한 리본 스타일 (코너 또는 크로스 또는 심플 등) 중에서 선택하고 위치 (상단/하단,왼쪽/오른쪽) 를 설정하세요. 리본의 색상,타이포그래피 및 두께를 완벽하게 사용자 정의하여 이미지와 브랜드를 완벽하게 보완할 수 있습니다.
- 주요 정보 강조: 이미지에서 상태, 프로모션 또는 카테고리를 직접 즉시 전달합니다.
- 유연한 위치 지정: 그림의 중요한 부분을 덮지 않도록 리본을 모서리에 놓습니다.
- 완벽한 스타일 제어: 리본의 배경, 텍스트 색상 및 글꼴을 사이트의 디자인 언어와 일치시킵니다.
링크 및 라이트박스 통합을 추가합니다
모든 이미지는 게이트웨이가 될 수 있습니다. 이미지를 제품 페이지나 가격 계획 같은 URL 에 직접 연결합니다. 또는 시청자가 아름다운 전체 화면 팝업에서 이미지에 집중할 수 있도록 Lightbox 를 활성화합니다. 다른 라이트박스 아이콘 (플러스 버튼과 같은) 중에서 선택하고 정렬을 제어합니다. 성능을 위해,특히 호버 효과에 대해 빠른 로딩을 보장하기 위해 이미지 사전 로드 옵션을 사용합니다.
- 직접 통화-행동: 이미지를 중요한 페이지에 연결하여 시각적 관심을 직접 트래픽으로 전환합니다.
- 향상된 갤러리 경험: 사용자가 우아한 라이트박스로 이미지를 자세히 볼 수 있습니다.
- 최적화된 성능: 첫 번째 상호 작용에서 지연 또는 “플래시”를 방지하기 위해 호버 이미지를 미리 로드합니다.
상세한 스타일링 및 크기 조절
이미지의 프레젠테이션을 완벽하게 디자인 제어하십시오. 정확한 최대 너비와 최대 높이를 설정하십시오. 테두리 반경을 각 모서리에 개별적으로 적용하여 독특한 모양을 만듭니다. 테두리,배경 및 상자 그림자로 Normal 및 Hover 상태를 별도로 스타일링하면 모든 컨텍스트와 모든 상호 작용 중에 이미지가 완벽하게 보입니다.
- 반응형 크기 조정: 예측할 수 없는 자동 크기 조정에 의존하지 않고 이미지의 치수를 정확하게 제어합니다.
- 사용자 정의 모양: 원형 이미지, 둥근 직사각형 또는 고유한 비대칭 테두리를 만듭니다.
- 상태별 스타일링: 호버에만 테두리나 그림자를 추가하여 이미지가 대화형임을 시각적으로 나타냅니다.
고급 이미지에 대해 자주 묻는 질문
호버 이미지 효과는 모바일 터치스크린과 호환됩니까?
예,하지만 약간 다르게 작동합니다. 터치 장치에서 라이트박스를 활성화하지 않은 경우 첫 번째 탭이 호버 효과(이미지 교환)를 트리거하는 경우가 많습니다. 하지만 라이트박스를 활성화한 경우 라이트박스가 더 우선시되고 탭하면 첫 번째 이미지가 라이트박스에서 열립니다.
기울기 효과와 색칠 그림자를 사용하면 페이지 속도가 느려지나요?
이러한 효과는 일반적으로 가벼운 CSS 를 사용합니다. 그러나 단일 페이지의 매우 많은 수의 이미지 (밀집된 그리드 및 100+ 이미지와 같은) 에 사용하면 사용자 장치의 부하가 더 무거워질 수 있습니다. 최상의 성능과 영향을 위해 주요 이미지에 선택적으로 사용하십시오.
Elementor의 기본 Image 위젯과 어떻게 다른가요?
Elementor 의 기본 위젯을 사용하면 이미지,링크, 캡션 및 몇 가지 간단한 스타일링을 추가할 수 있습니다. 고급 이미지 요소는 전문적인 기능 제품군을 추가합니다: 호버 이미지 스왑,리본/라벨,틸트 효과,컬러화된 그림자,별도의 일반/호버 상태 스타일링,보다 세분화된 라이트박스 컨트롤을 통해 더욱 매력적이고 인터랙티브한 이미지 프레젠테이션을 만들 수 있도록 설계되었습니다.
호버 이미지나 다른 효과 없이 리본 기능을 사용할 수 있나요?
절대! 각 기능은 독립적입니다. 리본이 있는 이미지만 가질 수도 있고,틸트 효과가 있는 이미지만 가질 수도 있습니다. 원하는 대로 기능을 혼합하고 일치시킬 수 있습니다. 특정 디자인 목표에 필요한 기능만 활성화하세요.
사전 로드 이미지' 설정의 가장 좋은 용도는 무엇입니까?
이미지 호버링 기능을 사용할 때 이미지 사전 로드 ('켜기'로 설정) 를 활성화합니다. 이렇게 하면 페이지가 로드될 때 숨겨진 이미지라도 브라우저가 두 번째 이미지를 로드하게 됩니다. 이렇게 하면 사용자가 이미지 위로 처음 마우스를 올릴 때 눈에 띄는 지연이나 빈 플래시가 발생하지 않아 원활한 사용자 환경이 보장됩니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
