{"id":367295,"date":"2023-05-16T15:56:00","date_gmt":"2023-05-16T12:56:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367295"},"modified":"2022-10-12T12:13:32","modified_gmt":"2022-10-12T09:13:32","slug":"como-adicionar-facilmente-um-ponto-de-acesso-de-imagem-no-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-adicionar-facilmente-um-ponto-de-acesso-de-imagem-no-wordpress\/","title":{"rendered":"Como adicionar facilmente um ponto de acesso de imagem no WordPress"},"content":{"rendered":"\n

Os seres humanos s\u00e3o seres visuais e \u00e9 dif\u00edcil imaginar uma ferramenta mais poderosa do que uma imagem para atrair a aten\u00e7\u00e3o do grupo de seu alvo. Mas, pode haver um elemento ainda mais atraente do que uma bela imagem \u2013 um hotspot de imagem para WordPress. Um hotspot de imagem \u00e9 um tipo de imagem com hotspots interativos<\/strong>. Quando o usu\u00e1rio passa o mouse sobre um ponto de acesso, aparece um pop-up que pode conter quase tudo o que voc\u00ea deseja.<\/p>\n

Um hotspot de imagem em seu site WordPress \u00e9 uma bela maneira de compartilhar mais informa\u00e7\u00f5es sobre qualquer t\u00f3pico<\/strong> \u2013 de blogs de culin\u00e1ria a sites de constru\u00e7\u00e3o e tudo mais. Voc\u00ea pode mostrar ingredientes e medidas das refei\u00e7\u00f5es, tipos de materiais usados, nomes e t\u00edtulos, bem como qualquer outra informa\u00e7\u00e3o sobre o conte\u00fado do seu site. O pop-up pode conter texto, outro, imagem, um v\u00eddeo ou um link. Al\u00e9m de fornecer aos usu\u00e1rios detalhes mais precisos, voc\u00ea tamb\u00e9m torna seu site mais interativo usando pontos de acesso de imagem<\/strong>.<\/p>\n

Se voc\u00ea acha que precisa de um web designer profissional para adicionar esse elemento sofisticado ao seu site, temos \u00f3timas not\u00edcias! Voc\u00ea pode facilmente adicionar tudo sozinho. Fique atento para ler mais sobre como adicionar um hotspot de imagem no WordPress com um plugin:<\/p>\n<\/p>\n

Por que escolhemos Qi Addons para Elementor para criar imagem Hotspot WordPress Elemen<\/h2>\n

Com base em nossa experi\u00eancia, Qi Addons for Elementor<\/a> \u00e9 um dos melhores addons Elementor. Ele inclui 60 widgets gratuitos e mais de 40 premium e muitas op\u00e7\u00f5es para adicionar diferentes elementos ao site com muitas op\u00e7\u00f5es de personaliza\u00e7\u00e3o e estilo<\/strong> para que voc\u00ea possa ter certeza de que eles se encaixam no design geral do seu site. Al\u00e9m de tudo, \u00e9 incrivelmente simples de usar<\/strong> \u2013 \u00e9 por isso que muitas vezes optamos por esse complemento, o que melhora muito o site.<\/p>\n

O widget personalizado Image Hotspots<\/a> \u00e9 um widget premium. Ele permite que voc\u00ea adicione uma imagem espec\u00edfica e posicione pontos de acesso com informa\u00e7\u00f5es espec\u00edficas sobre eles<\/strong>. O usu\u00e1rio ent\u00e3o obt\u00e9m as informa\u00e7\u00f5es passando o mouse sobre o ponto de acesso<\/strong>. O melhor \u00e9 que podemos determinar as posi\u00e7\u00f5es responsivas para que n\u00e3o aconte\u00e7a que em dispositivos diferentes o hotspot n\u00e3o corresponda ao objeto ao qual se refere. Na pr\u00f3pria demonstra\u00e7\u00e3o do widget, voc\u00ea pode ver algumas solu\u00e7\u00f5es conceituais do autor que podem inspir\u00e1-lo.<\/p>\n

Como adicionar um elemento WordPress de hotspot de imagem<\/h2>\n

Depois de adicionar Qi Addons ao seu site, encontre o widget personalizado Image Hotspots digitando “image hotspot" no campo de pesquisa ou simplesmente navegando pelos elementos. Voc\u00ea notar\u00e1 que todos os widgets Qi possuem \u00edcones vermelhos reconhec\u00edveis<\/strong>.<\/p>\n

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

Ao arrastar o widget para o local desejado, voc\u00ea ver\u00e1 alguns de seus valores padr\u00e3o. Widget tem duas guias \u2013 Personalizar<\/strong> e Estilo<\/strong> que incluem uma variedade de op\u00e7\u00f5es para ajustar o elemento, enquanto a guia Avan\u00e7ado \u00e9 uma guia Elementor que vem com todos os elementos.<\/p>\n

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

Vamos come\u00e7ar com as op\u00e7\u00f5es gerais da guia personalizada. O que voc\u00ea notar\u00e1 primeiro aqui \u00e9 onde a imagem e os tr\u00eas itens s\u00e3o inseridos<\/strong>. Esses itens s\u00e3o na verdade hotspots<\/strong> e suas configura\u00e7\u00f5es de posi\u00e7\u00e3o e conte\u00fado. Por padr\u00e3o, existem tr\u00eas pontos de acesso, mas voc\u00ea pode excluir os existentes ou adicionar novos<\/strong>.<\/p>\n

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

Depois de inserir uma imagem, de uma biblioteca ou carregar uma nova, \u00e9 hora de posicionar os pontos de acesso e adicionar conte\u00fado a eles.<\/p>\n

Quanto ao conte\u00fado, voc\u00ea tem a op\u00e7\u00e3o T\u00edtulo e Legenda para definir e assim que come\u00e7ar a modific\u00e1-los, ver\u00e1 como o conte\u00fado muda ao vivo.<\/p>\n

H\u00e1 tamb\u00e9m um campo de pin aqui onde voc\u00ea pode selecionar um \u00edcone<\/strong> para o seu pin, n\u00e3o precisa ser um padr\u00e3o. A biblioteca de \u00edcones est\u00e1 \u00e0 sua disposi\u00e7\u00e3o, mas voc\u00ea tamb\u00e9m pode adicionar seu pr\u00f3prio \u00edcone SVG. Por exemplo \u2013 SVGREPO<\/a> oferece um grande n\u00famero de \u00edcones gratuitos que est\u00e3o dispon\u00edveis para uso comercial.<\/p>\n

Quanto \u00e0 Posi\u00e7\u00e3o Horizontal e Posi\u00e7\u00e3o Vertical, elas servem para a orienta\u00e7\u00e3o do ponto de acesso nas posi\u00e7\u00f5es esquerda\/centro\/direita e superior\/meio inferior<\/strong>, enquanto a op\u00e7\u00e3o Offset na verdade nos permite ajustar as posi\u00e7\u00f5es. N\u00e3o explicaremos isso em detalhes, pois temos certeza de que voc\u00ea ver\u00e1 por si mesmo como seus v\u00eddeos se movem alterando os valores de deslocamento. O que \u00e9 importante ter em mente \u00e9 que , ao personalizar os hotspots, voc\u00ea tamb\u00e9m deve observar a p\u00e1gina de visualiza\u00e7\u00e3o que n\u00e3o possui barra de configura\u00e7\u00f5es, para que voc\u00ea possa ver como tudo fica em uma tela de tamanho normal<\/strong>.<\/p>\n

Al\u00e9m disso, al\u00e9m do deslocamento, voc\u00ea notar\u00e1 \u00edcones de tela com o t\u00edtulo, ou seja, \u00edcones cl\u00e1ssicos que indicam que as op\u00e7\u00f5es responsivas est\u00e3o dispon\u00edveis para esta configura\u00e7\u00e3o<\/strong>. Certifique-se de v\u00ea-los tamb\u00e9m. \u00c9 melhor n\u00e3o colocar pontos de acesso ao longo da borda de uma imagem, pois voc\u00ea precisa pensar em como o pop-up do ponto de acesso da imagem ficar\u00e1 em diferentes tamanhos de tela<\/strong>.<\/p>\n

A op\u00e7\u00e3o Fade Info Position \u00e9 onde as informa\u00e7\u00f5es para o foco do hotspot aparecem.<\/p>\n

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

Este \u00e9 o resultado depois que adicionamos a imagem e os pinos, agora podemos estilizar tudo para ficar exatamente do jeito que queremos.<\/p>\n

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

Ajustando o estilo de imagem do ponto de acesso<\/h2>\n

Quanto \u00e0 estiliza\u00e7\u00e3o, uma variedade de op\u00e7\u00f5es \u00e9 categorizada em uma guia Estilo especial, para que voc\u00ea possa ver onde estilizamos Pins, Informa\u00e7\u00f5es, T\u00edtulo e Legenda.<\/p>\n

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

Quanto ao Pin, todas as configura\u00e7\u00f5es s\u00e3o f\u00e1ceis de entender. Voc\u00ea pode escolher um \u00edcone que se aplicar\u00e1 a todos os pinos<\/strong>, ao contr\u00e1rio das configura\u00e7\u00f5es nos itens onde voc\u00ea pode escolher um separado para cada um. Al\u00e9m disso, voc\u00ea pode especificar o tamanho e a cor<\/strong> para ele. Voc\u00ea pode adicionar um \u00edcone de fundo usando o tamanho do suporte do pino. Nosso fundo \u00e9 vermelho e tamanho 15px.<\/p>\n

A op\u00e7\u00e3o Raio da borda nos permitiu fazer o plano de fundo parecer um c\u00edrculo<\/strong> porque o raio \u00e9 aplicado ao plano de fundo.<\/p>\n

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

O estilo de informa\u00e7\u00e3o refere-se \u00e0 apar\u00eancia do campo no qual a informa\u00e7\u00e3o aparece<\/strong>. A exibi\u00e7\u00e3o de informa\u00e7\u00f5es \u00e9 uma op\u00e7\u00e3o que determina como o foco \u00e9 exibido. Pode ser Fade and Reveal, escolhemos Reveal. A cor do campo e o preenchimento s\u00e3o o que voc\u00ea tamb\u00e9m pode personalizar aqui. Info Border Radius \u00e9 uma op\u00e7\u00e3o particularmente interessante para o layout de revela\u00e7\u00e3o que usamos porque o raio ajuda a ajustar o campo de informa\u00e7\u00f5es e o pr\u00f3prio \u00edcone de alfinete<\/strong>. Se n\u00e3o adicionarmos um raio aqui, o campo de informa\u00e7\u00f5es branco ficaria acima do pino da caixa de \u00edcone vermelho.<\/p>\n

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

As op\u00e7\u00f5es de estilo de t\u00edtulo de informa\u00e7\u00f5es referem-se ao t\u00edtulo que adicionamos a cada pino. As configura\u00e7\u00f5es aqui ser\u00e3o aplicadas a todos os t\u00edtulos neste ponto de acesso de imagem<\/strong>. Voc\u00ea provavelmente est\u00e1 familiarizado com as op\u00e7\u00f5es e, \u00e0 primeira vista, pode especificar a tag de t\u00edtulo, a cor, ajustar a tipologia do t\u00edtulo. A parte inferior da margem do t\u00edtulo \u00e9 uma op\u00e7\u00e3o importante quando voc\u00ea tamb\u00e9m possui legendas em seu campo de informa\u00e7\u00f5es, pois voc\u00ea pode adicionar essa margem para criar um espa\u00e7o entre o t\u00edtulo e a legenda.<\/p>\n

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

Quanto ao estilo de legenda Info, caso voc\u00ea adicione uma legenda aqui, voc\u00ea pode estilizar sua apar\u00eancia com mais detalhes. Nas op\u00e7\u00f5es de tipografia voc\u00ea pode brincar com diferentes configura\u00e7\u00f5es.<\/p>\n

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

Assim fica o resultado final. texto que adicionamos Usamos o widget Qi do t\u00edtulo da se\u00e7\u00e3o<\/a> para adicionar o texto e tornamos esta se\u00e7\u00e3o do site muito mais interessante para os futuros usu\u00e1rios.<\/p>\n

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

Para concluir<\/h2>\n

Qi Addons \u00e9 uma ferramenta muito intuitiva que todos podem usar com total facilidade e com zero codifica\u00e7\u00e3o ou qualquer outro conhecimento t\u00e9cnico. Sinta-se \u00e0 vontade para explorar as op\u00e7\u00f5es deste widget por conta pr\u00f3pria, experimentar, jogar e aproveitar o processo criativo de tornar seu site mais atraente para seus usu\u00e1rios. Se voc\u00ea tiver alguma d\u00favida, n\u00e3o hesite em nos contatar na se\u00e7\u00e3o de coment\u00e1rios – estamos ansiosos para ouvir sobre suas experi\u00eancias com Qi e imagens de hotspot!<\/p>\n

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

Adicionar hotspots de imagem no WordPress \u00e9 f\u00e1cil quando voc\u00ea tem uma ferramenta perfeita – aprenda como fazer isso com apenas alguns cliques.<\/p>\n","protected":false},"author":1,"featured_media":372289,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[210,573,428],"tags":[848],"class_list":["post-367295","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-9","category-nocoes-basicas-do-wordpress","category-plugins-wordpress-2","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/367295","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=367295"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/367295\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/372289"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=367295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=367295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=367295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}