게시물 위젯의 항목에 호버 효과를 추가하는 방법을 알고 싶습니다.Elementor?
워드프레스 사용자라면 Elementor 당신의 사이트 웹, 호버 효과 기능에 익숙해야 합니다. 이 기능은 주로 각 위젯 설정에서 찾을 수 있습니다. Elementor.
호버 효과는 요소를 매력적으로 만들 수 있으므로 사용자 환경을 개선하는 효과적인 방법입니다. 웹 사이트.
호버 효과에 대해 말하자면, 이 기사에서는 위젯의 개별 게시물 요소에 후자를 추가하는 방법을 보여줍니다. Elementor Elementor의 사용자 정의 CSS, 특히 확대 호버 효과를 사용하여 게시물을 게시합니다.
이 자습서를 만드는 데는 두 가지 이유가 있습니다.
- 기본적으로 Elementor 게시물 위젯에서 게시물에 호버 효과를 추가할 수 있습니다. 그러나 호버 효과는 매우 기본/표준입니다.
- 기본적으로 Elementor를 사용하면 게시물 위젯에 지퍼 효과를 추가할 수 있습니다(탭 고급 -> 변압기 –> Échelle). 그러나 호버 효과는 모든(개별이 아닌) 게시물 위젯 요소에 영향을 미칩니다.
Elementor의 게시물 위젯에서 개별 게시물에 호버 효과를 추가하는 단계
튜토리얼을 시작하기 전에 이 튜토리얼이 Elementor의 사용자 정의 CSS 기능을 사용함을 알려드립니다. 이 기능은 에서만 사용할 수 있습니다. Elementor 프로; 버전을 업그레이드했는지 확인하십시오.
1단계: 게시물 위젯 추가
Elementor 편집기로 이동하면 모든 것을 처음부터 시작하므로 단일 열이 있는 섹션을 만듭니다.
읽기 : MailChimp를 Elementor와 통합하는 방법
그런 다음 위젯 패널에서 게시물 위젯을 선택한 다음 편집 영역으로 끌어다 놓습니다. 게시물 위젯을 추가한 후에는 기본 설정에 따라 위젯을 편집하고 스타일을 지정할 수 있습니다.
레마르크: 귀하의 사이트에 이미 기사를 게시했는지 확인하세요. 웹 사이트.
2단계: CSS 스니펫 추가
게시물 위젯을 편집하고 스타일을 지정했으면 다음으로 간단한 CSS 스니펫을 추가하여 개별 게시물 내에 호버 효과를 추가합니다. 게시물 위젯 설정에서 탭으로 이동합니다. 고급 -> 맞춤 CSS. 아래 CSS 스니펫을 복사한 다음 입력란에 붙여넣으세요. 맞춤 CSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
위의 코드는 선택기를 사용하여 게시물 위젯에서 개별 게시물 요소를 선택합니다. .élémentor-post CSS 변환을 적용합니다.
사용된 호버 효과가 마음에 들면 그대로 유지하고 원하는 경우 프로젝트를 저장할 수 있습니다. 그러나 전환 속도 및 변형 배율 값을 사용자 지정하려는 경우 CSS 스니펫에서 값을 변경할 수 있습니다.
레마르크: 변형/확대 효과는 웹사이트에서 흔히 사용되는 효과입니다. 호버 효과를 변형하는 다른 방법에 대해 자세히 알고 싶다면 여기를 방문하십시오. 페이지.
발견 : 다음 문서의 모든 Elementor 위젯 선택기
지금 Elementor Pro를 받으세요!!!
결론
이 기사는 사용자 정의 CSS를 사용하여 Elementor의 게시물 위젯에서 개별 게시물 요소에 호버 효과를 추가하는 것이 얼마나 쉬운지 보여줍니다.
이 효과에 사용한 기술은 2D 및 일부 의사 변환 요소를 포함하는(확대)입니다. 웹 사이트에 가장 적합한 호버 효과를 찾을 때까지 모든 스타일의 호버 효과를 사용자 지정하고 사용해보세요.
여기 있습니다! 다음을 위한 최고의 도구를 소개했습니다. 마케팅 Elementor에 대한 이메일을 통해. 사용 방법에 대해 우려 사항이 있는 경우 commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
