우리는 모두 Elementor Website Builder로 무한한 사용자 정의가 가능하다는 것을 알고 있습니다. 이러한 사용자 지정을 통해 사용자 경험을 향상하고 창작물을 만들 수 있습니다.
호버 시 로고 교체 효과는 사용자가 웹사이트에 배치된 로고에 커서를 놓으면 색상, 모양 또는 윤곽선과 같은 세부 정보가 자동으로 변경됩니다. 이 튜토리얼에서는 Elementor를 사용 하여 호버 효과에 로고 스왑을 만드는 방법을 이해할 것입니다.
Elementor를 사용하여 호버 효과에 로고 스왑을 만드는 방법
효과가 무엇인지 이미 알고 있고 만들고 싶은 것에 대한 아이디어가 있습니다. 앞으로 나아가서 방법을 살펴보겠습니다.
시작하려면 위젯의 내부 섹션 을 추가하십시오.
놀라운 웹사이트 만들기
최고의 무료 페이지 빌더 Elementor와 함께
지금 시작
다음으로 처음 생성한 섹션에 열 을 추가해야 합니다. 이 자습서에서는 2열 구조를 사용 합니다.
그런 다음 이미지 위젯 을 생성한 열로 끌어다 놓습니다.
효과가 작동하려면 두 장의 사진이 필요합니다. 하나는 정상적으로 표시되고 다른 하나는 사용자가 커서를 놓을 때 표시됩니다.
동일한 로고의 두 가지 변형을 사용하거나 완전히 다른 두 개의 그림을 사용할 수 있으며 가능성은 무한합니다.
이미지를 선택한 후 사용자 정의 CSS 필드에 다음 CSS 코드를 붙여넣으면 호버 효과가 작동할 때 로고 교체가 가능합니다.
selector img:hover{
content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
opacity: .50;
transition-duration: 3s;
}그리고 완료! 페이지를 게시하여 웹사이트에서 효과가 어떻게 보이는지 미리 보고 확인하십시오. 원하는 경우 다시 돌아와서 변경하십시오.
이것이 Elementor로 로고 교체 시 호버 효과를 만드는 방법입니다. 우리의 게시물에 대한 최신 정보를 얻으려면 Facebook 및 Twitter 에 가입하십시오.
