WordPress 웹사이트에서 이미지 핫스팟을 만들고 사용하는 방법

이미지와 비디오는 항상 웹사이트를 더욱 매력적으로 만듭니다. 그러나 WordPress 웹사이트의 핫스팟 이미지는 일반 이미지 사용에 대한 이전 기록을 모두 깨뜨릴 수 있습니다. 핫스팟 이미지에는 사이트 방문자에게 더 많은 정보를 제공하는 클릭 가능한 영역이 포함되어 있습니다. 이미지 핫스팟을 만들기 전에는 그렇게 쉬운 일이 아니었습니다. 

운 좋게도 이제 멋진 WordPress 애드온의 도움으로 이미지 핫스팟을 만드는 것이 매우 쉬워졌습니다. 덕분에 가장 쉬워졌습니다. ElementsKit 애드온.

ElementsKit 올인원 애드온입니다. 엘레멘터 제공하는 85+ 위젯, 500+ 블록, 25+ 기성 홈페이지 등. 또한 무료 위젯, 프로 위젯, 고급 모듈을 제공하여 사이트 사용자 정의를 상상할 수 없는 수준으로 끌어올립니다. 몇 분 안에 대화형 핫스팟 이미지를 만들 수도 있습니다.

이 기사에서는 ElementsKit을 사용하여 핫스팟 이미지를 얼마나 쉽게 생성할 수 있는지 공개합니다. 또한 대화형 이미지 맵을 만드는 방법도 배우게 됩니다. 이 글을 읽고 나면 이미지 맵뿐만 아니라 어떤 핫스팟 이미지라도 만들 수 있습니다.

WordPress 웹사이트의 대화형 이미지 핫스팟은 무엇입니까?

핫스팟 이미지는 대화형 이미지 이미지에 핫스팟 아이콘이 포함되어 있습니다. 이러한 핫스팟 아이콘에는 텍스트, 이미지, 링크 등이 포함된 팝업 창이나 도구 설명이 포함되어 있습니다. 

대화형 이미지를 만들면 다음을 제공하는 데 도움이 됩니다. 더 많은 정보 클릭 가능한 영역을 통해 WordPress 핫스팟 이미지에 핫스팟 아이콘을 추가하면 방문자의 관심을 끌 수 있습니다. 

게다가, 귀하의 사용자나 방문자는 눈길을 끌고 유익한 사진 때문에 귀하의 사이트에서 더 많은 시간을 보내고 싶어할 것입니다. 결과적으로 귀하의 업무 능력이 눈에 띄게 향상되는 것을 보실 수 있습니다. 반송률 그리고 전환율 WordPress 핫스팟 이미지 때문입니다. 

대화형 핫스팟 이미지를 만들어야 하는 이유는 무엇입니까?

WordPress 사이트의 대화형 핫스팟 이미지는 방문자의 관심을 끌고 반송률. 이러한 이미지도 비디오보다 더 효과적일 수 있습니다. 또한 고성능 핫스팟 이미지의 많은 예도 찾을 수 있습니다.

하지만 이러한 이미지를 통해 얻을 수 있는 이점이 무엇인지 정확히 알고 있어야 합니다. 이러한 이미지를 만드는 데 더 많은 노력을 기울여야 하는 이유는 무엇입니까? 

이러한 질문을 갖고 계시다면 확실히 혼자가 아닙니다. Elementor 핫스팟 이미지를 생성하는 동안에도 이러한 질문에 직면했습니다. 이미지 핫스팟을 만드는 데 더 많은 노력을 기울여야 하는 이유에 대한 질문에 대한 답변은 다음과 같습니다.

1. 핫스팟 대화형 이미지는 다음을 수행하는 데 도움이 됩니다. 상호작용하다 더 많은 사용자와 함께하세요. 웹사이트에서 이미지를 사용하는 것은 항상 유익합니다. 그러나 핫스팟 이미지를 사용하면 더 많아집니다.

2. 제공하는데 도움이 될 것입니다. 더 많은 정보 방문자에게. 핫스팟 이미지에는 도구 설명이나 창이 포함된 클릭 가능한 영역이 포함되어 있습니다. 이 창에는 추가 정보를 제공하는 사진, 텍스트, 링크 등이 포함되어 있습니다.

3. 핫스팟 이미지는 모바일 반응형. 

2021년에는 스타티스타 한 연구에 따르면 "47% 이상의 웹사이트 방문자가 모바일 장치를 사용하여 미국 사이트를 방문합니다"라고 합니다. 

그렇기 때문에 모바일 반응형 이미지의 필요성을 무시할 수 없습니다.

4. 사용자와 더 많이 상호 작용할 수 있으면 WordPress 사이트에 사용자를 보유할 수도 있습니다. 그 결과, 반송률 귀하의 사이트도 감소할 것입니다.
5. 대화형 이미지를 만들기 위해 핫스팟을 추가하면 사용자 경험이 향상되고 전환율 귀하의 사이트. 핫스팟 이미지를 추가하면 눈에 띄게 개선되는 것을 볼 수 있습니다.

이제 이러한 이점을 모두 알고 나면 질문이 생길 수 있습니다. 

핫스팟 이미지를 만드는 방법은 무엇입니까? 사이트에 대한 이미지 핫스팟을 만드는 가장 쉬운 방법은 무엇입니까? 

오른쪽?

해결책을 얻으려면 계속 읽으세요. 

ElementsKit을 사용하여 WordPress 웹사이트에 대화형 핫스팟 이미지 만들기

웹사이트에 핫스팟 이미지를 추가하면 이전보다 방문자의 참여를 높이는 데 도움이 됩니다. 게다가 귀하의 고객은 귀하의 웹사이트 콘텐츠에 참여하는 것을 결코 지루해하지 않습니다. 

다행히 이제 ElementsKit을 사용하면 많은 시간을 낭비하지 않고 WordPress 웹사이트용 대화형 이미지를 만들 수 있습니다. 이미지 핫스팟 외에도 다음을 만들 수 있습니다. Elementor 오프 캔버스 메뉴, WordPress의 이미지 스왑 효과, 코딩 없이 등등.

ElementsKit에 대해 더 자세히 알고 싶으십니까?

그럼 읽어보세요 ElementsKit: Elementor를 위한 최고의 추가 기능 기사.

ElementsKit 위젯을 사용하면 간단한 8단계로 대화형 이미지 핫스팟을 만들 수 있습니다. 어떻게 하면 이 일을 할 수 있을지 기대되시나요? 

뛰어 들어 봅시다.

1단계: 대화형 이미지를 만들기 위해 Elementor로 새 페이지를 편집합니다.

먼저 ElementsKit을 설치하고 활성화해야 합니다. 그런 다음 WordPress 대시보드로 이동하여 페이지>> 새로 추가를 방문하여 대화형 이미지 핫스팟을 만드세요.

그런 다음 Elementor 버튼으로 편집을 클릭하여 새 핫스팟 이미지를 만듭니다.

2단계: 핫스팟 위젯을 검색하고 선택합니다.

이 단계에서는 위젯 검색창에서 핫스팟 위젯을 검색해야 합니다.

이제 핫스팟 위젯을 드래그하여 그림과 같이 새로운 섹션에 추가하세요.

3단계: 이미지 핫스팟의 콘텐츠를 편집합니다.

핫스팟 위젯을 추가한 후에는 이제 위젯의 콘텐츠를 편집할 차례입니다. 이를 위해서는 WordPress 미디어 라이브러리나 컴퓨터에서 스타일과 배경 이미지를 선택하세요. 여기서는 Google 지도 이미지를 사용하고 있습니다. 이제 업로드하세요.

ElementsKit 핫스팟 위젯을 사용하여 다음 항목을 편집할 수도 있습니다.

• 글로우 표시: 포인터 주위에 나타나는 광선을 표시하거나 숨길 수 있습니다.
• 클릭하거나 마우스를 가져가세요. 이 옵션은 클릭 또는 마우스 오버 시 도구 설명을 표시할지 결정하는 데 도움이 됩니다. 마우스를 올리면 도구 설명이 표시되거나 사용자가 핫스팟을 클릭할 때 클릭하면 표시됩니다.
• 활성 여부: 이 옵션을 사용하면 모든 도구 설명을 표시하거나 숨길 수도 있습니다.

위 내용을 편집한 후 핫스팟 이미지 맵에 대한 도구 설명을 추가하세요. 이를 수행하려면 그림에 표시된 상자를 클릭하십시오.

이제 도구 설명의 제목과 설명을 추가해야 합니다. 이를 수행하려면 도구 설명의 제목과 설명을 삽입하세요. 

그런 다음 툴팁에 적합한 이미지를 추가하세요. 어떤 이미지든 가능합니다. 

이제 툴팁 위치를 조정해야 합니다. 다음 옵션을 사용하여 포인터를 왼쪽에서 오른쪽으로 또는 위에서 아래로 이동할 수 있습니다. 포인터를 설정합니다. 항목 추가 버튼을 클릭하여 더 많은 핫스팟을 추가할 수도 있습니다.

4단계: 이미지 핫스팟 WordPress의 콘텐츠 스타일을 사용자 정의합니다.

이 단계에서는 핫스팟 콘텐츠의 스타일을 편집해야 합니다. 적절한 배경색과 이미지를 선택하여 Elementor 핫스팟 이미지의 기본 콘텐츠 스타일을 변경하세요. 이제 기본 콘텐츠의 패딩, 너비 및 정렬을 설정하세요.

5단계: 포인터 스타일을 사용자 정의하여 대화형 이미지를 만듭니다.

이 단계에서는 포인터를 사용자 정의해야 합니다. 여기에서 다음 영역을 사용자 정의할 수 있습니다.

• 배경색: 포인터의 배경색을 선택합니다.
• 포인터 크기: 포인터의 크기를 설정합니다. 원을 오른쪽으로 드래그하면 더 크게 만들 수 있습니다.
• 국경 반경: 이 옵션을 사용하면 원하는 경우 포인터의 반경을 변경할 수 있습니다.
• 상자 그림자: 이 옵션을 사용하면 포인터로 그림자를 추가할 수 있습니다.
• 테두리 유형: 포인터에 원하는 테두리 유형을 선택합니다.
• 포인트 컬러: 포인터에 있는 점의 색상을 사용자 정의합니다.
• 글로우 색상: 필요하다고 생각되면 포인터 주위에 나타나는 기본 네온 색상을 변경하세요.

6단계: 제목 스타일 변경 핫스팟 이미지.

제목 스타일을 지정하려면 제목에 적합한 서체를 선택해야 합니다. 타이포그래피 섹션에서 다음 영역을 변경할 수 있습니다.

• 가족.
• 크기.
• 무게.
• 변환.
• 스타일.
• 장식.
• 줄 높이.
• 문자 간격.

또한 텍스트 색상을 선택하고 제목에 필요한 여백을 설정해야 합니다.

7단계: 설명 및 이미지 스타일을 맞춤설정하세요.

여기서 툴팁 내용에 대한 설명을 편집해야 합니다. 이는 제목 사용자 정의와 동일합니다. 이제 툴팁에 표시할 이미지 위치를 설정하세요. 

마지막으로 원하는 대로 이미지의 여백과 너비를 변경하세요.

8단계: 변경 사항 게시 핫스팟 이미지에.

마지막으로 모든 변경을 완료한 후 이제 게시할 시간입니다. 게시 버튼을 클릭하면 핫스팟 이미지에 대한 모든 설정이 완료됩니다.

내 핫스팟 대화형 이미지 맵의 출력은 다음과 같습니다.

메모:
핫스팟 이미지에 대한 고급 사용자 정의를 수행할 수도 있습니다. 예를 들어 핫스팟 이미지의 일부 부분을 고정할 수 있습니다. 이미지에 대한 조건, 효과를 설정할 수도 있습니다. 또한 고급 도구 설명을 추가할 수도 있습니다. 반응형 버튼을 클릭하여 변경 사항을 모니터링할 수도 있습니다. 반응형 버튼을 클릭하면 편집 내용이 새 탭에 표시됩니다.

아직도 혼란스러워요?

핫스팟 위젯 사용 방법에 대한 데모 비디오를 확인하세요.

대화형 핫스팟 이미지를 생성하기 위해 ElementsKit을 선택하는 이유는 무엇입니까?

WordPress에는 핫스팟 이미지를 생성하기 위한 핫스팟 위젯을 제공하는 많은 애드온이 있습니다. 

그런데 왜 다른 모든 애드온을 피해야 합니까? 고품질 대화형 핫스팟 이미지를 생성하기 위해 ElementsKit만 선택해야 하는 이유는 무엇입니까?

Elementor를 위한 훌륭한 도구로 간주되는 이유는 무엇입니까?

ElementsKit 프로 버전 핫스팟 위젯을 제공합니다. 따라서 이러한 질문을 받는 것은 정상입니다. 사람들은 무료 버전의 플러그인을 사용할 때 별로 신경 쓰지 않습니다. 하지만 유료 버전을 사용하면 그렇습니다. 사람들은 돈을 지불할 때 최고의 제품을 사고 싶어하기 때문입니다. 당신도 다르지 않습니다.

다른 애드온 대신 ElementsKit을 사용해야 하는 이유는 다음과 같습니다.

• ElementsKit이 제공할 것입니다. 탁월한 지원. 지원팀은 이 애드온을 사용하는 동안 직면하게 될 모든 문제에 대한 솔루션을 항상 제공합니다. 게다가, 귀하의 모든 질문에 대해 가장 빠른 응답을 받으실 수 있습니다. 다른 애드온에서는 이러한 지원을 거의 얻지 못할 것입니다.
• 그것 때문에 사용자 친화적 기능이 있어서 초보자라도 작동하는데 문제가 없습니다. 

• 원하는 대로 핫스팟 이미지를 만들 수 있습니다. 고급 사용자 정의도 열려 있습니다. 핫스팟 이미지뿐만 아니라 사용자 정의된 이미지도 만들 수 있습니다. 머리글, 보행인, 드롭다운 메뉴 등을 ElementsKit으로 사용할 수 있습니다.

• ElementsKit은 뛰어난 사용자 경험을 제공하는 데 그치지 않았습니다. 귀하의 요구 사항을 충족하기 위해 지속적으로 업데이트되고 있습니다. 더욱이 그것은 완벽하게 호환됨 엘리멘터와 함께. 그러나 다른 애드온 및 플러그인을 설치하거나 사용할 때는 이러한 사용자 경험을 얻을 수 없습니다.

• 귀하가 소유자인지 여부 크거나 작은 사이트, 문제 없이 이 애드온을 사용할 수 있습니다. 그러나 일부 애드온은 귀하의 요구 사항을 충족하지 못합니다.
• 일부 추가 기능은 사이트를 손상시킬 수 있습니다. ElementsKit 사용자가 되면 이 문제가 발생하지 않습니다.

이는 귀하가 이 제품을 설치하고 사용하도록 유도하는 가장 중요한 이유입니다. ElementsKit 애드온. 위의 이점으로 인해 많은 사용자가 다른 애드온을 떠나 ElementsKit을 선택합니다. 이 블로그를 작성하는 시점에서 ElementsKit의 주당 다운로드 수는 다음과 같습니다. 117,238+. 이는 사용자가 ElementsKit을 좋아한다는 것을 증명합니다.

ElementsKit의 여정에 대해 더 알고 싶으십니까? 그럼 읽어보세요 ElementsKit의 여정: Elementor용 올인원 애드온.

핫스팟 이미지 시작하기

WordPress 사이트에서 이미지를 사용하는 것은 방문자와 감정적으로 소통하는 가장 효과적인 방법이 될 수 있습니다. 그러나 WordPress 사이트의 핫스팟 이미지는 이를 다른 수준으로 끌어올릴 수 있습니다. 운 좋게도 이제 다음을 사용하여 몇 분 안에 핫스팟 이미지를 만드는 방법을 알게 되었습니다. ElementsKit. 

핫스팟 이미지 생성에 대해 여전히 혼란스러우면 댓글 섹션에 알려주시거나 다음 페이지에 질문을 게시해 주세요. Wpmet 커뮤니티. 우리는 귀하의 문제를 해결하기 위해 노력할 것입니다. 또한 이 콘텐츠가 도움이 되었는지 알려주시기 바랍니다.