Como adicionar URLs dinâmicos a seus CTAs com Divi e ACF

Ao criar a estrutura do seu site, são grandes as chances de você querer incluir os mesmos CTAs em várias páginas, postagens e projetos. Claro, você pode manter os URLs por perto e copiá-los e colá-los à medida que avança, mas essa não é necessariamente a maneira mais fácil de fazer. Antes de começar a criar suas páginas, postagens e projetos, você pode configurar uma lista de todos os URLs que você pode precisar, definir um valor padrão para eles e usar os valores padrão em novos itens que você criar.

Se por algum motivo os URLs forem diferentes em uma determinada página, postagem ou projeto, você pode alterar isso dentro do próprio item sem aplicar ao valor padrão do campo inteiro. Os valores padrão anexados aos URLs ajudarão a dar a você uma vantagem inicial ao criar uma nova página, postagem ou projeto. Neste tutorial, mostraremos passo a passo como chegar lá!

Vamos lá!

Visão geral do tutorial

• Essa abordagem funciona melhor se você adicionar o grupo de campos personalizados a um novo site, antes de começar a adicionar páginas, postagens e projetos
• Instale o plugin Advanced Custom Fields em seu site WordPress
• Dentro do plugin, você poderá configurar um grupo de campos que aparecerá em todas as suas páginas, posts e projetos
• Crie um campo de URL separado para todos os URLs possíveis de que você pode precisar em todo o seu site
• Atribua um valor padrão a cada um dos campos; este valor padrão aparecerá automaticamente em cada nova página, postagem ou projeto
• Em páginas, postagens e projetos existentes, os valores só aparecerão quando você entrar no backend e salvar os URLs padrão
• Use os campos de URL em todo o design Divi como conteúdo de link dinâmico (página, postagem, projeto, modelo)
• Se você alterar o URL padrão nas configurações do campo, o URL padrão antigo ainda será aplicado nas páginas, postagens e projetos que herdaram o valor padrão anterior

1. Instale e ative o plug-in ACF

A primeira coisa que você precisa fazer é instalar o plugin Advanced Custom Fields em seu site. Você pode baixar o plug-in aqui ou apenas pesquisá-lo dentro do painel do WordPress. Depois de instalar o plug-in, certifique-se de ativá-lo também para começar imediatamente.

2. Configure um grupo de campos em todas as postagens, páginas e projetos

Agora, uma vez que o plugin ACF foi instalado, é hora de criar o grupo de campos de URL. Este grupo conterá todos os CTAs que você usará várias vezes em suas páginas, postagens e projetos. Vá para o painel do WordPress> Campos personalizados> Adicionar novo .

Dê ao seu grupo um título e continue configurando as regras. Estamos garantindo que o grupo de campos apareça em cada tipo de postagem em nosso site. Se, no entanto, deseja que os links apareçam em apenas um tipo de postagem específico, você pode ajustar as regras de acordo com suas necessidades.

Mostrar este grupo de campo se:

• Tipo de postagem - é igual a - Post ou
• Tipo de postagem - é igual a - página ou
• Tipo de postagem é igual a - Projeto

3. Adicionar diferentes campos de URL com valor padrão

Continuaremos adicionando os diferentes campos de URL. Conforme mencionado antes, você precisará de um campo de URL separado para cada URL que usar várias vezes em seus tipos de postagem. Para ilustrar como isso funciona, vamos adicionar três campos de URL diferentes. Um dos campos redirecionará os visitantes para a página de destino da galeria Divi, o segundo direcionará os visitantes para a página de contato e o outro redirecionará os usuários para a área de membros.

Então, digamos que estejamos começando com o CTA que redireciona as pessoas para a página de destino da galeria Divi. Vamos adicionar um novo campo para ele e dar a ele um nome de campo reconhecível. Dessa forma, uma vez dentro do construtor Divi, não há confusão quando se trata de selecionar o URL correto.

Continuaremos rolando para baixo nas configurações dos campos e selecione 'URL' como o tipo de campo.

A próxima e última coisa que você precisa fazer é adicionar um valor padrão ao campo. É aqui que você colocará o URL para o qual deseja que seu CTA redirecione. Assim que você adicionar esse valor padrão, ele será aplicado automaticamente a cada nova página, postagem e projeto que você adicionar.

Repita as etapas acima para cada campo de CTA necessário em seu site. Para este exemplo específico, isso significa que estamos criando dois campos extras; uma para a página de contato e outra para a área de membros.

Depois que todos os seus campos de URL forem adicionados, certifique-se de salvar todas as alterações feitas em seu grupo de campos.

4. Links de botão de link para URLs dinâmicos

Agora, ao entrar em uma postagem, página ou projeto, você notará o grupo de campos de URL na parte inferior. Se por algum motivo você quiser usar um URL diferente naquela página, postagem ou projeto específico, você pode adicionar outro URL no campo. O URL adicionado só se aplicará a essa página, postagem ou projeto específico em que você está trabalhando. No núcleo do grupo de campos, a URL padrão ainda será a mesma que você adicionou ao criar o campo.

Se você estiver usando os URLs padrão, mude para o Visual Builder para começar a vincular os botões em seu design ao URL correto.

Adicionar um URL dinâmico aos botões Divi é muito simples. Abra qualquer botão que você encontrar em sua página, vá para as configurações de link e clique no ícone de conteúdo dinâmico.

Depois de clicar no ícone dinâmico, você encontrará uma lista de conteúdo dinâmico para escolher. Nessa lista, você também verá os diferentes campos de URL. Selecione o campo de URL correto ao qual deseja vincular.

Repita as etapas para cada botão em sua página. Se os URLs em uma página, postagem ou projeto por qualquer motivo mudarem, você pode voltar para aquela página, postagem ou projeto específico e alterar o conteúdo dinâmico do URL no backend.

A mesma abordagem conta para adicionar URLs dinâmicos aos seus modelos também. Se você deseja adicionar um URL dinâmico a um botão em seu modelo de postagem de blog, por exemplo, você pode ir para o construtor de tema do seu site e abrir o editor de modelo de corpo de postagem.

Continue abrindo as configurações do módulo de botão, vá para as configurações do link e clique no ícone de conteúdo dinâmico.

Novamente, um menu suspenso aparecerá, onde você pode selecionar o conteúdo dinâmico do URL que corresponde ao CTA.

Certifique-se de alterar todas as alterações do construtor de tema após adicionar os URLs dinâmicos também!

Pensamentos finais

Neste post, mostramos como criar URLs dinâmicos e disponibilizá-los em cada página, postagem ou projeto do seu site. Usamos o conteúdo dinâmico do Divi em combinação com o plugin ACF. Conseguimos definir um valor padrão e aplicar esse valor de URL aos nossos CTAs. Este tutorial tem como objetivo permitir que você seja o mais eficaz possível ao criar sites com Divi! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.