Como adicionar estilo CSS de estado de foco a elementos ao preencher um formulário Divi
Publicados: 2021-01-27Um dos principais objetivos da maioria dos sites é o envio de formulários. É assim que as empresas obtêm leads de vendas, assinantes de e-mail e muito mais. O design da web eficaz pode tornar o envio de formulários mais atraente para os visitantes e uma forma de aumentar o envolvimento, ainda mais, é adicionar um estilo adicional aos formulários durante o processo de “preenchimento”. Para fazer isso, podemos aproveitar o poder do estado de foco no CSS. Na verdade, o Divi tem opções de estilo de foco para campos de formulário embutidos nos módulos de formulário do Divi (Contato, Email Optin, etc.) para que você não precise depender de CSS externo para definir o estilo desses campos de formulário no estado de foco.
Neste tutorial, apresentaremos uma maneira empolgante de alterar o estilo de vários elementos quando um visitante clica em um campo em um formulário Divi. Você não apenas poderá adicionar estilos de foco integrados do Divi para o campo específico em foco, mas também poderá alterar o estilo dos elementos ao redor do campo. Isso permitirá que você aprimore a IU de envio de formulários com animações e design sutis.
Vamos começar!
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Usando a: focus-within CSS Pseudoclasse
Como o Divi já possui opções integradas para definir o estilo de um campo de formulário no estado de foco, este tutorial é sobre como estender esse estilo de foco a outros elementos também. Para obter o estilo de estado de foco adicional, usaremos o Divi Builder e alguns trechos de CSS customizados que usam a pseudoclasse : focus .
Não se preocupe, não é tão complicado quanto pode parecer.
Diferença entre: foco e: foco dentro
:foco
Semelhante a : hover , a pseudo classe : focus em CSS é usada para aplicar estilo a um elemento sempre que ele estiver no estado de foco. O estado de foco geralmente é acionado clicando em um elemento como um campo de entrada em um formulário. Por exemplo, quando um usuário clica dentro de um campo de formulário, ele ativa o estado de foco para o campo. Isso permite que você use : focus psuedo-class para direcionar o estilo desse campo em CSS.
: foco dentro
A pseudoclasse : focus visa (ou representa) o estilo do elemento que está no estado de foco. No entanto, a pseudoclasse: focus-within leva isso um passo adiante. A pseudoclasse: focus-within visa o estilo do elemento em foco e também qualquer elemento que contenha um elemento em foco . Isso significa que você pode direcionar qualquer elemento pai do elemento em foco e aplicar esses estilos enquanto o elemento estiver em foco. Em outras palavras, posso clicar dentro de um campo de formulário e alterar a cor de fundo do campo de formulário (usando : focus ) e simultaneamente alterar a cor de fundo da seção pai do campo de formulário (usando : focus-within ).
Adicionando estilo de estado de foco a elementos ao preencher um formulário Divi
Agora que temos uma ideia de como : focus e : focus funcionam, vamos testá-lo adicionando algum estilo de estado de foco neste tutorial.
Adicionar layout pré-fabricado
Para começar, adicione o layout predefinido da página Contato do Blog de Viagem para iniciar o design deste tutorial e obter um formulário de contato pronto para usar como nosso exemplo. Para fazer isso, clique no ícone carregar da biblioteca no menu de configurações do construtor. Na guia de layouts predefinidos, clique em Travel Blog Layout Pack e selecione o layout da página de contato. Em seguida, clique no botão "Usar este layout".
Atualizar as configurações do formulário de contato
No layout da página de contato, abra as configurações do módulo de formulário de contato e atualize o título com o texto “Entre em Contato”.
Estilo de Foco de Campo
Na guia de design, atualize o estilo de foco do campo da seguinte maneira:
- Cor de fundo do foco dos campos: rgba (255,107,90,0,15)
- Cor do texto do foco dos campos: # 000000
Isso definirá o estado do foco do campo real (uma opção convenientemente nativa das configurações do Divi Builder).
Classe CSS do formulário de contato
Em seguida, adicione um CSS personalizado ao formulário de contato na guia avançada da seguinte maneira:
- Classe CSS: divi-form-focus
Esta será a classe que usaremos para definir os estilos de formulário quando um campo de formulário estiver em foco.
Atualizar configurações de coluna
Em seguida, abra as configurações da coluna pai do formulário de contato.
Preenchimento
- Preenchimento: 5% superior, 5% inferior, 3% esquerdo, 3% direito
Classe CSS da coluna
Na guia avançada, dê à coluna a seguinte classe CSS:
- Classe CSS: divi-column-focus
Esta será a classe que usaremos para direcionar os estilos de coluna quando o campo do formulário (um elemento filho) estiver em foco.
Adicionar classe CSS de seção
Para usar CSS para direcionar os estilos de seção quando um campo de formulário (também um elemento filho da seção) estiver em foco, abra as configurações da seção que contém o formulário de contato e adicione a seguinte classe CSS:
- Classe CSS: divi-section-focus
Adicionando CSS Personalizado com um Módulo de Código
Conforme discutido anteriormente, usaremos a pseudoclasse CSS : focus para definir o estilo de outros elementos Divi quando o campo do formulário estiver em foco. Os elementos que vamos estilizar (o formulário, a coluna e a seção) já receberam uma classe personalizada que podemos usar para direcioná-los em nosso CSS (“divi-form-focus”, “divi-column-focus” , “Divisão-foco”).
Agora, tudo o que precisamos fazer é adicionar nosso código CSS. Para fazer isso, adicione um módulo de código no módulo de formulário de contato.
Em seguida, cole o seguinte código dentro da área de conteúdo do código:
Certifique-se de envolver o código com as tags de estilo necessárias.
/*add smooth transitions for focus state styles*/
.divi-form-focus, .divi-column-focus, .divi-section-focus, .divi-form-focus h2 {
transition: all 300ms
}
/*style form module h2 heading in form focus state*/
.divi-form-focus:focus-within h2 {
font-size: 14px !important;
color: #888888;
}
/*style parent column in form focus state*/
.divi-column-focus:focus-within {
background: #ffffff;
transform: scale(1.2);
box-shadow: 0 0 30px rgba(0,0,0,0.2);
}
/*style parent section in form focus state*/
.divi-section-focus:focus-within {
background: rgba(255,107,90,0.15);
}
Observe que cada um dos snippets CSS que possuem a classe CSS do elemento (ou seja, “divi-column-form”) tem a pseudoclasse: focus-within para representar o estilo dessa classe de elemento quando o campo do formulário está focado. Um fragmento estiliza o h2 (ou título) do formulário no estado de foco do formulário. Um fragmento estiliza a coluna pai no estado de foco do formulário. E um fragmento estiliza a seção pai no estado de foco do formulário.
Resultado final
Aqui está o resultado final. Observe como os diferentes elementos mudam de estilo ao preencher o formulário.
Pensamentos finais
Adicionar estilos de foco CSS a elementos ao preencher um formulário no Divi pode realmente melhorar a experiência do usuário no envio de formulários. A chave é usar a pseudoclasse: focus-within junto com as classes personalizadas que você adiciona aos elementos que deseja estilizar quando o formulário está no estado de foco. Isso pode ser feito com o mínimo de CSS customizado adicionado à página e, se você estiver familiarizado com a adição de seu próprio CSS customizado, as possibilidades são imensas.
Estou ansioso para ouvir de você nos comentários.
Saúde!