Você quer adicionar overlays de flipbox e efeitos de hover em imagens ao seu site WordPress?
Mesmo que você esteja usando um tema WordPress de alta qualidade, você pode se sentir limitado pelas opções de personalização. Nesse caso, você pode usar flipboxes e hovers de imagem para adicionar efeitos animados chamativos ao seu site.
Neste artigo, mostraremos como adicionar overlays de flip box e hovers de imagem ao seu site WordPress.
O Que É um Flipbox?
Um flipbox é uma caixa que vira quando você passa o mouse sobre ela. Você pode adicionar este efeito de hover a conteúdos como imagens e caixas de texto.
Semelhante a outros conteúdos animados como GIFs e sliders responsivos, o efeito flipbox pode torná-lo mais interativo e envolvente. Por exemplo, você pode mostrar a foto de um autor e nome, e então usar uma animação de flipbox para revelar sua biografia quando um leitor passar o mouse sobre ela.
Se você é um freelancer de WordPress, então você pode mostrar os logotipos de seus clientes e então usar uma animação de flip para revelar um link para cada projeto.
Embora esses efeitos animados possam aprimorar a experiência do usuário do seu site, é importante não exagerar. Um grande número de animações pode se tornar avassalador e confuso, e pode até afetar o desempenho do seu site.
Dito isso, vamos dar uma olhada em como você pode adicionar sobreposições de flipbox e efeitos de hover de imagem ao seu site WordPress.
Como Criar Sobreposições de Flipbox e Efeitos de Hover no WordPress
Existem muitas maneiras diferentes de adicionar animações ao WordPress, incluindo o uso do construtor de páginas SeedProd ou a escrita de código personalizado.
No entanto, a melhor maneira de criar efeitos de flipbox e hover é usando o plugin Flipbox – Awesomes Flip Boxes Image Overlay. Este plugin gratuito vem com vários estilos diferentes de flipbox apresentando uma mistura de imagens, texto e botões de call-to-action.
Crie um Novo Flipbox
A primeira coisa que você precisará fazer é instalar e ativar o plugin Flipbox – Awesomes Flip Boxes Image Overlay. Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.
Depois que o plugin for instalado e ativado, você pode criar seu primeiro flipbox indo para Flip Box » Criar Novo.
Isso mostra todos os diferentes modelos que você pode usar.
Se você não quiser usar nenhum desses designs, clique em 'Importar Modelos'.
Se você vir um modelo que deseja usar, clique em ‘Importar’ para adicioná-lo ao seu blog WordPress ou site.
Após escolher um design, você precisa clicar no botão ‘Criar Estilo’ dele.
No pop-up que aparece, digite um nome para o design do flipbox. Isso é apenas para sua referência, então você pode usar o que quiser.
Você também pode escolher qual layout usar clicando em 1º, 2º ou 3º.
Com isso feito, clique em ‘Salvar’.
Adicionar Conteúdo ao seu Flipbox
Você pode alterar a aparência do flipbox usando as abas Geral, Frente e Back-end.
Você pode alterar as fontes, o preenchimento e as margens. A maioria dessas configurações é autoexplicativa, então vale a pena examiná-las para ver quais efeitos diferentes você pode criar.
Quando você estiver satisfeito com a aparência da caixa, é hora de adicionar algum conteúdo. Simplesmente role até a prévia do flipbox na parte inferior da tela e passe o mouse sobre ela.
Quando aparecer, clique no botão ‘Editar’.
Para alterar o título que aparece na frente do flipbox, você pode digitá-lo no campo ‘Título da Frente’.
Depois disso, você pode alterar o ícone da frente clicando no campo ‘Ícone da Fonte’ e, em seguida, escolhendo uma nova imagem no pop-up que aparece.
Em seguida, você pode adicionar uma imagem à frente do flipbox. Basta clicar em ‘Upload Image’ e, em seguida, escolher um arquivo da biblioteca de mídia ou fazer upload de uma nova imagem do seu computador.
Se você ainda não tem uma imagem que deseja usar, pode criar uma usando um software de design web como o Canva.
Quando estiver satisfeito com o flipbox frontal, é hora de projetar o verso. Para começar, digite o conteúdo que deseja exibir na caixa ‘Backend Info’.
Frequentemente, você vai querer usar uma chamada para ação para enviar visitantes a uma página relacionada, como a listagem de um produto popular, informações de preços ou algum outro conteúdo.
Para alterar o texto que aparece no botão de chamada para ação, basta digitar em ‘Backend Button Text’. Você pode então adicionar o URL de destino ao campo ‘Link’.
Finalmente, clique em ‘Upload Now’ para alterar a imagem de fundo.
Quando estiver satisfeito com a configuração do verso do flipbox, é hora de clicar em ‘Submit’.
A prévia agora será atualizada para mostrar todas as suas alterações.
Criar Múltiplos Flipboxes
Neste ponto, você pode querer adicionar mais caixas clicando no ‘+’ na seção ‘Add New Flip Boxes’.
Isso permite que você crie vários flipboxes com o mesmo estilo e, em seguida, os organize em colunas e linhas.
Agora você pode criar mais flipboxes seguindo o processo descrito acima.
Por exemplo, você pode criar um flipbox para cada um dos seus planos de preços.
Adicionar o Flipbox ao seu Site WordPress
Quando estiver satisfeito com o flipbox, você pode adicioná-lo ao seu site WordPress usando um shortcode que o plugin fornece automaticamente.
No lado direito da sua tela, basta copiar o valor na caixa ‘Shortcode’.
Agora você pode adicionar o flipbox a qualquer página, post ou área pronta para widgets usando o shortcode.
Para instruções passo a passo sobre como colocar o shortcode, consulte nosso guia sobre como adicionar um shortcode no WordPress.
O plugin também possui um widget flipbox que você pode adicionar a qualquer área pronta para widgets do seu tema WordPress.
Se você criou mais de uma animação flipbox, precisará saber o ID. Para obter essa informação, você pode ir em Flip Box » Flip Box e olhar na coluna ‘ID’.
Na imagem a seguir, o ID do flipbox é 1.
Quando você tiver essa informação, vá para Aparência » Widgets.
Aqui, você precisa clicar no botão ‘+’.
Agora você pode digitar ‘Flipbox’.
Quando o widget correto aparecer, basta arrastá-lo e soltá-lo na barra lateral, rodapé ou seção similar.
O widget Flipbox mostrará uma de suas animações por padrão.
Para mostrar um flipbox diferente em vez disso, digite seu ID no campo.
Quando estiver satisfeito com a aparência do widget, clique em ‘Atualizar’.
Para mais informações, consulte nosso guia sobre como adicionar e usar widgets no WordPress.
Esperamos que este artigo tenha ajudado você a aprender como adicionar overlays e hovers flipbox ao seu site WordPress. Você também pode querer conferir nosso guia sobre como criar uma galeria de imagens, ou ver nossa seleção de especialistas dos melhores plugins de slider para WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Tem alguma pergunta ou sugestão? Por favor, deixe um comentário para iniciar a discussão.