{"id":1018,"date":"2025-01-27T10:22:22","date_gmt":"2025-01-27T10:22:22","guid":{"rendered":"https:\/\/tableberg.com\/?p=1018"},"modified":"2025-01-27T10:22:25","modified_gmt":"2025-01-27T10:22:25","slug":"como-colocar-imagens-lado-a-lado-no-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/pt\/how-to-put-images-side-by-side-in-wordpress\/","title":{"rendered":"Como colocar imagens lado a lado no WordPress (tr\u00eas maneiras)"},"content":{"rendered":"<p>O conte\u00fado visual desempenha um papel fundamental na captura da aten\u00e7\u00e3o dos usu\u00e1rios on-line. O que uma \u00fanica imagem pode transmitir geralmente requer centenas de palavras. Al\u00e9m disso, as imagens podem evocar emo\u00e7\u00f5es e aprimorar a est\u00e9tica geral.<\/p>\n\n\n\n<p>Uma maneira eficaz de exibir imagens \u00e9 coloc\u00e1-las lado a lado. Essa t\u00e9cnica \u00e9 particularmente \u00fatil para comparar v\u00e1rios produtos, apresentar imagens de antes e depois e contar uma hist\u00f3ria.<\/p>\n\n\n\n<p>Neste artigo, mostraremos a voc\u00ea tr\u00eas maneiras f\u00e1ceis de colocar imagens lado a lado no WordPress.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>M\u00e9todo 1<\/strong>: <a href=\"#0-method-one-using-the-gallery-block\">Usando o bloco Gallery <\/a><\/li>\n\n\n\n<li><strong>M\u00e9todo 2<\/strong>: <a href=\"#2-method-two-using-the-columns-block\">Usando o bloco Columns<\/a><\/li>\n\n\n\n<li><strong>M\u00e9todo 3<\/strong>: <a href=\"#4-method-three-using-the-tableberg-block\">Uso do bloco Tableberg<\/a><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group has-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-8db5ca72 wp-block-group-is-layout-constrained\" style=\"border-color:#671feb;border-style:solid;border-width:1px;border-radius:4px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--small)\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-505d3e6d wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)\">\n<p style=\"font-size:clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.175), 30px);\"><strong>Criar mesas bonitas <\/strong><br><strong>Com o Block Editor<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-f2baa792 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" style=\"background-color:#671feb\" target=\"_blank\" rel=\"noreferrer noopener\">Experimente gratuitamente<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/tableberg.com\/pt\/precificacao\/\" target=\"_blank\" rel=\"noreferrer noopener\">Obter um profissional<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"540\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png\" alt=\"\" class=\"wp-image-1545\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png 540w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-300x300.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-150x150.png 150w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0-method-one-using-the-gallery-block\">M\u00e9todo 1: Usando o Gallery Block<\/h2>\n\n\n\n<p>O WordPress vem com o bloco Gallery padr\u00e3o. Voc\u00ea pode apresentar imagens lado a lado com o bloco das seguintes maneiras. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-step-01-add-the-gallery-block-to-wordpress\">Etapa 01: Adicionar o bloco Gallery ao WordPress<\/h3>\n\n\n\n<p>Basta abrir um post ou uma p\u00e1gina. Encontre o <strong><a href=\"https:\/\/tableberg.com\/pt\/como-usar-o-bloco-de-galeria-no-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bloco da galeria<\/a><\/strong> na biblioteca de blocos do Gutenberg, pressionando o bot\u00e3o <strong>bot\u00e3o de adi\u00e7\u00e3o (+)<\/strong>. Adicione-o ao editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Find-and-add-the-Gutenberg-Gallery-block-to-WordPress.webp\" alt=\"Encontre e adicione o bloco Galeria do Gutenberg ao WordPress\" class=\"wp-image-1019\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Find-and-add-the-Gutenberg-Gallery-block-to-WordPress.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Find-and-add-the-Gutenberg-Gallery-block-to-WordPress-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Find-and-add-the-Gutenberg-Gallery-block-to-WordPress-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Find-and-add-the-Gutenberg-Gallery-block-to-WordPress-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Clique no bot\u00e3o <strong>Bot\u00e3o Upload<\/strong> para adicionar imagens novas de seu armazenamento local ao lado. Ou voc\u00ea pode carreg\u00e1-las de seus arquivos existentes clicando no bot\u00e3o <strong>Biblioteca de m\u00eddia<\/strong> bot\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-images-from-local-storage-or-media-library.webp\" alt=\"Fa\u00e7a upload de imagens do armazenamento local ou da biblioteca de m\u00eddia\" class=\"wp-image-1020\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-images-from-local-storage-or-media-library.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-images-from-local-storage-or-media-library-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-images-from-local-storage-or-media-library-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-images-from-local-storage-or-media-library-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Para este tutorial, faremos upload de imagens da Biblioteca de m\u00eddia. Selecione as imagens que voc\u00ea deseja adicionar. Pressione o bot\u00e3o <strong>Criar uma nova galeria<\/strong> no final.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-new-gallery.webp\" alt=\"Criar uma nova galeria\" class=\"wp-image-1021\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-new-gallery.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-new-gallery-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-new-gallery-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-new-gallery-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Depois que as imagens forem adicionadas ao editor, voc\u00ea as ver\u00e1 aparecendo lado a lado. Em seguida, voc\u00ea pode personalizar as configura\u00e7\u00f5es e estiliza\u00e7\u00f5es do bloco Gallery usando as respectivas op\u00e7\u00f5es na barra lateral direita. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-usign-the-Gutenberg-Gallery-block.webp\" alt=\"Imagens exibidas lado a lado usando o bloco Galeria do Gutenberg\" class=\"wp-image-1024\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-usign-the-Gutenberg-Gallery-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-usign-the-Gutenberg-Gallery-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-usign-the-Gutenberg-Gallery-block-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-usign-the-Gutenberg-Gallery-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p><strong>Observa\u00e7\u00e3o:<\/strong> Se suas imagens n\u00e3o forem exibidas lado a lado por padr\u00e3o, selecione o bloco inteiro clicando no \u00edcone <strong>\u00cdcone da galeria<\/strong> na barra de ferramentas. Especifique os n\u00fameros das colunas na barra lateral direita.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Set-columns-for-the-Gallery-block.webp\" alt=\"Definir o n\u00famero da coluna para o bloco Gallery\" class=\"wp-image-1025\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Set-columns-for-the-Gallery-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Set-columns-for-the-Gallery-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Set-columns-for-the-Gallery-block-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Set-columns-for-the-Gallery-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-method-two-using-the-columns-block\">M\u00e9todo dois: usando o bloco Columns<\/h2>\n\n\n\n<p>O bloco Column permite que voc\u00ea <a href=\"https:\/\/tableberg.com\/pt\/como-dividir-o-conteudo-do-wordpress-em-duas-ou-mais-colunas\/\" target=\"_blank\" rel=\"noreferrer noopener\">dividir seu conte\u00fado em v\u00e1rias colunas<\/a>. Voc\u00ea pode adicionar outros blocos para adicionar diferentes tipos de conte\u00fado em cada coluna.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-step-01-add-the-column-block-to-your-site\">Etapa 01: Adicionar o bloco de colunas ao seu site<\/h3>\n\n\n\n<p>Adicione o <strong><a href=\"https:\/\/tableberg.com\/pt\/como-criar-colunas-no-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bloco de colunas<\/a><\/strong> em seu editor seguindo o mesmo m\u00e9todo descrito acima.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block.webp\" alt=\"Adicionar o bloco de colunas ao seu site\" class=\"wp-image-435\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Selecione o layout de coluna que desejar. Voc\u00ea pode exibir um n\u00famero igual de imagens lado a lado, correspondente ao n\u00famero de colunas que adicionar. Selecionamos o layout de duas colunas para o bloco.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Select-the-column-layout.webp\" alt=\"Selecione um layout de coluna\" class=\"wp-image-436\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Select-the-column-layout.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Select-the-column-layout-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Select-the-column-layout-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Select-the-column-layout-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Adicione o <strong><a href=\"https:\/\/tableberg.com\/pt\/como-usar-o-bloco-de-imagens-no-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bloco de imagens<\/a><\/strong> pressionando o bot\u00e3o <strong>bot\u00e3o de adi\u00e7\u00e3o (+)<\/strong> dentro do <strong>Bloco de colunas<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Image-block-to-the-Column-block.webp\" alt=\"Adicionar o bloco Image ao bloco Column\" class=\"wp-image-1027\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Image-block-to-the-Column-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Image-block-to-the-Column-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Image-block-to-the-Column-block-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Image-block-to-the-Column-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Fa\u00e7a upload de uma imagem da mesma forma que mostramos acima.<\/p>\n\n\n\n<p><strong>Observa\u00e7\u00e3o:<\/strong> Como esse \u00e9 o bloco Image, voc\u00ea pode <strong>adicionar apenas uma imagem<\/strong>ao contr\u00e1rio do bloco Gallery.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-column-block-the-same-way-we-showed-you-above.webp\" alt=\"Fazer upload da imagem para o bloco da coluna \" class=\"wp-image-1028\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-column-block-the-same-way-we-showed-you-above.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-column-block-the-same-way-we-showed-you-above-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-column-block-the-same-way-we-showed-you-above-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-column-block-the-same-way-we-showed-you-above-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Da mesma forma, adicione o <strong>Bloco de imagens<\/strong> novamente para a segunda coluna.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"652\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/SCR-20240331-npla.webp\" alt=\"Adicionar v\u00e1rias imagens ao bloco de colunas\" class=\"wp-image-1029\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/SCR-20240331-npla.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/SCR-20240331-npla-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/SCR-20240331-npla-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/SCR-20240331-npla-768x391.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Voc\u00ea pode ver que a segunda imagem apareceu ao lado da primeira. Agora voc\u00ea pode adicionar textos alternativos e outras configura\u00e7\u00f5es para as imagens, uma a uma.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Multiple-images-are-displayed-using-the-column-block.webp\" alt=\"V\u00e1rias imagens s\u00e3o exibidas usando o bloco de colunas\" class=\"wp-image-1030\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Multiple-images-are-displayed-using-the-column-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Multiple-images-are-displayed-using-the-column-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Multiple-images-are-displayed-using-the-column-block-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Multiple-images-are-displayed-using-the-column-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-method-three-using-the-tableberg-block\">Terceiro m\u00e9todo: Usando o bloco Tableberg<\/h2>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" data-type=\"link\" data-id=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tableberg<\/a> \u00e9 um plug-in de cria\u00e7\u00e3o de tabelas baseado em blocos. Com ele, voc\u00ea tamb\u00e9m pode criar colunas e exibir imagens lado a lado. Siga as etapas explicadas abaixo ap\u00f3s <strong>instala\u00e7\u00e3o<\/strong> e <strong>ativa\u00e7\u00e3o<\/strong> o plug-in.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1874\" height=\"604\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Tableberg.png\" alt=\"Instale e ative o plug-in TableBerg\" class=\"wp-image-420\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Tableberg.png 1874w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Tableberg-300x97.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Tableberg-1024x330.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Tableberg-768x248.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Tableberg-1536x495.png 1536w\" sizes=\"auto, (max-width: 1874px) 100vw, 1874px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-step-01-add-the-tableberg-block\">Etapa 01: Adicionar o bloco TableBerg<\/h3>\n\n\n\n<p>O plug-in vem com um <strong>Bloco TableBerg<\/strong>. Adicione-o ao seu editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-TableBerg-block-to-your-page-or-post.png\" alt=\"Adicione o bloco TableBerg ao seu post ou p\u00e1gina\" class=\"wp-image-175\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-TableBerg-block-to-your-page-or-post.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-TableBerg-block-to-your-page-or-post-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-TableBerg-block-to-your-page-or-post-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-TableBerg-block-to-your-page-or-post-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Se desejar, voc\u00ea pode selecionar v\u00e1rias linhas. Mas explicaremos o tutorial de hoje com uma \u00fanica linha e v\u00e1rias colunas.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table.webp\" alt=\"Selecione uma linha e colunas para a tabela\" class=\"wp-image-1031\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>O TableBerg permite que voc\u00ea adicione diferentes tipos de blocos \u00e0s c\u00e9lulas da tabela. Adicionar o <strong>Bloco de imagens<\/strong> para as c\u00e9lulas da tabela.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-image-block-to-the-TableBerg-cells.webp\" alt=\"Adicione o bloco de imagem \u00e0s c\u00e9lulas do TableBerg\" class=\"wp-image-1032\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-image-block-to-the-TableBerg-cells.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-image-block-to-the-TableBerg-cells-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-image-block-to-the-TableBerg-cells-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-image-block-to-the-TableBerg-cells-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p><strong>Carregar uma imagem<\/strong> para a c\u00e9lula da tabela da mesma forma que mostramos nos dois m\u00e9todos acima.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-table.webp\" alt=\"Carregar imagem na tabela\" class=\"wp-image-1033\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-table-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-table-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Continue adicionando imagens a outras colunas da tabela usando o <strong>Bloco de imagens<\/strong>. Espero que voc\u00ea consiga fazer isso sozinho.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Keep-adding-images-to-other-columns-of-the-table.webp\" alt=\"Continue adicionando imagens a outras colunas da tabela\" class=\"wp-image-1034\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Keep-adding-images-to-other-columns-of-the-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Keep-adding-images-to-other-columns-of-the-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Keep-adding-images-to-other-columns-of-the-table-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Keep-adding-images-to-other-columns-of-the-table-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Veja a imagem abaixo. Exibimos tr\u00eas imagens lado a lado na tabela criada com o bloco TableBerg.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-with-the-TableBerg-table.png\" alt=\"Imagens exibidas lado a lado com a tabela do TableBerg\" class=\"wp-image-1035\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-with-the-TableBerg-table.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-with-the-TableBerg-table-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-with-the-TableBerg-table-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-with-the-TableBerg-table-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\"><strong># Remova a borda da tabela<\/strong><\/p>\n\n\n\n<p>Voc\u00ea pode ver uma borda ao redor da tabela. Para remov\u00ea-la, <strong>clique no \u00edcone do TableBerg<\/strong> tr\u00eas vezes na barra de ferramentas. Ir para <strong>Guia Estilos &gt; Borda<\/strong> na barra lateral direita. Coloque o <strong>valor zero (0)<\/strong> para definir o tamanho da borda da tabela.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Remove-the-table-border.webp\" alt=\"Remover a borda da tabela\" class=\"wp-image-1036\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Remove-the-table-border.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Remove-the-table-border-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Remove-the-table-border-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Remove-the-table-border-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Assim, voc\u00ea pode exibir imagens lado a lado em sites do WordPress.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-conclusion\">Conclus\u00e3o<\/h3>\n\n\n\n<p>Mostrar imagens lado a lado \u00e9 altamente vantajoso, enquanto a compara\u00e7\u00e3o visual entre diferentes produtos, op\u00e7\u00f5es, recursos e varia\u00e7\u00f5es \u00e9 essencial. Espero que voc\u00ea consiga fazer isso sozinho hoje com este tutorial.<\/p>\n\n\n\n<p>Voc\u00ea pode fazer mais em seu site criando diferentes tipos de tabelas usando o plug-in TableBerg. D\u00ea uma olhada em <a href=\"https:\/\/tableberg.com\/pt\/como-criar-uma-tabela-de-comparacao-de-produtos-da-amazon-no-wordpress\/\" data-type=\"link\" data-id=\"https:\/\/tableberg.com\/how-to-create-amazon-product-comparison-table-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Como criar uma tabela de compara\u00e7\u00e3o de produtos da Amazon no WordPress<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Visual content plays a crucial role in capturing the attention of online users. What a single image can convey often requires hundreds of words. Besides, images can evoke emotions and enhance the overall aesthetics. One effective way to showcase images is by placing them side by side. This technique is particularly helpful in comparing multiple [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[42,41,9],"class_list":["post-1018","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-column-block","tag-image-block","tag-tableberg"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/How-to-Put-Images-Side-by-Side-in-WordPress.png","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/pt\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/1018","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/comments?post=1018"}],"version-history":[{"count":5,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/1018\/revisions"}],"predecessor-version":[{"id":7129,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/1018\/revisions\/7129"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media\/7127"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=1018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/categories?post=1018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/tags?post=1018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}