이미지 스크롤 효과를 만드는 방법이 필요합니다. Elementor ? 이 기사에서는 웹 페이지에서 Elementor를 사용하여 이미지 스크롤 효과를 만드는 방법을 안내합니다.
이미지 스크롤 효과를 사용하면 사용자가 이미지 위로 마우스를 가져가면 전체 이미지가 표시됩니다. 웹사이트 템플릿을 판매하는 웹사이트를 방문하면 이미지 스크롤 효과 기능이 있는 템플릿의 전체 미리보기를 볼 수 있습니다.
이러한 기능을 사용하면 작은 공간에서 사용자에게 웹 사이트의 전체 보기를 쉽게 보여줄 수 있습니다. 일반적으로 웹 사이트의 전체 이미지를 표시하려면 웹 페이지에서 많은 공간을 차지합니다. 또한 웹 사이트 디자인에 영향을 미칩니다.
그러나 그림 스크롤 효과를 사용하면 청중의 관심을 쉽게 끌 수 있는 매력적인 방식으로 더 많은 그림을 추가할 수 있습니다.
Elementor에서 이미지 스크롤 효과 만들기
Elementor는 이미지 스크롤 효과를 추가하는 위젯을 제공하지 않습니다. 따라서 사용자 정의 CSS를 사용하여 효과를 추가해야 합니다. 사용자 정의 CSS 기능은 Elementor 찬성. 따라서 다음으로 업그레이드했는지 확인하세요. Elementor 프로.
이제 Elementor 편집기로 페이지를 열고 더하기 아이콘을 클릭하여 섹션을 추가하세요.
이제 섹션의 열을 선택해야 합니다. 여기에서 단일 열 섹션을 선택합니다.
이제 섹션 편집 아이콘을 클릭하고 레이아웃 탭에서 최소 높이를 500으로 설정합니다.
이제 블록 위젯에서 생성된 섹션에 내부 섹션 블록을 추가하고 기본 열을 제거합니다. 열 편집 아이콘을 마우스 오른쪽 버튼으로 클릭하고 삭제 옵션을 클릭하여 기본 열을 삭제합니다.
내부 섹션의 편집 옵션으로 다시 이동하고 레이아웃 탭에서 앞에서 보여준 것처럼 최소 높이를 500으로 설정합니다.
이제 내부 섹션의 스타일 탭으로 전환하고 배경 옵션에서 배경을 클래식으로 설정합니다. 다음으로 배경 이미지를 추가해야 합니다. 이미지 위치 옵션에서 다음과 같이 이미지의 위치를 설정합니다. 상단 중앙. 반복 옵션에서 옵션을 설정합니다. 반복 금지 그리고 같은 크기 엄호.
이제 탭으로 전환 고급 사용자 정의 CSS를 추가합니다. 사용자 지정 CSS 필드에 다음 코드를 추가합니다.
selector{ -webkit-transition: ease-in-out 3s !important; 전환: ease-in-out 3s !important; } selector:hover{ background-position: 중앙 하단 !important; }
트랜지션 값을 변경하여 이미지의 스크롤 효과를 변경할 수 있습니다. 동일한 효과로 여러 이미지를 추가하려면 열을 복제한 다음 배경 이미지를 변경할 수 있습니다.
결론
프로세스를 따르면 페이지 빌더를 사용하여 웹사이트에 이미지 스크롤 효과를 추가할 수 있습니다. Elementor. 다른 기사에서 다음 내용을 확인할 수 있습니다.
- Gutenberg 편집기에서 Elementor 블록을 사용하는 방법은 무엇입니까?
- Elementor vs Divi vs SeedProd – 어느 것이 더 낫습니까?
- 기록을 사용하여 Elementor에서 작업을 실행 취소 및 다시 실행하는 방법
- Elementor 웹 사이트를 매우 빠르게 만드는 방법
- Elementor에서 대화형 원을 만드는 방법
이 기사가 도움이 되길 바랍니다. 이 기사가 마음에 드시면 Facebook 페이지를 좋아하여 연결 상태를 유지하십시오.
