일부 세부 사항은 페이지의 전체 단락을받을 자격이 없습니다. 기능 카드의 추가 컨텍스트 또는 아이콘 전용 버튼의 레이블과 같이 호버에 표시되는 짧은 메모가 작업을 수행합니다. Elementor 에는이를 수행하는 내장 된 방법이 없으므로 도구 설명 확장 Elementor용 마스터 애드온 모든 요소의 고급 탭에 하나를 추가합니다.
툴팁 텍스트를 작성하고,표시되는 위치와 애니메이션 방식을 선택한 다음 디자인의 다른 부분처럼 스타일을 지정합니다. 단축 코드 및 CSS 없음.
Tooltip 확장자가 수행하는 작업 #
활성화되면 모든 Elementor 요소는 다음을 얻습니다 도구 설명 아래 섹션 고급 탭. 요소에 대해 켜고 텍스트를 입력하면 방문자가 라이브 페이지에서 해당 요소 위로 마우스를 가져가면 작은 거품이 보입니다. 각 요소에는 고유한 도구 설명이 있으므로 연속으로 세 장의 카드가 각각 다른 텍스트로 자신을 설명할 수 있습니다.
확장은 두 개의 하위 탭으로 분할됩니다: 설정 동작(텍스트, 배치, 애니메이션, 트리거, 타이밍) 및 스타일 외모(색상, 너비, 패딩, 타이포그래피)용.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치 및 활성. 플러그인에 새로운? 따라 설치 가이드 첫번째.
- Tooltips는 무료 확장 프로그램이므로 Pro 라이센스가 필요하지 않습니다.
Tooltip 확장을 활성화하는 방법 #
WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 그리고 열어보세요 확장 탭. 도구 설명은 에 있습니다 동적 위젯 인기 배지가 있는 그룹 옆에 있습니다 동적 태그 그리고 래퍼 링크. 보라색으로 변하도록 토글을 클릭한 다음 누르세요 변경 사항 저장 상단에 녹색 “설정이 성공적으로 저장되었습니다” 알림을 기다립니다.
요소에 툴팁 추가하기 #
Elementor 로 페이지를 열고 요소를 선택하십시오. 비디오 예제에서는 3 열 기능 행의 Info Box 카드입니다. 로 이동하십시오 고급 탭, 열기 도구 설명 보라색 MA 배지가 있는 섹션을 뒤집습니다 도구 설명 예 로 전환합니다. 설정 하위 탭이 먼저 열립니다.
설정 설명 #
- 내용: 툴팁 텍스트. 입력하거나 시작점을 원하는 경우 AI 로 쓰기 링크를 사용합니다.
- 배치: 버블이 선호하는 요소의 어느 쪽: 위쪽 (기본값), 아래쪽, 왼쪽 또는 오른쪽.
- 커서를 따르세요: 도구 설명 흔적을 가만히 앉아 있는 대신 마우스로 만듭니다.
- 애니메이션: 버블이 어떻게 들어가는지. 일곱 가지 선택: 없음,페이드, Shift-Away,Shift-Toward,Scale, Perspective,그리고 채우기 효과.
- 트리거: 도구 설명을 여는 항목은 기본적으로 마우스오버입니다.
- 기간 및 지연: 밀리초 단위의 애니메이션 속도와 거품이 닫히기 전까지 지속되는 시간입니다.
- X 및 Y 오프셋: 기본 지점에서 거품을 밀어냅니다.
- 화살표 및 화살표 유형: 요소, 날카로운 또는 둥근에 작은 포인터 연결 거품을 추가합니다.
도구 설명 스타일 지정 #
로 전환하십시오 스타일 브라우저 기본값처럼 보이지 않고 버블이 디자인과 일치하도록 하위 탭을 만듭니다.
- 최대 너비: 거품이 커지는 폭을 캡핑합니다. 데모에서는 200px이므로 긴 텍스트가 화면을 가로질러 늘어나는 대신 래핑됩니다.
- 텍스트, 배경 및 화살표 색상: 포인터를 포함한 풀 컬러 컨트롤.
- 패딩, 테두리 유형 및 테두리 반경: 거품의 모양.
- 텍스트 정렬, 상자 그림자 및 타이포그래피: 자신만의 글꼴과 깊이로 룩을 마무리해보세요.
페이지의 결과 #
페이지를 저장하고 봅니다. 카드 위로 마우스를 가져가면 설정한 애니메이션,색상 및 너비를 사용하여 작성한 텍스트와 함께 도구 설명이 페이드 인됩니다. 커서를 멀리 이동하면 지연 후에 닫힙니다.
페이지의 다른 요소에 대해 반복합니다. 데모에서 세 가지 기능 카드는 각각 패널에 한 번 작성되고 모든 호버에서 제공되는 자체 도구 설명 텍스트를 얻습니다.
툴팁이 보관할 수 있는 곳입니다 #
- 기능 카드. 카드를 늘리지 않고 더욱 자세하게 설명하는 문장입니다.
- 가격표. 사람들이 궁금해하는 바로 그 곳에서 “우선순위 지원”이 실제로 무엇을 다루고 있는지 설명하십시오.
- 버튼 및 아이콘. 아무도 추측하지 못하도록 레이블 아이콘 전용 컨트롤입니다.
- 팀원들. 각 사진 위에 재미있는 사실이나 역할 메모가 표시됩니다.
- 기술 용어. 전문 용어에 대한 짧은 정의로 용어집 페이지보다 저렴합니다.
비디오 자습서 #
라이브로 보는 것을 선호하시나요? 이 비디오는 확장 기능 활성화,툴팁 작성,버블 스타일링을 거칩니다.
자주 묻는 질문 #
Elementor 에서 툴팁을 추가하려면 어떻게 해야 하나요?
마스터 애드온 확장 탭에서 도구 설명 확장을 활성화한 다음 Elementor 편집기에서 요소를 선택하고 고급 탭을 연 다음 도구 설명 스위치를 켭니다. 콘텐츠 상자에 텍스트를 입력하고 배치 및 애니메이션을 선택하면 도구 설명이 호버에 표시됩니다.
Elementor 위젯에 툴팁을 추가할 수 있나요?
예. 도구 설명 섹션은 모든 요소의 고급 탭에 나타납니다: 위젯,열, 컨테이너 및 섹션. 각 요소는 자체 도구 설명 텍스트 및 설정을 유지하므로 동일한 페이지의 다른 카드가 다른 것을 말할 수 있습니다.
내 사이트에 맞게 도구 설명의 스타일을 지정할 수 있나요?
예. 스타일 하위 탭은 최대 너비,텍스트 색상,배경색, 화살표 색상,패딩, 테두리,테두리 반경,텍스트 정렬,상자 그림자 및 타이포그래피를 제어합니다. 버블은 브라우저 기본값처럼 보이는 대신 브랜드와 일치할 수 있습니다.
툴팁은 어떤 애니메이션을 지원하나요?
일곱 가지 옵션: 없음,페이드, Shift-Away,Shift-Toward,Scale, Perspective,Fill Effect. 또한,밀리초 단위로 애니메이션 지속시간과 커서가 떠난 후 툴팁이 닫히기 전의 지연시간을 제어할 수 있습니다.
Tooltip 확장은 무료입니까?
예. 툴팁은 확장 탭의 동적 위젯 그룹에 있는 Elementor 용 Master Addons 무료 버전과 함께 제공됩니다. The 가격 페이지 무료 확장 프로그램 외에 Pro 플랜이 추가하는 내용을 보여줍니다.
감싸는 #
Elementor 용 Tooltip 확장 프로그램은 여러분이 빌드하는 모든 것에 작게 스타일링 가능한 호버 노트를 적용합니다: 고급 탭에서 스위치를 뒤집고,텍스트를 작성하고,배치 및 애니메이션을 선택하고,버블을 한 번 스타일링하면 남은 브라우저가 아닌 디자인의 일부처럼 읽혀집니다. 더 많은 고급 탭 업그레이드를 원하시면,탐색 마스터 애드온 위젯 및 확장또는 를 참조하십시오 유리형성 확장 또 다른 원토글 효과를 위해.
