Como criar sobreposições Flipbox e hovers no WordPress
Publicados: 2023-05-30Quando 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 é o 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údo diferente em cada lado.
Papel das sobreposições e focos do Flipbox no site WordPress
As sobreposições e hovers do Flipbox podem ajudar a melhorar a experiência do usuário e o apelo visual do seu site WordPress. Eles permitem que você chame a atenção para detalhes importantes, destaque recursos ou exiba 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 hovers do Flipbox.
Um guia passo a passo para adicionar Flipbox ao site WordPress
Para adicionar sobreposições Flipbox e hovers ao seu site WordPress, você precisará de um plug-in adequado que ofereça essa funcionalidade. Vários plug-ins Flipbox estão disponíveis, mas duas opções populares são os plug-ins Elementor e ElementsKit Flipbox . Esses plug-ins fornecem opções fáceis de usar e uma variedade de configurações de personalização para criar efeitos impressionantes do Flipbox. Instalar e ativar um plug-in não é ciência do foguete. Você pode fazer isso facilmente seguindo algumas etapas.
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 ⇒ flip box widget , ative o widget e clique em Salvar alterações .
Passo 2: Arraste e solte o widget
Edite a página selecionando a opção Editar com Elementor. Em seguida, procure o widget flip box com um ícone Ekit e simplesmente arraste e solte o widget na página.
Passo 3: Personalize as configurações
Expanda o menu Flip box para alterar as configurações:
- Opções de flip: você pode escolher a aparência da animação de flip. Existem quatro opções: Flip in, Zoom in, Slide in e 3D. Cada um tem um estilo diferente.
- Flip Direction: Isso determina para que lado a animação flip irá. Dependendo do tipo de flip escolhido, você verá diferentes opções para a direção que ele pode virar.
- Flip Trigger: É assim que você faz o flip acontecer. Você pode escolher entre três opções: Hover (ao passar o mouse sobre ela), Box Click (ao clicar na caixa) ou Button Click (ao clicar em um botão específico).
- Altura da Caixa Invertida: Você pode alterar a altura da caixa invertida. Dentro desta configuração, existem duas abas: FRONT e BACK. Você pode personalizar o conteúdo de cada lado separadamente.
Para cada lado da caixa flip, você pode personalizar as seguintes coisas:
- 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, 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 flip.
- Subtítulo: Adicione um texto menor abaixo do título para fornecer mais informações.
- Flip Description: 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.
Depois de terminar de personalizar o conteúdo de ambos os lados da flip box, você pode alterar o estilo para deixá-lo com a aparência desejada.
Passo 4: Formalize sua flip box
Agora, vá para a guia Estilo e expanda cada seção para as opções de estilo correspondentes:
Wrapper: 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 caixa flip podem ser personalizadas.
Ícone: Ao expandir 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 caixa flip podem ter estilos de ícones personalizados.
Título: A partir daqui você pode altere a Tipografia , Cor do título e Margem do título para ambos os lados da caixa flip.
Subtítulo: Modifique esta opção para personalizar a Tipografia, a Cor do Título e a Margem do Título do subtítulo para ambos os lados da caixa flip.
Descrição: Aqui você pode personalizar a Tipografia, a Cor da Descrição e a Margem da descrição para ambos os lados da caixa flip.
Botão: expanda a seção do botão para alterar a cor do texto, cor de fundo, tipo de borda, raio da borda, caixa de borda e outras configurações. O botão pode ser estilizado para exibições regulares e de foco.
Por fim, clique em publicar/atualizar para salvar as alterações e visualizar sua caixa flip Elementor:
Gráfico fácil de usar
| Passos | Como fazer isso |
| Etapa 1: ativar o widget Flipbox | ElementsKit ⇒ widgets ⇒ widget flip box, ative o widget ⇒ Salvar alterações. |
| Passo 2: Arraste e solte o widget | Use o ícone Ekit ⇒ procure o widget flip box ⇒ arraste e solte o widget |
| Passo 3: Personalize as configurações | Personalize a direção do flip, o acionador, a altura da caixa, o tipo de mídia, o ícone/escolha o arquivo, o título, o subtítulo, a descrição do flip, o alinhamento, etc. |
| Passo 4: Formalize sua flip box | Guia Estilo ⇒ expanda cada seção ⇒ altere de acordo |
Melhores sobreposições Flipbox e plug-in de foco para WordPress
Aqui está minha visão geral de duas sobreposições Flipbox populares e plug-ins flutuantes para WordPress lado a lado. Estes são os plug-ins Elementor e ElementsKit Flipbox. Dar uma olhada
Plugin Elementor Flipbox
Elementor é um plugin de construtor de páginas amplamente utilizado e altamente considerado para WordPress. Ele oferece um widget Flipbox que permite criar animações flip impressionantes em seu site. Com o Elementor, você pode adicionar facilmente efeitos de flip 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 do flip, estilo de animaçã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.
ElementsKit Flipbox Plugin
O ElementsKit é um pacote complementar abrangente para Elementor que aprimora sua funcionalidade. Há um módulo Flipbox dedicado no ElementsKit. Ele adiciona recursos e efeitos Flipbox mais avançados ao seu site da Elementor. Este plug-in oferece uma extensa biblioteca de modelos Flipbox pré-projetados. Isso permite que você crie rapidamente animações flip visualmente atraentes. O plug-in ElementsKit Flipbox 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 acionamento. Ele se integra perfeitamente ao Elementor e fornece uma experiência de usuário perfeita para projetar elementos Flipbox cativantes.
Tanto o plug-in Elementor Flipbox quanto o plug-in ElementsKit Flipbox podem ser as melhores escolhas para você. Eles trazem animações flip interativas e envolventes para sites. Esses plug-ins têm interfaces amigáveis 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 facilitam a criação de elementos Flipbox interativos e visualmente atraentes para você.
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 plugins que oferecem recursos de efeito de foco. Muitos construtores de páginas e plug-ins personalizados oferecem opções para adicionar efeitos de foco a vários elementos, incluindo Flipboxes.
Como você cria uma caixa flip no WordPress?
Você pode criar uma caixa flip no WordPress usando plug-ins Flipbox dedicados, como o ElementsKit. Esses plug-ins permitem que você crie e personalize elementos do Flipbox facilmente, sem exigir conhecimento de codificação.
Como você adiciona uma imagem flutuante no WordPress?
Para adicionar uma imagem flutuante no WordPress, você pode usar CSS ou plugins 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 de imagem.
Como você mostra conteúdo ao passar o mouse no WordPress?
Você pode mostrar conteúdo em foco 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 conteúdo diferente na frente e no verso do Flipbox, visíveis ao passar o mouse.
Embrulhar
Adicionar sobreposições Flipbox e hovers 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 populares do Flipbox, como o ElementsKit, você pode criar facilmente efeitos impressionantes do Flipbox sem nenhum conhecimento de codificação. Então vá em frente para incrementar seu site com sobreposições e hovers do Flipbox e cativar os visitantes do site com conteúdo interativo e visualmente atraente.