Divi Plugin Destaque: Caldera Forms Style Customizer para Divi e Extra

O Caldera Forms faz um ótimo trabalho em se integrar ao estilo do seu site. E se você quisesse estilizá-lo usando as ferramentas de estilização familiares do Divi e do Extra Theme Customizer? Você pode fazer isso com um plug-in de terceiros chamado Caldera Forms Style Customizer for Divi e Extra.

Os Formulários do Caldera podem ser estilizados usando as opções padrão do Customizador de Tema, no entanto, essas opções estilizam o tema. Isso significa que, se você alterar o estilo do texto do formulário, também alterará o estilo do corpo do texto do seu site. Se você quiser estilizar seus formulários separadamente de seu conteúdo, normalmente terá que estilizar manualmente com CSS. O Caldera Forms Style Customizer para Divi e Extra resolve esse problema adicionando recursos de estilo ao Theme Customizer.

Neste plugin em destaque, daremos uma olhada no Caldera Forms Style Customizer for Divi and Extra plugin e ver como é fácil de usar. Este plugin de terceiros pode ser adquirido através do Caldera Forms. Como o nome sugere, ele funciona com Divi e Extra.

Instalação e ativação

Faça upload e ative o plugin normalmente. Não há configurações para ajustar. Os recursos estão prontos para uso.

Personalizando um Formulário

Inseri o formulário de contato padrão em uma página com todo o estilo padrão. Farei todos os ajustes a este formulário, um de cada vez. Então veremos um ou dois exemplos.

Os novos recursos de estilo são adicionados ao Theme Customizer. Abra o Theme Customizer (ou Module Customizer - ambos funcionam) e clique em Caldera Forms Style Customizer .

Isso adiciona 20 novas guias de personalização para personalizar cada aspecto do formulário, incluindo texto, botões, campos, interruptores, seletor de data, breadcrumbs, etc. Aqui está uma olhada em cada configuração.

Campos de Texto

Campos de texto altera a cor do texto, espaço reservado e borda, bem como largura da borda, raio da borda e altura de linha única dos campos.

Passe o mouse sobre os campos de texto

A passagem do mouse sobre os campos de texto altera o texto, o campo e as cores da borda.

Foco nos campos de texto

O foco dos campos de texto altera a cor do texto, do plano de fundo e da borda do campo que está em foco. Neste exemplo, o campo no centro tem foco, mas o campo com fundo escuro tem foco.

Seleção suspensa

A seleção suspensa personaliza as cores do plano de fundo, texto, seta e borda. Você também pode ajustar a largura e o raio da borda.

Suspenso Selecionar Hover

A seleção suspensa do mouse controla a cor do plano de fundo, texto, seta e borda ao passar o mouse.

Caixas de seleção e botões de rádio

Caixas de seleção e botões de rádio ajustam a cor dos itens selecionados de suas caixas de seleção e botões de rádio.

Chaves de alternância

Os interruptores de alternância ajustam as cores do plano de fundo, fonte e borda de ambos os interruptores não selecionados e selecionados individualmente. Você também pode ajustar a largura da borda e o raio de ambos os interruptores juntos.

Alternar interruptores pairar

Chaves de alternância O foco ajusta as cores do plano de fundo, fonte e borda da chave selecionada e não selecionada de forma independente. Este é o switch não selecionado.

O azul é a chave selecionada.

Botão de envio

O botão Enviar controla o fundo, a fonte e as cores da borda, e o raio da borda, a largura do botão e sua localização. Você também pode ajustar o tamanho da fonte e o espaçamento entre as letras. Um recurso de transformação de texto altera as maiúsculas e minúsculas do texto. Escolha minúsculas, maiúsculas, maiúsculas, inicial ou herdar.

Botão Enviar Hover

Botão Enviar Hover controla as cores do plano de fundo, fonte e borda.

Botão de reset

O botão Redefinir controla o plano de fundo, a fonte e as cores das bordas. Você também pode ajustar o tamanho da fonte e espaçamento entre letras, largura do botão, posição do botão, largura da borda e raio da borda. Este também tem transformação de texto.

Botão Reset Hover

Botão Redefinir Hover ajusta as cores do botão para o plano de fundo, texto e borda.

Outros Botões

A Caldera possui vários outros tipos de botões. Outros botões controlam tudo, exceto Enviar e Redefinir. Ajuste as cores da fonte, borda e plano de fundo e ajuste a largura e o raio da borda. Neste exemplo, criei os botões Anterior e Próximo.

Outros botões pairam

Outros botões Hover controla as cores das fontes, borda e plano de fundo.

Selecionador de Data

O selecionador de data inclui cores regulares e flutuantes na mesma guia. Ajuste as cores da fonte e do fundo. Neste exemplo, estou passando o mouse sobre o 10 e o 12 está selecionado.

Fazer upload da lista de arquivos

Fazer upload da lista de arquivos controla as cores do plano de fundo e do texto na lista de arquivos carregados.

Quebra de Seção

A quebra de seção controla a cor da quebra de seção, a largura da borda e as margens superior e inferior.

Migalhas de pão

A localização atual permite escolher as cores das fontes da página ativa e de outros links, o separador, o plano de fundo e a borda. Ajuste a largura e o raio da borda.

Alerta de Sucesso

O Alerta de sucesso ajusta a fonte, o plano de fundo e as cores da borda, além do raio e largura da borda. Também ajusta a altura da caixa.

Diversos

Diversos oferece controle sobre as cores do ícone obrigatório, campos com erro, texto de descrição, cor do cartão de crédito e posição do ícone do cartão de crédito. O texto da descrição inclui o tamanho da fonte, espaçamento entre letras e opções de transformação do texto. Eu escolhi letras maiúsculas.

Exemplos

Criei um formulário de upload de currículo (na verdade, ele é integrado ao Caldera Forms, mas cliquei no botão para selecioná-lo) e o defini como modal. Primeiro, quero estilizar a página com o Divi Builder.

Adicionei uma imagem de plano de fundo e selecionei cores que contrastam em vez de se misturar com o plano de fundo.

Este usa as mesmas configurações com um fundo diferente. Desta vez não usei o formulário em modal. Em vez de ter um fundo branco, os campos do formulário são colocados diretamente sobre a imagem.

Importar Exportar

É fácil importar ou exportar os estilos do Caldera Forms que você criou no personalizador. No Painel, vá para Formulários Caldera , Estilos - Importar / Exportar . Isso importa e exporta os estilos como um arquivo JSON, permitindo que você use facilmente seus estilos de Formulários Caldera em qualquer site que use este plugin. Todo o seu estilo será substituído pelo estilo do arquivo importado.

Licença e Suporte

O plugin pode ser adquirido como uma licença de um ano (anual recorrente). A licença permite que o plugin seja usado em um, cinco ou quinze sites (dependendo da camada que você escolher) e inclui um ano de suporte e atualizações.

Pensamentos finais

Ele achou este plugin fácil de usar. As configurações do Customizer são intuitivas. Eles estão bem rotulados e organizados de uma forma que faz sentido. Não tive problemas para encontrar as configurações que queria. Gostaria de ver uma maneira fácil de voltar às configurações padrão de uma vez ou fazer ajustes globais (como aumentar ou diminuir a escuridão geral de todas as cores). Provavelmente não é realista, mas parece interessante.

Não é possível estilizar formulários individuais com as configurações do Customizador. Todos os formulários usam esse mesmo estilo como configuração global e terão que ser estilizados individualmente usando os recursos de estilo do Caldera. Essa é a natureza do Customizador de Tema. Se você estiver interessado em estilizar seu Caldera Forms em uma base global, não há maneira mais fácil de fazer isso do que usar o Caldera Forms Style Customizer para Divi e Extra.

Nós queremos ouvir de você. Você já experimentou o plugin Caldera Forms Style Customizer for Divi and Extra? Deixe-nos saber o que você pensa sobre isso nos comentários.

Imagem em destaque via Irina Strelnikova / shutterstock.com