Muitas vezes, esses tipos de páginas trazem muitos pequenos detalhes a serem cobertos, como como os produtos podem ser filtrados no mecanismo de pesquisa ou designs de publicidade relacionados.
Dito isto, podemos perceber quando o nível de detalhe para poder cobrir dentro do nosso próprio websites. No entanto, tudo depende do nível de criatividade que possamos ter que nos envolver em nosso site. Porque, antes disso, vamos falar sobre um pequeno detalhe que você pode cobrir em alguns minutos, e este é o Formulário de contato 7.
ContactForm 7 é um dos plugins de formulário mais usados por usuários de diferentes páginas da web. Isso porque é uma forma muito eficiente de nossos visitantes interagirem conosco através de uma página de contato ou outro local.
Mas você tem o pequeno detalhe de que muitas vezes acaba sendo um plugin de pesquisa bastante básico, a ponto de muitos considerarem sua aparência bastante. desagradável. É por isso que precisamos pensar em maneiras melhores de adaptar esse plugin popular ao nosso tema.
Com este último em mente, podemos citar o Divi como um dos temas mais populares da WordPress e pela sua estética. É muito legal ver. Por esse motivo, pode ser um pouco chato usar Formulário de contato 7 dentro de uma página da web com Divi, porque os dois estilos não combinam.
É por isso que temos que formatar o ContactForm 7 para que possa ser visto no mesmo sentido estético do Divi. Veja abaixo como você pode fazer isso.
Personalização do ContactForm 7 para Divi
Na verdade, ser capaz de usar Formulário de Contato 7 é uma benção quando queremos receber uma mensagem de nossos visitantes e poder interagir com eles se quisermos. Mas se temos Divi como tema, podemos ter o pequeno problema de descobrir que este plugin não corresponde ao nosso tema.
É por isso que precisamos reformular o visual do ContactForm 7 e adaptá-lo ao visual do Divi. Podemos fazê-lo de uma forma muito simples. Para fazer isso, precisamos entrar no menu Divi e depois na opção que aparece como "Opções de temas", aqui encontraremos o CSS personalizado. Dentro disso, teremos que inserir o seguinte código.
.wpcf7-texto,.wpcf7-textarea,.wpcf7-captchar {
cor de fundo: #eee!importante;
borda: nenhuma! importante;
largura: 100%! importante;
-moz-border-radius: 0! importante;
-webkit-border-radius: 0!importante;
raio da borda: 0! importante;
tamanho da fonte: 14px;
cor: # 999! importante;
preenchimento: 16px! importante;
-moz-box-sizing: border-box;
-sizing-box-webkit: frame-border;
tamanho da caixa: caixa de borda;
}
.wpcf7-submit {
cor: # 8B3C90! importante;
margem: 8px automático 0;
cursor: ponteiro;
tamanho da fonte: 20px;
peso da fonte: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
raio da borda: 3px;
preenchimento: 6px 20px;
altura da linha: 1,7 cm;
inferior: transparente;
borda: sólido 2px;
-webkit-font-smoothing: antialias;
-moz-osx-font-smoothing: tons de cinza;
-moz-transição: todos os 0.2s;
- tradução do webkit: todos os 0.2s;
transição: todos 0.2s;
}
.wpcf7-submit: hover {
cor de fundo: #eee;
cor da borda: #eee;
preenchimento: 6px 20px! importante;
}
Tenha em mente que cada um dos lugares onde é dito #eee e #8B3C90, você terá que alterá-lo para poder personalizar as cores mais de acordo com as que você usa em sua página da web. Agora você só precisa usar o construtor Divi para poder personalizar o módulo.
Por que não usar outras alternativas?
Você pode estar se perguntando por que não deveria fazer melhor uso da ferramenta de formulário de contato que vem com o Divi. A resposta a esta pergunta é que não é tão útil quanto usar o ContactForm 7, não tem muitos opções e não é tão intuitivo e direto. É por isso que é melhor ficar com o ContactForm 7 e alterá-lo conforme necessário.
TagsTutorial
