Como trocar uma imagem de fundo com um gif animado ao pairar
Publicados: 2019-06-14Alternar uma imagem de plano de fundo com um GIF animado ao pairar pode ser uma ótima maneira de dar vida ao seu conteúdo, ao mesmo tempo que fornece uma ilustração interessante para produtos ou serviços. Por exemplo, se você estiver promovendo os recursos de um produto de software específico, um GIF animado pode ajudar a ilustrar aspectos da funcionalidade do produto (fazemos isso para os produtos aqui em Elegant Themes). Mas, em vez de mostrar esse GIF inicialmente, você pode querer mostrar uma captura de tela dessa função que é substituída por uma versão animada (ou GIF) ao passar o mouse.
Neste tutorial, vou mostrar como criar uma sinopse que alterna uma imagem de fundo (estática) com um GIF animado ao passar o mouse. Começaremos explicando como criar uma captura de tela e GIF usando o Snagit (um software de captura de tela). Em seguida, veremos como implementar essas imagens de fundo em uma sinopse para que sejam ativadas em foco. A mudança real das imagens é extremamente fácil com as opções de foco de fundo do Divi.
Esse design ajudará a manter o design estático antecipadamente e, em seguida, envolverá os usuários sempre que eles interagirem com o conteúdo.
Vamos começar.
Espiada
Baixe o GIF Background no Hover 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.
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!
Para importar o layout para a sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para uma nova página com o Divi Builder ativo.
Vamos para o tutorial, vamos?
O que você precisa para começar
Inscreva-se no nosso canal no Youtube
Para começar, você precisará do seguinte:
- O Divi Theme instalado e ativo
- Software de captura de tela (ou uma combinação de ferramentas) que permite tirar screenshots, gravar vídeos na tela e criar GIFs. Neste tutorial, usarei o Snagit principalmente porque é uma solução multifuncional que uso todos os dias para minhas postagens de blog e tutoriais.
- Uma nova página criada para construir do zero no front end (construtor visual)
Depois disso, você terá uma tela em branco para começar a construir algumas guias de foco no Divi.
Parte 1: Criação de capturas de tela e GIFs
Para este projeto, queremos criar uma captura de tela para exibir como imagem de fundo estática para um módulo de blurb. Em seguida, queremos criar um GIF (uma imagem animada) que dê vida a essa imagem estática de fundo com uma breve ilustração de como o produto funciona. O truque é criar imagens e GIFS que se pareçam o suficiente para ter uma transição suave ao alternar uma imagem com a outra ao passar o mouse.
Assim que as duas imagens forem criadas, podemos usar a imagem estática como imagem de fundo inicial. Então, podemos mudar a imagem de fundo para a imagem gif ao passar o mouse sobre o módulo de sinopse.
Para criar as capturas de tela e GIFs, usarei o Snagit. Embora não seja um software livre, é realmente fácil de usar e permite que você crie capturas de tela, grave sua tela e disfarce gravações de tela em GIFs, tudo em um só lugar.
Criando a captura de tela da imagem estática
Para criar a captura de tela, abra o Snagit e abra a caixa de captura. Em seguida, certifique-se de escolher capturar uma imagem selecionando uma região da tela. Isso permitirá que você arraste uma área da tela para ser capturada como uma imagem. Para inicializar a captura de tela, clique no botão de captura.
Em seguida, clique e arraste a área de captura ao redor da área da tela que deseja capturar como imagem.
Salve a imagem no seu computador. Em seguida, abra a caixa Snagit Capture novamente e escolha capturar um vídeo selecionando uma região da tela. Para inicializar a captura de tela, clique no botão de captura.
Em seguida, clique e arraste a área de captura ao redor da área da tela que deseja capturar e gravar como um videoclipe. Para criar uma transição mais uniforme entre a imagem estática e o GIF, você desejará capturar a mesma área para o vídeo que fez para a imagem (ou o mais próximo possível).
Quando estiver pronto, clique no botão Gravar e faça a demonstração que deseja gravar.
Quando terminar, clique em parar para parar a gravação. Então você pode editar o videoclipe no editor Snagit. Quando terminar a edição, clique no botão Gif ao lado do vídeo para criar um Gif a partir do seu vídeo.
No pop-up Criar Gif, modifique as configurações de saída conforme necessário. Certifique-se de habilitar o looping para que seu gif se repita. Em seguida, clique no botão Criar.
Depois de criar o gif, salve-o em seu computador.
Agora você tem uma imagem estática e uma imagem GIF prontas para serem adicionadas ao seu design no Divi.
Parte 2: Criando uma sinopse que alterna a imagem de fundo com a imagem Gif animada ao passar o mouse
Se você ainda não fez isso, crie uma nova página e implante o Divi Builder para construir no front end. Em seguida, crie uma nova seção regular com uma linha de duas colunas.
Na coluna 1, adicione um módulo de sinopse.
Em seguida, atualize as configurações de conteúdo da seguinte forma:
Corpo: “O corpo do texto vai aqui”
Ícone de uso: SIM
Ícone: nuvem (veja a imagem)
Adicionar a imagem de fundo padrão
Em seguida, adicione a imagem de plano de fundo padrão à sinopse da seguinte maneira:
Imagem de fundo: carregue a imagem de fundo (a captura de tela) que você criou.
Tamanho da imagem de fundo: Ajustar (isso garantirá que toda a imagem permaneça visível)
Posição da imagem de fundo: Centro superior (isso manterá a imagem no topo da sinopse)
Adicionar a imagem Gif de plano de fundo do Hover
Depois de ter a imagem de plano de fundo inicial no lugar, implemente a opção de foco de fundo e selecione a guia de foco. Em seguida, adicione a imagem Gif para servir como uma nova imagem de plano de fundo no estado de foco.
Estilizando o Módulo Blurb
Continue a estilizar o módulo de sinopse atualizando as seguintes configurações de design:
Cor do ícone: # 6bb962
Ícone de círculo: SIM
Cor do círculo: #ffffff
Alinhamento de texto: centro
Fonte do título: Lora
Tamanho do texto do título: 34 px
Preenchimento: 50% superior, 5% inferior, 3% esquerdo, 3% direito
A verdadeira chave para este design é o preenchimento. Para colocar o plano de fundo acima do conteúdo da sinopse, você precisa adicionar cerca de 50% do preenchimento superior. E como o tamanho da imagem de fundo está definido para “ajustar” e a posição para “centro superior”, ela ficará bem acima do conteúdo, de acordo com a largura do navegador.
Por último, dê à sinopse uma sombra de caixa ao passar o mouse da seguinte maneira:
Sombra da caixa: veja a imagem
Posição vertical da sombra da caixa: 0 px
Força do desfoque de sombra da caixa: 0 px (padrão), 24 px (pairar)
Resultado final
Aqui está o resultado final.
E aqui está o design no tablet e no telefone.
E aqui está o que pode parecer com sinopses adicionais com diferentes capturas de tela e cores.
Pensamentos finais
Se você não está familiarizado com o uso de GIFs em seu site, definitivamente deveria considerá-lo. Eles podem realmente dar vida ao seu conteúdo e fornecer ilustrações extremamente úteis para os visitantes. E, com as opções de foco de fundo do Divi, você pode facilmente alternar uma imagem estática com um GIF ao pairar. Esta solução pode fornecer um design inicial menos perturbador que realmente envolve o usuário ao interagir com seu conteúdo. Espero que seja útil para seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!