Escolha uma Página

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 overlays flip box e imagens flutuantes ao seu site WordPress.

Como criar sobreposições e flutuações flipbox no WordPress

O que é flipbox?

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

Flipbox Demo Animation

O termo vem do recurso exclusivo de “virar” que ocorre quando o mouse passa sobre a imagem. Você pode controlar como a imagem vira, junto com as informações e design de 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 um flipbox de foco de imagem a uma página de preços de produtos. Dessa forma, quando os usuários passarem o mouse sobre suas camadas de preços, o preço aparecerá.

Ou, se você é um freelancer, pode adicionar logotipos de empresas com as quais trabalhou e vincular cada projeto.

Embora esses efeitos animados possam aprimorar a experiência do usuário do 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.

Dito isso, 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 foco no WordPress

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

No entanto, a abordagem que recomendamos é usar o Flipbox – Sobreposição de imagem de flip Boxes incrível plugar. Este plugin é flexível e fácil de usar. É o melhor plugin para WordPress flipbox e hover de imagem.

A versão gratuita do plugin oferece rapidez e simplicidade. Depois que o plug-in estiver instalado, você pode adicionar rapidamente flip boxes de boa aparência ao seu site.

Se precisar de mais opções de personalização, você pode querer 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, não há necessidade de atualizar.

A primeira coisa que você precisa fazer é instalar e ativar o Flipbox – Sobreposição de imagem de flip Boxes incrível plugar. Para obter mais detalhes, consulte 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 traz 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’ próximo ao número do Estilo.

Flipbox clique no botão importar

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

Você precisa clicar em ‘Criar estilo’ para carregar seu primeiro design flipbox.

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

Escolha o flipbox para personalizar

A 1ª, 2ª e 3ª opções de ‘Layouts’ correspondem às flipboxes individuais no layout. Clique em ‘Salvar’ depois de fazer suas escolhas.

É importante mencionar que seu design final corresponderá muito ao modelo flipbox, então é melhor escolher um modelo que se pareça com a aparência 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á estão ótimas.

A seguir, vamos alterar 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 frontal, o texto posterior 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 o ícone e o título da frente do flipbox

Se você quiser adicionar uma imagem de plano 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 a parte de trás 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 back-end

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 seus usuários irão quando ele for clicado.

Adicionar botão flipbox de backend e link

Por fim, clique em ‘Carregar agora’ 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.

Carregar imagem de fundo de back-end

Assim que terminar de editar, 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 inteira de flipboxes, clique no ícone ‘+’ na metacaixa ‘Adicionar novas flipboxes’.

Adicionar uma linha de flipboxes

Isso abrirá uma caixa pop-up semelhante à acima, que permite personalizar 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 chamada ‘Shortcode’, copie o shortcode que se assemelha à imagem abaixo.

Copiar shortcode 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á estiver no ar.

Colar shortcode flipbox

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

Observe que, conforme você redimensiona a janela do navegador, as flipboxes se ajustam, pois são 100% responsivas.

Flipbox live WordPress display

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

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

Adicionar widget flipbox

Em seguida, 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 plug-in 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 como otimizar imagens para SEO e nosso guia de solução de problemas sobre como corrigir problemas comuns de imagens do WordPress.

Se você gostou deste artigo, por favor, assine nosso Canal do Youtube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e o Facebook.

A postagem Como criar sobreposições e navegações Flipbox no WordPress apareceu primeiro no WPBeginner.

Fonte