Criação de descrições de serviço pop-out no Hover com Divi

A criação de descrições de serviço pop-out ao passar o mouse pode ser uma maneira eficaz de informar e envolver os usuários com informações adicionais. Muito parecido com uma dica de ferramenta, essas descrições pop-out revelarão mais informações sobre o seu serviço ao passar o mouse. Mas com o Divi, você tem o conjunto completo de ferramentas de design disponíveis no construtor Divi para criar designs destacáveis ​​sem qualquer CSS personalizado adicional.

Neste tutorial, mostraremos como é fácil criar descrições de serviço instantâneas em seu site Divi. O truque é posicionar seus módulos de forma que eles deslizem um atrás do outro e saiam sempre que você ajustar a largura da linha ao pairar.

Vamos começar!

Espiada

Baixe o Layout GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, 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.

Baixe os arquivos

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.

DOWNLOAD

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!

Inscreva-se no nosso canal no Youtube

Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, você precisará ter o seguinte:

1. O Divi Theme instalado e ativo
2. Uma nova página criada para construir do zero no front end (construtor visual)
3. Imagens a serem usadas para conteúdo simulado. Estaremos usando alguns do nosso pacote de layout de Investment Company para este tutorial.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Criação de descrições de serviço pop-out no Hover with Divi

Crie a seção e a linha

Primeiro, crie uma nova seção regular com uma linha de uma coluna.

Antes de adicionar qualquer módulo, atualize as configurações de linha da seguinte maneira:

Adicione uma imagem de fundo escura ou uma cor de fundo escura. Estou usando uma imagem de fundo abstrata do Pacote de Layout da Investment Company. Mas se você não quiser usar esse, basta adicionar uma cor de fundo de # 161c29.

• Largura da calha: 1
• Largura: 100%
• Altura: 320px (desktop), automático (tablet e telefone) \
• Preenchimento: 0 px superior, 0 px inferior

Adicionar um Módulo Blurb

Em seguida, adicione um módulo blurb à sua linha.

E atualize as configurações do módulo blurb da seguinte maneira:

• Título: Serviço
• Ícone: veja a captura de tela

Exclua o conteúdo do corpo padrão também.

• Imagem de fundo: adicione uma imagem de cerca de 320 x 215 pixels
• Tamanho da imagem de fundo: Ajustar
• Posição da imagem de fundo: Centro superior

• Cor do gradiente de fundo à esquerda: rgba (31,72,192,0,61)
• Cor certa do gradiente de fundo: # 161c29
• Posição inicial: 34%
• Posição final: 71%
• Colocar gradiente acima da imagem de fundo: SIM

• Cor do ícone: #ffffff
• Alinhamento de texto: centro
• Fonte do Título: Arquivo
• Cor do texto do título: #ffffff
• Tamanho do texto do título: 38px
• espaçamento entre letras do título: 4px
• Largura máxima: 320px
• Alinhamento do Módulo: centro
• Altura: 320px

• Preenchimento: 68px superior
• Cantos arredondados: 10 px
• Índice Z: 1

Adicionar o valor de índice z 1 é crucial para garantir que o módulo blurb permaneça acima dos outros módulos que eventualmente serão empilhados atrás dele.

Adicionar um módulo de apelo à ação

Em seguida, precisamos adicionar um módulo de call to action que será posicionado à esquerda do módulo de sinopse.

Esta será a nossa primeira de duas áreas de conteúdo que eventualmente surgirão ao passar o mouse.

Agora precisamos retirar a cor de fundo padrão e atualizar as configurações de design da seguinte maneira:

• Alinhamento de Texto: Esquerda
• Fonte do Título: Arquivo
• Tamanho do texto do título: 22px
• Largura: 320px
• Alinhamento do Módulo: Esquerda (desktop), centro (tablet e telefone)
• Altura: 320 px (desktop), automático (tablet e telefone)
• Margem: -320 px (desktop), 0 px (tablet e telefone)
• Preenchimento: 40px superior, 40px à esquerda, 40px à direita

Duplique o Módulo de Apelo à Ação e alinhe-o à direita

Para criar o segundo bloco de conteúdo que aparecerá à direita da sinopse, podemos implantar o modo de visualização wireframe e duplicar o módulo de call to action. Em seguida, abra as configurações da duplicata e atualize o alinhamento do módulo à direita.

Aqui está como o design deve ser até agora.

Criando o Botão

O elemento final que precisamos adicionar ao nosso design é o botão. Você pode adicionar um botão em qualquer um dos módulos de apelo à ação, se desejar. Mas, para este design, achei melhor adicionar um botão que permaneça visível na parte inferior de nossa linha.

Para criar o botão, implemente o módulo de visualização wireframe e adicione um módulo de botão diretamente sob o segundo módulo de chamada à ação para que seja o último módulo na linha / coluna.

Abra as configurações do módulo de botão e, em seguida, alterne o modo de visualização da área de trabalho para editar o botão visualmente.

Adicione o texto do botão “Saiba mais”.

Em seguida, atualize o estilo do botão da seguinte forma:

• Alinhamento do botão: centro
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 1f48c0
• Largura da borda do botão: 0 px
• Raio da borda do botão: 10 px
• Espaçamento entre letras dos botões: 4px
• Fonte do botão: Archivo

Agora tudo o que precisamos fazer é posicionar nosso botão.

• Margem (desktop): -25px no topo
• Margem (tablet e telefone): 25px superior, 50px inferior
• Índice Z: 2

O valor de índice z de 2 garantirá que o botão permaneça acima do módulo de sincronia (que tem índice z de 1).

Criando o efeito pop out hover

O efeito de foco principal de que precisamos para realizar as descrições de serviço pop-out envolve a alteração da largura da linha ao pairar. Para fazer isso, precisaremos dar à nossa linha uma largura estreita por padrão. Isso fará com que os módulos sejam empilhados um atrás do outro e permaneçam ocultos atrás do módulo de sinopse. Em seguida, expandiremos a largura da linha ao passar o mouse para expor os dois módulos de call to action ocultos.

Abra as configurações de linha e atualize a largura da seguinte forma:

• Largura máxima (desktop): 320 px
• Largura máxima (foco): 1080px
• Largura máxima (tablet e telefone) 1080px

Em seguida, para um toque final, adicione um raio de borda à linha e atualize a opção de estouro de visibilidade para visível para que o botão não fique oculto.

• Cantos arredondados: 10 px
• Excesso horizontal: visível
• Excesso vertical: visível

Resultado final

Verifique as descrições de serviço disponíveis até agora.

E aqui está na tela do tablet e do telefone.

Mais opções de design para experimentar

É sempre divertido experimentar mais opções de design agora que temos a configuração básica pronta. Aqui estão algumas sugestões que você pode tentar para suas descrições de serviço pop-out.

Adicionando uma Cor de Fundo da Seção

Se desejar, você pode adicionar uma cor de fundo à seção que corresponda à cor / imagem de fundo da linha para um design destacado exclusivo.

Vá para as configurações de linha e atualize o seguinte:

• Cor de fundo: # 161c29

Em seguida, verifique o resultado.

Usando apenas dois módulos

Se quiser um pop-out mais compacto usando apenas dois módulos, você pode excluir um dos módulos de call to action e, em seguida, alinhar o módulo blurb à esquerda para que os dois fiquem visíveis ao passar o mouse.

Para fazer isso, implante o modo de visualização wireframe. Em seguida, exclua o primeiro módulo de call to action diretamente no módulo blurb.

Depois disso, atualize o módulo blurb com um alinhamento do módulo à esquerda.

• Alinhamento do Módulo: Esquerda (desktop), Centro (tablet)

Finalmente, diminua a largura máxima da linha ao pairar para torná-la mais compacta. Abra as configurações de linha e atualize o seguinte:

• Largura máxima (foco): 700 px
• Largura máxima (tablet): 700 px

Aqui está o resultado final.

E aqui está sobre um fundo branco.

Pensamentos finais

Criar descrições de serviço pop-out ao passar o mouse é uma maneira única de envolver os visitantes com seu conteúdo. Essa funcionalidade funciona como uma dica de ferramenta sofisticada e informativa, com todos os recursos de design do Divi. E é muito fácil de fazer. Depois de ter os módulos dimensionados e posicionados, tudo que você precisa fazer é ajustar a largura da linha ao pairar. Sinta-se à vontade para experimentar diferentes módulos e conteúdos para ainda mais aplicativos. Espero que isso lhe dê um pouco mais de inspiração para fazer mais com o Divi.

Estou ansioso para ouvir de você nos comentários.

Saúde!