Um cartão que vira no hover mostra o dobro do conteúdo no mesmo espaço O grátis Widget flipbox em Complementos Mestres para Elementor oferece uma caixa de dois lados: um rosto frontal com ícone, título e descrição, e um rosto traseiro que aparece com seu próprio texto e um botão.
Você escolhe uma animação, preenche ambas as faces, adiciona um botão, depois estiliza cada lado Existem 22 efeitos flip: 6 no plugin gratuito e mais 16 com Master Addons Pro, de um Fade simples a um Cubo 3 D. Este guia percorre todas as configurações do widget.
O que o widget Flipbox faz #
O widget constrói um flip card de duas faces. O Caixa dianteira é o que os visitantes veem primeiro: um ícone ou imagem, um título e uma descrição. Passe o mouse sobre ele e o cartão vira para o Caixa traseira, que tem seu próprio título, descrição e um botão que pode vincular em qualquer lugar.
Três abas executam tudo. Conteúdo segura a animação, o texto frontal e traseiro e o botão. Estilo lida com a altura da caixa, bordas, cores e tipografia de cada face. Avançado é o espaçamento e visibilidade usuais do Elementor.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- O texto e os ícones para ambas as faces e o link para o botão traseiro.
Como adicionar o widget Flipbox #
No editor Elementor, abra o Elementos painel e pesquisa Flipbox, ou role para a seção Master Addons (os widgets carregam um emblema MA roxo).Arraste-o para a página e ele carrega com uma amostra na frente e atrás que você pode editar.
Defina o estilo de animação #
Abrir o Conteúdo guia. O Predefinição Estilo seção detém o Design Variação e o Estilo Animação, e embaixo dele ficam as seções Caixa Frontal, Caixa Traseira e Botão de Ação.
O Estilo Animação dropdown é a parte divertida Ele carrega 22 opções, então o mesmo cartão pode virar, desvanecer, deslizar, ou cubo seu caminho para a face traseira Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade e Fade Up são gratuitos; o resto precisa Pro.
- Flip Horizontal e Flip Vertical: o clássico card flip em cada eixo.
- Cubo (de cima para baixo, de cima para baixo, esquerdo direito, direito esquerdo): uma rotação de cubo 3 D entre faces (Pro).
- Fade and Fade Up (gratuito), 3 d Flip and Rollover (Pro): revelações mais suaves quando você quer algo sutil.
- Direções do slide e Diagonal (Pro): empurre a face traseira de um lado ou de um canto.
Configure a caixa frontal #
Abrir o Caixa dianteira seção. Este é o rosto que as pessoas veem antes de pairar, então tem que ganhar o flip.
- Estilo e ícone do ícone: escolha um ícone da biblioteca Uma imagem na frente vem com a variação de design Front Image no Pro.
- Título e Descrição: o título frontal e o texto, cada um com uma opção Escrever com IA.
- Alinhamento e Título HTML Tag: alinhe o conteúdo e defina o nível do título (H1 a H6).
Configure a caixa traseira #
Abrir o Caixa traseira seção para o rosto que vira à vista Ele leva os mesmos campos que a frente, então um pequeno teaser na frente pode levar ao detalhe real na parte de trás.
- Ícone: um ícone separado para a face traseira.
- Título e Descrição: o título e o texto do verso.
- Alinhamento e HTML Tag: layout e nível de rumo para a parte traseira.
Adicionar o botão de acção #
O Botão Ação seção vive na face traseira Defina o rótulo e onde ele aponta, para que um hover possa levar direto a um produto, um formulário ou outra página.
- Texto do botão: o rótulo, como Comece ou Saiba mais.
- Link para: o URL que o botão abre, com as opções usuais do link Elementor.
Estilo o flip card #
Abrir o Estilo guia. O Geral seção define a fronteira e, o cenário que mais importa aqui, o Altura da caixa flip, que dá a ambas as faces um tamanho fixo.
Sob o General você se separa Caixa dianteira e Caixa traseira seções. Cada um tem sua própria cor de fundo ou imagem, cores de título e descrição, tipografia e cor de ícone, para que as duas faces não possam se parecer em nada, se você quiser.
Casos de uso comum #
- Cartões serviço com um ícone na frente e detalhes mais um botão na parte de trás.
- Membros equipe mostrando uma foto na frente e uma biografia no flip.
- Destaques do produto que revelam preço e um botão Comprar no hover.
- Grades recurso onde cada carta vira para uma breve explicação.
- Telhas portfólio com uma frente em miniatura e um link de projeto na parte traseira.
Dicas para trabalhar com o widget Flipbox #
- Defina uma altura fixa. A altura da caixa flip mantém ambas as faces do mesmo tamanho, para que o cartão não salte quando ele virar Deixe-o sem configuração e uma face traseira mais longa redimensionará o cartão no meio do hover, que olha para fora.
- Mantenha o texto curto. A parte traseira vira rapidamente, então uma linha apertada e um botão são lidos melhor do que um parágrafo completo.
- Combine a animação com o clima. Fade combina com uma página calma; 3 D Flip e Cube se adequam a um herói ousado.
- Contraste as duas faces. Uma cor de fundo diferente na parte de trás torna o flip óbvio num relance.
- Sempre ligue o botão. O botão traseiro é a recompensa, então aponte para a próxima etapa.
Assista ao tutorial em vídeo #
Prefere acompanhar na tela? o tutorial em vídeo abaixo percorre o elemento Flipbox do início ao fim, mostrando como funcionam os estilos de animação, faces frontal e traseira e estilo no editor Elementor.
Perguntas frequentes #
O que é o widget Flipbox em Master Addons?
É um widget Elementor que constrói um cartão de dois lados A face frontal mostra um ícone, título e descrição, e ao passar o mouse ele vira para uma face traseira com seu próprio texto e um botão Tudo é definido a partir do painel Elementor sem código.
Quantas animações flip o widget Flipbox tem?
O dropdown Estilo de Animação inclui 22 efeitos, 6 livres e 16 com Pro, como Flip Horizontal, Flip Vertical, Fade, Fade Up, Rollover, 3 d Flip, as variantes Cubo, direções de slides e Diagonal Você escolhe um por cartão para controlar como a face traseira aparece.
Posso adicionar um botão ao cartão flip?
Sim. A seção Botão de ação na guia Conteúdo define a etiqueta do botão e seu link O botão fica na face traseira, para que ele mostre quando o cartão vira, o que o torna um lugar natural para enviar visitantes a um produto ou formulário.
Posso usar uma imagem em vez de um ícone na frente?
Sim. use a variação de design Front Image, uma opção Master Addons Pro, para colocar uma imagem na frente A guia Estilo também permite definir uma imagem de fundo para qualquer face, para que os flip cards com led de imagem sejam fáceis de construir.
Como mantenho ambos os lados do flip card do mesmo tamanho?
Defina a Altura da Flip Box na seção Geral da guia Estilo Dá a ambas as faces uma altura fixa, de modo que o cartão permaneça do mesmo tamanho antes e depois do flip em vez de redimensionar para se adequar ao conteúdo de cada lado.
Embrulhando #
O widget Flipbox transforma um cartão plano em interativo: escolha uma animação, preencha as faces frontal e traseira, vincule o botão e, em seguida, estilize cada lado Para widgets relacionados, consulte o Widget de caixa de informações e o Widget de membro da equipe, navegue por completo Widgets e extensões Master Addons, e veja o Página do widget Flipbox para demos e uma comparação com o Elementor Pro Flip Box.
