Como criar hovers e Flipbox no WordPress

Quer adicionar overlays flipbox e efeitos de foco de imagem ao seu site WordPress?

Mesmo se estiver usando um tema WordPress de alta qualidade, você pode se sentir limitado pelas opções de personalização. Flipboxes e imagens flutuantes adicionam efeitos animados atraentes ao seu site.

Neste artigo, mostraremos como adicionar sobreposições de flip box e deslocamentos de imagem (hovers) ao seu site WordPress.

O que é um flipbox?

É uma caixa que vira quando você passa o mouse sobre ela. Você pode adicionar esse efeito de animação de rolagem a seções específicas do seu site, incluindo caixas de texto e imagens.

Flipbox de demonstração de animação

O termo vem do recurso exclusivo de “virar” que ocorre quando o mouse passa sobre a imagem. Você pode controlar como a imagem é invertida, junto com as informações e o layout em ambos os lados da imagem.

Se o seu site for relativamente estático, você pode usar um efeito flipbox para torná-lo mais interativo.

Por exemplo, você pode adicionar uma flipbox de imagem flutuante à página de preços de um produto. Dessa forma, quando os usuários passarem o mouse sobre seus níveis de preços, o preço aparecerá.

Ou, se você for um freelancer, poderá adicionar logotipos da empresa com a qual trabalhou naquele flip e um link para cada projeto.

Embora esses efeitos animados possam melhorar a experiência do usuário no seu site, é importante não exagerar.

Pense no efeito flipbox como adicionar tempero a uma refeição. Está aí para realçar os sabores e ingredientes existentes, mas se for demais, vai estragar o prato.

Com isso dito, vamos dar uma olhada em como você pode adicionar overlays flipbox e efeitos de foco de imagem ao seu blog ou site WordPress.

Como criar sobreposições de flipbox e efeitos de rolagem no WordPress

Você pode adicionar flipboxes e efeitos de rolagem ao seu site WordPress usando vários métodos, como o construtor de páginas Elementor ou adicionando CSS personalizado.

Leia Também:  Como criar um link curto no WordPress (a maneira mais fácil)

No entanto, a abordagem que recomendamos é usar o Flipbox – Sobreposição de imagem de Flip Box Awesomes plugue. Este plugin é flexível e fácil de usar. É o melhor plugin do WordPress para flipbox e imagem flutuante.

A versão gratuita do plugin oferece velocidade e simplicidade. Uma vez que o plugin é instalado, você pode adicionar rapidamente flip boxes legais ao seu site.

Se precisar de mais opções de personalização, você pode atualizar para a versão premium do plugin. Isso permite que você controle as cores de seus flipboxes e adicione CSS personalizado.

Você pode descobrir que os modelos existentes já têm uma ótima aparência quando adicionados ao seu site; neste caso, nenhuma atualização é necessária.

A primeira coisa que você precisa fazer é instalar e ativar o Flipbox – Sobreposição de imagem de Flip Box Awesomes plugue. Para obter mais detalhes, verifique nosso guia passo a passo sobre como instalar um plugin do WordPress.

Assim que o plugin estiver instalado e ativado, você pode criar sua primeira flipbox indo para Flip Box »Criar novo.

Crie uma nova flipbox

Isso mostra toda a seleção de modelos.

Se isso não for suficiente, você pode clicar na opção de menu ‘Importar modelos’ para ainda mais modelos que você pode usar.

Importar um modelo flipbox

Com a versão gratuita do plugin, existem 5 modelos diferentes para escolher, além de outros 10 modelos que você pode importar.

Para importar um novo modelo personalizável, clique no botão “Importar” ao lado do número do estilo.

Flipbox clique no botão importar

Agora é a hora de selecionar e começar a personalizar seu modelo.

Você precisa clicar em ‘Criar estilo’ para fazer o upload do seu primeiro layout flipbox.

Um menu pop-up aparecerá onde você pode nomear sua flipbox e escolher o layout que deseja personalizar.

Leia Também:  Baixe 10 plug-ins grátis para acelerar seu site WordPress

Escolha qual flipbox personalizar

A 1ª, 2ª e 3ª opções de ‘Desenhos’ correspondem às flipboxes individuais no desenho. Clique em “Salvar” depois de escolher.

É importante mencionar que seu design final será muito parecido com o modelo flipbox, portanto, é melhor escolher um modelo que se pareça com o que você deseja em seu site.

Existem três guias principais que você usará para alterar a aparência de sua flipbox, ‘Geral’, ‘Frente’ e ‘Backend’.

Menu de configurações gerais Flipbox

Em cada uma dessas guias, você pode alterar as fontes, o preenchimento e as margens. Mas achamos que as opções padrão já parecem muito legais.

A seguir, vamos mudar o texto em ambos os lados da flipbox.

Passe o mouse sobre a flipbox na parte inferior da tela e clique em “Editar”.

Texto de edição de visualização do flipbox

Isso abrirá uma janela pop-up que permite alterar o texto da frente, o texto de trás e a imagem de fundo.

Para alterar o título, edite a caixa de texto ‘Título frontal’ e a caixa ‘Ícone de fonte:’ se desejar que um ícone diferente seja exibido.

Alterar legenda frontal e ícone do flipbox

Se você deseja adicionar uma imagem de fundo, clique em ‘Carregar imagem’ à direita da opção ‘Imagem frontal’.

Em seguida, carregue uma nova imagem ou selecione uma imagem de sua biblioteca de mídia existente.

Carregar imagem de fundo frontal para flipbox

Depois disso, você seguirá a mesma série de etapas para o verso do flipbox em ‘Configurações de back-end’.

Aqui você pode alterar o título e o texto que é exibido quando o cartão é virado.

Alterar texto flipbox de backend

Você também pode alterar os campos ‘Texto do botão de back-end’ e ‘Link’.

Isso altera o texto do botão e para onde os usuários irão quando ele for clicado.

Adicionar botão e link de backend flipbox

Finalmente, clique em ‘Upload Now’ para alterar a imagem de fundo na parte de trás do flipbox.

Da mesma forma que acima, você pode carregar uma imagem ou selecionar uma da sua biblioteca de mídia.

Leia Também:  Baixe 10 plug-ins grátis para acelerar seu site WordPress

Carregar imagem de fundo de back-end

Depois de terminar a edição, certifique-se de clicar no botão “Enviar” para salvar suas alterações.

Você notará que suas novas alterações aparecerão na janela ‘Visualizar’ imediatamente.

Se você deseja criar uma linha completa de flipboxes, clique no ícone ‘+’ na metacaixa ‘Adicionar novos flipboxes’.

Adicionar uma linha de flipboxes

Uma caixa pop-up semelhante à acima aparecerá, permitindo que você personalize sua segunda flipbox.

Agora você já criou e personalizou seus flipboxes, então é hora de adicioná-los ao seu site WordPress.

A maneira mais fácil de fazer isso é usando o código de acesso incluído. No lado direito da tela, há uma metacaixa rotulada ‘Código Curto’, copie o código curto que se parece com a imagem abaixo.

Copiar shortcode do flipbox

Em seguida, navegue até uma página ou postagem à qual deseja adicionar a flipbox e cole seu código de acesso.

Em seguida, clique em ‘Publicar’ ou ‘Atualizar’ se sua postagem já tiver sido publicada.

Cole o shortcode da flipbox

Seus novos flipboxes agora estarão ativos em seu site.

Observe que, conforme o tamanho da janela do navegador muda, as flipboxes se ajustam, pois são 100% responsivas.

Tela Flipbox Live WordPress

Este plugin também inclui um widget flipbox que você pode adicionar a qualquer área de widget compatível com o seu tema.

Para fazer isso, navegue até Aparência »Widgets e procure o widget intitulado ‘Flipbox – Awesomes Flip Boxes Image Overlay’.

Adicionar widget flipbox

Você pode arrastar e soltar o widget no local de sua preferência.

Por fim, insira o ID do estilo, que pode ser encontrado no menu principal do plugin Flipbox, e clique em ‘Salvar’.

ID do widget Flipbox

Esperamos que este artigo tenha ajudado você a aprender como adicionar overlays flipbox e hovers ao seu site WordPress. Você também pode querer ver nosso guia sobre otimização de imagens para SEO e nosso guia de solução de problemas para resolver problemas comuns de imagens do WordPress.

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: