때로는 디자인에 페이지에 전체 라인을 제공하지 않고 짧은 설명이 필요합니다. 그것이 툴팁의 일입니다: 호버에 나타나고,조각을 말하고,비켜가는 작은 거품. 그만큼 도구 설명 위젯 인 Elementor용 마스터 애드온 배치, 애니메이션, 트리거 및 스타일링을 제어하여 해당 버블을 아이콘, 텍스트 또는 이미지에 연결합니다.
이 가이드는 첫 번째 드래그부터 라이브 페이지의 스타일이 지정된 도구 설명까지 위젯을 안내합니다.
Tooltip 위젯이 수행하는 작업 #
위젯은 페이지에 작은 대상 요소,아이콘, 텍스트 또는 이미지를 배치하고 도구 설명 버블을 바인딩합니다. 방문자가 대상을 마우스로 가리거나 클릭하면 메시지와 함께 버블이 나타납니다. 배치,애니메이션, 타이밍 및 오프셋은 모두 구성 가능하며 스타일 탭은 대상과 버블을 모두 포함합니다.
이것은 독립형 위젯입니다: 대상과 도구 설명이 요점입니다. 페이지에 이미 있는 위젯에 도구 설명을 추가하려는 경우 Master Addons는 모든 Elementor 요소에 연결되는 도구 설명 확장 기능도 제공합니다. 도구 설명 대상이 가격 옆에 있는 정보 아이콘이나 이름 버블이 있는 팀 아바타와 같은 고유한 작은 디자인 요소인 경우 위젯이 올바른 선택입니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 기본 위젯 아래의 마스터 애드온 옵션 패널에서 도구 설명 위젯이 활성화되었습니다.
Tooltip 위젯을 추가하는 방법 #
Elementor 편집기에서 다음을 검색합니다 요소 위한 패널 도구 설명 그리고 위젯을 페이지로 드래그하십시오. 기본 대상으로 정보 아이콘과 이미 배선된 자리 표시자 도구 설명이 로드되므로 캔버스에 아이콘을 올리면 바로 거품이 표시됩니다.
콘텐츠 유형을 선택하십시오: 아이콘, 텍스트 또는 이미지 #
오픈 콘텐츠 설정 콘텐츠 탭에서. The 콘텐츠 유형 상단의 스위처는 세 가지 목표를 제공합니다:
- 아이콘: elementor 라이브러리에서 아무 아이콘이나 선택합니다. classic info 서클이 기본값입니다.
- 텍스트: “hover Me!”와 같은 단어나 문구를 입력하면 도구 설명이 연결됩니다.
- 이미지: 아바타 및 제품 축소판에 유용한 이미지를 미디어 라이브러리에서 선택합니다.
모든 유형에는 두 가지 컨트롤이 적용됩니다. 정렬 대상을 왼쪽, 중앙 또는 오른쪽에 배치합니다. HTML 태그 선택한 마크업에서 대상을 감쌉니다: H1~H6, div, span, p, 버튼 또는 a. 일반 도구 설명에 대해 p 또는 span으로 고정; 대상이 접근성을 제어하는 것처럼 작동할 때 버튼을 사용하십시오.
와 함께 텍스트 선택됨,콘텐츠 필드가 아이콘 선택기를 대체합니다:
와 함께 이미지 선택하면 미디어 라이브러리가 열리고 선택한 이미지가 호버 타겟이 됩니다:
툴팁을 작성하고 동작을 설정합니다 #
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 도구 설명 옵션 섹션은 버블 자체를 제어합니다.
- 도구 설명 텍스트: 거품 안쪽에 메시지. 한두 줄에 그것을 유지; 도구 설명은 단락이 아닌 힌트를위한 것입니다.
- 커서를 따르세요: 거품이 대상에 고정되어 있는 대신 마우스를 따라가도록 하세요.
- 배치: 대상에 대해 거품이 있는 위치. Top 이 기본값이며 Top Start,Bottom 및 다른 가장자리를 사용할 수 있습니다.
- 애니메이션: 버블이 들어가는 방법, 기본적으로 Shift-Away.
- 트리거 켜기: 마우스를 통해 거품을 보여줍니다; 클릭은 탭을 기다립니다, 또한 터치 스크린에서 더 잘 작동합니다.
- 기간 및 지연: 애니메이션 속도와 커서가 떠난 후 버블이 얼마나 오래 지속되는지, 둘 다 기본적으로 300밀리초입니다. 기본값은 대부분의 페이지에 적합하다고 느껴집니다; 도구 설명이 방문자가 읽는 데 더 긴 비트가 필요한 내용을 전달하는 경우에만 속도를 늦춥니다.
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 X 오프셋 그리고 Y 오프셋 슬라이더는 기본 지점에서 거품을 밀어냅니다. 툴팁이 테두리를 지우거나 이상한 모양의 대상 옆에 앉아야 할 때 유용합니다.
대상을 스타일링합니다 #
에서 스타일 탭, 일반 스타일 페이지의 대상 요소를 다룹니다.
- 콘텐츠 너비 및 패딩: 대상 블록의 크기. 데모는 아바타 룸을 제공하기 위해 150 에서 215 픽셀로 넓혀집니다.
- 일반 및 호버 상태: 각 주의 배경색, 텍스트 색상, 상자 그림자 및 타이포그래피.
- 테두리 유형 및 테두리 반경: 타겟을 프레임화; 4픽셀 반경은 모서리를 부드럽게 유지합니다.
툴팁 버블을 스타일링합니다 #
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 도구 설명 스타일 섹션은 거품을 스타일링하고 캔버스는 작업하는 동안 거품을 실시간으로 미리 봅니다.
- 툴팁 너비: 거품의 최대 너비,기본적으로 200 픽셀입니다. 텍스트가 그 안에 감겨 있습니다.
- 배경 색상 및 텍스트 색상: 데모는 흰색 텍스트와 함께 어두운 네이비색으로 진행되며 고전적인 고대비 도구 설명 모양입니다.
- 타이포그래피, 패딩, 테두리: 버블의 텍스트와 프레임.
- 거리: 거품과 대상 사이의 간격, 기본적으로 10 픽셀.
- 텍스트 정렬 및 상자 그림자: 마지막 터치. 부드러운 그림자는 페이지 위에 떠있는 것처럼 읽는 거품을 도와줍니다.
페이지의 결과 #
라이브 페이지에서 대상은 방문자가 마우스를 가져갈 때까지 조용히 앉아 있습니다. 그런 다음 선택한 위치에서 버블이 애니메이션되고 커서가 머무르는 동안 유지되며 설정한 지연 후에 페이드 아웃됩니다.
일반적인 사용 사례 #
- 정보 아이콘 가격 행, 양식 레이블 및 기능 목록 옆에 있습니다.
- 팀 아바타 호버링에서 이름과 역할이 드러납니다.
- 용어집 용어 텍스트에서는 버블에 짧은 정의가 있습니다.
- 제품 썸네일 페이지 공간을 가질 자격이없는 사양이나 메모로.
- 아이콘 전용 버튼 도구 설명에서 작업 이름을 지정하는 위치입니다.Where the tooltip names the action.
더 나은 툴팁을 위한 팁 #
- 텍스트를 짧게 유지하십시오. 한두 줄. 메시지가 더 필요하면 도구 설명이 아닌 레이아웃에 속합니다.
- 터치 방문자에 대해 클릭 트리거를 사용합니다. 전화기에는 호버가 존재하지 않습니다; 클릭 트리거 도구 설명이 어디에서나 작동합니다.
- 대조를 염두에 두십시오. 어두운 거품, 가벼운 텍스트 또는 그 반대. 10 패딩이있는 200 픽셀의 기본 너비는 일반적인 글꼴 크기에서 잘 읽습니다.
- 화면 가장자리 근처 배치를 확인합니다. 페이지의 첫 번째 요소에 있는 상단 도구 설명 클립; 하단으로 전환하거나 오프셋을 사용하세요.
- 툴팁에 중요한 정보를 숨기지 마세요. 방문자가 읽어야 하는 모든 것은 페이지에 속합니다; 버블은 추가 기능을 위한 것입니다.
비디오 자습서 #
툴팁이 실제로 작동하는 것을 보고 싶다면 이 짧은 비디오는 위젯을 끌어들이는 것부터 라이브 페이지의 스타일이 지정된 버블까지 전체 설정을 다룹니다.
자주 묻는 질문 #
마스터 애드온의 툴팁 위젯은 무엇입니까?
페이지에 아이콘,텍스트 또는 이미지를 배치하고 툴팁 버블을 부착하는 Elementor 위젯입니다. 버블은 호버링이나 클릭 시 나타나며 Elementor 패널에서 배치,애니메이션, 타이밍,오프셋 및 전체 스타일링을 제어합니다.
툴팁 대상이 이미지가 될 수 있나요?
예. 콘텐츠 설정에서 콘텐츠 유형을 이미지로 설정하고 미디어 라이브러리에서 이미지를 선택합니다. 그런 다음 방문자가 이미지를 마우스오버하거나 클릭하면 팀 아바타 및 제품 축소판에 적합한 툴팁이 나타납니다.
공구 팁을 호버 대신 클릭으로 표시할 수 있나요?
예. 도구 설명 옵션에서 트리거 켜기를 호버에서 클릭으로 변경합니다. 클릭 트리거링은 호버가 존재하지 않는 휴대폰과 태블릿에서도 더 잘 작동합니다.
툴팁이 나타나는 위치를 어떻게 변경하나요?
도구 설명 옵션의 배치 드롭다운을 사용하여 상단,하단 또는 각 가장자리의 시작 또는 끝 변형을 선택합니다. X 오프셋 및 Y 오프셋 슬라이더는 정확한 위치를 미세 조정하고,Distance 는 대상과의 간격을 설정합니다.
툴팁 버블을 스타일링할 수 있나요?
예. 스타일 탭의 툴팁 스타일 섹션은 버블의 너비,배경색, 텍스트 색상,타이포그래피, 패딩,테두리, 대상과의 거리,텍스트 정렬 및 상자 그림자를 제어합니다. 편집기 미리보기는 변경 사항을 실시간으로 제공합니다.
감싸는 #
Tooltip 위젯은 전체 힌트-버블 패턴을 한 곳에서 처리합니다: 아이콘, 텍스트 또는 이미지 대상을 선택하고, 메시지를 작성하고, 트리거 및 배치를 설정하고, Elementor 패널에서 두 반쪽의 전체 세트를 탐색합니다 마스터 애드온 위젯 및 확장 도구 설명 확장 프로그램과 상자에 있는 기타 모든 내용은 다음을 참조하세요 가격 페이지 pro 가 추가하는 것을 위해.
