Um guia completo sobre como adicionar dica de ferramenta no site Elementor

Você deseja adicionar dicas de ferramentas informativas ao seu site? A Elementor pode ajudá-lo a fazer isso rapidamente. É um dos plugins mais fáceis pelos quais você pode adicionar dicas de ferramentas a qualquer um dos seus elementos da web com apenas alguns cliques do mouse. Você não é obrigado a saber codificar.

Além disso, o Elementor possui muitos recursos úteis que você pode usar para personalizar a aparência da dica de ferramenta para combinar com o estilo do seu site. Neste guia, forneceremos um guia completo sobre como adicionar uma dica de ferramenta nos sites Elementor com a ajuda deste plug-in.

Além disso, abordaremos uma parte sobre como adicionar dicas de ferramentas usando códigos CSS do cliente . Portanto, se você é novo no Elementor ou o usa há anos, este artigo é para você!

Índice

• O que é uma dica de ferramenta?
• Como as dicas de ferramentas ajudam você a melhorar a experiência do usuário em seu site
• Como adicionar dicas de ferramentas ao seu site Elementor usando CSS personalizado
• Como adicionar dicas de ferramentas ao seu site Elementor usando HappyAddons
• Como evitar que as dicas pareçam spam
• Alguns ótimos exemplos de design de dicas de ferramentas
• Perguntas frequentes sobre como adicionar dica de ferramenta usando o Elementor
• Para você: você está pronto para adicionar dicas de ferramentas ao seu site?

O que é uma dica de ferramenta?

Uma dica de ferramenta é um trecho de texto que aparece quando você passa o mouse sobre determinados elementos da web. É uma propriedade CSS que permite adicionar informações ou conteúdo extra em torno dos elementos da web desejados. Isso pode incluir botões, links e até fotos.

Você pode usar dicas de ferramentas para adicionar conselhos úteis, informações sobre produtos ou contexto geral sobre o conteúdo. As dicas de ferramentas também facilitam a navegação. Assim, os usuários não precisam visitar várias páginas, pois você pode exibir cada vez mais informações na mesma página da web.

Como as dicas de ferramentas ajudam você a melhorar a experiência do usuário em seu site

As dicas de ferramentas podem ajudá-lo a adicionar informações adicionais para melhorar a experiência do usuário, satisfazer suas intenções de pesquisa e aumentar a velocidade de navegação na Web simultaneamente. Vamos explorar alguns dos principais benefícios do uso de dicas de ferramentas em um site.

1. Permite adicionar informações contextuais

As dicas de ferramentas permitem exibir informações contextuais sobre elementos da Web específicos. Você pode usá-lo para simplificar o processo de qualquer instrução complicada ou recursos da web.

Suponha que você tenha um artigo preenchido com muito texto e gráficos. As dicas de ferramentas podem ajudá-lo a destacar os pontos-chave de sua escrita para que os usuários entendam facilmente o que estão lendo.

2. Auxilia nos campos do formulário

Você precisa preencher vários campos sempre que preencher um aplicativo on-line, criar uma nova conta ou solicitar produtos de comércio eletrônico. As dicas de ferramentas podem fornecer aos usuários instruções úteis para que os usuários não cometam erros ao digitar suas informações.

Esse tipo de assistência se torna essencial quando os usuários tentam verificar seu cartão de crédito, solicitar um passaporte, preencher endereços de cobrança e muito mais.

3. Explica o processo de configuração do aplicativo da Web

Existem muitos aplicativos da Web que geralmente são complicados para novos usuários. Eles têm que gastar muito tempo entendendo como usar esses aplicativos. Mata muito o tempo deles.

Usando dicas de ferramentas, você pode demonstrar facilmente o processo de configuração de qualquer aplicativo da Web complicado. Ele pode ajudar você a economizar tempo valioso para seus usuários e fazer com que eles se sintam profissionais desde o início.

4. Ajuda a promover os recursos dos produtos

Não apenas para explicar coisas complexas, as dicas de ferramentas também podem ajudá-lo a promover os recursos do seu produto. Antes de comprar qualquer produto, os clientes adoram estudar suas características e facilidade de uso. As dicas de ferramentas podem ajudá-lo a fazer as duas coisas. Você pode destacar os recursos do seu produto e explicar o guia de uso.

Como adicionar dicas de ferramentas ao seu site Elementor usando CSS personalizado

Existem várias maneiras de adicionar dicas de ferramentas ao seu Elementor site usando CSS personalizado. Vamos explorar alguns métodos mais fáceis para eles.

Método 01 - Usando a tag <abbr> (abreviação) Para adicionar dicas de ferramentas

Usando a tag <abbr>, você pode criar dicas de ferramentas em seu site a qualquer momento. Você precisa adicionar o texto da dica de ferramenta dentro da tag title="...". Aqui está um exemplo do código abaixo que você pode usar para criar sua dica de ferramenta.

 John <abbr title="I'm an Elementor Expert!">DOE</abbr>

Você pode digitar esse código em qualquer campo Elementor que suporte a tag HTML. Depois de ter feito esta parte, você verá sua dica de ferramenta aparecendo sempre que passar o cursor sobre esse elemento.

Nota: Você não pode estilizar suas dicas de ferramentas usando este método! Mas esta é a maneira mais fácil de adicionar uma dica de ferramenta.

Método 2 - Criando dica de ferramenta com HTML e CSS

Agora, mostraremos como criar uma dica de ferramenta personalizável para que você possa alterar sua cor, alterar a posição, adicionar animação e muito mais. Para fazer isso, primeiro, você precisa escrever códigos simples para sua dica de ferramenta em seu arquivo HTML.

No Elementor, você obterá um widget HTML para criar um campo para escrever esse código. Arraste e solte o widget HTML na tela do Elementor.

Você receberá um campo aberto automaticamente na seção de conteúdo do Elementor. Você tem que adicionar uma classe e dar a ela um nome de classe, nós a chamamos de “tooltiptext”. Esta classe será usada para personalizar a dica de ferramenta. Abaixo está um exemplo de código HTML que você pode usar para criar suas dicas de ferramentas.

 <span class="tooltiptext" >My Skill Sets</span>

Aqui, usamos “Meus conjuntos de habilidades” como nosso texto de dica de ferramenta. Você deve escrever o texto de dica de ferramenta desejado nesta seção.

Compartilhamos os códigos CSS abaixo para permitir que você personalize ainda mais suas dicas de ferramentas. Você pode copiá-los e colá-los diretamente em sua seção CSS personalizada ou modificá-los como desejar. Você pode adicionar este trecho de código ao seu painel CSS personalizado do Elementor ou na seção CSS adicional do seu tema.

Se você deseja adicionar esse código ao seu CSS personalizado do Elementor, siga esta navegação - Elementor Site Settings > Custom CSS . Aqui está o código. Você pode copiar todo o trecho de código CSS para a dica de ferramenta ou personalizá-los de acordo com suas necessidades.

Observação: para navegar até o painel CSS adicional do seu tema, navegue até Admin Dashboard > Appearance > Customize > Additional CSS .

 .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; }

Se você quiser alterar a posição da dica de ferramenta, a posição da seta e muito mais, siga os snippets de código abaixo.

Para alterar a posição da dica de ferramenta e colocá-la na parte inferior, use o código a seguir.

 .tooltip .tooltiptext { width: 120px; top: 100%; left: 50%; margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ }

Para movê-lo para o lado direito, use o código abaixo.

 .tooltip .tooltiptext { top: -5px; left: 105%; }

Para colocá-lo no lado esquerdo, use o código a seguir.

 .tooltip .tooltiptext { top: -5px; right: 105%; }

Para modificar a posição da seta da dica de ferramenta e colocá-la na parte inferior, use o código abaixo.

 .tooltip .tooltiptext::after { content: " "; position: absolute; top: 100%; /* At the bottom of the tooltip */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; }

Se você quiser saber mais sobre a personalização da dica de ferramenta CSS, visite w3schools.

Como adicionar dicas de ferramentas ao seu site Elementor usando HappyAddons

Alguns de nós podem achar difícil criar uma dica de ferramenta usando códigos CSS personalizados. Hoje, criar e adicionar dicas de ferramentas ao seu site é possível sem uma única linha de codificação. HappyAddons está fornecendo a você um recurso de dica de ferramenta CSS sem código no Elementor.

Curiosamente, você pode obter esse recurso gratuitamente no HappyAddons. Não apenas adicionando textos, mas também você obterá os seguintes recursos avançados na dica de ferramenta HappyAddons.

• Alterar cor do texto
• Alterar tipografia de texto
• Alterar a posição da dica de ferramenta
• Adicionar cor de fundo do texto e imagem de fundo
• Adicionar tags dinâmicas
• Adicionar animação
• Adicionar seta de dica de ferramenta

Vamos explorar abaixo como adicionar dica de ferramenta no Elemnetor usando esta extensão.

Pré-requisitos para adicionar dicas de ferramentas

• Elementor Gratuito
• HappyAddons Grátis

Depois de instalar esses plugins em seu site, siga o seguinte processo.

Etapa 01: ativar a dica de ferramenta avançada

Como a dica de ferramenta é um recurso, não um widget, você deve habilitá-la primeiro. Para habilitar esse recurso,

• Primeiro, selecione qualquer widget ou elemento do seu site.
• Então, vá para o Aba Avançado .
• Role um pouco para baixo e expanda a opção Happy Tooltip .
• Ative a dica de ferramenta avançada Ativar .

Depois de ativar esse recurso, você terá mais duas seções para personalizar sua dica de ferramenta. Eles são Estilo e Conteúdo. Você pode vê-los na foto acima.

1. Estilo : Esta seção permitirá que você personalize o design e adicione uma imagem para sua dica de ferramenta. Falaremos sobre essa opção mais tarde em detalhes.
2. Conteúdo: você pode adicionar e editar o texto da dica de ferramenta, corrigir sua posição, adicionar animação e muito mais na seção de conteúdo.

Etapa 02: adicione seus textos de dica de ferramenta

Na seção de conteúdo, você pode não apenas adicionar os textos de dica de ferramenta desejados, mas também tags HTML para dar uma vantagem extra aos seus textos de dica de ferramenta. As tags HTML que você pode usar aqui são:

<b>,<i>,<u>,<s>,<br>,<em>,<del>,<ins>,<sub>,<sup>,<code>,<mark>,<small >,<strike>,<abbr>,<span>,<strong>,<a>,<q>,<img>,<dfn>,<time>,<cite>,<acronym>,<hr>

Adicionar tags dinâmicas ao conteúdo da dica de ferramenta

HappyAddons tem integração com suporte dinâmico para seu conteúdo de dica de ferramenta. Mas devido a algumas limitações, é um desafio para nós oferecer suporte a todas as tags. No momento, não oferecemos suporte a tags dinâmicas de código de acesso.

Além disso, você não pode ver os dados dinâmicos no modo de edição, apenas no modo de visualização.

Personalize a posição da sua dica de ferramenta Elementor

Você encontrará as configurações de controle de posição imediatamente abaixo da seção de conteúdo. Por padrão, sua dica de ferramenta será mostrada em cima de qualquer elemento. Você terá quatro opções diferentes nesta seção para definir sua posição de dica de ferramenta. Eles são:

• Topo
• Fundo
• Deixei
• Certo

Na foto abaixo, você pode ver que alteramos nossa posição da dica de ferramenta para a direita.

Adicionar animação às dicas de ferramentas do Elementor

Logo abaixo das configurações de posição, você encontrará a seção de animação. Você terá oito tipos de efeitos de animação disponíveis lá. Eles são:

• Aparecimento gradual
• Entrar
• Mais Zoom
• Quicar
• Deslize para baixo
• Deslize para a esquerda
• Deslizar para direita
• Deslizar para cima

Escolha aquele que atende às necessidades de sua dica de ferramenta. Observe a foto abaixo!

Você pode até personalizar a duração da animação para sua dica de ferramenta. Por padrão, é definido como 1000ms (milissegundos).

Adicionar ou remover a seta da sua dica de ferramenta Elementor

Você pode chamar esse ponteiro de dica de ferramenta ou seta de navegação de dica de ferramenta. Por padrão, você terá esta seta habilitada. Mas você pode desativá-lo se quiser. O processo é explicado abaixo.

Observação: você precisa desativar esse recurso se quiser adicionar uma imagem à dica de ferramenta. Caso contrário, você não encontrará a opção de adição de imagem disponível.

Acione sua dica de ferramenta

O gatilho define como o Elementor A dica de ferramenta aparecerá na tela. Existem duas opções de gatilho disponíveis:

• Clique
• Flutuar

Você terá a opção Distance logo abaixo da seção Trigger. Ele permitirá que você aumente ou diminua a distância entre seu elemento da web e sua distância com a dica de ferramenta.

Alinhar o texto da dica de ferramenta

Você obterá a opção de alinhamento de texto abaixo da seção Distância.

Etapa 03: estilize suas dicas de ferramentas do Elementor

Para personalizar ainda mais suas dicas de ferramentas, clique na seção de estilo na foto abaixo.

Aumente a largura da sua dica de ferramenta

A primeira opção na seção de estilo é Width . Arraste o botão de largura e ajuste-o para a medida desejada.

Aumente o tamanho da sua seta de dica de ferramenta

Você pode ajustar o tamanho da seta da dica de ferramenta em Tamanho da seta da dica de ferramenta . Você pode fazer isso arrastando o botão de medição abaixo.

Altere a tipografia de suas dicas de ferramentas

Você pode adicionar uma variedade de sabores à sua dica de ferramenta nas configurações de tipografia. Você obterá todas as configurações de tipografia do Elementor aqui.

Adicionar cor ao plano de fundo do texto da dica de ferramenta

Você pode adicionar cor ao plano de fundo do texto da dica de ferramenta na opção Cor do plano de fundo.

Adicione o raio da borda à sua dica de ferramenta

Por padrão, o raio da borda da dica de ferramenta é de 5 px. Mas você pode alterar como quiser. O painel de controle border-radius lhe dará autoridade completa para fazer isso.

Adicionar sombra de caixa à sua dica de ferramenta

Ao arrastar os botões de medição, você pode adicionar sombra às suas dicas de ferramentas nas configurações de sombra da caixa.

Etapa 04: Ative a opção de imagem

Já lhe dissemos uma vez que você precisa desabilitar o recurso de seta de dica de ferramenta se quiser habilitar a opção de imagem. Isso habilitará uma nova opção na seção de estilo.

Adicionar imagem e ajustar sua dica de ferramenta

Navegue até a seção de estilo. Clique na seção Tipo de plano de fundo e expanda-a. Você obterá um arquivo de imagem lá. Clique nele e faça o upload da foto desejada para a dica de ferramenta. Depois, você pode alterar sua posição, anexo, tamanho, cor do texto, raio da borda e muito mais.

É assim que você pode criar imagens maravilhosas e dicas de ferramentas baseadas em texto para o seu site. Dê uma olhada em como suas dicas de ferramentas finalmente depois de muitas personalizações.

Como evitar que as dicas pareçam spam

As dicas de ferramentas podem ser uma ótima maneira de fornecer informações extras aos usuários da web. Mas se muitas dicas de ferramentas forem exibidas em uma página, pode parecer spam e irritante. Há várias coisas que você deve considerar para evitar ao usar dicas de ferramentas para que suas páginas da web nunca pareçam spam.

Vamos explorá-los abaixo.

1. Mantenha suas dicas de ferramentas breves e simples

As dicas de ferramentas devem conter informações obrigatórias para os usuários entenderem – nada mais. Isso significa que você deve evitar longas listas de detalhes, textos desnecessários e elementos de design chamativos. Em vez disso, atenha-se a explicações simples e diretas.

2. Nunca mostre várias dicas de ferramentas juntas

Outra maneira de evitar que as dicas de ferramentas pareçam spam é limitar o número delas a serem exibidas por bloco/mesma linha. Mostre apenas uma dica de ferramenta por vez e permita que os usuários rolem para baixo se quiserem mais informações.

Se você sentir a necessidade de adicionar mais informações, considere maneiras alternativas. Por exemplo, você pode incorporar vídeos e infográficos em vez de compartilhar todas as cargas com dicas de ferramentas. Isso pode até garantir uma experiência de usuário mais rica para os usuários.

3. Mantenha o espaço entre os elementos

O espaço é uma grande parte de qualquer design de interface do usuário. Existe uma proporção ideal de quanto espaço você deve garantir em suas páginas da web. E a proporção é de 2:1, o que significa que um terço de suas páginas da web devem ter espaços.

O mesmo vale para dicas de ferramentas. Não os deixe muito congestionados para que os usuários possam respirar um pouco enquanto navegam em seu site.

4. Permita que os usuários ignorem a parte do tutorial

Se você estiver fornecendo tutoriais ou outro conteúdo útil, certifique-se de que os usuários possam ignorá-los se não quiserem. Isso ajudará a reduzir o número de dicas de ferramentas exibidas em uma página e incentivará mais pessoas a aproveitar seu conteúdo.

Alguns ótimos exemplos de design de dicas de ferramentas

Ser capaz de usar dicas de ferramentas de forma inteligente pode aumentar a experiência do usuário no crescimento e na exploração de um site. Vamos dar uma olhada rápida em alguns exemplos de casos de uso de dicas de ferramentas.

1. Amazonas

A Amazon é atualmente o site de comércio eletrônico número um na web. Você encontrará inúmeras dicas de ferramentas que a Amazon usa para guiá-lo em diferentes páginas e explicar todos os processos essenciais. Sempre que você acessar sua página inicial, receberá uma dica de ferramenta como a abaixo.

O melhor é que não inclui apenas instruções, mas também botões de CTA.

2. Wikipédia

A Wikipedia é uma enciclopédia online mantida pela comunidade de escritores voluntários. Sempre que você passar o cursor sobre qualquer palavra vinculada, você verá uma dica de ferramenta que mostra informações adicionais sobre essas palavras e terminologias.

3. AliExpress

Sempre que você tentar comprar produtos do AliExpress usando um cartão de crédito ou débito, você receberá algumas dicas explicando como concluir o processo de checkout. Aqui, você pode ver na foto abaixo dicas de ferramentas explicando onde você obterá o número do seu cartão em diferentes cartões digitais e os usará para concluir um pedido.

Espero que esses três exemplos sejam suficientes para você entender como você deve exibir dicas de ferramentas em seu site.

Perguntas frequentes sobre como adicionar dica de ferramenta usando o Elementor

Vamos ter uma resposta para algumas perguntas mais frequentes sobre como adicionar dicas de ferramentas nos sites Elementor.

Para você: você está pronto para adicionar dicas de ferramentas ao seu site?

Um bom design é a primeira coisa que pode impressionar seu público em um momento. De acordo com a Adobe, 38% dos usuários param de interagir com um site se seu conteúdo e layout forem menos atraentes. Mais de 55% dos usuários de internet dizem que não gostam de recomendar um negócio com um web design muito ruim - SocPub.

Portanto, se você deseja que seu site se destaque online, deve cuidar de todos os elementos de design da web. Com a ajuda de dicas de ferramentas, você pode simplificar coisas complicadas para seus usuários e melhorar a experiência do usuário.

Esperamos que, depois de ler este artigo, você saiba tudo sobre como adicionar dicas de ferramentas em sites Elementor, seja por meio de CSS personalizado ou por meio do futuro de dicas de ferramentas do Happyaddons. Se você ainda tiver alguma dúvida ou curiosidade sobre este tópico, basta nos informar através da seção de comentários.

Será um prazer ajudá-lo e orientá-lo em caso de qualquer dificuldade.