Como Criar Animações Flipbox Elementor 3 D?

Elementor é um poderoso construtor de páginas que permite criar sites impressionantes com facilidade, e seu widget básico Flipbox oferece uma maneira simples de adicionar efeitos 3 D interativos O problema? É um recurso profissional, designs e animações são limitados.

Master Addons é um poderoso addon Elementor que fornece um widget flipbox também É gratuito e permite uma maior personalização do que o widget Flipbox Elementors.

Com os Master Addons, você pode criar flipboxes 3 D visualmente impressionantes que movem, transformam e envolvem os usuários de maneiras que o widget Elementor padrão simplesmente não consegue.

Neste guia, mostraremos como criar flipboxes 3 D de alto nível com Master Addons e criar designs atraentes que se destacam.

Criando um Flipbox de Elementor 3 D com Complementos Mestres

Vamos tijolo por tijolo e criar o nosso próprio flipbox usando Addons mestres. No final, você deve ter uma compreensão muito clara de como criar o seu único.

Etapa 1: Instalando complementos mestres para elementor

Antes de começar a usar o widget Flipbox de complementos mestres, você precisará instalar e ativar o plugin Master Addons. Veja como:

1. no seu painel WordPress, vá para Plugins > Adicionar novo.

2. Procure por “Master Addons para Elementor” na barra de pesquisa.

3. Clique Instale Agora e depois Ativar assim que o plugin estiver instalado.

Uma vez ativados, os widgets Master Addons, incluindo o Flipbox, estarão disponíveis no editor Elementor.

Passo 2: Adicionando o widget Flipbox

Agora que o plugin está instalado, vamos adicionar o Flipbox à sua página

1. abra sua página no editor Elementor. Escolha Flexbox ou grade como seu layout.

2. no painel esquerdo, procure o Flipbox. Você deve ver um widget Flipbox com um “MAEtiqueta”.

3. arraste e solte o Flipbox widget na seção desejada da sua página Uma coisa importante a ser observada aqui é que sempre que você está trabalhando com flipboxes é recomendado para usar o Flexbox para ter certeza de que seus flipboxes estão bem.

Uma vez adicionado, um design básico de flipbox aparece em sua tela, pronto para ser personalizado.

Passo 3: Criando um Flipbox de Elementor 3 D

Agora chegamos às configurações que você pode ajustar para obter um efeito 3 D de aparência premium em seu flipbox.

Primeiro fora.

Predefinição de estilo 1

Na predefinição de estilo você define o variação design e estilo animação

A variação de design permite personalizar a frente da sua caixa Você pode configurá-la para: Padrão, Imagem, Diagonal, Ícone Frontal.

Com o estilo de animação você pode escolher exatamente como seu flipbox será animado.

Master addons tem 20 + animações premium disponíveis De simples horizontal e vertical flip para 3 D Flip, animações de cubo, efeitos de capotamento, etc.

Master Addons oferece a você uma animação flip 3 D dedicada que dá aos seus flipboxes uma sensação dinâmica Você pode até personalizar o estilo flip desta animação Uma vez que você escolher, uma nova opção aparecerá no “Estiloguia” em Configurações gerais: Estilo Flip 3D.

2. Conteúdo frontal

Clique no Flipbox widget para editá-lo.

Sob o Conteúdo aba, você verá campos para adicionar seu conteúdo para o Frente Caixa. Você pode adicionar um título, descrição e uma imagem ou ícone aqui.

3. Voltar Conteúdo

Role para baixo até o Voltar Conteúdo seção no mesmo Conteúdo guia.

Da mesma forma, adicione o conteúdo que deseja que apareça quando o flipbox for invertido. Você pode adicionar um novo título, texto ou um botão de call to action.

Você pode estilizar ambos os lados do flipbox separadamente, usando o Estilo guia para ajustar fontes, cores, preenchimento, bordas e muito mais para cada lado.

Passo 4: Melhorando Flipboxes 3 D com outras extensões

Master Addons para Elementor não apenas a funcionalidade básica do flipbox, mas também leva seu flipbox a um nível totalmente novo com uma variedade de extensões projetadas para adicionar interatividade, animações suaves e efeitos envolventes.

Exploraremos os poderosos recursos que permitem aprimorar seu flipbox, tornando-o mais dinâmico, visualmente cativante e fácil de usar.

Quer você queira criar transformações 3 D avançadas, adicionar efeitos de paralaxe ou ajustar animações de entrada, o Master Addons oferece tudo o que você precisa para levar seus flipboxes para o próximo nível.

Transforma:

• No Avançado tab, você encontrará o Transforma configurações.
• Aqui, você pode ajustar o rotação flipbox nos eixos X, Y ou Z para criar efeitos 3 D mais complexos.
• Brincar com escala, traduzir, e inclinar opções para um flipbox ainda mais dinâmico.

Rellax (Efeito Parallax):

• Para ativar o efeito Rellax, vá para o Avançado guia e role até o Relax configurações.
• Habilite o efeito e ajuste o velocidade scroll para criar um efeito de paralaxe, onde o flipbox se move a uma velocidade diferente do resto do conteúdo à medida que os usuários rolam.

Efeitos flutuantes:

• Adicione efeitos flutuantes para fazer o flipbox se mover sutilmente à medida que o usuário interage com a página Esta opção pode ser encontrada em Efeitos Motion seção.
• Escolha o tipo de movimento (por exemplo, flutuando para cima ou para baixo) e ajuste a intensidade ao seu gosto.

Dicas de ferramentas:

• Master Addons também permite adicionar Dicas de ferramentas para o seu flipbox, que aparecem quando os usuários pairam sobre os elementos As dicas de ferramentas podem fornecer informações ou contexto adicionais sem sobrecarregar seu design.
• Você pode ativar e personalizar dicas de ferramentas para o conteúdo frontal e traseiro do flipbox nas configurações Avançadas.
• Personalize o texto da dica de ferramenta, posição (superior, inferior, esquerda ou direita) e estilo (cores, tamanho da fonte) para se adequar ao seu design.

Algumas outras extensões úteis

Entrada Animação:

• Sob o Efeitos Motion guia, habilite Entrada Animação para aplicar um efeito de chamar a atenção à medida que o flipbox aparece na página.
• Você pode escolher entre várias animações, como fade-in, slide ou bounce, para fazer seu flipbox estourar quando ele entrar na janela de visualização.

Revelar:

• Se você quiser uma animação de revelação suave quando o flipbox for invertido, habilite o Revelar opção sob o Avançado configurações.
• Esse recurso permite que o conteúdo traseiro do flipbox seja revelado gradualmente, criando uma transição aprimorada.

Condições de exibição:

• Usar Condições de exibição para definir regras para quando e onde o flipbox aparece Você pode controlar a visibilidade com base em tipos de dispositivos (desktop, tablet, celular) ou até mesmo condições como posição de rolagem.

Visualizando e finalizando seu Flipbox

Depois de personalizar seu flipbox, é hora de vê-lo em ação.

1. Clique no ícone olho na parte inferior do painel Elementor para visualizar seu flipbox no editor.
2. Teste como o flipbox se comporta em diferentes dispositivos (desktop, tablet e celular) para garantir que ele seja responsivo e tenha uma ótima aparência em todos os lugares.
3. Faça quaisquer ajustes finais no design, nas velocidades de animação ou na posição até ficar satisfeito com sua aparência.

Uma vez satisfeito, clique em Publicar para fazer seu flipbox ao vivo em seu site.

Conclusão

Master Addons para Elementor adiciona mais tempero à experiência padrão do flipbox, oferecendo uma variedade de recursos avançados que permitem criar designs verdadeiramente dinâmicos e interativos.

Para ir com os efeitos de animação 3 D existem opções como transformações, efeitos de paralaxe, transições de revelação suaves, e mais, você pode usar para trazer seus flipboxes à vida de maneiras que vão além das animações básicas.

Seguindo este guia, você pode facilmente adicionar flipboxes atraentes ao seu site, melhorando tanto o envolvimento do usuário quanto o apelo visual Então, mergulhe em Master Addons e comece a experimentar para criar flipboxes 3 D impressionantes que impressionarão seus visitantes!