Elementor 웹사이트에 툴팁을 추가하는 방법

Elementor 웹사이트에 툴팁을 추가할 방법을 찾고 계십니까? 그렇다면 올바른 페이지로 이동한 것입니다.

도구 설명은 이미지 또는 특정 텍스트 위로 마우스를 가져갈 때 나타나는 텍스트 스니펫을 표시하는 스크린 설명 또는 정보 설명이라고도 합니다. 이러한 도구 설명은 인터넷이나 데스크탑의 모든 곳에 대체 텍스트, 레이블 또는 제목 텍스트로 표시됩니다.

인터넷을 열 때마다 이미지, 아이콘 또는 제목이 표시될 수 있습니다. 이 필드에 마우스 포인터를 가져가면 도구 설명인 텍스트 레이블이 표시됩니다.

마찬가지로 도구 설명 기능을 사용하여 웹 사이트에서 동일한 작업을 수행할 수 있습니다.

이 기사에서는 도구 설명을 추가하고 Elementor 및 PowerPack Addons를 사용하여 모양을 사용자 지정하는 방법을 안내합니다.

그러니 더 이상 고민하지 말고 계속 진행합시다.

툴팁이란 무엇입니까?

툴팁은 기본적으로 사용자가 인터넷 브라우저, 앱, 데스크톱 화면 등을 사용하는 동안 접하게 되는 작은 UI 요소입니다.

이름 자체로 툴팁을 이해하도록 합시다.

이름 자체에서 알 수 있듯이 도구 팁을 준다 트리거가 있을 때마다 요소 또는 필드에 대해 사용자에게 알립니다. 이 트리거는 코딩하는 동안 구조화된 대로 마우스를 올리거나 클릭할 수 있습니다.

이러한 도구 설명은 특정 요소, 필드 또는 도구를 나타내는 제목이나 간단한 설명이 포함된 작은 텍스트 상자입니다. 예를 들어 바탕 화면을 참조하여 도구 모음이나 Windows 시작 메뉴의 아이콘을 확인합니다.

보시다시피 ' Windows 시작 메뉴 '의 앱은 해당 응용 프로그램에 대한 정보를 나타내는 작은 텍스트 상자를 표시합니다. 이제 이것은 시스템이나 웹사이트의 어느 곳에서나 찾을 수 있는 툴팁의 모습입니다.

따라서 이러한 도구 설명을 웹사이트 전체에 표시하려면 추가해야 합니다.

도구 설명이 웹사이트에서 사용자 경험을 개선하는 방법

이러한 도구 설명이 웹 사이트의 사용자 경험을 개선하는 데 어떻게 도움이 되는지 살펴보겠습니다.

다음과 같은 웹사이트 영역에 도구 설명을 추가할 수 있습니다.

• 이미지, 아이콘 등과 같은 클릭 가능한 요소
• 제목은 텍스트 또는 클릭 가능한 링크를 가리킵니다.
• 이미지 핫스팟.
• 전자상거래 상품(WooCommerce 웹사이트를 운영하는 경우)

좋습니다. 웹사이트의 모든 영역에서 이 툴팁을 사용한다면 웹사이트를 둘러보는 모든 사용자에게 얼마나 쉽고 도움이 될지 생각해 보십시오.

예, 소비자는 그것이 편리하다는 것을 알게 될 것입니다. 이는 이러한 툴팁이 웹사이트의 어느 위치에든 관련 텍스트의 표시를 제공하여 사용자를 돕고 사용자 경험을 향상시키기 때문입니다.

PowerPack을 사용하여 Elementor에 도구 설명을 추가하는 방법은 무엇입니까?

툴팁의 도움으로 더 나은 사용자 경험을 위해 텍스트를 통해 사용자에게 중요한 메시지를 보여줄 수 있습니다.

웹사이트에 툴팁을 추가하려면 Elementor 및 PowerPack Addons를 설치하고 활성화해야 합니다.

Elementor용 PowerPack 애드온에는 80개 이상의 편리하고 창의적인 위젯, 300개 이상의 사전 디자인된 템플릿, 웹사이트의 전반적인 모양과 느낌을 향상시키는 유용한 확장 기능이 있습니다. 이러한 확장 중 하나는 웹사이트에 도구 설명 텍스트를 표시하는 데 사용할 수 있는 도구 설명입니다.

Elementor와 PowerPack을 사용하여 웹사이트에 툴팁을 추가하는 방법을 살펴보겠습니다.

도구 설명 확장 활성화

웹사이트에 도구 설명을 추가하려면 먼저 도구 설명 확장을 활성화하십시오.

그런 다음 WordPress 대시보드로 이동하여 Elementor로 이동한 다음 PowerPack을 클릭합니다.

그런 다음 확장 섹션으로 이동하여 도구 설명 기능을 활성화합니다.

완료되면 변경 사항 저장 버튼을 누르십시오.

Elementor에서 도구 설명 기능 활성화

Elementor 웹사이트의 특정 위젯/섹션에 도구 설명을 추가하려면 Elementor 편집기에서 페이지를 엽니다. 도구 설명을 표시할 요소를 선택한 다음 고급 탭 > PowerPack 으로 이동하십시오. 이제 ' 도구 설명 ' 기능을 활성화하십시오.

마지막으로 도구 설명 기능이 웹 사이트 페이지에 표시되도록 성공적으로 활성화되었습니다.

도구 설명 기능 사용자 지정

도구 설명 기능을 활성화했으므로 이제 매력적인 도구 설명 텍스트를 표시하도록 사용자 지정할 수 있는 기능을 살펴보겠습니다.

도구 설명 기능을 활성화하면 전체 모양을 향상시키는 데 사용할 수 있는 모든 사용자 지정 옵션이 나타납니다.

이 기능으로 얻을 수 있는 모든 툴팁 설정을 살펴보겠습니다.

• 툴팁 콘텐츠: 툴팁 에 표시할 콘텐츠를 추가합니다.
• 대상: 이 옵션을 사용하여 대상을 현재 요소 또는 사용자 지정 선택기로 선택할 수 있습니다.
• 트리거: 호버 또는 클릭 과 같은 사용 가능한 옵션에서 원하는 트리거를 선택합니다.
• 도구 설명 위치: 도구 설명 위치를 위쪽 , 아래쪽 , 왼쪽 또는 오른쪽 으로 선택합니다.
• 화살표 표시: 화살표 표시 여부를 선택합니다.
• 애니메이션: 이 기능을 사용하면 페이드 , 폴 , 성장 , 슬라이드 또는 스윙 과 같은 사용 가능한 옵션에서 툴팁에 애니메이션을 적용할 수 있습니다.
• 거리: 이 옵션은 핫스팟과 툴팁 사이의 거리를 조정할 수 있습니다.
• Z-인덱스: 이 옵션을 사용하면 툴팁의 Z-인덱스 값을 조정할 수 있습니다.

이제 모든 도구 설명 설정을 사용자 지정했으므로 다음 단계로 넘어갑니다.

도구 설명 기능에 사용할 수 있는 모든 스타일 옵션을 살펴보겠습니다.

• 배경색: 이 옵션을 사용하여 도구 설명의 배경색을 사용자 지정합니다.
• 텍스트 색상: 이 기능은 툴팁 텍스트 색상을 사용자 정의하는 데 사용할 수 있습니다.
• 타이포그래피: 이 옵션을 사용하여 툴팁 타이포그래피 텍스트를 사용자 정의할 수 있습니다.
• 상자 그림자: 이 옵션으로 상자 그림자 기능을 활성화하여 모양을 향상시킬 수 있습니다.
• 테두리 유형: 툴팁에 테두리를 추가하려면 이 옵션을 사용할 수 있습니다. 실선 , 점선 , 파선 , 이중선 및 홈 과 같은 사용 가능한 옵션에서 테두리 유형을 선택합니다.
• 테두리 반경: 도구 설명에 테두리를 적용한 경우 이 옵션을 사용하여 반경을 조정할 수 있습니다.
• 패딩: 툴팁의 패딩을 조정할 수 있습니다. 이렇게 하면 도구 설명 텍스트와 테두리 사이의 간격이 허용됩니다.
• 너비: 이 옵션을 사용하여 툴팁 너비를 조정할 수도 있습니다.

이러한 모든 기능을 사용자 지정하면 방금 만든 툴팁이 다음과 같이 표시됩니다.

마무리!

따라서 우리가 논의한 바와 같이 PowerPack Addons를 사용하여 Elementor 웹사이트에 툴팁을 추가하는 전체 프로세스입니다. 그러나 이것은 코딩을 통해서도 수행할 수 있습니다. 당신이 전문 코더라면.

이 튜토리얼이 Elementor 웹사이트에 툴팁을 추가하는 데 도움이 되었기를 바랍니다. PowerPack Elementor 애드온을 다운로드하여 Elementor 웹 사이트에서 놀라운 도구 설명 및 기타 여러 섹션을 만들려면 여기를 클릭하십시오.

Elementor 페이지를 디자인하고 사용자 정의 글꼴을 추가하는 방법을 찾고 있다면 Elementor 웹 사이트에 사용자 정의 글꼴을 추가하는 방법 기사가 안내할 것입니다.

문제가 발생한 경우 댓글 섹션에 질문을 남겨주세요.

트위터, 페이스북, 유튜브에서 우리와 함께하세요.