{"id":367010,"date":"2023-02-04T12:37:00","date_gmt":"2023-02-04T09:37:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367010"},"modified":"2023-03-31T19:07:17","modified_gmt":"2023-03-31T16:07:17","slug":"um-guia-para-o-bloco-de-imagem-do-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/um-guia-para-o-bloco-de-imagem-do-wordpress-gutenberg\/","title":{"rendered":"Um guia para o bloco de imagem do WordPress Gutenberg"},"content":{"rendered":"\n<p>Um dos construtores de p\u00e1ginas mais populares para WordPress, o Gutenberg vem com uma biblioteca de elementos prontos, <a href=\"https:\/\/themewp.inform.click\/pt-pt\/os-novos-blocos-wordpress-gutenberg-explicados\/\" title=\"tamb\u00e9m conhecidos como blocos Gutenberg\">tamb\u00e9m conhecidos como blocos Gutenberg<\/a>. Os blocos permitem uma experi\u00eancia de cria\u00e7\u00e3o de p\u00e1gina suave, simplificada e f\u00e1cil, pois s\u00e3o incrivelmente intuitivos e pr\u00e1ticos. Neste guia, faremos uma vis\u00e3o geral do Gutenberg Image Block e tudo o que voc\u00ea pode fazer com ele.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/b3oXhjbhW6k\" frameborder=\"0\"><\/iframe><\/div>\n<h2>O bloco de imagem padr\u00e3o e como adicion\u00e1-lo<\/h2>\n<p>Em poucas palavras, o Gutenberg Image Block permite que voc\u00ea <strong>adicione uma imagem em qualquer lugar que desejar em sua p\u00e1gina ou postagem<\/strong>. Se voc\u00ea clicar em um bot\u00e3o de adi\u00e7\u00e3o em seu editor, um novo campo ser\u00e1 aberto. Aqui voc\u00ea pode acessar a op\u00e7\u00e3o Imagem. Como voc\u00ea pode ver abaixo, neste editor, voc\u00ea tamb\u00e9m tem op\u00e7\u00f5es separadas para adicionar o Bloco de Imagem do <a href=\"https:\/\/themewp.inform.click\/pt-pt\/introducao-aos-recursos-do-bloco-de-galeria-do-gutenberg\/\" title=\"Gutenberg e o Bloco de Galeria\">Gutenberg e o Bloco de Galeria<\/a> do Gutenberg .<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e74870f8d7.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e74870f8d7.jpg\" alt=\"Um guia para o bloco de imagem do WordPress Gutenberg\"><\/a><\/p>\n<p>Em Gutenberg, existem tr\u00eas maneiras diferentes de adicionar imagens. Voc\u00ea pode <strong>fazer upload de uma imagem do seu computador, escolher uma imagem j\u00e1 existente da sua Biblioteca de m\u00eddia ou inseri-la a partir do URL<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7489c269a.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7489c269a.jpg\" alt=\"Um guia para o bloco de imagem do WordPress Gutenberg\"><\/a><\/p>\n<p>\u00c0 primeira vista, o bloco de imagem cont\u00e9m as mesmas op\u00e7\u00f5es que o bot\u00e3o Adicionar m\u00eddia do editor cl\u00e1ssico. No entanto, ap\u00f3s uma inspe\u00e7\u00e3o mais detalhada, \u00e9 evidente que isso \u00e9 apenas parcialmente verdade. Existem algumas novas op\u00e7\u00f5es \u00fateis que v\u00eam com o Gutenberg que facilitar\u00e3o ainda mais sua experi\u00eancia de edi\u00e7\u00e3o de imagens.<\/p>\n<p>O primeiro \u00e9 uma adi\u00e7\u00e3o de pequenos pontos azuis em sua imagem. Gra\u00e7as a esses pontos, voc\u00ea pode <strong>esticar a imagem e aumentar e diminuir seu tamanho da maneira que preferir<\/strong>. Outra nova op\u00e7\u00e3o \u00e9 a possibilidade de escrever legenda na parte inferior da imagem.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748d4cd3c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748d4cd3c.jpg\" alt=\"Um guia para o bloco de imagem do WordPress Gutenberg\"><\/a><\/p>\n<p>Voc\u00ea pode encontrar todas as configura\u00e7\u00f5es b\u00e1sicas logo acima do Bloco de Imagem. Por outro lado, as configura\u00e7\u00f5es de imagem mais avan\u00e7adas est\u00e3o localizadas na guia Bloquear. Estes incluem Alt Text, Image size, Link Settings e Advanced.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748fd300e.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748fd300e.jpg\" alt=\"Um guia para o bloco de imagem do WordPress Gutenberg\"><\/a><\/p>\n<ul>\n<li><strong>Alt Text<\/strong> \u2013 aqui voc\u00ea pode adicionar uma breve descri\u00e7\u00e3o da sua imagem. No entanto, voc\u00ea pode deixar este campo em branco se sua imagem n\u00e3o for um elemento central do seu conte\u00fado.<\/li>\n<li><strong>Tamanho da imagem<\/strong> \u2013 h\u00e1 possibilidades de alterar o tamanho da imagem para tamanhos padr\u00e3o, como Miniatura, M\u00e9dio, Grande e Tamanho Completo. Outra alternativa \u00e9 adicionar as dimens\u00f5es exatas da imagem em pixels ou determinar o tamanho desejado em porcentagem em rela\u00e7\u00e3o ao tamanho original. Se voc\u00ea cometer algum erro, voc\u00ea sempre pode clicar no bot\u00e3o Redefinir.<\/li>\n<li><strong>Configura\u00e7\u00f5es de link<\/strong> \u2013 aqui, voc\u00ea tem quatro op\u00e7\u00f5es diferentes: Nenhum, P\u00e1gina de anexos, Arquivo de m\u00eddia e URL personalizado. A op\u00e7\u00e3o Nenhum permite que voc\u00ea exiba a imagem sem um link, enquanto a p\u00e1gina de anexos direciona para uma p\u00e1gina espec\u00edfica em seu site que tem o objetivo de fornecer informa\u00e7\u00f5es sobre a imagem em quest\u00e3o. Quanto ao arquivo de m\u00eddia, ele abre a imagem sozinho. A \u00faltima op\u00e7\u00e3o permite adicionar um URL personalizado para sua imagem.<\/li>\n<li><strong>Avan\u00e7ado<\/strong> \u2013 neste campo voc\u00ea pode adicionar uma classe CSS adicional e escrever seus pr\u00f3prios estilos personalizados.<\/li>\n<\/ul>\n<p>Op\u00e7\u00f5es adicionais da barra de imagem incluem alinhamento de imagem (alinhar \u00e0 esquerda, direita ou centro) e Alterar tipo de bloco. Escolher esta op\u00e7\u00e3o permite <strong>transformar seu bloco em outro bloco compat\u00edvel com um \u00fanico clique do mouse<\/strong>. Por exemplo, voc\u00ea pode alterar seu tipo de bloco para galeria, m\u00eddia e texto, capa e arquivo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7492b2ebc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7492b2ebc.jpg\" alt=\"Um guia para o bloco de imagem do WordPress Gutenberg\"><\/a><\/p>\n<p>Se voc\u00ea deseja editar sua imagem da mesma maneira que fez no editor cl\u00e1ssico do WordPress, pode faz\u00ea-lo facilmente clicando no \u00edcone de l\u00e1pis para abrir a imagem na biblioteca de m\u00eddia do WordPress.<\/p>\n<p>Agora, isso \u00e9 tudo sobre o bloco de imagem padr\u00e3o, mas voc\u00ea deve saber que tamb\u00e9m existem algumas op\u00e7\u00f5es mais avan\u00e7adas.<\/p>\n<h2>Adicionando Imagens Usando Blocos Qi para Gutenberg<\/h2>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi Blocks for Gutenberg<\/a> \u00e9 uma rica cole\u00e7\u00e3o de blocos personalizados do Gutenberg que permitem que voc\u00ea fa\u00e7a muito mais (e para melhores resultados est\u00e9ticos) do que normalmente faria com os blocos padr\u00e3o. A <strong>cole\u00e7\u00e3o pode ser baixada gratuitamente do reposit\u00f3rio oficial do WordPress, oferecendo um conjunto maravilhoso de 48 blocos para tudo, desde elementos criativos e de vitrine at\u00e9 neg\u00f3cios e SEO<\/strong>. Para aqueles que desejam op\u00e7\u00f5es ainda melhores e recursos mais avan\u00e7ados, h\u00e1 tamb\u00e9m o <strong>pacote Qi Blocks Premium com 33 blocos adicionais<\/strong>.<\/p>\n<p>Desta vez, o bloco que nos interessa aqui \u00e9 o <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/single-image\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloco Single Image<\/a>. Voc\u00ea pensaria que adicionar imagens a p\u00e1ginas e postagens \u00e9 a coisa mais simples que existe, mas o bloco de imagem \u00fanica para Gutenberg permite que voc\u00ea n\u00e3o apenas fa\u00e7a isso com a maior facilidade, em qualquer lugar do seu site, mas tamb\u00e9m <strong>vem com uma variedade de recursos exclusivos op\u00e7\u00f5es<\/strong>. Por exemplo, voc\u00ea pode escolher v\u00e1rias a\u00e7\u00f5es de imagem, ajustar a largura, altura, bordas, alinhamento, definir o comportamento de foco, ativar a caixa de luz e muito mais.<\/p>\n<p>Outro bloco incr\u00edvel que merece nossa aten\u00e7\u00e3o aqui \u00e9 o <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/parallax-image-showcase\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Parallax Image Showcase<\/a>, que permite criar se\u00e7\u00f5es de imagem dupla com imagens que se movem em velocidades diferentes na rolagem, criando uma emocionante ilus\u00e3o de profundidade.<\/p>\n<p>Depois, h\u00e1 o <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-hotspots\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloco Image Hotspots<\/a>, com \u00edcones ou outros s\u00edmbolos colocados nas imagens, revelando informa\u00e7\u00f5es quando o usu\u00e1rio passa o mouse sobre elas.<\/p>\n<p>Por fim, o <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-slider\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloco Image Slider<\/a> pode ajud\u00e1-lo a criar sliders impressionantes e envolventes com suas imagens selecionadas, adicionando um toque de dinamicidade \u00e0s suas p\u00e1ginas. Com este bloco, voc\u00ea n\u00e3o precisa mais de plugins deslizantes complicados e dif\u00edceis de personalizar. Voc\u00ea obt\u00e9m tudo o que precisa em um bloco \u00fanico, intuitivo e totalmente personaliz\u00e1vel.<\/p>\n<p>Como vimos, h\u00e1 muito que voc\u00ea pode fazer com o Image Block, seja usando o padr\u00e3o que vem com o Gutenberg ou optando por uma solu\u00e7\u00e3o de terceiros, como no caso do Qi Blocks for Gutenberg. As imagens s\u00e3o muito importantes para qualquer site, pois muitas vezes podem dizer e fazer muito mais do que palavras. Gra\u00e7as ao Gutenberg, adicion\u00e1-los \u00e0s suas postagens e p\u00e1ginas nunca foi t\u00e3o f\u00e1cil.<\/p>\n<p>Esperamos que voc\u00ea tenha achado este artigo \u00fatil. Se voc\u00ea gostou, n\u00e3o deixe de conferir alguns desses artigos tamb\u00e9m!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste pequeno guia, faremos uma vis\u00e3o geral do Gutenberg Image Block e mostraremos tudo o que voc\u00ea pode fazer com esta op\u00e7\u00e3o \u00fatil.<\/p>\n","protected":false},"author":1,"featured_media":363766,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[573],"tags":[848],"class_list":["post-367010","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\/367010","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=367010"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/367010\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/363766"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=367010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=367010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=367010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}