Como criar sobreposições e focos Flipbox no WordPress 

Quando se trata de criar um site WordPress atraente e envolvente, adicionar elementos interativos pode melhorar notavelmente a experiência do usuário. O Flipbox é um desses elementos que permite mostrar o conteúdo de forma dinâmica e interativa. 

Nesta postagem do blog, exploraremos o que é Flipbox, a função das sobreposições e focos do Flipbox em sites WordPress e forneceremos um guia passo a passo sobre como adicionar sobreposições e focos do Flipbox no WordPress.

O que é FlipBox?

Um Flipbox é um recurso de design que permite fornecer material como uma caixa que vira ou gira conforme o usuário passa o mouse sobre ela. Geralmente inclui dois lados, a frente e o verso, com conteúdos diferentes em cada lado. 

Papel das sobreposições e focos do Flipbox no site WordPress

Sobreposições e focos Flipbox podem ajudar a melhorar a experiência do usuário e o apelo visual do seu site WordPress. Eles permitem chamar a atenção para detalhes importantes, destacar recursos ou exibir suas fotos e vídeos de forma dinâmica. Você pode tornar seu site mais atraente, estimular o envolvimento do usuário e melhorar a estética geral do design incluindo sobreposições e focos do Flipbox. 

Um guia passo a passo para adicionar Flipbox ao site WordPress 

Para adicionar sobreposições e focos Flipbox ao seu site WordPress, você precisará de um plugin adequado que ofereça essa funcionalidade. Vários plug-ins Flipbox estão disponíveis, mas duas opções populares são Elementor e ElementosKit Flipbox plug-ins. Esses plug-ins oferecem opções fáceis de usar e uma variedade de configurações de personalização para criar efeitos Flipbox impressionantes. Instalando e ativando um plugin não é ciência de foguetes. Você pode fazer isso facilmente seguindo alguns passos. 

Agora, vamos voltar a adicionar o Flipbox ao seu site. Aqui estão 4 maneiras fáceis e simples de fazer isso-

Etapa 1: ativar o widget Flip Box

Para fazer isso, faça login no painel de administração do WordPress e navegue até ElementsKit ⇒ widgets ⇒ widget de caixa flip, ligue o widget, e clique em Salvar alterações.

Etapa 2: arraste e solte o widget

Edite a página selecionando a opção Editar com Elementor. Então, procurar para o widget flip box com um ícone Ekit e simplesmente arraste e solte o widget na página.

Etapa 3: personalize as configurações

Expanda o menu Flip box para alterar as configurações: 

0. Opções de inversão: Você pode escolher a aparência da animação invertida. Existem quatro opções: Virar, Aumentar zoom, Deslizar e 3D. Cada um tem um estilo diferente.

• Direção de inversão: Isso determina para que lado a animação de inversão irá. Dependendo do tipo de giro que você escolheu, você verá diferentes opções para a direção em que ele pode virar.

• Gatilho de inversão: É assim que você faz a virada acontecer. Você pode escolher entre três opções: Hover (quando você passa o mouse sobre ele), Box Click (quando você clica na caixa) ou Button Click (quando você clica em um botão específico).

• Altura da caixa giratória: Você pode alterar a altura da flip box. Dentro desta configuração, existem duas guias: FRONT e BACK. Você pode personalizar o conteúdo de cada lado separadamente.

Para cada lado da flip box, você pode personalizar o seguinte:

• Tipo de mídia: Escolha se deseja usar um ícone, uma imagem ou nenhum (se não quiser adicionar nenhuma imagem).

• Ícone/Escolher arquivo: Se você escolheu um ícone ou imagem, você pode selecionar qual deseja usar em uma lista ou escolher um arquivo do seu computador.

• Título: Dê um título ou nome a esse lado da caixa invertida.

• Legenda: Adicione um texto menor abaixo do título para fornecer mais informações.

• Descrição da virada: Escreva uma descrição ou explicação para esse lado da caixa flip.

• Alinhamento: Decida se deseja que o conteúdo fique no lado esquerdo, no centro ou no lado direito.

Quando terminar de personalizar o conteúdo de ambos os lados da flip box, você poderá alterar o estilo para que tenha a aparência desejada.

Etapa 4: formalize sua flip box

Agora, vá para a guia Estilo e expanda cada seção para as opções de estilo correspondentes:

Embrulho: Aqui você pode alterar o tipo de plano de fundo, cor, localização, segunda cor, localização, tipo, ângulo e assim por diante no wrapper. As opções para os lados frontal e traseiro da flip box podem ser personalizadas. 

Ícone: Expandindo esta opção. Você pode alterar a cor, o tipo de plano de fundo, a sombra da caixa, o tipo de borda e outras configurações para as visualizações normal e instantânea. As extremidades frontal e traseira da flip box podem ter estilos de ícones personalizados.  

Título: A partir daqui você pode mudar a tipografia, Cor do título e Margem do título para ambos os lados da flip box.

Legenda: Modifique esta opção para personalizar a tipografia, a cor do título e a margem do título da legenda para ambos os lados da flip box.

Descrição: Aqui você pode personalizar a tipografia, a cor da descrição e a margem da descrição para ambos os lados da flip box.

Botão: Expanda a seção do botão para alterar a cor do texto, a cor do plano de fundo, o tipo de borda, o raio da borda, a caixa da borda e outras configurações. O botão pode ser estilizado para visualizações regulares e instantâneas. 

Por fim, clique em publicar/atualizar para salvar as alterações e visualizar sua flip box Elementor:

Gráfico fácil de usar

Melhor plug-in Flipbox Overlays e Hovers para WordPress 

Aqui está minha visão geral de dois plug-ins populares de sobreposição e foco do Flipbox para WordPress lado a lado. Estes são Elementor e ElementosKit Flipbox plug-ins. Dar uma olhada

Plug-in Elementor Flipbox

Elementor é um plugin de criação de páginas amplamente utilizado e altamente conceituado para WordPress. Ele oferece um widget Flipbox que permite criar animações impressionantes em seu site. Com Elementor, você pode adicionar facilmente efeitos de inversão interativos às suas imagens, ícones, títulos e descrições. O plug-in fornece uma interface amigável onde você pode personalizar a direção da virada, o estilo de animação, o evento de acionamento (passar o mouse, clicar) e vários elementos de design. Elementor é conhecido por sua flexibilidade, amplas opções de estilo e compatibilidade com diferentes temas.

Plug-in ElementsKit Flipbox

ElementsKit é um pacote complementar abrangente para Elementor que aprimora sua funcionalidade. Existe um módulo Flipbox dedicado dentro Kit de Elementos. Ele adiciona recursos e efeitos Flipbox mais avançados ao seu site com tecnologia Elementor. Este plugin oferece uma extensa biblioteca de modelos Flipbox pré-concebidos. Isso permite que você crie animações invertidas visualmente atraentes rapidamente. ElementosKit Flipbox O plugin também oferece opções adicionais de personalização. Você pode ter diferentes estilos de Flipbox, efeitos de sobreposição, efeitos de foco e vários eventos de gatilho. Ele se integra perfeitamente ao Elementor e fornece uma experiência de usuário perfeita para projetar elementos Flipbox cativantes.

Tanto o plugin Elementor Flipbox quanto o plugin ElementsKit Flipbox podem ser as melhores escolhas para você. Eles trazem animações interativas e envolventes para sites. Esses plug-ins possuem interfaces fáceis de usar e amplas opções de personalização. Além disso, eles são compatíveis com o construtor de páginas Elementor. Não há necessidade de escrever códigos. Portanto, esses plug-ins tornam mais fácil para você a criação de elementos Flipbox visualmente atraentes e interativos.

Perguntas frequentes (FAQs)

Como você adiciona um efeito de foco no WordPress?

Para adicionar um efeito de foco no WordPress, você pode utilizar CSS ou plug-ins que oferecem recursos de efeito de foco. Muitos construtores de páginas e plug-ins personalizadores oferecem opções para adicionar efeitos de foco a vários elementos, incluindo Flipboxes.

Como você cria uma flip box no WordPress?

Você pode criar uma flip box no WordPress usando plug-ins dedicados do Flipbox, como ElementsKit. Esses plug-ins permitem criar e personalizar elementos Flipbox facilmente, sem exigir conhecimento de codificação.

Como você adiciona uma imagem instantânea no WordPress?

Para adicionar uma imagem flutuante no WordPress, você pode usar CSS ou plug-ins que fornecem efeitos de foco de imagem. Esses plug-ins geralmente têm opções para especificar uma imagem diferente ou alterar a aparência ao passar o mouse sobre um elemento da imagem.

Como você mostra o conteúdo ao passar o mouse no WordPress?

Você pode mostrar conteúdo ao passar o mouse no WordPress usando vários métodos. Uma maneira é usar CSS para exibir conteúdo oculto ao passar o mouse sobre um elemento específico. Como alternativa, os plug-ins do Flipbox geralmente oferecem opções para exibir diferentes conteúdos na frente e no verso do Flipbox, visíveis ao passar o mouse.

Embrulhar

Adicionar sobreposições e focos Flipbox ao seu site WordPress pode melhorar significativamente a experiência do usuário e tornar seu conteúdo mais envolvente. Seguindo o guia passo a passo descrito nesta postagem do blog e utilizando plug-ins Flipbox populares como ElementsKit, você pode criar facilmente efeitos Flipbox impressionantes sem qualquer conhecimento de codificação. Então vá em frente para apimentar seu site com sobreposições e focos Flipbox e cative os visitantes do seu site com conteúdo interativo e visualmente atraente.