DIVI로 마우스 오버 시 이미지를 변경하는 방법을 알고 싶습니까?
호버 효과는 사용자가 웹 사이트. 그만큼 Divi 테마 빌더 방문하는 모든 사람에게 매력적인 상호 작용을 만드는 데 사용할 수 있는 매우 간단한 호버 효과 세트를 제공합니다. 웹 사이트.
Divi의 가장 눈에 띄고 유용한 효과 중 하나는 사용자가 커서를 이미지 위로 가져가면 이미지를 수정할 수 있다는 것입니다.
이 튜토리얼에서는 마우스 커서를 이미지 위로 가져갔을 때 아름다운 이미지 변경을 달성하는 방법을 보여줍니다.
측량
시작하기 전에 달성하고자 하는 결과를 살펴보겠습니다.
Divi 테마 빌더로 페이지 만들기
새 페이지를 추가하여 시작하십시오. 사이트 웹 WordPress 대시보드에서.
그런 다음 페이지에 제목을 지정하고 " Divi Builder 사용 ".
그런 다음 " 레이아웃 선택«
"를 찾아서 선택하십시오. 개 미용 홈 페이지 »
레이아웃을 선택하고 " 레이아웃 선택 »
이미지 찾기
Divi Builder에서 효과를 추가할 이미지를 찾으면 됩니다.
에 사용할 수 있으니 참고하세요. 이미지를 포함하는 모든 요소
모듈 설정 열기
결정했으면 톱니바퀴 아이콘을 클릭하고 모듈 매개변수 이미지를 포함합니다.
이 레이아웃 팩의 경우 호버 효과를 적용할 이미지는 첫 번째 행의 가장 오른쪽 열의 배경입니다.
열 설정을 입력합니다.
설정에서 이미지 찾기
일단 설정에 들어가면 기둥 맞습니다. 탭을 선택해야 합니다. 내용. 옵션을 찾을 때까지 아래로 스크롤하십시오. 맨 아래.
아래의 배경, Divi는 단색, 그라디언트, 이미지 또는 .mp4 형식의 비디오를 사용할 수 있는 옵션을 제공합니다.
호버 효과는 어느 것에나 적용할 수 있지만 탭에서 작업합니다. 이미지, 왼쪽에서 세 번째.
호버 효과 활성화
단어 위로 마우스를 이동 배경 (가장 작은 자막) 및 검색화살표 아이콘 표시되는 옵션에서 다음을 위한 토글입니다. 디비 호버 효과.
이 옵션이 활성화되면 두 개의 새 탭이 나타납니다. 왼쪽 탭은 상호 작용 없이 표시되는 기본 이미지입니다.
새 이미지 선택
이미지 위로 커서를 아래로 이동하면 다음과 같은 일반 옵션이 표시됩니다. 이미지를 대체하기 위해 ou 이미지를 삭제하려면.
휴지통 아이콘을 선택하면 호버 효과가 활성화되지만 이미지가 사라집니다.
우리가 원하기 때문에 교환기 마우스를 가져가면 이미지 자체를 클릭, 또는톱니 바퀴 아이콘 .
호버 이미지 선택(교체)
그러면 미디어 라이브러리가 열립니다. 그런 다음 사용자가 원본 위로 마우스를 가져갈 때 표시할 새 이미지를 선택할 수 있습니다. 클릭 '이미지 업로드'
원본 이미지의 오류 확인
원본 이미지도 동일하게 유지되도록 항상 권장합니다. 확인하려면 다음을 클릭하십시오. 왼쪽 탭 원본 이미지가 제자리에 있는지 확인하십시오.
모든 것이 정상이면 설정을 저장할 수 있습니다.
- 열 설정 저장
- 다시 눌러 녹색 진드기 회선 설정을 저장합니다.
일반 일반 설정을 저장하고 페이지를 게시합니다.
결과
이 튜토리얼의 모든 단계를 따랐다면 이것을 얻을 수 있을 것입니다.
지금 DIVI를 다운로드하세요!!!
결론
Divi의 테마 빌더에는 누구나 사용할 수 있는 강력한 도구가 가득합니다. 웹 사이트 만들기 흥미롭고 상호 작용합니다. 이 가이드에서 보여드린 호버 이미지 변경은 많은 도구 중 하나일 뿐입니다.
웹사이트 제작 프로젝트를 완료하기 위해 더 많은 요소가 필요한 경우 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것에 대해 이야기하기 위해. 하지만 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
