Como abrir os botões Divi Fullwidth Header e Slider em uma nova guia / janela

Todos nós sabemos que construir um site que atraia e fale a um determinado público é um processo. Cada ação que eles realizam em seu site é importante porque faz parte da jornada do cliente. Cada visitante, e cliente potencial, precisa se sentir pessoalmente abordado e compreendido.

Colocar o seu site no ponto requer muitas coisas, como um bom design, conteúdo bem pensado e CTAs suficientes que levarão seus visitantes a realizar as ações que você e eles desejam.

Um dos elementos mais usados ​​que suportam as frases de chamariz em um site é um botão. Normalmente, você pode encontrar botões em várias seções de um site. Eles podem levar a diferentes partes do site ou podem encaminhar um visitante para um site externo.

Com o Divi, permitimos que cada pessoa que está criando um site inclua seus botões onde quiser e quanto quiser. Se você deseja interagir com seu público-alvo de forma rápida e despertar a curiosidade desde o início de sua visita em seu site, é uma boa coisa adicionar um CTA em sua seção de herói.

Por que você deve abrir automaticamente um link em uma nova guia / janela?

Não podemos influenciar a abertura de um link em uma nova janela. É algo que muitas pessoas usaram mal no passado e, agora, tudo depende das preferências do usuário. No entanto, temos a opção de abrir um determinado link em uma nova guia em vez de na mesma janela. Existem muitos motivos pelos quais você deseja abrir um link em uma nova guia. Aqui estão alguns deles:

Não permitindo que seus visitantes saiam do site

No momento em que você perde seus visitantes, é muito difícil trazê-los de volta ao seu site. Isso geralmente acontece quando você os envia para um site externo dentro da mesma janela ao clicar em um botão.

Então, por que mandá-los embora em primeiro lugar? Ao abrir os botões em uma nova guia, você garante que eles ainda tenham uma página aberta com o seu site em suas guias. Eles podem voltar à sua página sem precisar passar pelo histórico.

Continuando sua permanência em seu site após fechar o link que abriram

É natural fechar uma guia sempre que terminar de ler algo. É isso ou você está clicando para sair. Em ambas as situações, a partir do momento em que eles passam para a próxima ação, eles estão a um passo de distância de você.

Abrir automaticamente o link em uma nova guia ou janela ajuda a lembrar as pessoas de como elas pousaram em outro lugar; através do seu site.

Pegando na guia aberta mais tarde

Você não seria a primeira pessoa a ter um monte de guias alinhadas uma ao lado da outra por dias. Isso é exatamente o que torna valioso manter o seu presente no navegador das pessoas. Se os visitantes encontrarem seu site em suas guias abertas depois de alguns dias, eles podem ter tido tempo para deixar seu conteúdo penetrar e dar uma nova rodada.

É provável que o conteúdo seja muito mais compreendido ao ser lido pela segunda, terceira ou quarta vez.

Primeiros passos: Abra os botões Fullwidth Header & Slider em uma nova guia

Quando não estamos usando uma seção Fullwidth com um Fullwidth Header ou Fullwidth Slider, geralmente adicionamos uma seção padrão e adicionamos Módulos de botão a ela manualmente. Na guia Conteúdo de cada Módulo de botão, você pode escolher se deseja abrir um link na mesma janela ou em uma nova guia. Você pode encontrar essa opção na subcategoria Link da guia Conteúdo.

No Fullwidth Header & Slider, essas possibilidades não estão incluídas. E como o HTML é predefinido, não podemos simplesmente modificar o código HTML que o acompanha. É por isso que vamos adicionar o código jQuery que fará com que os botões Fullwidth Header e Fullwidth Slider abram em uma nova guia / janela.

Criação de um cabeçalho de largura total

Vamos começar adicionando uma nova seção Fullwidth a uma página existente ou a uma nova página.

Dentro dessa seção de largura total, selecione o cabeçalho de largura total. O Fullwidth Header fornece um site com um lindo cabeçalho que tem tudo o que é necessário. Agora, role para baixo a guia Conteúdo do cabeçalho Fullwidth e anote o texto que você gostaria que apareça no botão. Depois disso, adicione um link ao botão também.

Em seguida, vá para a guia Avançado do cabeçalho Fullwidth e role para baixo até encontrar os campos do botão. Neste caso, queremos apenas usar o botão número um. Suponha que você queira abrir o segundo botão em uma nova guia, você terá que usar a classe atribuída ao botão dois.

Clique no campo Botão Um e observe a classe aparecer em uma cor de fonte laranja. A classe é '.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button'. Precisamos dessa classe em nosso código jQuery. Se você deseja que o segundo botão seja aberto em uma nova guia ou janela, salve a aula em algum lugar.

Criação de um controle deslizante de largura total

Se você quiser adicionar um controle deslizante de largura total, vá em frente e adicione uma nova seção de largura total. Desta vez, coloque um controle deslizante de largura total na seção. Anote o texto do botão na guia Conteúdo e vá para a guia Avançado.

Role a guia para baixo até encontrar a opção Botão Deslizar. Copie a classe atribuída do botão que faz parte do Fullwidth Slider.

Adicionando código jQuery às opções do tema Divi

O código que usaremos para ajudar a abrir os links em uma nova guia para Fullwidth Header & Slider são diferentes. Além disso, também podemos integrar o código jQuery em nosso site de duas maneiras diferentes. O mais comum é adicionar código às opções de tema do seu site Divi.

A razão pela qual as pessoas usam essa opção com mais frequência é porque ela se aplica a todo o site. Em qualquer página do seu site em que você esteja, o código será aplicado. É a maneira mais fácil de adicionar código personalizado ao seu site se você estiver reutilizando certas seções ou elementos em diferentes páginas do seu site.

Para adicionar o código a todo o seu site, vá para Divi> Opções de tema> Integração e adicione o seguinte código ao <head> do seu site :

Código jQuery para o botão Fullwidth Header

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

Código jQuery para o botão Fullwidth Slider

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

Não se esqueça de adicionar o texto entre as tags <script> como mostrado na tela de impressão acima.

Como você pode notar, o código é ligeiramente diferente para Fullwidth Header e Fullwidth Slider. Você pode notar como a classe de cada botão é escrita entre colchetes na terceira linha do código. Então, suponha que você queira que o código se aplique ao segundo botão do Fullwidth Header, apenas substitua a classe escrita pela que está atribuída ao segundo botão.

Depois disso, salve as alterações. O código será aplicado imediatamente em todo o seu site.

Adicionando código jQuery ao Módulo de Código

Outra possibilidade de adicionar o código ao seu site é usando o Módulo de Código. Este módulo é geralmente usado quando o código que você deseja incluir se aplica apenas a uma página.

Abra a página onde deseja aplicar as alterações e adicione uma linha com uma coluna na parte superior da página. Depois disso, adicione um módulo de código a essa linha.

Copie o mesmo código e cole-o na Caixa de conteúdo na subcategoria Texto da guia Conteúdo.

Código jQuery para o botão Fullwidth Header

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

Código jQuery para o botão Fullwidth Slider

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

Salve as alterações.

Não se esqueça de adicionar o texto entre as tags <script> como mostrado na tela de impressão acima. O código agora se aplicará apenas a essa página do site.

Pensamentos finais

Adicionar o código a seguir em seu site só é necessário quando você deseja que um botão seja aberto em uma nova guia ao usar o cabeçalho e controle deslizante de largura total em uma seção de largura total. Com o Módulo de botão, você tem uma opção incluída no Divi Builder onde pode escolher abrir um link em uma nova guia.

Se você deseja usar o código em várias páginas do seu site, adicione-o às Opções de Tema do seu site. Mas se você estiver usando apenas o código para um Cabeçalho ou Slider Fullwidth, talvez seja melhor adicionar o código em um Módulo de Código nessa página específica.

Com que frequência você faz seus links abrirem em uma nova guia e por quê? Deixe-nos saber na seção de comentários abaixo!