Como colocar dicas de ferramentas em foco em qualquer lugar da sua página com o Divi
Publicados: 2019-08-28Todas as semanas, fornecemos pacotes de layout Divi novos e gratuitos que você pode usar em seu próximo projeto. Para um dos pacotes de layout, também compartilhamos um caso de uso que o ajudará a levar seu site para o próximo nível.
Esta semana, como parte de nossa iniciativa de design Divi em andamento, vamos mostrar como criar e colocar dicas de ferramentas em qualquer lugar da sua página com o Divi. Esta é uma ótima maneira de compartilhar informações secundárias com seus visitantes sem incluí-las diretamente na página.
Vamos lá!
Antevisão
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Baixe o layout de dicas de ferramentas Hover GRATUITAMENTE
Para colocar suas mãos no layout de dicas de ferramentas de navegação gratuita, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Criar nova página usando o layout da página inicial do Dog Walker
Adicionar nova página
A primeira coisa que você precisa fazer é criar uma nova página em Pages> Add New . Continue dando um título à sua página, publicando a página e mudando para o Visual Builder.
Carregar página inicial do Dog Walker
Em seguida, carregue o layout da página de destino em sua página. Embora estejamos usando este pacote de layout para passar pela técnica de dicas de ferramentas, você pode fazer essa abordagem se aplicar a qualquer tipo de layout em que estiver trabalhando.
Criar Design de Dicas de Ferramentas Hover
Adicionar nova linha ao fundo da seção
Estrutura da coluna (decidir quantas dicas de ferramentas você precisa)
Depois de fazer upload do layout da página de destino, é hora de começar a criar as dicas de ferramentas. Nós os adicionaremos a um local específico na página, mas você pode colocá-los em qualquer lugar usando as opções de tradução de transformação. Localize a seguinte seção em sua página e adicione uma linha de três colunas ao final dela:
Largura máxima da linha
Para garantir que os designs das dicas de ferramentas apareçam no lugar certo, usaremos a mesma largura máxima da linha que foi usada para a linha que está acima dela. Vá para as configurações de dimensionamento da linha e ajuste a largura máxima de acordo:
- Largura máxima: 1280 px
Espaçamento
Para reduzir o espaço que é ocupado pelo contêiner de linha, vamos remover o preenchimento padrão superior e inferior nas configurações de espaçamento.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Transbordamentos
Também estamos garantindo que os estouros da linha sejam visíveis na guia avançada.
- Excesso horizontal: visível
- Excesso vertical: Visível
Adicionar Módulo de Texto de Dica de Ferramenta à Coluna 1
Adicionar conteúdo à caixa de conteúdo
Intervalo de ponto de interrogação
É hora de começar a criar o primeiro design de dica de ferramenta! Usaremos um Módulo de Texto. Vamos adicionar um span (para o ícone de dica de ferramenta) e um div (para o conteúdo de dica de ferramenta) dentro da caixa de conteúdo. Isso nos dará mais liberdade para definir o estilo do ícone de dica de ferramenta instantâneo e do conteúdo da dica de ferramenta individualmente. Comece adicionando o intervalo e atribuindo o 'ponto de interrogação' da classe a ele.
Tooltip Div
Continue adicionando um div à caixa de conteúdo com a classe 'tooltip-content'. Adicione o conteúdo da dica de ferramenta de sua escolha neste div.
Configurações de texto
Vá para a guia de design e altere as configurações de texto de acordo:
- Fonte do texto: Open Sans
- Cor do texto: #ffffff
Configurações de texto H3
Modifique as configurações de texto H3 também.
- Fonte do título 3: Amatic SC
- Cor do texto do título 3: #ffffff
- Tamanho do texto do título 3: 30px
Dimensionamento
Também estamos brincando com a largura e a altura do módulo para criar o efeito de foco.
- Largura: 300px
- Altura: 42px
Espaçamento
Adicione um pouco de preenchimento superior também.
- Enchimento superior: 10 px
Visibilidade padrão
Agora, no estado padrão, queremos que tudo o que está abaixo do ícone de dica de ferramenta seja ocultado. É por isso que ocultaremos os transbordamentos na guia avançada.
- Excesso horizontal: oculto
- Estouro vertical: oculto
Hover Visibility
No pairar, no entanto, queremos que tudo apareça. Faremos isso tornando os overflows visíveis ao pairar.
- Excesso horizontal: visível
- Estouro vertical: visível
Adicionar Módulo de Código Abaixo do Módulo de Texto
Agora que estilizamos o módulo, ainda precisamos estilizar o span e div dentro da caixa de conteúdo usando as classes CSS que atribuímos a ele. Adicione um Módulo de Código logo abaixo do Módulo de Texto da dica de ferramenta.
Adicionar código CSS a divs de estilo no módulo de texto
Adicione as seguintes linhas de código CSS para definir o estilo das diferentes partes do Módulo de Texto:
<style>
.question-mark {
background-color: #000;
padding: 10px 16px 10px 16px;
border-radius: 500px;
}
.tooltip-content {
background-color: #ee6a5b;
padding: 20px;
border-radius: 5px;
}</style>
Clone Tooltip Text Module duas vezes e coloque nas colunas restantes
Depois de preencher a primeira coluna, você pode clonar o Módulo de texto de dica de ferramenta duas vezes e colocar as duplicatas nas duas colunas restantes da linha.
Alterar o conteúdo da dica de ferramenta
Certifique-se de alterar o conteúdo da dica de ferramenta de cada duplicata.
Alterar a posição da dica de ferramenta (usando Transform Translate)
Dica # 1
Por último, mas não menos importante, precisaremos reposicionar as dicas de ferramentas onde quisermos na página. Para obter exatamente o mesmo resultado que foi mostrado na visualização desta postagem, abra a primeira dica de ferramenta Módulo de texto e aplique os seguintes valores de conversão de transformação:
- À direita: -450 px (desktop), -2000 px (tablet), -1900 px (telefone)
Dica # 2
Vá para o Módulo de texto de dica de ferramenta na segunda coluna e altere os valores de conversão de transformação da seguinte maneira:
- À direita: -400 px (desktop), -1300 px (tablet), -1250 px (telefone)
Dica # 3
Faça a mesma coisa para o Módulo de texto de dica na coluna 3 e pronto!
- Direita: -500 px (desktop), -600 px (tablet e telefone)
Antevisão
Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Pensamentos finais
Neste post, mostramos como criar e colocar dicas de ferramentas instantâneas em qualquer lugar da página sem a necessidade de um plugin adicional. Esta é uma ótima maneira de adicionar informações adicionais sem incluí-las diretamente em sua página. Este tutorial de caso de uso é parte de nossa iniciativa de design Divi em andamento, onde tentamos colocar algo extra em sua caixa de ferramentas de design a cada semana. Se você tiver alguma dúvida, certifique-se de deixar uma pergunta na seção de comentários abaixo!
Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.