Este modelo tornou-se atualmente o mais utilizado pelos usuários e isso se deve ao seu fácil gerenciamento e ao fato de que você não deve começar do zero. Como faria com outros modelos de web Projeto. Nem seria necessário converter para HTML e você pode ver um exemplo aqui, o que também resulta em uma economia de tempo significativa.
Como nosso principal objetivo é mostrar a você o bom funcionamento dessas ferramentas. Com Divi ensinamos como formatar um formulário Contact Form 7.
Como criar e adicionar um botão CTA ao menu de um modelo DIVI
Antes de começarmos, precisamos dizer que adicionar um Botão CTA o call to action no menu principal acaba sendo muito importante e simples. Assim como adicionar um atalho ao seu telefone, e isso o torna um botão especial, com funções especiais. E isso deve atrair a atenção de uma maneira diferente do restante dos botões que encontraremos no menu principal.
Este botão pode ser usado para muitas ações, como comentar um registro, vender um produto, solicitar informações, etc. Esclarecido este ponto, iremos ao nosso site e depois nos posicionaremos no menu esquerdo. Lá vamos criar um clipe na aba Aparência e depois no Menu.
Essa ação nos levará ao Janela de menu e queremos que um novo botão apareça na estrutura do menu. Então vamos para a opção Links Personalizados e escrevemos o tipo de link, que poderia ser Reservas. E na URL inserimos o caractere numeral (#) e finalmente criamos um clipe na opção Adicionar ao menu.
Agora, a próxima coisa a fazer é ir para o canto superior direito da janela e selecionaremos a guia Opções de tela. Quando você fizer isso, algumas opções aparecerão na seção Mostrar Propriedades Avançadas do menu. Precisamos verificar se a opção Classes CSS é selecionado, caso contrário, nós o selecionamos.
Feito isso, vamos para a opção de menu Salvar e criar um clipe, depois vamos para o botão criado, que neste caso é Reservas. E criaremos um clipe na seta localizada à direita, quando fizermos isso várias opções aparecerão e iremos para Classes CSS Opcionais. E vamos escrever o seguinte cta-menu e para finalizar vamos criar um clipe no Salvar menu.
Digite o código para criar e adicionar um botão CTA ao menu
Feito isso, voltaremos ao painel do lado esquerdo e criaremos um clipe na aba Divi e depois em Opções de Tema. Isso nos levará à janela e rolaremos para baixo até encontrar a opção CSS personalizada. Lá precisamos colar o seguinte código:
.cta-menu a {
borda: sólido 2px #fff;
preenchimento: 10px! importante;
raio da borda: 25px;
fundo: # ffcd02;
cor: #fff! importante;
}
.cta-menu a: hover {
borda: sólido 2px # ffcd02;
fundo: # ef5555;
cor: # 000! importante;
opacidade: 1! importante;
}
Questo códice irá adicionar um formato ao nosso botão, como cor, divisão interna, borda, etc. no primeiro código ele mostra como é o botão e o segundo código mostra como ele ficará quando passarmos o mouse sobre ele. Depois disso, não iremos para o final da janela e criaremos um clipe na opção Salvar alterações.
Agora basta ir ao nosso site e atualizar a página, para que possamos ver o botão criado. E desta forma didática e simples concluímos mais um tutorial que te ajudou a crie e adicione um botão CTA a um menu de modelo DIVI.
