Elementor FlipBox Widget: Criar Cartões Interactive Hover (Tutorial Gratuito)

Uma flip box é um cartão com duas faces A frente carrega um ícone e um título curto Passe o mouse sobre ele, e o cartão gira para uma face traseira segurando a descrição e um botão Elementor Pro envia um Você não precisa Pro para obter um.

O grátis Widget Flipbox de complementos mestres adiciona um ao Elementor normal, com mais de trinta animações flip, ambas as faces estilizadas de forma independente, e um botão que liga onde você quiser Este guia cobre a compilação, a configuração que corrige a maioria dos problemas de flip e o comportamento móvel que pega as pessoas depois que elas publicam.

O que é realmente uma flip box

Uma flip box é um cartão de dois lados que troca rostos ao passar o mouse ou tocar A frente mostra um ícone ou imagem com um título A parte de trás mostra uma descrição mais longa e geralmente um botão Ela mantém uma grade limpa enquanto ainda carrega o detalhe, porque a descrição fica atrás do cartão em vez de embaixo dele.

Você mostra uma linha digitalizável primeiro, depois deixa qualquer pessoa interessada puxar o detalhe sozinho Ninguém tem que ler uma parede de cópia para encontrar o único serviço que veio para Isso é a razão para alcançar um.

Quatro padrões que ele lida bem:

• Grades serviço. Nomeia o serviço pela frente, explica-o de volta e vincula-o à página do serviço.
• Cartões equipe. Foto e nome na frente, bio e um link na parte de trás Se nada precisa de esconder, uma planície seção membros da equipe é a construção mais simples.
• Telhas recurso. Ícone na frente, a especificação por trás dele.
• Cartões estatísticos. Um grande número na frente que muda para o que o número significa.

Elementor tem um widget flip box?

Elementor Pro tem um. Elementor livre não. Essa distinção importa, porque muitos tutoriais confundem e então as pessoas vão em busca de um widget que não esteja em seu painel.

Portanto, existem quatro rotas honestas para uma flip box, e cada uma pede algo diferente:

Se você já paga pelo Elementor Pro, use sua Flip Box e pule o plugin extra Não há prêmio para instalar algo que você não precisa Se você estiver no Elementor gratuito, o resto deste guia é a sua rota.

Antes de começar

• WordPress com Elementor instalado e ativo.
• Master Addons for Elementor instalado e ativo É gratuito no WordPress.org e é executado em 30.000+ sites.
• Os ícones, cópia e destino link para ambas as faces Classificar estes primeiro Desenhar um cartão enquanto você inventa a cópia é como você acaba com “Lorem ipsum” em uma página ao vivo.

Construa uma flip box, passo a passo

Passo 1: Ative o widget Flipbox

Master Addons mantém cada widget atrás de um alternador para que aqueles que você não usa nunca carreguem Ir para Complementos Mestres → Configurações, abra o Elementos guia, encontre o Flipbox, ligue-o, salve.

Sem alternar? atualize o plugin A guia Elementos cresceu entre versões e compilações mais antigas agrupam as coisas de maneira diferente.

Passo 2: Largue o widget na página

Edite qualquer página com Elementor, digite “Flipbox” na pesquisa de widgets, arraste-a para um contêiner Ele carrega com conteúdo de amostra em ambas as faces, já virando.

Passe o mouse na visualização antes de mudar uma coisa Você quer uma sensação para a velocidade de animação padrão, porque essa é a configuração que as pessoas mais frequentemente deixam em paz e depois se perguntam por que o cartão parece lento.

Etapa 3: Escolha uma variação de design

A guia Conteúdo abre em a Predefinição Estilo seção que contém dois controles: Design Variação e Estilo Animação. Abaixo deles estão a caixa frontal, a caixa traseira e o botão de ação.

Variação de Design muda a forma como a face frontal é organizada A decisão prática é se um ícone ou uma fotografia carrega sua mensagem Variações lideradas por ícones se adequam às grades de serviço e linhas de recursos Variações lideradas por imagens se adequam aos membros da equipe, peças de portfólio e cartões de produtos, onde um rosto ou uma fotografia faz mais trabalho do que qualquer ícone poderia.

Passo 4: Escolha a animação

O dropdown Estilo Animação carrega mais de trinta efeitos Eles caem em quatro grupos:

• Vire Horizontal /Vire Vertical. A rotação clássica do cartão em cada eixo legível e o padrão seguro quando você não tiver motivos para escolher mais nada.
• Cubo (de cima para baixo, de cima para baixo, esquerdo, direito). Uma rotação de cubo 3 D entre faces Dramático Use-o em um herói, não em uma grade de oito.
• 3 D Flip, Fade, Fade Up, Rollover. Revelações mais suaves para páginas que já têm movimento em outro lugar.
• Direções do slide e Diagonal. A face traseira empurra de um lado ou de um canto Estes lêem bem no celular, onde uma rotação pode parecer pesada.

Escolha um e comprometa-se com ele em toda a seção Seis cartas virando seis maneiras diferentes não parece brincalhão, parece quebrado A única boa razão para misturar é quando duas seções precisam se sentir deliberadamente separadas.

Quer ver os estilos de movimento lado a lado antes de se comprometer? o Guia de efeitos de animação de elementor visualiza os comuns, e o Passo a passo da flip box 3D vai mais fundo nas configurações de perspectiva por trás das opções Cube e 3 d Flip.

Passo 5: Escreva a face frontal

Aberto Caixa dianteira. Este é o rosto que tem que ganhar o hover, então ele recebe menos cópia do que você pensa, não mais.

• Estilo e ícone do ícone. Puxe da biblioteca de ícones ou mude para uma imagem Os complementos mestres enviam adicionais bibliotecas ícone além da fonte Incrível se você precisar deles.
• Título. Três a cinco palavras Tem que sobreviver em uma linha na largura do tablet.
• Descrição. Uma linha. Ambos os campos título e descrição têm a Escreva com IA opção incorporada no painel se você estiver preso.
• Alinhamento e Título HTML Tag. H1 a H6. defina isso corretamente Uma grade de seis flip boxes com títulos H2 dentro de uma seção que já possui um H2 dá sete H2 s na página e uma ferramenta de auditoria que sinaliza o mesmo cuidado se aplica a qualquer bloco repetido em um layout personalizado do Elementor.

Passo 6: Escreva a face traseira

Mesmos campos, trabalho diferente. Caixa traseira leva seu próprio ícone, título, descrição, alinhamento e tag de cabeçalho, para que as duas faces não precisem combinar.

A regra que mantém esta seção útil: a frente faz uma promessa, a parte de trás fica com ela. Se a frente diz “Web Design”, a parte de trás diz o que está realmente incluído e links para a página Alguém pairou porque a frente os pegou Repague isso com informações, não outro slogan.

Duas ou três frases Mais longo e o cartão parece apertado na largura do tablet, onde o cartão é mais estreito, mas o texto não encolheu.

Passo 7: Adicione o botão de ação

O Botão Ação seção define um rótulo e um link, e o botão renderiza apenas na face traseira Defina o texto para o que a próxima página realmente oferece. “Saiba mais” está bem. “Veja Preços” é melhor, quando o link vai para preços.

Pule o botão inteiramente em uma grade puramente informativa Um cartão que vira para uma descrição e pára é um cartão perfeitamente bom Adicione-o quando a seção estiver fazendo um trabalho de conversão.

A única configuração que corrige a maioria das reclamações de flip box

Mudar para o Estilo aba e abrir Geral. Tem um controle chamado Altura da caixa flip.

Defina isso.

Deixe-o por definir e cada cartão se dimensiona para qualquer rosto que tenha mais conteúdo, então o cartão redimensiona no meio do curso à medida que a face traseira mais longa entra. As cartas que devem corresponder acabam em alturas diferentes porque uma descrição de serviço executou duas linhas a mais que as demais. A documentação do Flipbox lista isso como sua primeira dica de trabalho e é a configuração que mais frequentemente é deixada em paz.

200 px é um piso sensato 350 px se adequa à maioria das grades de recursos Defina-o uma vez no nível do contêiner e cada carta na linha corresponde.

Enquanto estiver em Geral, mantenha a duração da animação entre 400 ms e 700 ms. Leituras mais rápidas como uma falha Mais lento e o cursor seguiu em frente antes que o flip termine.

Estilizando as duas faces

Abaixo do General você se separa Caixa dianteira e Caixa traseira painéis, cada um com sua cor de fundo ou imagem, cores de título e descrição, tipografia e cor do ícone.

Torne as duas faces genuinamente diferentes. Uma frente cinza claro virando para uma parte traseira cinza um pouco mais clara parece uma falha de renderização em vez de uma revelação. A maioria dos designs fica em um tom suave na frente e a cor da marca na parte de trás, o que torna a virada óbvia do outro lado da sala.

Estilize os estados normal e de passagem de botão para combinar com os botões em qualquer outro lugar do site Um botão de caixa de mudança que não se parece em nada com seus outros CTAs é lido como um anúncio incorporado.

Tornando todo o cartão clicável

Por padrão o link fica no botão, não no cartão As pessoas tentam clicar no corpo do cartão, nada acontece, e eles saem É uma coisa pequena que custa cliques reais.

A correção não está no widget Flipbox É o Link do invólucro extensão, um módulo separado que você habilita sob as configurações de Master Addons, que envolve qualquer elemento em um único link, Ligue-o e aplique-o ao contêiner flip box.

Um cuidado: se todo o cartão estiver vinculado a algum lugar e o botão estiver vinculado a outro lugar, qualquer um que o visitante acertar primeiro ganha e o outro nunca se usa. Aponte-os para o mesmo destino ou solte o botão.

Mobile: a parte que apanha as pessoas

Os telefones não têm hover O flip dispara na torneira em vez disso Primeiro toque vira o cartão para trás, segundo toque vira para casa, eo botão precisa de um toque próprio uma vez que a parte de trás está mostrando.

Isso é dois toques antes que alguém chegue ao seu chamado à ação No desktop, a face traseira custa um movimento do cursor No celular, custa um esforço deliberado e uma parcela significativa de visitantes nunca o gasta.

O segundo toque também é onde as coisas quebram Relatórios de uma flip box que vira para frente, mas não vai virar para trás, aparecem regularmente em tópicos da comunidade Elementor, e a visualização do editor não reproduz o comportamento de toque de forma confiável o suficiente para testá-lo em um aparelho real antes de enviar, porque o modo responsivo no editor não mostrará isso.

O que leva à regra que importa mais do que qualquer escolha de estilo aqui:

Nunca coloque informações essenciais apenas na face posterior. Se um visitante móvel tem que tê-lo, um preço, um número de telefone, um endereço ou um link de reserva vai na frente, ou em algum lugar fora do cartão inteiramente Trate a face traseira como um lugar para detalhes extras, não para nada da página depende.

O cartão escala e envolve os pontos de interrupção, e a altura é responsiva, para que você possa apertá-lo para celular no modo responsivo do Elementor Se a grade quebrar em uma largura que você não planejou, verifique o pontos de interrupção do Elementor Padrão primeiro, depois adicione breakpoints personalizados se você precisar de tamanhos Elementor não envia.

Acessibilidade, honestamente

Uma flip box esconde metade do seu conteúdo por trás de uma interação que um usuário de teclado e um leitor de tela não conseguem executar da maneira que um usuário do mouse pode Vale a pena classificar antes que a seção entre em operação, não depois.

Duas coisas tornam-no defensável:

• Adicionar um estado de foco visível assim, um usuário do teclado que passa pela página pode ver e acionar o cartão.
• Torne o conteúdo traseiro acessível de outra maneira, uma seção próxima, uma página vinculada, um bloco dobrável Se o único caminho para a descrição do seu serviço for um hover, alguns visitantes não terão caminho.

Os mecanismos de pesquisa indexam o texto do back-face, uma vez que ele fica no DOM em vez de carregar sob demanda, portanto, esconder a cópia atrás de um flip não a remove da página no que diz respeito ao rastreamento Se uma pessoa pode alcançá-lo é uma pergunta separada, e aquela a responder primeiro.

Quando pular a flip box

Três situações em que um widget diferente serve melhor para você.

O texto final é importante para cada leitor. Se todos precisarem da descrição, não os faça pairar para ela An Caixa de informações mostra um ícone, um cabeçalho e uma linha de cópia sem nada escondido e sem interação para testar em quatro dispositivos.

Você quer o movimento, não a segunda face. Se o recurso for um efeito de hover elegante e você não tiver conteúdo traseiro genuíno, o Transforma extensão adiciona movimento 3 D a qualquer elemento sem inventar cópia para preencher um rosto que ninguém pediu.

A página já se move. Parallax, scroll revela, um herói animado, e agora uma grade de cartas virando Passado uma certa quantidade de movimento um visitante pára de registrar qualquer um deles, e cada efeito é mais trabalho para o navegador Conte o que já está na página antes de adicionar mais, e se ele está carregando lentamente, fixa a velocidade antes de adicionar outra animação.

E um soft cap que vale a pena respeitar: mais de seis ou oito flip boxes em uma página dicas em truque Uma ou duas seções é o ponto ideal.

Grátis vs Pro

O widget Flipbox está no plugin gratuito Toda variação de design, toda animação, ambas as faces estilizadas de forma independente, sites ilimitados O Pro não desbloqueia a flip box, ele desbloqueia outras coisas ao seu redor.

Se a flip box é o que você veio para, livre é toda a resposta Se você está reconstruindo o mesmo layout de cartão em sites clientes, o Construtor de widgets salva-o uma vez como um widget reutilizável, e isso fica no nível pago. Detalhamento completo no página preços, e uma visão mais ampla do que mais está disponível em nosso resumo dos complementos do Elementor.

Perguntas frequentes

Leitura relacionada

• Como Criar Animações Flipbox Elementor 3D
• Documentação de widget do Flipbox, cada controle, em ordem
• Efeitos de animação elementar
• Widget de ponto de acesso de imagempara destacar áreas dentro de uma imagem em vez de virar cartas inteiras
• Widget infobox, a alternativa estática quando nada deve ser escondido
• Modelos de seção do Elementor grátis para importar e editar