- Etapa 1: Adicionar um bloco de cobertura<\/a><\/li>
- Etapa 2: Inserir uma imagem<\/a><\/li>
- Etapa 3: Adicionar um t\u00edtulo \u00e0 imagem (opcional)<\/a><\/li>
- Etapa 4: Adicionar um bot\u00e3o sobre a imagem<\/a><\/li>
- Etapa 5: Personalizar o design<\/a>
- 5.1 Personalizar o texto do t\u00edtulo<\/a><\/li>
- 5.2 Personalizar o bot\u00e3o<\/a><\/li>
- 5.3 Personalizar o bloco de cobertura geral<\/a><\/li><\/ul><\/li>
- Etapa 6: Visualizar e publicar<\/a><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n
\n\n\n\nEtapa 1: Adicionar um bloco de cobertura<\/strong><\/h2>\n\n\n\n
Para come\u00e7ar, abra a p\u00e1gina ou postagem onde deseja colocar sua imagem preferida com o bot\u00e3o. No editor do WordPress, clique no bot\u00e3o \"+\" para adicionar um bloco e procure por \"Cover\". Depois de encontr\u00e1-lo, selecione o bloco Cover. <\/p>\n\n\n\n
![\"Adicionar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-6-1024x541.png\")
<\/figure>\n\n\n\n
\n\n\n\nEtapa 2: Inserir uma imagem<\/h2>\n\n\n\n
Depois de adicionar o bloco, voc\u00ea precisa carregar<\/strong> sua imagem escolhida ou selecione uma das Biblioteca de m\u00eddia<\/strong>. Essa imagem agora servir\u00e1 como plano de fundo para seu design.<\/p>\n\n\n\n
![\"Inserir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2-3-1024x461.png\")
<\/figure>\n\n\n\n
\n\n\n\nEtapa 3: Adicionar um t\u00edtulo \u00e0 imagem (opcional)<\/strong><\/h2>\n\n\n\n
Quando o bloco Cover estiver no lugar, voc\u00ea notar\u00e1 um texto de espa\u00e7o reservado que diz \"Write title...\" (Escreva o t\u00edtulo...) dentro da imagem. Clique nesse texto e digite o t\u00edtulo ou cabe\u00e7alho que voc\u00ea deseja exibir sobre a imagem. <\/p>\n\n\n\n
![\"Adicionar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-new-1024x538.png\")
<\/figure>\n\n\n\n
\n\n\n\nEtapa 4: Adicionar um bot\u00e3o sobre a imagem<\/strong><\/strong><\/h2>\n\n\n\n
Quando o bloco Cover estiver pronto, clique na imagem, e o inseridor de blocos ser\u00e1 exibido. Agora, clique no sinal \"+\", procure por \"Buttons\" e adicione o bloco.<\/p>\n\n\n\n
![\"Adicionar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4-2-1024x473.png\")
<\/figure>\n\n\n\n
\n\n\n\nEtapa 5: Personalizar o design<\/strong><\/h2>\n\n\n\n
Para ajustar cada detalhe, separamos esta se\u00e7\u00e3o em 3 partes. Come\u00e7aremos com o t\u00edtulo, depois os bot\u00f5es e terminaremos com o bloco geral da capa para obter uma apar\u00eancia profissional. <\/p>\n\n\n\n
5.1 Personalizar o texto do t\u00edtulo<\/strong><\/h3>\n\n\n\n
Clique no texto que voc\u00ea colocou como T\u00edtulo no bloco Cover para selecion\u00e1-lo. Use a barra de ferramentas do bloco para ajustar o estilo do texto - negrito, it\u00e1lico ou alinhamento. Se desejar personaliza\u00e7\u00e3o adicional, v\u00e1 para as configura\u00e7\u00f5es do bloco na barra lateral direita para alterar o tamanho da fonte, a cor e a tipografia. <\/p>\n\n\n\n
![\"Personalizar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.1-3-1024x586.png\")
<\/figure>\n\n\n\n5.2 Personalizar o bot\u00e3o<\/strong><\/h3>\n\n\n\n
Selecione o bloco de bot\u00f5es, digite o texto que deseja exibir e vincule-o \u00e0 p\u00e1gina ou URL relevante clicando no \u00edcone de corrente (1)<\/strong> na barra de ferramentas. Use a barra de ferramentas de bloco para alinhar o bot\u00e3o e ajustar seu estilo.<\/p>\n\n\n\n
![\"Personalizar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.1-new-1024x591.png\")
<\/figure>\n\n\n\nAgora, navegue at\u00e9 o painel de configura\u00e7\u00f5es do bloco no lado direito. O painel Guia Geral<\/strong> (1) permite ajustar a largura do bot\u00e3o em rela\u00e7\u00e3o ao seu cont\u00eainer, e o bot\u00e3o Guia Estilos<\/strong> (3) permite personalizar os estilos, as cores, a tipografia, as dimens\u00f5es e a borda do bot\u00e3o. <\/p>\n\n\n\n
![\"Personalize](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.2-new-1-1024x615.png\")
<\/figure>\n\n\n\n5.3 Personalizar o bloco de cobertura geral<\/strong><\/h3>\n\n\n\n
Clique no bloco Cover para acessar suas configura\u00e7\u00f5es na se\u00e7\u00e3o Guia Geral<\/strong>. A partir da\u00ed, ajuste o Configura\u00e7\u00f5es de layout<\/strong> para restringir blocos aninhados, ative o Fundo fixo<\/strong> para manter o plano de fundo fixo enquanto voc\u00ea rola ou o bot\u00e3o Antecedentes repetidos<\/strong> se sua imagem for menor do que o bloco e precisar ser colocada em mosaico para preencher o espa\u00e7o, e defina o Ponto Focal <\/strong>para manter vis\u00edveis as \u00e1reas importantes da imagem.<\/p>\n\n\n\n
![\"Personalize](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.3-1-1024x714.png\")
<\/figure>\n\n\n\nEm seguida, mude para o Guia Estilos<\/strong>. A partir da\u00ed, voc\u00ea pode ajustar a cor geral, a opacidade, a tipografia, a dimens\u00e3o, a propor\u00e7\u00e3o, a borda e muito mais. <\/p>\n\n\n\n
![\"Personalize](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.3.2-1024x909.png\")
<\/figure>\n\n\n\n
\n\n\n\nEtapa 6: Visualizar e publicar<\/strong><\/h2>\n\n\n\n
Percorra toda a p\u00e1gina novamente para garantir que o bot\u00e3o e a imagem sejam exibidos conforme o planejado. Quando tudo estiver certo, publique ou atualize seu conte\u00fado para torn\u00e1-lo ativo.<\/p>\n\n\n\n
![\"Demonstra\u00e7\u00e3o](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/Demo.gif\")
<\/figure>\n\n\n\n
\n\n\n\nConclus\u00e3o<\/h4>\n\n\n\n
A capacidade de adicionar um bot\u00e3o em uma imagem no WordPress abre possibilidades criativas para tornar seu conte\u00fado mais interativo e visualmente atraente. O bloco Cover no WordPress permite que voc\u00ea sobreponha bot\u00f5es em imagens e crie designs interativos e visualmente atraentes sem a necessidade de ferramentas extras ou codifica\u00e7\u00e3o. Ele oferece total flexibilidade para personalizar t\u00edtulos, bot\u00f5es e detalhes de layout para facilitar o alinhamento de seu conte\u00fado com as tend\u00eancias de design moderno. Seguindo este guia, voc\u00ea pode obter um resultado profissional que aprimora o design e a funcionalidade do seu site. Seguindo este guia, o design de seu site pode se destacar com uma navega\u00e7\u00e3o melhor e um acabamento refinado.<\/p>","protected":false},"excerpt":{"rendered":"
For numerous WordPress enthusiasts, the ability to add a button over an image is essential to make content more interactive and attractive. Their motivations may stem from the desire to enrich user interactions, leverage WordPress\u2019s capabilities, or address constraints in themes or plugins. Whether it\u2019s to improve user navigation, overcome layout challenges, or simply to […]<\/p>\n","protected":false},"author":9,"featured_media":5274,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-5252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/buttons-over-image-850-x-335-px.png","author_info":{"display_name":"Moinul Islam","author_link":"https:\/\/tableberg.com\/pt\/author\/marufmoinul27\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/5252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/comments?post=5252"}],"version-history":[{"count":11,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/5252\/revisions"}],"predecessor-version":[{"id":5280,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/5252\/revisions\/5280"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media\/5274"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=5252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/categories?post=5252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/tags?post=5252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- 5.2 Personalizar o bot\u00e3o<\/a><\/li>
- Etapa 2: Inserir uma imagem<\/a><\/li>