O widget Flip Box ajuda você a criar caixas animadas que viram para o outro lado quando os usuários agem. Você pode criar uma caixa flip Elementor ao clicar e passar o mouse em ambos. Você pode personalizar ambos os lados da flip box usando este widget.

Como adicionar o flip box ao site WordPress usando ElementsKit #

Siga as etapas descritas abaixo para adicionar uma flip box ao seu site WordPress com facilidade usando ElementsKit e Elementor:

Etapa 1: ativar o widget flip box #

Navegar para ElementsKit ⇒ widgets ⇒ widget de caixa flip, ligue o widget, e clique em Salvar alterações.

Etapa 2: arraste e solte o widget  #

Edite a página com a opção Editar com Elementor. Então procurar para o widget flip box com o ícone Ekit e simplesmente arraste e solte o widget na página.

Etapa 3. Personalize as configurações  #

Expanda o menu Flip box para alterar as seguintes configurações:

• Virar: Você tem quatro opções para virar: Virar, Ampliar, Deslizar e 3D.
• Direção de inversão: Várias opções estão disponíveis para inverter a direção. No entanto, a opção aparecerá com base no valor selecionado para a opção Inverter.
• Gatilho de inversão: Aqui você pode escolher a opção que acionará a virada. Três opções estão disponíveis: Hover, Box Click e Button Click.
• Altura da caixa giratória: Você pode ajustar a altura da caixa giratória usando esta opção.

Em Flip box height, você encontrará duas guias FRONT e BACK. Selecione qualquer uma das opções para personalizar os elementos da flip box para cada lado. Você encontrará a mesma opção para ambos os lados. 

As opções que você pode personalizar para cada lado da flip box incluem: 

• Tipo de mídia: Você pode escolher um ícone ou imagem. Você também pode escolher a opção nenhum se não quiser adicionar nenhum arquivo de mídia.
• Ícone/Escolher arquivo: Dependendo da opção escolhida para Tipo de mídia, você pode escolher o ícone/imagem aqui. 
• Título: Forneça um título.
• Legenda: Você pode adicionar uma legenda aqui.
• Descrição da virada: Escreva uma descrição relevante usando esta opção.
• Alinhamento: Você pode definir o alinhamento para esquerda, centro ou direita.

Depois de preparar o conteúdo para ambos os lados da flip box, é hora de alterar o estilo. 

Etapa 4: estilize sua flip box #

Agora vá para a guia Estilo e expanda cada uma das seções para alterar as opções de estilo relacionadas:

Embrulho: No wrapper, você pode personalizar o tipo de plano de fundo, cor, localização, segunda cor, localização, tipo, ângulo e assim por diante. Você pode personalizar as opções para a frente e para trás da flip box.

Ícone: Se você expandir esta opção, poderá alterar a cor, o tipo de plano de fundo, a sombra da caixa, o tipo de borda e assim por diante, tanto para a visualização normal quanto para a visualização instantânea. Você pode personalizar o estilo do ícone na parte frontal e traseira da flip box.

Título: Aqui você pode personalizar a tipografia, a cor do título e a margem do título para ambos os lados da flip box.

Legenda: Expanda esta opção para personalizar a tipografia, a cor do título e a margem da legenda para ambos os lados da flip box.

Descrição: Aqui você pode personalizar a tipografia, a cor da descrição e a margem da descrição para ambos os lados da flip box.

Botão: Expanda a seção de botões para personalizar a cor do texto, a cor do plano de fundo, o tipo de borda, o raio da borda, a caixa de borda e muitas outras opções. Você pode estilizar o botão para visualizações normais e instantâneas.

Por fim, clique em publicar/atualizar para salvar as alterações e visualizar sua flip box Elementor: