Como todos sabem, Divi é um template que é usado na plataforma WordPress e com ele você pode fazer tudo que você pode imaginar e o que você não pode. Pois pode-se dizer que seus desenhos não têm limites. E para mostrar um pouco mais, tudo o que você pode fazer com este template. Trouxemos para você o seguinte artigo que irá explicar como criar e adicionar um botão CTA ao menu de um template DIVI, Elegant Themes.
Este template se tornou atualmente o mais utilizado pelos usuários e isso devido ao seu fácil manuseio e que você não deve começar do zero. Como você faria com outros modelos de design para páginas da web. Nem seria necessário converter para HTML e aqui você pode ver um exemplo, o que também se traduz em uma economia de tempo substancial.
Nosso objetivo principal é mostrar a você o funcionamento correto dessas ferramentas. Com Divi Ensinamos você a formatar um formulário de contato 7.
Como criar e adicionar um botão CTA ao menu de um modelo DIVI
Antes de começar, devemos dizer que adicionar um Botão CTA o call to action no menu principal acaba sendo muito importante e direto. Muito parecido com adicionar um link no telefone, e isso o torna um botão especial, com recursos especiais. E isso deve chamar a atenção de uma forma diferente do resto dos botões que encontraremos no menu principal.
Este botão pode ser usado para inúmeras ações, como comentar sobre um registro, vender um produto, solicitar informações, etc. Esclarecido este ponto, iremos ao nosso site e a seguir nos posicionaremos no menu do lado esquerdo. Lá vamos fazer um clipe na guia Aparência e depois nos Menus.
Esta ação nos levará ao Janela do menu e queremos que um novo botão apareça na estrutura do menu. Em seguida, vamos para a opção Links personalizados e escrevemos o tipo de link, que pode ser Reservas. E na URL colocamos o caracter numeral (#) e por fim fazemos um clipe na opção Adicionar ao menu.
Agora, a próxima coisa que temos que fazer é ir para a parte superior direita da janela e selecionar a guia Opções de tela. Ao fazer isso, algumas opções serão exibidas na seção Mostrar propriedades avançadas do menu. Devemos confirmar que a opção está selecionada Classes CSSSe não for, nós o selecionamos.
Feito isso, vamos até a opção de menu Salvar e fazemos um clipe, a seguir vamos ao botão criado, que neste caso é Reservas. E vamos fazer um clipe na seta que está à sua direita, ao fazer isso aparecerão várias opções e iremos para Classes CSS Opcionais. E vamos escrever o seguinte cta- menu e, para finalizar, faremos um clipe em Salvar menu.
Inserindo o código para criar e adicionar um botão CTA ao menu
Feito isso, voltaremos ao painel esquerdo e faremos um clipe na guia Divi e depois em Opções de tema. Isso nos levará para a janela e vamos rolar para baixo até encontrar a opção CSS customizada. Lá devemos colar o seguinte código:
.cta-menu para {
borda: 2px sólido #fff;
preenchimento: 10px! importante;
raio da borda: 25px;
plano de fundo: # ffcd02;
cor: #fff! importante;
}
.cta-menu a: hover {
borda: 2px sólido # ffcd02;
plano de fundo: # ef5555;
cor: # 000! importante;
opacidade: 1! importante;
}
Este código irá irá adicionar um formato ao nosso botão, como cor, separação interna, borda, etc. no primeiro código mostra a aparência do botão e o segundo código mostra a aparência que terá quando passarmos o mouse sobre ele. Depois disso não vamos ao final da janela e vamos fazer um clipe na opção Salvar alterações.
Agora só temos que 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 vai te ajudar a crie e adicione um botão CTA ao menu de um modelo DIVI.
