Elementor Flip Box Widget com Hover Flip Card Animações
Flipbox é um widget flip box Master Addons para Elementor, sem necessidade de Elementor Pro A face frontal mostra um ícone ou imagem com um título e texto curto, e ao passar o mouse o cartão vira para uma face traseira com mais detalhes e um botão de ação O widget vem com os designs de Ícones Padrão e Frontal e 6 animações: Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade e Fade Up. Complementos mestres Pro adiciona os designs Front Image e Diagonal e mais 16 animações, incluindo Cube, Rollover e 3 D Flip, para 22 no total O próprio Elementor tem apenas uma flip box no Elementor Pro.
Variações de design e animações flip
Design Variação define o layout frontal: O ícone padrão e frontal vêm com o widget, imagem frontal e necessidade diagonal Pro. Estilo Animação define como o cartão gira Incluído: Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade e Fade Up. Pro adiciona quatro direções de Cubo, Fade Hideback, Fade Up Hideback, quatro direções de slides, dois slides Diagonais, Fade In Out, Nananana, Rollover e 3 D Flip, que tem sua própria configuração de direção.
- 22 animações no total: 6 incluídas e 16 com Pro.
- O flip é executado no hover na área de trabalho e na torneira em telas sensíveis ao toque.
- Use uma animação por seção para que uma linha de cartas pareça consistente.
Construtor de conteúdo duplo
O Caixa dianteira e Caixa traseira cada um tem seu próprio ícone com visualização Padrão, Empilhada ou emoldurada e formato Círculo ou Quadrado, um Título, uma Descrição, Alinhamento e uma tag de cabeçalho Mantenha a frente curta, como um nome de serviço, e use a parte de trás para a explicação Na guia Estilo cada face obtém seu próprio fundo, cores de título e descrição, tipografia, cores de ícones e borda.
- Conteúdo e estilo separados para cada rosto.
- Tag HTML de título em ambas as faces, portanto, uma grade de cartas mantém uma ordem de rumo limpa.
- um Altura da caixa flip a configuração em Geral mantém ambas as faces do mesmo tamanho.
Botão CTA com Hover
O Botão Ação mostra na face traseira com o seu Texto de Botão e link Estilo para Normal e Passe o mouse com cor de texto, fundo, borda, raio de borda e preenchimento, além de tipografia O botão é o único link dentro do widget Para tornar todo o cartão clicável, adicione o Link do invólucro extensão para o widget.
- Use um rótulo específico como “Veja Preços” quando for para lá o link.
- Pule o botão em cartões puramente informativos.
- Se você usar o Wrapper Link, aponte o botão para a mesma página.
Flipbox em resumo
A tabela lista o que o widget faz hoje, lido a partir da fonte do plugin na versão 3.2.6.
| Item | flip-box |
|---|---|
| Variações de design | 4: Ícone Padrão e Frontal incluído; Imagem Frontal e Diagonal com Pro |
| Animações | 22:6 incluídos (Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade, Fade Up) e 16 com Pro (quatro direções Cube, dois fades Hideback, quatro slides, dois slides Diagonais, Fade In Out, Nananana, Rollover, 3 D Flip) |
| Conteúdo frontal e traseiro | Ícone ou imagem (imagem com o design Pro Front Image), título com sua própria tag HTML, descrição e alinhamento em cada face |
| Estilo ícone | Predefinido, Empilhado ou Enquadrado, com forma de Círculo ou Quadrado |
| Acionador | Passe o mouse na área de trabalho, primeiro toque em telas sensíveis ao toque Sem clique no gatilho |
| Link de caixa inteira | Não. O botão Voltar carrega o link; a extensão Wrapper Link torna todo o cartão clicável |
| Controle de altura | Sim, altura da caixa flip com estilo, geral |
| Modo carrossel | Não |
| 3 D Virar direção | 4 direções na animação Pro 3 D Flip |
| Necessidades | Complementos Elementor e Master. Pro para os dois designs extras e as 16 animações extras |
Flipbox Elementor Pro Vs Flipbox Master Addons
Elementor Pro tem seu próprio widget Flip Box Se você já pagar por ele, você pode não precisar de outro Aqui é como os dois se comparam.
| Característica | Caixa flip Elementor Pro | Flipbox de complementos mestres |
|---|---|---|
| Preço | Precisa do Elementor Pro | Complementos Mestres; mais designs e animações em Pro |
| Efeitos flip | Vire, deslize, empurre, amplie, diminua o zoom e desvane, com direção e profundidade 3D | 6 animações incluídas, 22 com Pro, incluindo Cube, Rollover e 3 D Flip |
| Acionador | Pairar | Passe o mouse; primeiro toque em telas sensíveis ao toque |
| Gráfico frontal | Nenhum, Imagem ou Ícone | Ícone, ou uma imagem com o design Pro Front Image |
| Link inteiro do cartão | Aplique Link On: Caixa inteira ou apenas botão | Somente botão ou a placa inteira com a extensão Wrapper Link |
| Botão | Sim | Sim, com estilo Normal e Hover |
Elementor Pro é mais simples se você quiser um link de caixa inteira embutido Master Addons funciona em Elementor sem Pro e dá mais opções de animação com seu próprio Pro. Para uma placa estática sem nada escondido, use o Caixa de informações Widget.
Flip card CSS ou um widget flip box?
Um flip card é a mesma coisa que uma flip box: uma face frontal que gira para uma face traseira Você pode escrever à mão um com cerca de 40 linhas de CSS usando perspectiva, estilo de transformação: preservar-3 d e backface-visibilidade: oculto, e soltá-lo em um widget HTML Essa rota é boa para um cartão em uma página que você controla.
A versão CSS tem três problemas recorrentes As telas sensíveis ao toque não têm hover, então o cartão nunca vira a menos que você adicione um manipulador de toque Ambas as faces precisam de uma altura fixa ou o cartão salta à medida que gira E cada mudança na cor, texto ou ícone significa editar o código novamente, geralmente dentro de um campo CSS personalizado que precisa do Elementor Pro. O widget Flipbox lida com o toque, a altura e o estilo do painel do editor, e dá a você um botão back-face, 22 animações e uma variação de design por cartão sem tocar no código.
Ideias e dicas de flip box
Uma flip box mantém uma grade limpa enquanto ainda carrega detalhes, porque a descrição fica atrás do cartão em vez de sob ele Ele funciona bem para grades de serviço, cartões de equipe com uma foto na frente e uma biografia na parte de trás, apresentam peças e cartões de estatísticas que mudam para o que um número significa.
- Definir altura da caixa flip. Sem ele, uma face posterior mais longa redimensiona a carta à medida que ela gira e a linha salta.
- Faça os rostos parecerem diferentes. Uma tonalidade na frente e a cor da sua marca na parte traseira tornam o flip óbvio.
- Planeje telefones. As telas sensíveis ao toque não têm hover, então o cartão gira na torneira e o botão precisa de um segundo toque Teste em um telefone real.
- Mantenha detalhes essenciais na frente. Preços, números de telefone e links de reserva não devem viver apenas na face traseira.
- Limite a moção. Uma ou duas linhas de flip box por página lêem melhor do que seis animações diferentes.
Exemplos de flip box
Cada demonstração abaixo é uma página ao vivo construída com o widget A variação de animação e design são nomeados para que você possa reconstruir qualquer um deles a partir do painel.
Vertical Flip
- Cartões analíticos SaaS: Design padrão, três cartões de estatísticas escuras que se transformam em uma descrição de plano.
- Grade de cartão de equipamento: Projeto padrão, seis telhas do produto em uma grade de duas linhas.
- Grelha de estatísticas e espécies: Design padrão, um número na frente e o significado na parte de trás.
- Cartões de produto Arch: Projeto padrão com uma forma arredondada do arco na cara dianteira.
Virar Horizontal
- Telhas de serviço somente de ícones: Design de ícone frontal, quatro ícones emoldurados que se transformam em uma pequena sinopse de serviço.
- Telhas serviço Bento: Cartões mistos padrão e ícones frontais em layout bento.
- Cartões disciplinares escalonados: Design padrão, três cartas deslocadas uma da outra.
- Ladrilhos de ícones mínimos: Design de ícone frontal, três azulejos escuros com um ícone cada.
Desaparecer
- Cartões de viagem com imagem frontal: Design de imagem frontal (Pro), foto na frente e detalhes da viagem na parte traseira.
- Linhas de capítulos numeradas: Design padrão, linhas largas que desaparecem em um resumo do capítulo.
- Linhas do runbook da linha do tempo: Design padrão, cartões de passo que desaparecem para as instruções.
Flip Box e Cubo
- Vitrine circular da marca: Animação Flip Box em cartões redondos.
- Azulejos diagonais: Design diagonal (Pro) com a animação Cube Left Right (Pro).
- Efeitos de transformação avançados: Cartões flipbox combinados com a extensão Transforms.
3 D Flip e slides
- Cartões de produtos de café: Animação 3 D Flip (Pro), Deslize para a direita para a direção esquerda.
- Vitrine de mídia interativa: 3 D Flip (Pro) com uma direção diferente em cada cartão.
- Cartões multi-ícones: Esquerda para Direita, Direita para Esquerda e Top para Bottom slides (Pro) em uma linha.
Rollover, Diagonal e Fade In Out
- Cartões de aula de ginástica escura: Animação de capotamento (Pro) sobre um tema sombrio.
- Telhas de ícones pastel: Design de ícone frontal com animação diagonal de baixo para cima (Pro).
- Cartões traseiros de gradiente: Animação Fade In Out (Pro) para uma face posterior gradiente.
Como adicionar uma flip box no elementor
Você precisa do Elementor e do plugin Master Addons do WordPress.org.
- Verifique se o Flipbox está ligado Complementos mestres, widgets.
- No editor Elementor, procure por flip-box e arraste-o para um recipiente.
- Escolha uma variação de design e um estilo de animação e passe o mouse sobre o cartão para visualizá-lo.
- Preencha a Caixa Frontal e a Caixa Traseira: ícone, título, descrição e etiqueta de título.
- Adicione o texto e o link do Botão de Ação.
- Em Estilo, Geral, conjunto Altura da caixa flip portanto, o cartão não redimensiona no meio do movimento e depois estiliza cada face.
Para efeitos 3 D, leia Como Criar Animações Flipbox Elementor 3D. Cada configuração está no Configurações de widget do Flipbox.
Flipbox emparelha com alguns outros widgets Master Addons: Caixa de informações para um cartão que nunca vira, Botão Criativo para uma chamada à ação sob uma grade, Efeitos de Hover de Imagem para uma foto que revela uma legenda em vez de uma face traseira, Membro da equipe para cartões de pessoas com vínculos sociais, e Alternar conteúdo quando a revelação tem que acontecer no clique em vez de pairar.
Perguntas frequentes para o Flipbox
Como funciona a flip box nos telefones?
As telas sensíveis ao toque não têm hover, então o cartão vira quando tocado O botão da face traseira precisa de seu próprio toque após o flip Mantenha informações obrigatórias na frente e teste em um dispositivo real.
Posso usar uma imagem em vez de um ícone na frente?
Sim, com a variação de design da Imagem Frontal, que é uma opção Master Addons Pro Caso contrário, use um ícone na frente ou defina uma imagem de fundo para o rosto na guia Estilo.
Preciso do Master Addons Pro para o widget Flipbox?
O Flipbox no vem com o plugin Master Addons com os designs Default e Front Icon e 6 animações Master Addons Pro adiciona mais 2 designs e mais 16 animações.
A flip box liga o clique?
Não. O widget vira ao passar o mouse e, nas telas sensíveis ao toque, o primeiro toque vira o cartão. Não há gatilho de clique na área de trabalho. Para um painel que abre com clique, use o Alternar conteúdo widget ou a Construtor Popup pop-up.
Um flip card é igual a uma flip box?
Sim. Flip card é o nome do tutorial CSS para o mesmo efeito: uma face frontal que gira para uma face traseira O widget Flipbox constrói um flip card a partir do painel do editor, com a altura, o toque em telas sensíveis ao toque e o botão back-face manipulado para você.
Elementor tem um widget flip box?
Somente o Elementor Pro tem um. Elementor sem Pro não, então você precisa de um addon como este widget Flipbox.
Posso vincular todo o flipbox a uma página sem o botão separado?
O widget vincula o botão apenas Para tornar todo o cartão clicável, ligue o Link do invólucro extensão e adicionar o link para o widget Flipbox.
Quantas animações flip existem?
22 no total. Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade e Fade Up vêm com o widget Os outros 16, incluindo Cube, Rollover e 3 D Flip, precisam do Master Addons Pro.
Posso colocar flip boxes em um carrossel?
Não com uma configuração embutida O widget não tem modo carrossel Salve uma flip box como modelo e mostre-a no Carrossel de Imagem ou uma grade circular, ou coloque as cartas em um recipiente de embalagem.
Qual é a diferença do Elementor Pro Flip Box?
Elementor Pro tem seis efeitos com direção e profundidade 3 D, uma opção de link de caixa inteira e precisa de um plano Elementor Pro. Flipbox funciona em Elementor sem Pro, tem 6 animações incluídas e 22 com Master Addons Pro, dois designs de ícones ou imagens, e liga o cartão inteiro através da extensão Wrapper Link.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
