Como adicionar dica de ferramenta no site Elementor

Você está procurando uma maneira de adicionar uma dica de ferramenta ao seu site Elementor? Se for esse o caso, você caiu na página certa.

Uma dica de ferramenta também é conhecida como dica de tela ou dica de informação que mostra um trecho de texto que aparece ao passar o mouse sobre qualquer imagem ou texto específico. Essas dicas de ferramentas estão em toda parte na Internet ou na área de trabalho como texto alternativo, rótulos ou texto de título.

Sempre que você abrir a internet, poderá ver qualquer imagem, ícone ou título; se você passar o ponteiro do mouse sobre esses campos, verá um rótulo de texto que é uma dica de ferramenta.

Da mesma forma, usando o recurso de dica de ferramenta, você pode fazer o mesmo em seu site.

Neste artigo, orientaremos você na adição de uma dica de ferramenta e na personalização de sua aparência usando os complementos Elementor e PowerPack.

Então sem mais delongas, vamos em frente.

O que é uma dica de ferramenta?

Uma dica de ferramenta é basicamente um pequeno elemento de interface do usuário que um usuário encontra ao usar navegadores de internet, aplicativos, telas de desktop, etc.

Vamos tentar entender a dica de ferramenta pelo próprio nome.

Veja, como o próprio nome sugere, é uma ferramenta que dá dicas aos usuários sobre um elemento ou campo sempre que houver um gatilho. Esse acionador pode ser passar o mouse ou clicar, conforme estruturado durante a codificação.

Essas dicas de ferramentas são pequenas caixas de texto contendo uma breve descrição ou um título indicando aquele elemento, campo ou ferramenta em particular. Por exemplo, consulte a tela da área de trabalho e observe os ícones na barra de ferramentas ou no menu Iniciar do Windows.

Como você pode ver, o aplicativo no ' menu iniciar do Windows' exibe uma pequena caixa de texto indicando informações sobre esse aplicativo. Agora, esta é a aparência de uma dica de ferramenta que você pode encontrar em qualquer lugar do seu sistema ou site.

Portanto, se você deseja que essas dicas de ferramentas sejam exibidas em todo o seu site, é necessário adicioná-las.

Como as dicas de ferramentas melhoram a experiência do usuário em seus sites

Vamos ver como essas dicas de ferramentas podem ajudar você a melhorar a experiência do usuário em seu site.

As dicas de ferramentas podem ser adicionadas a essas áreas em seu site, como:

• Elementos clicáveis, como imagens, ícones, etc.
• Os títulos passam o texto ou links clicáveis.
• Ponto de acesso de imagem.
• Produtos de comércio eletrônico (se você administra um site WooCommerce.)

Ok, pense bem, se você usar essas dicas de ferramentas em todas essas áreas do seu site, quão fácil e útil será para todos os usuários que visitam seu site.

Sim, os consumidores acharão conveniente, e isso ocorre porque essas dicas de ferramentas ajudam os usuários, oferecendo indicações de textos relevantes onde quer que sejam colocados em seu site, e isso melhorará a experiência do usuário.

Como adicionar dicas de ferramentas no Elementor usando o PowerPack?

Com a ajuda de uma dica de ferramenta, você pode exibir uma mensagem importante por meio de texto para seus usuários para uma melhor experiência do usuário.

Para adicionar uma dica de ferramenta ao seu site, você precisa instalar e ativar os complementos Elementor e PowerPack.

O PowerPack Addons for Elementor possui mais de 80 widgets úteis e criativos, mais de 300 modelos pré-projetados e extensões úteis para aprimorar a aparência geral do seu site. Uma dessas extensões é uma dica de ferramenta que você pode usar para exibir textos de dicas de ferramenta em seu site.

Então, vamos ver como você pode adicionar uma dica de ferramenta ao seu site usando o Elementor e o PowerPack.

Ativar a extensão de dica de ferramenta

Para adicionar uma dica de ferramenta ao seu site, primeiro ative a extensão de dica de ferramenta.

Em seguida, vá para o painel do WordPress, navegue até o Elementor e clique em PowerPack.

Em seguida, navegue até a seção Extensões e ative o recurso Dicas de ferramenta .

Feito isso, clique no botão Salvar alterações .

Ative o recurso de dica de ferramenta no Elementor

Para adicionar uma dica de ferramenta a qualquer widget/seção específica em seu site Elementor, abra sua página no editor Elementor. Selecione o elemento onde deseja exibir a dica de ferramenta, então vá para a aba Avançado > PowerPack ; agora ative o recurso ' Tooltip ' .

Por fim, o recurso de dica de ferramenta é ativado com sucesso para ser exibido na página do seu site.

Personalizar o recurso de dica de ferramenta

Agora que você ativou o recurso de dica de ferramenta, vamos ver os recursos que você pode personalizar para exibir um texto de dica de ferramenta atraente.

Depois de ativar o recurso de dica de ferramenta, todas as opções de personalização aparecerão para você usar para aprimorar sua aparência geral.

Vamos ver quais são todas as configurações de dicas de ferramentas que você obterá com esse recurso:

• Conteúdo da dica de ferramenta: adicione o conteúdo que você deseja exibir na dica de ferramenta.
• Destino: usando esta opção, você pode selecionar o destino como um elemento atual ou um seletor personalizado.
• Acionador: selecione o acionador desejado nas opções disponíveis, como passar o mouse ou clicar .
• Posição da dica de ferramenta: escolha a posição da dica de ferramenta como superior , inferior , esquerda ou direita .
• Mostrar seta: selecione uma opção para mostrar uma seta ou não.
• Animação: usando esse recurso, você pode aplicar animação à dica de ferramenta a partir das opções disponíveis, como fade , fall , grow , slide ou swing .
• Distância: Esta opção pode ajustar a distância entre o ponto de acesso e a dica de ferramenta.
• Índice Z: Com esta opção, você pode ajustar o valor do índice Z para a dica de ferramenta.

Agora que você personalizou todas as configurações da dica de ferramenta, vamos para a próxima etapa.

Vamos ver todas as opções de estilo disponíveis para o recurso de dica de ferramenta:

• Cor de fundo: Personalize a cor de fundo da dica de ferramenta usando esta opção.
• Cor do texto: Este recurso pode ser usado para personalizar a cor do texto da dica de ferramenta.
• Tipografia: O texto da tipografia da dica de ferramenta pode ser personalizado usando esta opção.
• Box Shadow: Você pode habilitar o recurso box shadow com esta opção para aprimorar sua aparência.
• Tipo de Borda: Se você deseja adicionar uma borda à dica de ferramenta, você pode usar esta opção. Escolha um tipo de borda entre as opções disponíveis, como sólido , pontilhado , tracejado , dobrado e ranhurado .
• Raio da borda: se você aplicou uma borda à dica de ferramenta, poderá ajustar seu raio usando esta opção.
• Preenchimento: Você pode ajustar o preenchimento da dica de ferramenta; isso permitirá o espaçamento entre o texto da dica de ferramenta e a borda.
• Largura: Você também pode ajustar a largura da dica de ferramenta com esta opção.

Depois de personalizar todos esses recursos, a dica de ferramenta que acabamos de criar ficará assim.

Empacotando!

Então, como discutimos, todo o processo para adicionar uma dica de ferramenta em um site Elementor usando PowerPack Addons. No entanto, isso também pode ser feito via codificação; se você for um codificador profissional.

Esperamos que este tutorial tenha ajudado você a adicionar uma dica de ferramenta ao seu site Elementor. Clique aqui para obter os complementos do PowerPack Elementor para criar dicas de ferramentas incríveis e muitas outras seções em seu site Elementor.

Se você estiver projetando sua página do Elementor e procurando maneiras de adicionar fontes personalizadas, o artigo Como adicionar fontes personalizadas aos sites do Elementor o guiará.

Se você enfrentou algum problema, sinta-se à vontade para deixar suas dúvidas na seção de comentários.

Junte-se a nós no Twitter, Facebook e YouTube.