워드프레스에서 이미지 호버 효과를 추가하는 방법(5가지 쉬운 방법)

웹사이트에 호버 효과를 추가하는 것은 사소한 세부 사항처럼 보일 수 있지만 사이트의 외관과 사용성을 향상시킬 수 있습니다. 방문자가 이미지나 버튼 위에 마우스를 올렸을 때 약간 변경되는 것을 보면 해당 요소가 상호 작용 중이라는 것을 알 수 있습니다. 

이 미묘한 움직임은 참여도를 높이고 이탈률을 줄이는데 도움이 됩니다. 호버 효과는 특히 전자 상거래에서 유용합니다. 쇼핑객이 제품을 더 자세히 미리 볼 수 있도록 하여 더 많은 탐색과 결제를 유도할 수 있습니다.

워드프레스에서 이미지 호버 효과를 추가하는 방법은 여러 가지가 있으며, 간단한 페이드부터 눈길을 끄는 플립 애니메이션까지 다양합니다. 아래에서 시작하는 몇 가지 방법을 찾을 수 있습니다!

WordPress에서 이미지 호버 효과를 추가하는 방법

이 기사에서는 사이트에 호버 효과를 추가하는 5 가지 쉬운 방법을 모았습니다. 가장 적합한 방법을 선택하십시오!

방법 1: 플러그인 사용

플러그인을 사용하면 많은 시간과 노력을 절약할 수 있습니다. 특히 동일한 사이트에서 여러 호버 효과를 사용하려는 경우에 유용합니다.

예를 들어 여러 이미지 갤러리가 있는 경우 블로그 썸네일에는 간단한 줌 효과를 적용하고 제품 이미지에는 뒤집기 효과를 적용하는 등 각 갤러리에 다른 애니메이션을 적용할 수 있습니다.

Image Hover Effects Ultimate과 같은 플러그인을 사용하면 이 프로세스가 훨씬 쉬워집니다. 이 플러그인은 모든 사용자에게 무료이며 각 요소에 다양한 효과를 제공합니다. 시작하려면 아래 자습서에 따라 설치하십시오 

플러그인 설치

• WordPress 관리자 영역을 엽니다.
• 사이드바의 플러그인 메뉴에서 플러그인 추가를 클릭합니다.

• 검색창에 Image Hover Effects Ultimate

• 첫 번째 결과를 선택하고 지금 설치를 클릭하여 다운로드를 시작합니다.
• 설치가 완료되면 활성화 버튼을 클릭하여 플러그인 사용을 시작합니다.

Image Hover Effects WordPress 플러그인 사용

• 플러그인이 설치되면 대시보드에 새로운 이미지 호버 메뉴가 표시됩니다.

• 플러그인 설정을 열려면 메뉴를 클릭하십시오. 

• 사용하려는 효과를 선택합니다. 이 자습서에서는 이미지 확대기를 사용합니다.
• 효과를 선택하면 다양한 애니메이션 스타일을 볼 수 있습니다.

마음에 드는 것을 찾으면 스타일 만들기

• 팝업이 나타납니다. 이름 필드에 제목을 입력하고 레이아웃(1st, 2nd 또는 3rd)에서 효과를 선택합니다. 그런 다음 저장을 클릭하여 계속합니다.
• 높이, 너비 및 불투명도와 같은 설정을 사용자 정의할 수 있는 새 페이지로 이동합니다. 가장 잘 보이는 것을 찾기 위해 조정해 보십시오.

• 설정에 만족하면 편집

• 다른 팝업이 나타납니다. 여기에서 확대 위치를 사용자 정의할 수 있습니다. 

• 이미지를 이미지 선택 버튼으로 대체할 수도 있습니다.
• 모든 설정을 마쳤으면 제출을 클릭하여 호버 효과를 저장합니다.

• 효과를 사이트에 적용하려면 쇼트코드를 복사하여 게시물 또는 페이지에 붙여넣으십시오. 

• 이제 간단한 이미지 호버 효과가 사이트의 모든 부분에서 사용할 준비가 되었습니다. 

방법 2: CSS 사용

이 방법을 사용하려면 플러그인을 설치할 필요가 없습니다. 사용자 정의 CSS를 사용하여 테마에 다양한 호버 효과를 추가할 수 있습니다.

우리는 밑줄 호버 효과와 같은 간단한 것으로 시작할 것입니다. 이 효과를 테마에 추가하려면 아래의 쉬운 단계를 따르십시오:

• 호버 효과를 추가하려는 게시물로 이동하십시오.
• + 에서 커버 블록을 클릭하여 이미지를 추가합니다.

• 내용을 표지 블록에 입력하십시오. 여기에 제목과 버튼을 추가합니다.

• 원하는 대로 글꼴과 스타일을 설정합니다.
• 페이지를 초안으로 저장합니다.
• 다음으로, 대시보드에서 외관 메뉴로 이동하십시오.

• 그런 다음 사용자 정의를 클릭하고 추가 CSS로 이동합니다. 다음 코드를 추가합니다:

body { 디스플레이: 플렉스; 정렬: 센터; 아이템-정렬: 센터; 높이: 100vh; 배경: #0f0f0f; 마진: 0; 폰트-패밀리: Arial, 산세리프; } .hover-underline { 폰트-크기: 2rem; 색상: #ffffff; 위치: 상대적; 디스플레이: 인라인-블록; } .hover-underline::after, .hover-underline::before { 내용: ''; 위치: 절대적; 너비: 100%; 높이: 2px; 배경: 선형-그라디언트(오른쪽으로, #ff0000, #00ffff); 아래: -5px; 왼쪽: 0; 변형: scaleX(0); 변형-원점: 오른쪽; 전환: 변형 0.4s ease-out; } .hover-underline::before { 위: -5px; 변형-원점: 왼쪽; } .hover-underline:hover::after, .hover-underline:hover::before { 변형: scaleX(1); }
 

• 게시를 클릭하여 코드를 저장합니다.

• 이제 게시물로 돌아가서 밑줄 효과를 적용할 텍스트를 선택합니다.
• 블록 사이드바에서 고급 섹션을 열고 underline-hover를 추가 CSS 클래스 필드에 입력합니다.

• 페이지를 저장하고 효과를 보려면 미리보기를 하세요. 

선택할 수 있는 다양한 호버 효과가 있으므로 스타일에 가장 적합한 것을 선택하십시오. CSS를 직접 작성하는 방법을 배우거나 WordPress 커뮤니티의 예를 찾을 수 있습니다. 모두 거기에 있습니다!

방법 3: 페이지 빌더 사용 (예: Elementor)

Elementor와 같은 페이지 빌더를 사용하면 많은 창의력을 발휘하여 웹 사이트를 구축 할 수 있습니다. 내장 된 호버 효과가있어 코딩이 필요하지 않고 사이트를 생생하게 만들 수 있습니다.

WordPress에서 이미지 호버 효과를 생성하는 데에도 사용할 수 있습니다. 이 섹션에서는 페이지 빌더 자체 내에서 내장된 호버 효과를 실험해 보겠습니다.

효과 설정:

• 관리 대시보드에서 Elementor 편집기를 엽니다.
• 이미지를 추가합니다.

• 이미지를 선택한 다음 스타일 탭으로 이동합니다.
• Scroll down and click Hover.

• 호버 애니메이션

• 여기서는 Grow 효과를 예로 들어 보았습니다. 전환 지속 시간, 불투명도 및 기타 설정을 사용자 사이트 디자인과 일치하도록 사용자 정의 할 수 있습니다.

• 완료한 후 미리보기를 하지 않고도 즉시 효과를 확인할 수 있습니다. 

방법 4: Flipbox 플러그인 사용

빠른 방법을 찾고 있다면 플립박스 플러그인을 설치할 수 있습니다. 플립박스 효과는 이미지에 마우스를 올렸을 때 앞면 또는 뒷면에 내용이 표시되도록 뒤집는 것입니다.

이 효과는 사진을 정면으로 표시하고 카메라 세부 정보를 뒤에 표시 할 수있는 사진 이미지에 적합합니다. 그러나 가능성은 무궁무진합니다.

• WordPress 대시보드에서 플러그인 메뉴를 클릭합니다. 그런 다음 플러그인 추가를 선택합니다.
• 검색창에 플립박스 - Awesome Flip Boxes Image Overlay를 입력합니다.

• 클릭 지금 설치, 그 다음 활성화

• 플립 박스를 만들려면 Flip Box 메뉴로 이동하여 Create New을 클릭합니다.
• 원하는 애니메이션을 선택합니다. 마음에 드는 애니메이션을 찾으면 스타일 만들기를 클릭합니다.

• 팝업이 나타납니다. 원하는 레이아웃(1st, 2nd 또는 3rd)을 선택하고 제목을 입력합니다. 

• 계속하려면 저장을 클릭합니다.
• 다음으로 사용자 정의 메뉴로 이동하여 효과를 설정하고 콘텐츠를 추가할 수 있습니다.

• 아래로 스크롤하여 미리보기 탭을 찾습니다. 편집을 클릭하여 플립박스의 앞면과 뒷면 콘텐츠를 사용자 정의합니다.

• 완료되면 제출을 클릭하여 저장합니다.

• 이 플립박스를 페이지에 추가하려면 생성된 숏코드를 사이트의 원하는 섹션에 복사하여 붙여넣기만 하면 됩니다. 

• 그게 전부입니다, 완성된 제품입니다! 

방법 5: 구텐베르크 블록 사용

Gutenberg은 기본 WordPress 블록 편집기로서 편집기 내에서 직접 호버 효과를 추가할 수 있습니다.

고급 호버 효과를 제공하지 않을 수 있지만 사용자 정의 CSS를 사용하여 애니메이션을 향상시킬 수 있습니다.

예를 들어, 간단한 페이드 효과를 호버에 적용해 보겠습니다. 단계별 자습서는 다음과 같습니다:

• 호버 효과를 추가하려는 게시물 또는 페이지로 이동합니다.
• + 커버

• 커버단락

• 제목과 간단한 설명을 입력하세요.
• 필요에 따라 글꼴 크기, 불투명도, 정렬 및 색상을 사용자 정의합니다.

• 그런 다음 Cover 블록을 선택하여 사용자 정의 CSS 클래스를 추가하십시오.
• 오른쪽 사이드 바에서 Advanced 섹션을 엽니다.
• 추가 CSS 클래스 필드에 fade-hover-effect를 입력합니다.

• 그 다음, 초안으로 페이지를 저장합니다.

• 플러그인 메뉴로 이동하여 코드 스니펫 플러그인을 선택합니다. 이 예제에서는 WPCode
• 새 CSS 스니펫을 만든 다음 다음 코드를 붙여넣습니다:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• 스니펫을 저장하고 활성화합니다.
• 이제 페이지를 미리 보고 호버 페이드 효과를 실제로 확인하십시오.

fade-hover-effect 클래스를 모든 블록이나 이미지에 추가하여 이 효과를 재사용할 수 있습니다. 하지만 많은 이미지를 다루는 경우 WP Media Folder와 같은 플러그인을 사용하여 미디어 라이브러리를 폴더로 구성하는 것이 좋습니다. 이렇게 하면 관련 콘텐츠를 더 쉽게 찾고 재사용할 수 있습니다.

너무 많은 효과를 사용하면 성능에 영향을 미칩니까?

예, 사이트에서 너무 많은 호버 효과를 사용하면 특히 최적화가 제대로 이루어지지 않은 경우 성능에 영향을 줄 수 있습니다. 일부 호버 효과는 추가 CSS를 필요로 하기 때문입니다. 사이트의 CSS 크기가 커지면 페이지 로딩 시간이 느려질 수 있습니다.

사용자 경험을 향상시키기 위해 필수 호버 효과 만 사용하고 사이트에 과부하가 걸리지 않도록하는 것이 가장 좋습니다.

마무리

워드프레스에서 이미지 호버 효과를 추가하는 방법을 배우면 사용자 상호작용을 향상시키고 사용자의 참여를 유도하여 사이트를 활성화하는 데 도움이 될 수 있습니다.

플러그인, 사용자 정의 CSS 또는 페이지 빌더를 통해 호버 효과를 추가하는 여러 가지 방법이 있으므로 가장 적합한 방법을 자유롭게 선택할 수 있습니다. 다양한 스타일을 실험하여 사이트에 가장 적합한 스타일을 찾으십시오