{"id":371532,"date":"2023-04-04T12:28:00","date_gmt":"2023-04-04T09:28:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371532"},"modified":"2023-04-04T12:43:20","modified_gmt":"2023-04-04T09:43:20","slug":"a-maneira-mais-facil-de-adicionar-uma-chamada-a-acao-do-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/a-maneira-mais-facil-de-adicionar-uma-chamada-a-acao-do-wordpress\/","title":{"rendered":"A maneira mais f\u00e1cil de adicionar uma chamada \u00e0 a\u00e7\u00e3o do WordPress"},"content":{"rendered":"\n

O call to action ou CTA do WordPress \u00e9 mais comumente um bot\u00e3o em um site que convida o usu\u00e1rio a realizar uma a\u00e7\u00e3o espec\u00edfica<\/strong>. Mas, um CTA tamb\u00e9m pode vir na forma de uma imagem, conte\u00fado, texto e o que voc\u00ea tiver.<\/p>\n

Os CTAs do WordPress s\u00e3o uma \u00f3tima maneira de incentivar a intera\u00e7\u00e3o em seu site, promover vendas, inspirar o usu\u00e1rio a realizar uma a\u00e7\u00e3o espec\u00edfica<\/strong> e muito mais. Ao contr\u00e1rio de comerciais, pop-ups e meios de marketing semelhantes, eles s\u00e3o simples, discretos e levam a resultados tang\u00edveis. Eles podem ser de grande ajuda para tornar a navega\u00e7\u00e3o em seu site direta e clara<\/strong>. O papel essencial de um WordPress Call To Action \u00e9 provocar os visitantes a realizar a a\u00e7\u00e3o que voc\u00ea deseja que eles tomem \u2013 e isso pode ser literalmente qualquer coisa, desde comprar e assinar sua lista de e-mail at\u00e9 convid\u00e1-los a ler o texto inteiro.<\/p>\n

Saber onde colocar um CTA<\/strong> \u00e9 uma arte em si. Polvilhar seu site com muitos CTAs pode sobrecarregar e impedir que o usu\u00e1rio tome qualquer a\u00e7\u00e3o. Por outro lado, n\u00e3o ter CTAs deixa o usu\u00e1rio em uma posi\u00e7\u00e3o passiva e at\u00e9 torna seu site menos atraente<\/strong>.<\/p>\n

Existem muitas maneiras de adicionar uma chamada \u00e0 a\u00e7\u00e3o do WordPress ao seu site. Quase todos os construtores de p\u00e1ginas permitem que voc\u00ea crie um CTA usando uma imagem, bot\u00e3o e texto e tamb\u00e9m h\u00e1 muitos plugins WP CTA eficazes<\/a> para escolher. Mas a maneira mais r\u00e1pida e f\u00e1cil de adicionar CTAs bonitos e eficazes \u00e9 com Qi Addons para o plugin Elementor.<\/p>\n

Por que escolher o Qi para adicionar CTAs<\/h2>\n

Qi Addons for Elementor<\/a> \u00e9 uma solu\u00e7\u00e3o excelente e completa para qualquer tipo de site Elementor. Inclui 60 widgets gratuitos e mais de 40 premium que permitem criar todos os elementos necess\u00e1rios para um site funcional e bonito<\/strong>. \u00c9 intuitivo e extremamente f\u00e1cil de usar<\/strong> \u2013 nem mesmo um tutorial \u00e9 necess\u00e1rio e depois de experimentar um pouco com suas op\u00e7\u00f5es, voc\u00ea o achar\u00e1 incrivelmente vers\u00e1til e poderoso.<\/p>\n

Quando se trata de CTAs, podemos ver \u00f3timos exemplos de CTAs<\/a> feitos pelos autores da ferramenta na p\u00e1gina do Qi Addon que tamb\u00e9m podem ser usados \u200b\u200bcomo inspira\u00e7\u00e3o.<\/p>\n

\"A<\/a><\/p>\n

O que \u00e9 importante entender desde o in\u00edcio \u00e9 o que um CTA pode conter. O T\u00edtulo \u00e9 opcional, voc\u00ea pode ou n\u00e3o t\u00ea-lo. O texto tamb\u00e9m \u00e9 opcional e serve para dar mais informa\u00e7\u00f5es sobre a a\u00e7\u00e3o em si. O bot\u00e3o para a\u00e7\u00e3o pode ser estilizado de diferentes maneiras e tem sua pr\u00f3pria anima\u00e7\u00e3o. Com este widget, n\u00e3o apenas o link precisa ser clic\u00e1vel, mas todo o campo CTA tamb\u00e9m pode ser. A pr\u00f3xima coisa que pode fazer parte do CTA \u00e9 o fundo, e \u00e9 opcional assim como a borda.<\/p>\n

Como criar uma chamada \u00e0 a\u00e7\u00e3o do WordPress com complementos Qi<\/h2>\n

Depois de instalar os complementos Qi<\/strong>, voc\u00ea encontrar\u00e1 todos os seus elementos nos widgets. Basta encontrar o elemento CTA e arrastar e soltar onde deseja que o CTA fique<\/strong>.<\/p>\n

\"A<\/a><\/p>\n

Depois de inseri-lo, como acontece com qualquer widget, voc\u00ea encontrar\u00e1 as configura\u00e7\u00f5es \u00e0 esquerda<\/strong>. Depois de inserir o widget CTA, alguns formul\u00e1rios padr\u00e3o est\u00e3o \u00e0 sua disposi\u00e7\u00e3o e voc\u00ea pode alter\u00e1-los e alinh\u00e1-los para combinar com o estilo da sua p\u00e1gina.<\/p>\n

A guia Conte\u00fado e Estilo<\/strong> s\u00e3o as configura\u00e7\u00f5es do widget CTA, aqui voc\u00ea definir\u00e1 quais dos elementos deseja ver e estilizar\u00e1 seu campo CTA. A guia avan\u00e7ada \u00e9, como voc\u00ea sabe, a guia de elemento padr\u00e3o com configura\u00e7\u00f5es relacionadas \u00e0s configura\u00e7\u00f5es da pr\u00f3pria coluna ou de qualquer outro elemento.<\/p>\n

\"A<\/a><\/p>\n

Configura\u00e7\u00f5es da guia de conte\u00fado<\/h3>\n

Vamos come\u00e7ar com as configura\u00e7\u00f5es gerais na guia Conte\u00fado<\/strong>.<\/p>\n

\"A<\/a><\/p>\n

\u00c9 aqui que inserimos o T\u00edtulo e o Texto<\/strong>. Como j\u00e1 mencionamos, esses campos n\u00e3o s\u00e3o obrigat\u00f3rios, se voc\u00ea n\u00e3o os inserir, simplesmente n\u00e3o ter\u00e1 texto<\/strong>. Isso quase nunca \u00e9 necess\u00e1rio porque o bot\u00e3o de chamada para a\u00e7\u00e3o exige que o usu\u00e1rio seja solicitado a realizar alguma a\u00e7\u00e3o de alguma forma<\/strong>. Se o bot\u00e3o vazio em si fosse suficiente para inspirar o usu\u00e1rio a realizar a a\u00e7\u00e3o, qualquer bot\u00e3o faria o trabalho, mas esse n\u00e3o \u00e9 o caso.<\/p>\n

A pr\u00f3xima op\u00e7\u00e3o \u00e9 Bot\u00e3o Abaixo e temos alguns valores oferecidos. O que isso realmente significa?<\/p>\n

\"A<\/a><\/p>\n

Isso significa que definimos o tamanho da tela ap\u00f3s o qual o bot\u00e3o ficar\u00e1 abaixo do t\u00edtulo e do texto e n\u00e3o alinhado com o texto<\/strong>, como \u00e9 o caso das telas grandes. Essa \u00e9 uma \u00f3tima op\u00e7\u00e3o, pois n\u00e3o h\u00e1 motivos para que esse layout seja usado tamb\u00e9m em dispositivos m\u00f3veis. Seria muito mais dif\u00edcil de ler e entender e atrairia menos aten\u00e7\u00e3o.<\/p>\n

\"A<\/a><\/p>\n

Aqui podemos notar uma coisa importante<\/strong> e isso \u00e9 que o bot\u00e3o est\u00e1 bastante colado ao texto. Claro, isso \u00e9 f\u00e1cil de corrigir e mostraremos como corrigi-lo mais tarde, por enquanto, apenas observe isso para verificar a capacidade de resposta para dispositivos menores.<\/p>\n

Ativar sobreposi\u00e7\u00e3o de link<\/strong>, a \u00faltima op\u00e7\u00e3o na parte geral refere-se a se apenas o bot\u00e3o ou todo o espa\u00e7o de chamada para a\u00e7\u00e3o ser\u00e1 clic\u00e1vel. No nosso caso, atualmente toda a se\u00e7\u00e3o preta \u00e9 clic\u00e1vel. Preste aten\u00e7\u00e3o, no in\u00edcio n\u00e3o definimos o link para o qual a a\u00e7\u00e3o levar\u00e1 e at\u00e9 que o link seja definido nada \u00e9 clic\u00e1vel.<\/p>\n

O pr\u00f3ximo cap\u00edtulo trata de Button<\/strong>. Aqui n\u00f3s ajustamos do que nosso bot\u00e3o ser\u00e1 feito, mas n\u00e3o como ele ser\u00e1 estilizado. Tamb\u00e9m aqui selecionamos o texto que ser\u00e1 encontrado nele e adicionamos um link.<\/p>\n

\"A<\/a><\/p>\n

Quanto aos layouts, existem tr\u00eas op\u00e7\u00f5es dispon\u00edveis<\/strong>.<\/p>\n

\"A<\/a><\/p>\n

O layout preenchido tem um bot\u00e3o de fundo e texto<\/strong>. Com este bot\u00e3o, podemos adicionar uma borda posteriormente nas op\u00e7\u00f5es de estilo. O layout delineado possui apenas borda e texto<\/strong>, n\u00e3o sendo poss\u00edvel alterar a cor do plano de fundo posteriormente. O layout de texto tem apenas texto<\/strong> e nenhum plano de fundo ou borda pode ser adicionado a ele.<\/p>\n

Al\u00e9m disso, existem tr\u00eas tipos de bot\u00f5es diferentes que est\u00e3o dispon\u00edveis para layout preenchido e contornado, mas n\u00e3o para textual.<\/p>\n

O tipo padr\u00e3o \u00e9 o padr\u00e3o. A op\u00e7\u00e3o de tipo de borda interna<\/strong> adiciona a borda interna ao layout selecionado. O tipo Iconed Boxed<\/strong> \u00e9 usado apenas para o bot\u00e3o que possui um \u00edcone e onde queremos colocar uma caixa especial para o \u00edcone como esta. Preste aten\u00e7\u00e3o, adicionamos e estilizamos o \u00edcone e seu plano de fundo abaixo.<\/p>\n

\"A<\/a><\/p>\n

Aqui tamb\u00e9m temos a op\u00e7\u00e3o Enable Button Text Underline<\/strong> se quisermos que o texto seja sublinhado, o sublinhado tamb\u00e9m tem anima\u00e7\u00e3o.<\/p>\n

\"A<\/a><\/p>\n

Nas configura\u00e7\u00f5es do bot\u00e3o, tamb\u00e9m podemos escolher o tamanho<\/strong>, mas posteriormente no estilo podemos defini-lo com mais precis\u00e3o e conseguir que os tamanhos correspondam a outros elementos do site. Tamb\u00e9m inserimos o texto do bot\u00e3o e o link<\/strong>.<\/p>\n

As configura\u00e7\u00f5es do \u00edcone do bot\u00e3o<\/strong> s\u00e3o usadas para adicionar um \u00edcone da Biblioteca de \u00edcones ou carregando seu \u00edcone svg, tamb\u00e9m especificamos a posi\u00e7\u00e3o do \u00edcone (direita\/esquerda) aqui.<\/p>\n

\"A<\/a><\/p>\n

Como j\u00e1 vimos, podemos usar o \u00edcone com o tipo Iconed Boxed<\/strong>, mas isso se aplica apenas ao bot\u00e3o onde queremos que o \u00edcone esteja em nossa caixa, caso contr\u00e1rio, podemos adicionar qualquer \u00edcone a todos os outros tipos e layouts.<\/p>\n

\"A<\/a><\/p>\n

Configura\u00e7\u00f5es da guia de estilo<\/h3>\n

Estas s\u00e3o as configura\u00e7\u00f5es de estilo. Todas as configura\u00e7\u00f5es s\u00e3o por grupos e \u00e9 bastante \u00f3bvio a que cada configura\u00e7\u00e3o se refere<\/strong>. Claro, se n\u00e3o tivermos a op\u00e7\u00e3o de bot\u00e3o sublinhado selecionada para o nosso bot\u00e3o, nem teremos configura\u00e7\u00f5es para isso.<\/p>\n

\"A<\/a><\/p>\n

Estilo \u00e9 usado para definir a tipografia e a cor do texto e do t\u00edtulo<\/strong>.<\/p>\n

\"A<\/a><\/p>\n

Tamb\u00e9m definimos o plano de fundo do campo de chamada para a\u00e7\u00e3o aqui. Voc\u00ea pode escolher alguma cor ou gradiente, e o que \u00e9 \u00fatil \u00e9 que se voc\u00ea n\u00e3o quiser nenhum fundo, ou seja, transparente, esta \u00e9 uma op\u00e7\u00e3o para isso<\/strong>. Esta mesa est\u00e1 marcada com uma seta, basta colocar esta bola no in\u00edcio. Apenas o campo padr\u00e3o tem uma cor e se voc\u00ea alterar o plano de fundo e colocar a cor de plano de fundo igual \u00e0 do site, significa que se voc\u00ea alterar a cor da p\u00e1gina voc\u00ea precisa do plano de fundo. Se voc\u00ea colocar um fundo transparente, n\u00e3o h\u00e1 necessidade de alterar o fundo do campo com a altera\u00e7\u00e3o do fundo da p\u00e1gina.<\/p>\n

\"A<\/a><\/p>\n

Tamb\u00e9m podemos adicionar um plano de fundo, existem algumas op\u00e7\u00f5es de imagem.<\/p>\n

\"A<\/a><\/p>\n

Estilos de espa\u00e7amento s\u00e3o op\u00e7\u00f5es para determinar o espa\u00e7amento entre legendas, texto, bot\u00f5es<\/strong>.<\/p>\n

O preenchimento do suporte<\/strong> refere-se ao espa\u00e7o ao redor do conte\u00fado.<\/p>\n

\"A<\/a><\/p>\n

Text Margin Top<\/strong> \u2013 a margem acima do texto \u00e9 determinada, ou seja, organizamos o espa\u00e7o entre o texto e o t\u00edtulo.<\/p>\n

Content Padding Right<\/strong> \u2013 O preenchimento ao redor do texto \u00e0 direita, serve para separar o texto do bot\u00e3o caso ele seja muito longo.<\/p>\n

\"A<\/a><\/p>\n

Margem do bot\u00e3o<\/strong> \u2013 definindo o valor, podemos definir a posi\u00e7\u00e3o do bot\u00e3o, determinar as margens ao redor do bot\u00e3o. Aqui precisamos prestar aten\u00e7\u00e3o especialmente ao bot\u00e3o de texto responsivo e espa\u00e7ado. A margem do bot\u00e3o superior \u00e9 usada para ajustar esse espa\u00e7amento.<\/p>\n

\"A<\/a><\/p>\n

O menu Button Style<\/strong> permite que voc\u00ea defina uma variedade de detalhes de seus bot\u00f5es, como cor da fonte, cor da borda, largura e raio, bem como cor de fundo e preenchimento. A configura\u00e7\u00e3o mais importante aqui \u00e9 se voc\u00ea deseja que seu bot\u00e3o funcione em foco, o que significa que \u00e9 suficiente passar o mouse sobre ele para clicar<\/strong>. Se voc\u00ea escolher a op\u00e7\u00e3o Normal<\/strong> aqui, o bot\u00e3o funcionar\u00e1 quando clicado nele.<\/p>\n

\"A<\/a><\/p>\n

Nas configura\u00e7\u00f5es do estilo do \u00edcone do bot\u00e3o,<\/strong> voc\u00ea pode definir o tamanho do \u00edcone com um controle deslizante, tamb\u00e9m pode escolher entre a op\u00e7\u00e3o normal e de foco e definir a cor e a margem do \u00edcone tamb\u00e9m.<\/p>\n

\"A<\/a><\/p>\n

As configura\u00e7\u00f5es de Borda interna do bot\u00e3o<\/strong> permitem definir a cor, a largura e o deslocamento da borda interna.<\/p>\n

\"A<\/a><\/p>\n

As configura\u00e7\u00f5es de estilo<\/strong> de sublinhado do bot\u00e3o permitem definir a cor, largura, deslocamento, espessura e alinhamento do sublinhado do bot\u00e3o. \u00c9 muito \u00fatil que voc\u00ea possa ver imediatamente todas as altera\u00e7\u00f5es que fizer.<\/p>\n

\"A<\/a><\/p>\n

Isso \u00e9 praticamente tudo. Se estiver satisfeito com a apar\u00eancia do seu bot\u00e3o, voc\u00ea pode fechar o editor e verificar como ele fica ao vivo na p\u00e1gina.<\/p>\n

Agora, quando voc\u00ea sabe como \u00e9 f\u00e1cil adicionar CTA em qualquer lugar do seu site, tudo o que resta a fazer \u00e9 pensar cuidadosamente onde exatamente no seu site voc\u00ea pode colocar CTAs. Conhecer bem o seu p\u00fablico ajudar\u00e1 voc\u00ea a criar os CTAs mais eficazes, e tamb\u00e9m existem muitas ferramentas que podem ajud\u00e1-lo a entender melhor as caracter\u00edsticas e o comportamento do seu p\u00fablico. Se voc\u00ea tiver alguma d\u00favida sobre o uso de Qi Addons, sinta-se \u00e0 vontade para perguntar na se\u00e7\u00e3o de coment\u00e1rios – estamos mais do que felizes em compartilhar nossa experi\u00eancia e conhecimento.<\/p>\n

Fonte de grava\u00e7\u00e3o: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Aprenda como adicionar CTAs do WordPress ao seu site da maneira mais f\u00e1cil e r\u00e1pida com o Qi Addons for Elementor.<\/p>\n","protected":false},"author":1,"featured_media":279438,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[573],"tags":[848],"class_list":["post-371532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nocoes-basicas-do-wordpress","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/371532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=371532"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/371532\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/279438"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=371532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=371532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=371532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}