{"id":5284,"date":"2024-11-22T21:15:46","date_gmt":"2024-11-22T21:15:46","guid":{"rendered":"https:\/\/tableberg.com\/?p=5284"},"modified":"2024-11-22T21:15:46","modified_gmt":"2024-11-22T21:15:46","slug":"como-usar-o-bloco-de-midia-e-texto-do-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/pt\/how-to-use-the-wordpress-media-and-text-block\/","title":{"rendered":"Como usar o bloco de m\u00eddia e texto do WordPress"},"content":{"rendered":"<p>O bloco M\u00eddia e Texto preenche uma lacuna no design do WordPress que muitos usu\u00e1rios nem perceberam que existia. \u00c9 claro que voc\u00ea poderia usar blocos separados para imagens, v\u00eddeos ou texto, mas fazer com que eles se encaixem perfeitamente <a href=\"https:\/\/tableberg.com\/pt\/como-colocar-texto-e-imagem-lado-a-lado-no-wordpress\/\">lado a lado<\/a> muitas vezes se transformava em um ato de malabarismo com colunas, alinhamentos e layouts.&nbsp;<\/p>\n\n\n\n<p>Esse bloco \u00e9 a resposta objetiva para aqueles que desejam que a m\u00eddia e o texto se complementem sem complica\u00e7\u00f5es. <\/p>\n\n\n\n<p>Pense em um blogueiro de culin\u00e1ria que exibe uma foto de receita com instru\u00e7\u00f5es, uma empresa que destaca um novo produto com detalhes ao lado ou at\u00e9 mesmo um contador de hist\u00f3rias que combina imagens e palavras para atrair os leitores.&nbsp;<\/p>\n\n\n\n<p>O bloco M\u00eddia e Texto torna tudo isso poss\u00edvel com apenas alguns cliques.<\/p>\n\n\n\n<p>Este guia o orienta em tudo para que voc\u00ea possa dominar rapidamente o bloco e levar seu conte\u00fado a outro n\u00edvel.<\/p>\n\n\n<div data-is_sticky=\"false\" data-sticky_toc_position=\"left\" data-hide_sticky_on_mobile=\"false\" data-sticky_button_icon='&lt;svg style=\"color:#000000;\" class=\"ub_sticky-toc-open-button-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"34px\" width=\"34px\" viewBox=\"0, 0, 448, 512\"&gt;&lt;path fill=\"currentColor\" d=\"M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z\"&gt;&lt;\/svg&gt;' data-sticky_button_color=\"#000000\" data-sticky_toc_width=\"320px\" class=\"wp-block-ub-table-of-contents-block ub_table-of-contents\" id=\"ub_table-of-contents-2df940c3-e159-4639-a913-f67c8b8c920f\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-enablesmoothscroll=\"false\" data-initiallyhideonmobile=\"false\" data-initiallyshow=\"true\"><div class=\"ub_table-of-contents-header-container\" style=\"color: #2092ab; \">\n\t\t\t<div class=\"ub_table-of-contents-header\" style=\"text-align: left; \">\n\t\t\t\t<div class=\"ub_table-of-contents-title\">Como usar o bloco de m\u00eddia e texto do WordPress<\/div>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div><div class=\"ub_table-of-contents-extra-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-container ub_table-of-contents-1-column\">\n\t\t\t\t<ul style=\"\"><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-use-the-wordpress-media-and-text-block\/#0-step-1-add-the-media-and-text-block-\" style=\"\">Etapa 1: Adicionar o bloco de m\u00eddia e texto<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-use-the-wordpress-media-and-text-block\/#1-step-2-insert-media-\" style=\"\">Etapa 2: Inserir m\u00eddia<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-use-the-wordpress-media-and-text-block\/#2-step-3-add-text-\" style=\"\">Etapa 3: Adicionar texto<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-use-the-wordpress-media-and-text-block\/#3-step-4-customize-the-block-\" style=\"\">Etapa 4: Personalizar o bloco<\/a><ul><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-use-the-wordpress-media-and-text-block\/#4-41-customize-with-the-toolbar-\" style=\"\">4.1 Personalizar com a barra de ferramentas<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-use-the-wordpress-media-and-text-block\/#5-42-customize-the-text-\" style=\"\">4.2 Personalizar o texto<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-use-the-wordpress-media-and-text-block\/#6-43-customize-through-the-block-settings-\" style=\"\">4.3 Personaliza\u00e7\u00e3o por meio das configura\u00e7\u00f5es do bloco<\/a><\/li><\/ul><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/pt\/how-to-use-the-wordpress-media-and-text-block\/#7-step-6-preview-and-publish-\" style=\"\">Etapa 6: Visualizar e publicar<\/a><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0-step-1-add-the-media-and-text-block-\"><strong>Etapa 1: Adicionar o bloco de m\u00eddia e texto<\/strong><\/h2>\n\n\n\n<p>Digite o post ou a p\u00e1gina do WordPress onde voc\u00ea deseja adicionar o bloco. Clique no bot\u00e3o <strong>+ Inseridor de blocos <\/strong>para abrir a biblioteca de blocos. Tipo de bloco <strong>\"M\u00eddia e texto\"<\/strong> na barra de pesquisa e selecion\u00e1-lo para adicionar o bloco. Tamb\u00e9m podemos digitar <strong>\/m\u00eddia<\/strong> em uma nova linha e pressione Enter para inserir o bloco rapidamente.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-7-1024x486.png\" alt=\"Adicionar o bloco de m\u00eddia e texto\" class=\"has-border-color has-primary-accent-border-color wp-image-5288\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-7-1024x486.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-7-300x142.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-7-768x364.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-7-18x9.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-7.png 1475w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-step-2-insert-media-\"><strong>Etapa 2: Inserir m\u00eddia<\/strong><\/h2>\n\n\n\n<p>Dentro do bloco, clique em <strong>Carregar<\/strong> para adicionar uma nova imagem, escolha uma da lista <strong>Biblioteca de m\u00eddia<\/strong>ou use o <strong>Imagem em destaque<\/strong> se j\u00e1 estiver definido.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"471\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2-4-1024x471.png\" alt=\"Inserir m\u00eddia\" class=\"has-border-color has-primary-accent-border-color wp-image-5289\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2-4-1024x471.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2-4-300x138.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2-4-768x353.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2-4-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2-4.png 1523w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-step-3-add-text-\"><strong>Etapa 3: Adicionar texto<\/strong><\/h2>\n\n\n\n<p>Comece digitando seu texto na \u00e1rea ao lado da m\u00eddia. Voc\u00ea tamb\u00e9m pode utilizar o bot\u00e3o <strong>+ Inseridor de blocos <\/strong>dentro da se\u00e7\u00e3o de texto para adicionar seu bloco preferido nessa se\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"442\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-2-1024x442.png\" alt=\"Adicionar texto\" class=\"has-border-color has-primary-accent-border-color wp-image-5290\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-2-1024x442.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-2-300x130.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-2-768x332.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-2-1536x664.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-2-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-2.png 1620w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-step-4-customize-the-block-\"><strong>Etapa 4: Personalizar o bloco<\/strong><\/h2>\n\n\n\n<p>Dividimos o processo de personaliza\u00e7\u00e3o em tr\u00eas partes.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-41-customize-with-the-toolbar-\"><strong>4.1 Personalizar com a barra de ferramentas<\/strong><\/h3>\n\n\n\n<p>Na barra de ferramentas acima do bloco, voc\u00ea pode alterar o tipo de bloco, arrastar o bloco, mov\u00ea-lo para cima ou para baixo, ajustar a largura e o alinhamento, alternar a posi\u00e7\u00e3o da m\u00eddia entre esquerda e direita e adicionar um link \u00e0 m\u00eddia ou substitu\u00ed-la.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"441\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.1-1-1024x441.png\" alt=\"Personalize com a barra de ferramentas\" class=\"has-border-color has-primary-accent-border-color wp-image-5297\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.1-1-1024x441.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.1-1-300x129.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.1-1-768x330.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.1-1-1536x661.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.1-1-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.1-1.png 1627w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-42-customize-the-text-\"><strong>4.2 Personalizar o texto<\/strong><\/h3>\n\n\n\n<p>V\u00e1 at\u00e9 o conte\u00fado do texto, clique nele e acesse a barra de ferramentas acima. A partir da\u00ed, voc\u00ea pode transformar o texto em diferentes tipos de bloco, como T\u00edtulo, Lista ou Cita\u00e7\u00e3o, aplicar op\u00e7\u00f5es de formata\u00e7\u00e3o, como negrito, it\u00e1lico, tachado ou c\u00f3digo inline, ajustar o alinhamento do texto para esquerda, centro ou direita e adicionar hiperlinks ao texto selecionado. Para este exemplo, transformamos nosso texto em uma cita\u00e7\u00e3o.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"458\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.2-1-1024x458.png\" alt=\"Personalizar o texto\" class=\"has-border-color has-primary-accent-border-color wp-image-5295\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.2-1-1024x458.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.2-1-300x134.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.2-1-768x343.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.2-1-1536x687.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.2-1-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.2-1.png 1566w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-43-customize-through-the-block-settings-\"><strong>4.3 Personaliza\u00e7\u00e3o por meio das configura\u00e7\u00f5es do bloco<\/strong><\/h3>\n\n\n\n<p>Abra o painel Block Settings (Configura\u00e7\u00f5es do bloco) na barra lateral direita para explorar mais op\u00e7\u00f5es de personaliza\u00e7\u00e3o. Em<strong> Configura\u00e7\u00f5es gerais<\/strong>Se voc\u00ea quiser usar o Stack on Mobile, poder\u00e1 ativar o Crop Image to Fill Entire Column, ajustar a largura da m\u00eddia, adicionar texto alternativo e escolher a resolu\u00e7\u00e3o.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.3.1-1024x493.png\" alt=\"Personalizar por meio da guia Geral\" class=\"has-border-color has-primary-accent-border-color wp-image-5293\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.3.1-1024x493.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.3.1-300x144.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.3.1-768x370.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.3.1-18x9.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.3.1.png 1454w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Agora, se voc\u00ea for para a guia Styles (Estilos), poder\u00e1 modificar a cor do texto e do plano de fundo, a tipografia, as dimens\u00f5es e as configura\u00e7\u00f5es de borda.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"650\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.3.2-1024x650.png\" alt=\"Personalizar por meio da guia Styles (Estilos)\" class=\"has-border-color has-primary-accent-border-color wp-image-5294\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.3.2-1024x650.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.3.2-300x191.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.3.2-768x488.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.3.2-18x12.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/4.3.2.png 1102w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7-step-6-preview-and-publish-\"><strong>Etapa 6: Visualizar e publicar<\/strong><\/h2>\n\n\n\n<p>Revise o bloco e verifique a Pr\u00e9-visualiza\u00e7\u00e3o para ver como o bloco ficar\u00e1 em sua p\u00e1gina ou postagem. Se necess\u00e1rio, fa\u00e7a os ajustes finais. Quando estiver satisfeito, clique em Publish (Publicar) ou Update (Atualizar) para salvar suas altera\u00e7\u00f5es.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"509\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/6-1024x509.png\" alt=\"Visualizar e publicar\" class=\"has-border-color has-primary-accent-border-color wp-image-5292\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/6-1024x509.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/6-300x149.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/6-768x382.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/6-18x9.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/6.png 1508w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"8-conclusion-\"><strong>Conclus\u00e3o<\/strong><\/h4>\n\n\n\n<p>O bloco M\u00eddia e texto foi introduzido para fazer com que seu conte\u00fado flua naturalmente com m\u00eddia e texto trabalhando juntos em perfeita harmonia. Em vez de juntar blocos separados e se preocupar com layouts, esse bloco oferece uma maneira r\u00e1pida e confi\u00e1vel de criar designs lado a lado que ficam \u00f3timos em qualquer dispositivo. Leia o artigo com calma, entenda cada etapa e comece a criar com confian\u00e7a.<\/p>","protected":false},"excerpt":{"rendered":"<p>The Media and Text block fills a gap in WordPress design that many users didn\u2019t even realize was there. Sure, you could use separate blocks for images, videos, or text, but getting them to sit neatly side by side often turned into a juggling act of columns, alignments, and layouts.&nbsp; This block steps in as [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":5285,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-5284","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\/Media-and-Text-Cover-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\/5284","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=5284"}],"version-history":[{"count":8,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/5284\/revisions"}],"predecessor-version":[{"id":5304,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/5284\/revisions\/5304"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media\/5285"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=5284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/categories?post=5284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/tags?post=5284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}