어디서나 툴팁을 보셨을 겁니다. Google Docs 의 툴바 아이콘 위로 마우스를 가져가면 작은 라벨이 그 버튼이 무엇을 하는지 알려줍니다. 툴팁입니다. WordPress 에서 툴팁을 사용하면 누군가가 페이지의 요소를 마우스를 올리면 (또는 클릭하면) 나타나는 짧은 힌트를 추가할 수 있습니다. 추가 페이지 부동산도 없고 어수선한 레이아웃도 없습니다.
Elementor용 마스터 애드온은 툴팁을 추가하는 두 가지 방법을 제공합니다: 도구 설명 요소페이지 위에 놓는 독립형 위젯입니다 도구 설명 확장이미 존재하는 Elementor 위젯,섹션 또는 컨테이너에 툴팁을 첨부하는. 이 가이드에서는 두 가지 방법,각각의 사용 시기 및 스타일 지정 방법을 모두 다룹니다.
목차
툴팁이란 무엇이며 왜 중요한가요?
툴팁은 방문자가 페이지의 특정 요소 위에 커서를 올려 놓을 때 나타나는 짧은 메시지입니다. WordPress 사이트에서 툴팁은 몇 가지 실용적인 목적을 제공합니다:
- 흐름을 깨지 않고 용어를 설명하십시오. 콘텐츠가 전문 용어를 사용하는 경우 도구 설명을 통해 독자는 단락을 중단하지 않고 호버링에 대한 빠른 정의를 얻을 수 있습니다.
- 이미지와 아이콘에 컨텍스트 추가. 제품 아이콘, 팀원 사진 또는 기능 아이콘을 표시하면 도구 설명에서 시각적 공간을 차지하지 않고 추가 세부 정보를 제공합니다.
- 페이지를 깨끗하게 유지하세요. 모든 정보를 보이는 레이아웃에 벼락치기로 넣는 대신, 툴팁은 독자가 실제로 원할 때까지 보조 세부 정보를 숨깁니다.
- 참여도를 향상시키세요. 툴팁과 같은 대화형 요소는 방문자가 콘텐츠를 탐색하도록 유도합니다. 상호 작용을 유도하는 페이지는 더 오래 주의를 끄는 경향이 있습니다.
필요한 것
- 귀하의 사이트에 설치된 WordPress
- Elementor용 마스터 애드온 설치 및 활성화 (무료 버전 작동)
- Elementor 페이지 빌더 (무료 또는 Pro)
마스터 애드온은 워드 프레스 플러그인입니다 80+ 위젯 및 확장 elementor의 경우 여기에서 다루는 두 가지 도구 설명 기능을 모두 포함합니다.
도구 설명 요소 대 도구 설명 확장: 어떤 것을 사용해야 합니까?
그들은 다른 문제를 해결합니다. 올바른 것을 고르면 시간이 절약됩니다.
| 특징 | 도구 설명 요소 | 도구 설명 확장 |
|---|---|---|
| 그것이 무엇인지 | 독립형 Elementor 위젯 | 모든 위젯에서 작동하는 확장자입니다 |
| 작동 | 텍스트, 이미지 및 아이콘 (툴팁 위젯 내) | 모든 Elementor 컨테이너, 섹션 또는 요소 |
| 위한 최고의 | 전용 툴팁 콘텐츠 블록 생성 | 기존 페이지 요소에 툴팁 추가하기 |
| 액세스 방법 | Elementor 위젯 패널에서 끌어다 놓기 | 모든 위젯의 고급 탭에서 활성화합니다 |
| 콘텐츠 유형 | 텍스트 툴팁, 이미지 툴팁, 아이콘 툴팁 | 모든 요소에 대한 텍스트 기반 툴팁 |
| 사용 사례 | 도구 설명을 중심으로 특별히 설계된 섹션을 구축하려고 합니다 | 버튼, 제목, 이미지 또는 이미 페이지에 있는 위젯에 빠른 도구 설명을 추가하려고 합니다 |
짧은 버전:
- 제목,버튼 또는 이미 페이지에 있는 위젯에 도구 설명을 추가해야 합니까? 를 사용합니다 도구 설명 확장.
- 툴팁 콘텐츠를 보려면 사용자가 특정 텍스트,이미지 또는 아이콘 위로 마우스를 가져가는 전용 콘텐츠 블록이 필요하십니까? Use the 도구 설명 요소.
같은 페이지에서 둘 다 사용할 수 있습니다. 서로 충돌하지 않습니다.
방법 1: 도구 설명 요소를 사용하여 Elementor에서 도구 설명을 추가하는 방법
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 도구 설명 요소 는 독립형 위젯입니다. 페이지로 드래그하면 사용자가 텍스트,이미지 또는 아이콘 위로 마우스를 가져가면 도구 설명 메시지가 표시됩니다.
이미지 툴팁, 텍스트 툴팁 또는 아이콘 툴팁을 페이지의 전용 섹션으로 만들려는 경우 이 방법을 사용하십시오.
1단계: Elementor에서 페이지를 엽니다
WordPress 대시보드에서 편집할 페이지로 이동하여 클릭합니다 Elementor 로 편집.
2단계: 도구 설명 위젯을 검색하세요
왼쪽의 Elementor 위젯 패널에서 검색창에 “도구 설명”을 입력합니다. The MA 툴팁 마스터 애드온 섹션 아래에 위젯이 나타납니다. 도구 설명을 표시할 페이지로 드래그하십시오.
3단계: 콘텐츠 유형을 선택하세요
위젯을 클릭하여 설정을 엽니다. 아래 콘텐츠 탭, the 콘텐츠 유형 옵션은 당신에게 세 가지 선택을 제공합니다:
- 텍스트. 방문자가 텍스트 위로 마우스를 가져가면 도구 설명 메시지가 표시됩니다.
- 이미지. 방문자는 도구 설명을 보려면 이미지 위로 마우스를 가져가세요.
- 아이콘. 방문자는 아이콘 위로 마우스를 가져가면 추가 정보가 표시됩니다.
사용 사례에 맞는 콘텐츠 유형을 선택하세요.
4단계: 도구 설명 콘텐츠를 설정합니다
콘텐츠 유형을 선택한 후 두 부분을 모두 구성하십시오:
트리거 콘텐츠 (방문자가 페이지에서 보는 내용):
- 텍스트의 경우: 방문자가 마우스를 가져갈 단어나 문구를 입력합니다
- 이미지의 경우: WordPress 미디어 라이브러리에서 이미지를 업로드하세요
- 아이콘의 경우: 아이콘 라이브러리에서 아이콘을 선택합니다
툴팁 콘텐츠 (호버에 나타나는 내용):
- 로 이동 툴팁 설정 섹션
- 내장 편집기에 툴팁 텍스트를 입력합니다
- 굵게, 기울임꼴, 링크 등으로 텍스트의 형식을 지정할 수 있습니다
5단계: 툴팁 방향과 속도를 구성합니다
도구 설명 설정에서 도구 설명이 표시되는 방식을 설정합니다:
- 툴팁 방향. 트리거를 기준으로 도구 설명이 나타나는 위치를 선택합니다: 상단, 하단, 왼쪽 또는 오른쪽.
- 툴팁 속도. 애니메이션 속도를 밀리초 단위로 설정합니다. 값이 낮으면 더 빠르게 나타납니다.
팁: 300-500ms 사이 툴팁 속도를 유지. 너무 빠른 느낌 갑작스러운, 너무 느린 느낌 무반응.
6단계: 도구 설명 스타일을 지정하세요
로 전환하십시오 스타일 elementor 툴팁 위젯의 모양을 사용자 정의하는 탭:
- 내용 최대 폭. 툴팁 상자가 얼마나 넓어질 수 있는지 제어합니다.
- 배경 색상. 툴팁 배경을 설정합니다.
- 텍스트 색상. 툴팁 글꼴 색상을 변경합니다.
- 타이포그래피. 글꼴 패밀리, 크기, 무게 및 간격을 조정합니다.
- 박스 섀도우. 그림자 효과로 깊이를 더합니다.
- 국경. 테두리를 추가하고 둥근 모서리에 대한 테두리 반경을 설정합니다.
- 패딩. 텍스트와 툴팁 가장자리 사이의 공간을 제어합니다.
에 대해 다양한 스타일을 설정할 수 있습니다 정상적인 그리고 호버 시각적 피드백을 추가하는 상태입니다.
일반적인 스타일 아래에는 도구 설명 스타일 섹션에서는 버블 자체를 제어할 수 있습니다. 툴팁 너비를 픽셀 단위로 설정하고,배경 및 텍스트 색상을 선택하고,타이포그래피를 조정하고,네 면 모두에 패딩을 구성하고,테두리 유형을 선택하고,둥근 모서리에 대한 테두리 반경을 설정하고,트리거와 버블 사이의 거리를 제어하고,툴팁 내부의 텍스트를 정렬하고,깊이에 대한 상자 그림자를 추가합니다.
모든 설정을 자세히 살펴보려면 다음을 확인하세요 툴팁 요소 문서 아니면 시청하세요 비디오 튜토리얼.
방법 2: 도구 설명 확장을 사용하여 Elementor 위젯에 도구 설명을 추가하는 방법
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 도구 설명 확장 요소와 다르게 작동합니다. 독립형 위젯이 되는 대신 a 를 추가합니다 도구 설명 모든 Elementor 요소의 고급 탭 섹션. 페이지에 이미 존재하는 위젯,컨테이너, 열 또는 섹션을 선택하고 스위치를 뒤집고 텍스트를 입력하면 방문자가 해당 요소 위로 마우스를 가져가면 작은 거품이 보입니다. 각 요소에는 고유한 도구 설명이 있으므로 연속으로 세 장의 카드가 각각 다른 텍스트로 자신을 설명할 수 있습니다.
확장은 두 개의 하위 탭으로 분할됩니다: 설정 동작(텍스트, 배치, 애니메이션, 트리거, 타이밍) 및 스타일 외모(색상, 너비, 패딩, 타이포그래피)용.
1단계: 도구 설명 확장을 활성화합니다
WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 그리고 열어보세요 확장 탭. 도구 설명은 에 있습니다 동적 위젯 그룹. 보라색으로 변하도록 토글을 클릭한 다음 누르십시오 변경 사항 저장 상단에 녹색 “설정이 성공적으로 저장되었습니다” 알림을 기다립니다.
2단계: Elementor에서 페이지를 엽니다
편집할 페이지로 이동하여 클릭합니다 Elementor 로 편집.
3단계: 요소를 선택합니다
툴팁을 추가하려는 기존 요소를 클릭합니다. 이는 제목,버튼, 이미지,아이콘, 가격표,컨테이너, 열,섹션 및 모든 Elementor 위젯 또는 Master Addons 요소와 함께 작동합니다. 툴팁 섹션은 모든 요소의 고급 탭에 나타납니다.
4단계: 고급 탭으로 이동하여 도구 설명을 활성화합니다
요소를 선택한 상태에서 을 클릭합니다 고급 설정 패널에서 탭. 를 찾을 때까지 아래로 스크롤합니다 도구 설명 보라색 MA 배지가 있는 섹션. 확장하고 뒤집습니다 도구 설명 예 로 전환합니다. 설정 하위 탭이 먼저 열립니다.
5단계: 도구 설명 설정을 구성합니다
설정 하위 탭에서는 툴팁이 어떻게 동작하는지 제어할 수 있습니다:
- 내용: 툴팁 텍스트. 입력하거나 시작점을 원하는 경우 AI 로 쓰기 링크를 사용합니다.
- 배치: 버블이 선호하는 요소의 어느 쪽: 위쪽 (기본값), 아래쪽, 왼쪽 또는 오른쪽.
- 커서를 따르세요: 도구 설명 트레일을 가만히 앉아 있는 대신 마우스로 만듭니다. 커서 아래의 각 영역에 자체 레이블이 필요한 지도,차트 및 다이어그램에 유용합니다.
- 애니메이션: 버블이 어떻게 들어가는지. 일곱 가지 선택: 없음,페이드, Shift-Away,Shift-Toward,Scale, Perspective,그리고 채우기 효과.
- 트리거: 도구 설명을 여는 항목 기본적으로 마우스를 올리거나 터치스크린 친화적인 영구 힌트를 보려면 클릭하세요.
- 기간 및 지연: 밀리초 단위의 애니메이션 속도와 거품이 닫히기 전까지 지속되는 시간입니다.
- X 및 Y 오프셋: 특정 픽셀 수만큼 기본 지점에서 버블을 밀어냅니다.
- 화살표 및 화살표 유형: 날카롭거나 둥근 스타일 옵션을 사용하여 요소에 버블을 연결하는 작은 포인터를 추가합니다.
6단계: 도구 설명 스타일을 지정합니다
로 전환하십시오 스타일 브라우저 기본값처럼 보이지 않고 버블이 디자인과 일치하도록 하위 탭을 만듭니다.
- 최대 너비: 거품이 얼마나 넓게 커지는지 가두어 화면을 가로질러 늘어나는 대신 텍스트 랩을 길게 늘립니다.
- 텍스트, 배경 및 화살표 색상: 포인터를 포함한 풀 컬러 컨트롤.
- 패딩, 테두리 유형 및 테두리 반경: 거품의 모양.
- 텍스트 정렬, 상자 그림자 및 타이포그래피: 자신만의 글꼴과 깊이로 룩을 마무리해보세요.
7단계: 결과를 확인하세요
페이지를 저장하고 봅니다. 요소 위로 마우스를 가져가면 설정한 애니메이션,색상 및 너비를 사용하여 작성한 텍스트와 함께 도구 설명이 페이드 인됩니다. 커서를 멀리 이동하면 지연 후에 닫힙니다. 페이지의 다른 요소에 대해 반복합니다.
전체 구성 세부정보는 다음을 참조하세요 도구 설명 확장 문서 아니면 시청하세요 비디오 튜토리얼.
각 방법에 대한 실제 사용 사례
Tooltip Element를 사용할 시기
Tooltip Element 는 전용 콘텐츠 블록입니다. tooltips 가 섹션의 주요 포인트일 때 사용하십시오:
- 기능 쇼케이스 페이지. 도구 설명과 함께 제품 기능을 아이콘 또는 이미지로 표시합니다.
- 용어집 섹션. 독자가 용어 위로 마우스를 가져가서 정의를 볼 수 있는 인라인 용어집을 만듭니다.
- 포트폴리오 항목. 프로젝트 세부 정보를 보여주는 포트폴리오 축소판에 이미지 툴팁을 추가합니다.
- 팀 페이지. 팀 역할에 대한 도구 설명 세부 정보가 포함된 아이콘이나 사진을 배치합니다.
- 교육 콘텐츠. 학생들이 페이지를 떠나지 않고 키워드 위로 마우스를 가져가 설명을 볼 수 있도록 하세요.
Tooltip Extension을 사용해야 하는 경우
Tooltip Extension 은 페이지에 이미 존재하는 요소에 컨텍스트를 추가합니다:
- 기능 카드. 카드를 늘리지 않고 더욱 자세하게 설명하는 문장입니다.
- 가격표. 사람들이 궁금해하는 바로 그 곳에서 “우선순위 지원”이 실제로 무엇을 다루고 있는지 설명하십시오. 우리의 것을보십시오 가격표 위젯 더 많은 것을 위해.
- 버튼 및 아이콘. 아무도 추측하지 못하도록 레이블 아이콘 전용 컨트롤입니다.
- 팀원들. 각 사진 위에 재미있는 사실이나 역할 메모가 표시됩니다.
- 기술 용어. 전문 용어에 대한 짧은 정의로 용어집 페이지보다 저렴합니다.
두 가지 방법을 결합합니다
같은 페이지에서 둘 다 사용할 수 있습니다. 예를 들어,도구 설명 요소를 사용하여 방문자가 아이콘 위로 마우스를 가져가서 각 기능에 대해 알아보는 기능 비교 섹션을 구축한 다음 하단의 CTA 버튼에 있는 도구 설명 확장 기능을 사용하여 “무료 14 일 평가판,신용 카드 필요 없음” 도구 설명을 추가합니다.
둘 사이에 충돌은 없어요 서로 다른 목적을 가지고 있고 어느 페이지에서나 공존할 수 있죠.
WordPress에 대한 도구 설명 모범 사례
- 툴팁 텍스트를 짧게 유지하세요. 1-2 문장을 목표로 하세요. 그 이상이 필요하다면 정보는 아마도 도구 설명에 숨겨져 있는 것이 아니라 페이지 자체에 속할 것입니다.
- 일관된 포지셔닝을 사용하십시오. 한 방향을 선택하고 (대부분의 경우 상단 또는 하단이 가장 잘 작동) 사이트 전체에 걸쳐 그대로 유지하십시오. 혼합 위치는 무작위로 느껴집니다.
- 툴팁을 과용하지 마세요. 페이지의 모든 요소에 툴팁이 있으면 방문자는 그 중 어느 것에도 귀찮게 마우스를 올리지 않습니다. 진정으로 가치를 추가하는 곳에서 사용하십시오.
- 도구 설명이 모바일에서 작동하는지 확인합니다. 터치스크린에는 호버가 존재하지 않습니다. 툴팁 확장 기능은 클릭 트리거를 지원하므로 모바일 사용자에게 더 잘 작동합니다. 게시하기 전에 휴대폰에서 툴팁을 테스트하세요.
- 사이트의 디자인과 일치하십시오. 기존 테마에 맞게 툴팁 색상,글꼴, 테두리를 사용자 정의합니다. 기본 툴팁 스타일링은 세련된 사이트에서 어울리지 않게 보일 수 있습니다.
툴팁 요소 대 툴팁 확장: 빠른 비교
| 특징 | 도구 설명 요소 | 도구 설명 확장 |
|---|---|---|
| 설정 | 새 위젯을 끌어다 놓습니다 | 기존 위젯의 고급 탭에서 활성화합니다 |
| 트리거 콘텐츠 | 텍스트, 이미지, 아이콘(위젯에 내장됨) | 모든 Elementor 요소: 제목, 버튼, 이미지, 섹션, 컨테이너 |
| 위한 최고의 | 전용 툴팁 콘텐츠 블록 | 기존 디자인에 툴팁 추가하기 |
| 애니메이션 | 페이드, 스케일, 시프트 | 7가지 옵션: 없음, 페이드, 이동 거리, 이동 방향, 규모, 원근감, 채우기 효과 |
| 커서를 팔로우하세요 | 아니요 | 예 |
| AI 로 쓰기 | 아니요 | 예 (툴팁 텍스트의 경우) |
| 화살표 사용자 정의 | 아니요 | 예 (날카롭거나 둥글게) |
| 커스터마이징 | 전체 스타일링 컨트롤 | 전체 스타일링 컨트롤 (스타일 하위 탭) |
| 페이지당 여러 툴팁 | 예 | 예 (각 요소는 자신의 것을 운반합니다) |
| 학습 곡선 | 최소의 | 최소의 |
두 기능 모두 에서 사용할 수 있습니다 Elementor용 마스터 애드온. 무료 버전으로 시작하여 업그레이드할 수 있습니다 프로 고급 스타일링 옵션 및 추가 위젯용.
자주 묻는 질문
플러그인 없이 WordPress에 도구 설명을 추가하려면 어떻게 해야 합니까?
HTML을 사용하여 기본 툴팁을 추가할 수 있습니다 title 어떤 요소에 속성을 부여한다 (예를 들어, <span title="Your tooltip text">Hover here</span>). 그러나이 방법은 제로 스타일링 제어를 제공하며 브라우저마다 다르게 보입니다. WordPress 의 사용자 정의 스타일 툴팁의 경우 Master Addon 과 같은 플러그인을 사용하면 디자인,애니메이션 및 위치 지정을 완벽하게 제어 할 수 있습니다.
Elementor 의 이미지에 도구 설명을 추가할 수 있습니까?
예. 마스터 애드온은 두 가지 방법을 제공합니다. 툴팁 요소를 사용하고 콘텐츠 유형으로 “이미지”를 선택하여 전용 이미지 툴팁을 만듭니다. 또는 모든 Elementor 이미지 위젯에서 툴팁 확장을 사용하여 페이지의 기존 이미지에 툴팁을 추가합니다.
모바일 장치에서 툴팁이 작동합니까?
표준 호버 기반 툴팁은 호버할 커서가 없기 때문에 터치스크린에서 작동하지 않습니다. Master Addons 의 툴팁 확장 기능은 클릭 트리거 옵션을 지원하며,사용자가 모바일에서 요소를 탭하면 툴팁을 표시합니다. 따라서 모든 장치에서 툴팁에 액세스할 수 있습니다.
툴팁과 팝오버의 차이점은 무엇인가요?
툴팁은 호버에 나타나고 커서를 멀리 옮기면 사라지는 작은 텍스트 기반 힌트입니다. 팝오버는 일반적으로 더 크고 이미지,버튼 또는 양식과 같은 풍부한 콘텐츠를 포함할 수 있으며 종종 클릭 한 번으로 열고 닫아야 합니다. 마스터 애드온 툴팁 요소에는 포맷된 텍스트가 포함되어 있어 간단한 툴팁과 더 풍부한 호버 콘텐츠 모두에 유연하게 사용할 수 있습니다.
툴팁은 SEO에 좋은가요?
툴팁 콘텐츠는 HTML 에서 렌더링되므로 검색 엔진은 그 안에 있는 텍스트를 크롤링할 수 있습니다. 하지만 툴팁 콘텐츠는 기본적으로 숨겨져 있고 호버에서만 볼 수 있으므로 검색 엔진에서는 무게가 덜 나갈 수 있습니다. 툴팁에 중요한 콘텐츠를 숨기지 말고 사용자 경험에 가치를 더하는 보충 정보에 활용하세요.
같은 페이지에서 Tooltip Element 와 Tooltip Extension 을 모두 사용할 수 있습니까?
예. 독립적으로 작동하며 서로 충돌하지 않습니다. 전용 툴팁 콘텐츠 블록에 툴팁 요소를 사용하고 같은 페이지의 기존 Elementor 위젯에 빠른 툴팁을 추가하려면 툴팁 확장 기능을 사용하십시오.
WordPress 사이트에 도구 설명을 추가하기 시작하세요
마스터 애드온과 함께, 당신은 두 가지 옵션을 얻을: 그만큼 도구 설명 요소 텍스트, 이미지, 아이콘 트리거가 포함된 전용 툴팁 콘텐츠를 생성하기 위한 것입니다 도구 설명 확장 페이지의 기존 Elementor 요소에 도구 설명을 추가하려면.
두 방법 모두 즉시 작동합니다. 또한 확인할 수 있습니다 이미지 핫스팟 위젯 이미지의 특정 위치에 고정된 대화형 도구 설명이 필요한 경우.
Elementor용 마스터 애드온을 다운로드하세요 시작하려면.
