Como criar e adicionar um botão CTA ao menu de um template DIVI |
junho 15, 2023Nosso objetivo principal é mostrar a você o funcionamento correto dessas ferramentas. Com Divi , ensinamos você a formatar um formulário de formulário de contato 7.
Como criar e adicionar um botão CTA ao menu de um modelo DIVI
Antes de começarmos, devemos informar que adicionar um botão de CTA ou call to action no menu principal é muito importante e simples. 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. Uma vez 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á à janela Menus 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 Classes CSS está selecionada , caso contrário, selecionamos.
Feito isso, vamos à 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á a 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 fazemos um clipe no menu Salvar .
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 personalizada. 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 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ó teremos 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 te ajudou a criar e adicionar um botão CTA ao menu de um template DIVI.