O WordPress permite que você adicione imagens ao seu site de várias maneiras. Uma das maneiras mais eficazes de fazer isso é adicionar imagens em colunas e linhas. Isso permite que você apresente suas imagens de forma organizada.

Nesta postagem do blog, mostraremos a você várias maneiras de exibir imagens do WordPress em Columns & Rows.

• Método 1: Usando o bloco de colunas (Melhor para controle manual total e layouts personalizados)
• Método 2: Usando o bloco Gallery (Melhor para grades de imagens simples com estilo mínimo)
• Método 3: Usando o bloco Galleryberg (Ideal para layouts avançados com lightbox e personalização)
• Método 4: Usando o plug-in Tableberg (Ideal para grades de imagens estruturadas, como tabelas de preços, cronogramas ou produtos)

Criar mesas bonitas
Com o Block Editor

Experimente gratuitamente

Obter um profissional

Método 1: Usando o bloco de colunas

O WordPress tem um bloco de colunas padrão. Você pode adicionar muitos outros blocos dentro dele, inclusive o bloco de imagens. Aqui está o guia.

Etapa 01: Adicionar o bloco Gutenberg Column

Localizar e adicionar o bloco Column clicando no ícone de adição (+) no editor.

Selecione o número de variações de coluna que deseja adicionar ao bloco de colunas. Para este tutorial, selecionaremos a variação de coluna 50/50.

Etapa 02: Adicionar o bloco de imagem ao bloco de coluna

Como dissemos, você pode colocar outros blocos do Gutenberg dentro do bloco de colunas. Agora, clique no ícone de mais (+) dentro da coluna. Localizar e adicionar o bloco Image a ele.

Agora você pode adicionar imagens da Media Library ou da unidade local. Faça isso como desejar.

Etapa 03: Estilizar o bloco de imagem dentro do bloco de coluna

Você pode ver que adicionamos uma imagem. Você pode alinhá-la centralmente usando a opção de alinhamento na barra de ferramentas. Redimensione a imagem segurando o ícone de círculo de borda. Por fim, você pode estilizá-la mais usando as opções da guia Style (Estilo).

Da mesma forma, adicione uma imagem à outra coluna também.

Método 2: Usando o bloco Gallery

O WordPress tem um bloco Gallery padrão pelo qual você pode adicionar várias imagens com o mesmo layout de bloco.

Etapa 01: Adicionar o bloco Gallery

Como no método acima, encontre e adicionar o bloco Gallery ao editor.

Você terá permissão para fazer upload de imagens de seu unidade local ou o Biblioteca de mídia. Neste tutorial, faremos upload de imagens da Biblioteca de mídia.

Etapa 02: Selecione e faça upload de imagens

Selecione as imagens que você deseja carregar no bloco Gallery. Você pode selecionar quantas imagens quiser. Quando terminar, clique no botão Criar uma nova galeria.

Você pode adicionar legendas para cada imagem, se desejar. Não há problema se você não adicionar nada. Pressione o botão Botão Inserir galeria no final.

Você pode ver que as imagens foram adicionadas à galeria. Em seguida, você pode personalizar o bloco Image usando as opções da seção Configurações e Guia Estilos na barra lateral direita.

Espero que você consiga fazer isso sozinho, por isso não entrarei em detalhes.

Método 3: Usando o plug-in Galleryberg

Se você estiver procurando uma maneira mais flexível e visualmente refinada de exibir imagens em colunas ou linhas, o Galleryberg é uma opção fantástica. É um plug-in de bloco de galeria nativo do Gutenberg que oferece a você várias opções de layout - incluindo Tiles, Masonry, Justified e Square - todas com caixa de luz suporte.

Etapa 1: Instalar o plug-in Galleryberg

Vá para o painel do WordPress e navegue até Plug-ins > Adicionar novo. Em seguida, procure por "Galleryberg" e instale e ative o plug-in.

Etapa 2: Adicionar o bloco Galleryberg

Abra a página ou postagem onde você deseja exibir as imagens. Em seguida, clique no ícone + e procure pelo botão "Galleryberg". Adicione-o à página.

Etapa 3: Faça upload ou selecione imagens

Use a biblioteca de mídia ou carregue novas imagens. Você pode reorganizar as imagens arrastando e soltando.

Etapa 4: Escolha um layout

No painel de configurações do bloco, selecione o layout desejado:

• Ladrilhos: Layout de grade com espaçamento igual (ideal para linhas e colunas)
• Alvenaria: Layout empilhado no estilo do Pinterest
• Justificado: Linhas bem alinhadas e de igual altura
• Quadrado: Quadrados perfeitos para exibição uniforme da grade

Etapa 5: Ative a opção Lightbox

Na barra lateral de configurações do bloco, alterne a opção Ativar Lightbox opção.

Suas imagens agora serão abertas em um pop-up com transições suaves, efeitos de zoom e navegação por slides.

Etapa 5: Personalizar e publicar

• Defina o número de colunas (de 1 a 8)Na barra lateral de configurações do bloco, role para baixo até a seção Caixa de luz seção.
• Alternar o Ativar Lightbox opção.
• Suas imagens agora serão abertas em um pop-up com transições suaves, efeitos de zoom e navegação por slides.
• Ajuste o espaçamento, as legendas, as bordas e muito mais
• Habilite a caixa de luz para visualizações interativas de imagens

Clique em Publicar ou Atualização e sua galeria aparecerá em linhas e colunas limpas e responsivas.

Método 4: Usando o plug-in Tableberg

O TableBerg é um plug-in de criação de tabelas fácil de usar. Ele permite que você adicione vários blocos personalizados às células da tabela para criar tabelas multifuncionais. Nesta seção, mostraremos como adicionar imagens no WordPress usando o plug-in Tableberg plugin.

Etapa 01: Instalar e ativar o plug-in Tableberg

Ir para Plug-ins > Adicionar novo plug-in. Tipo Tableberg na caixa de pesquisa. Instalar e ativar assim que o plug-in for exibido abaixo.

Etapa 02: Adicione o bloco Tableberg ao seu post/página

O plug-in vem com um bloco do Gutenberg chamado TableBerg. Encontre e adicione o bloco Bloco TabelBerg para seu editor.

Defina o número da linha e da coluna da tabela. O processo é semelhante ao do bloco de tabela padrão. Faça você mesmo.

Etapa 03: Localizar e adicionar o bloco de imagem à tabela

Espero que sua tabela esteja pronta. Selecione a célula em que deseja adicionar uma imagem. Quando você seleciona uma célula, o botão ícone de mais (+) aparecerá.

Clique no ícone de mais (+). Você obterá o bloco Image. Clique no bloco Imagem.

Você terá opções para carregar imagens da unidade local ou da Biblioteca de mídia. Clique em qualquer opção desejada e carregue a imagem.

Etapa 04: Estilizar a imagem carregada

Esperamos que sua imagem já tenha sido carregada na tabela. Vá até a guia Styles (Estilos) na barra lateral direita. Você encontrará opções como Duotone, Border e Radius para estilizar o bloco Image.

Assim, você pode fazer upload de imagens para a tabela do WordPress com o plug-in. Explorar como criar uma seção de membros da equipe no WordPress usando o bloco de colunas.

Observações finais!

Para manter um website com sucesso, você precisa fazer upload e apresentar seu conteúdo de diferentes maneiras. Às vezes, o mesmo conteúdo precisa ser apresentado de maneiras diferentes em posts e páginas diferentes. E o mesmo acontece com o bloco de imagens.

Esperamos que, depois de ler este tutorial, você consiga adicionar seu bloco de imagens de várias maneiras no WordPress e trazer variações ao conteúdo.

<p>The post How to Display WordPress Images in Columns & Rows first appeared on Tableberg.</p>

As imagens são um conteúdo gráfico muito importante. Muitos usuários ainda não sabem como adicionar imagens às tabelas do WordPress. Mas, ao adicionar imagens à tabela, você pode criar facilmente vários tipos de tabelas, como comparação, Especificação do produto, tabelas de preçosetc.

Neste artigo, mostraremos dois métodos fáceis de como adicionar uma imagem a uma tabela no WordPress. Vamos começar!

Método 1: Usando o bloco de tabela padrão
Método 2: Uso do bloco Tableberg

Criar mesas bonitas
Com o Block Editor

Experimente gratuitamente

Obter um profissional

Método 1: Usando o bloco de tabela padrão

O padrão Editor de blocos do Gutenberg vem com a opção Inline Image, que pode ser encontrada na barra de ferramentas. Usando a opção Opção de imagem em linhaSe você quiser adicionar imagens às suas tabelas do WordPress, poderá fazê-lo facilmente.

O processo é o seguinte.

Etapa 1: Adicionar o bloco de tabela ao editor

Abra um post ou uma página onde você deseja adicionar a tabela. Adicione a tabela Bloco de tabelas para o editor.

Defina o número de linhas e colunas.

A tabela será criada em alguns segundos.

Etapa 2: Use a opção de imagem embutida na tabela

Coloque o cursor na célula em que deseja adicionar uma imagem. A barra de ferramentas será exibida.

Clique no botão Mais opções na barra de ferramentas. Localize e pressione Imagem em linha na lista.

Etapa 3: Selecione e adicione uma imagem

Você terá permissão para adicionar uma imagem da Biblioteca de mídia ou fazer upload de sua unidade local. Escolha a imagem que você deseja. Clique no botão Botão Selecionar no final.

A imagem será adicionada em um segundo. Agora, você pode aumentar seu tamanho alterando sua largura.

Da mesma forma, adicione uma nova imagem à outra coluna usando a mesma opção Inline Image.

Método 2: Usando o bloco Tableberg

Tableberg é um plug-in de criação de tabelas rico em recursos e fácil para iniciantes. Com esse plugin, você também pode criar tabelas e adicionar imagens às suas células. Explicamos o processo abaixo.

Observação: Certifique-se de que você tenha instalou e ativou o plug-in Tableberg.

Etapa 01: Adicionar o bloco Tableberg ao Editor

Localize e adicione o Bloco Tableberg para o editor. O bloco funciona da mesma forma que o bloco Table padrão, conforme mostrado acima.

Defina o número da linha e da coluna.

O esboço da tabela está pronto.

Etapa 2: Adicionar o bloco de imagem à tabela

O Tableberg inclui o Bloco de imagens. Ele funciona de forma semelhante ao Bloco de imagens do Gutenberg. Adicione o bloco Image à célula.

Selecione a opção para carregar a imagem desejada a partir da respectiva fonte. Para este tutorial, carregaremos a imagem da Biblioteca de mídia.

Etapa 3: Selecione e faça upload de uma imagem

Espero que você saiba o que deve fazer aqui. Escolha uma imagem e clique no botão Botão Selecionar.

A imagem será adicionada à tabela instantaneamente. Você pode alterar o tamanho da imagem arrastando a linha da borda, conforme mostrado na imagem abaixo.

Etapa 4: Personalizar e estilizar a imagem

Venha para o Guia Configurações na barra lateral direita. Você pode adicionar um texto alternativo, proporção, largura, altura e resolução, o que não é possível com a opção Inline Image.

Ir para o Guia Estilos. Você pode adicionar uma borda e o raio da borda usando as opções dessa guia.

Assim, você pode adicionar imagens à tabela no WordPress.

Notas de finalização!

Embora o TableBerg seja um novo plug-in, ele será um divisor de águas. Ele levará a experiência de criação de tabelas com base no Gutenberg para o próximo nível muito em breve.

Com o plug-in TableBerg, você pode adicionar não apenas imagens, mas também vários outros tipos de conteúdo, como fitas, classificações, listas de marcadores, botões de CTA, HTML personalizado etc.

Com eles, você pode criar tabelas multifuncionais com o plug-in. Confira algumas postagens:

• Como exibir imagens do WordPress em colunas e linhas
• Como experimentar o TableBerg sem instalá-lo em seu site
• Como criar uma tabela de comparação de produtos
• Como criar uma tabela de especificações do produto

<p>The post How to Add an Image to a Table in WordPress first appeared on Tableberg.</p>

Uma maneira eficaz de exibir imagens é colocá-las lado a lado. Essa técnica é particularmente útil para comparar vários produtos, apresentar imagens de antes e depois e contar uma história.

Neste artigo, mostraremos a você três maneiras fáceis de colocar imagens lado a lado no WordPress.

• Método 1: Usando o bloco Gallery
• Método 2: Usando o bloco Columns
• Método 3: Uso do bloco Tableberg

Criar mesas bonitas
Com o Block Editor

Experimente gratuitamente

Obter um profissional

Método 1: Usando o Gallery Block

O WordPress vem com o bloco Gallery padrão. Você pode apresentar imagens lado a lado com o bloco das seguintes maneiras.

Etapa 01: Adicionar o bloco Gallery ao WordPress

Basta abrir um post ou uma página. Encontre o Bloco da galeria na biblioteca de blocos do Gutenberg, pressionando o botão botão de adição (+). Adicione-o ao editor.

Clique no botão Botão Upload para adicionar imagens novas de seu armazenamento local ao lado. Ou você pode carregá-las de seus arquivos existentes clicando no botão Biblioteca de mídia botão.

Para este tutorial, faremos upload de imagens da Biblioteca de mídia. Selecione as imagens que você deseja adicionar. Pressione o botão Criar uma nova galeria no final.

Depois que as imagens forem adicionadas ao editor, você as verá aparecendo lado a lado. Em seguida, você pode personalizar as configurações e estilizações do bloco Gallery usando as respectivas opções na barra lateral direita.

Observação: Se suas imagens não forem exibidas lado a lado por padrão, selecione o bloco inteiro clicando no ícone Ícone da galeria na barra de ferramentas. Especifique os números das colunas na barra lateral direita.

Método dois: usando o bloco Columns

O bloco Column permite que você dividir seu conteúdo em várias colunas. Você pode adicionar outros blocos para adicionar diferentes tipos de conteúdo em cada coluna.

Etapa 01: Adicionar o bloco de colunas ao seu site

Adicione o Bloco de colunas em seu editor seguindo o mesmo método descrito acima.

Selecione o layout de coluna que desejar. Você pode exibir um número igual de imagens lado a lado, correspondente ao número de colunas que adicionar. Selecionamos o layout de duas colunas para o bloco.

Adicione o Bloco de imagens pressionando o botão botão de adição (+) dentro do Bloco de colunas.

Faça upload de uma imagem da mesma forma que mostramos acima.

Observação: Como esse é o bloco Image, você pode adicionar apenas uma imagemao contrário do bloco Gallery.

Da mesma forma, adicione o Bloco de imagens novamente para a segunda coluna.

Você pode ver que a segunda imagem apareceu ao lado da primeira. Agora você pode adicionar textos alternativos e outras configurações para as imagens, uma a uma.

Terceiro método: Usando o bloco Tableberg

Tableberg é um plug-in de criação de tabelas baseado em blocos. Com ele, você também pode criar colunas e exibir imagens lado a lado. Siga as etapas explicadas abaixo após instalação e ativação o plug-in.

Etapa 01: Adicionar o bloco TableBerg

O plug-in vem com um Bloco TableBerg. Adicione-o ao seu editor.

Se desejar, você pode selecionar várias linhas. Mas explicaremos o tutorial de hoje com uma única linha e várias colunas.

O TableBerg permite que você adicione diferentes tipos de blocos às células da tabela. Adicionar o Bloco de imagens para as células da tabela.

Carregar uma imagem para a célula da tabela da mesma forma que mostramos nos dois métodos acima.

Continue adicionando imagens a outras colunas da tabela usando o Bloco de imagens. Espero que você consiga fazer isso sozinho.

Veja a imagem abaixo. Exibimos três imagens lado a lado na tabela criada com o bloco TableBerg.

# Remova a borda da tabela

Você pode ver uma borda ao redor da tabela. Para removê-la, clique no ícone do TableBerg três vezes na barra de ferramentas. Ir para Guia Estilos > Borda na barra lateral direita. Coloque o valor zero (0) para definir o tamanho da borda da tabela.

Assim, você pode exibir imagens lado a lado em sites do WordPress.

Conclusão

Mostrar imagens lado a lado é altamente vantajoso, enquanto a comparação visual entre diferentes produtos, opções, recursos e variações é essencial. Espero que você consiga fazer isso sozinho hoje com este tutorial.

Você pode fazer mais em seu site criando diferentes tipos de tabelas usando o plug-in TableBerg. Dê uma olhada em Como criar uma tabela de comparação de produtos da Amazon no WordPress.

<p>The post How to Put Images Side by Side in WordPress (Three Ways) first appeared on Tableberg.</p>

Há vários casos de uso em que você pode usar esse recurso. Por exemplo, fotografias de viagens, banners, chamadas para ação, portfólios, legendas para locais específicos etc. Nesta postagem, mostraremos como adicionar texto em cima de uma imagem no WordPress.

Como adicionar texto à parte superior de uma imagem no WordPress

Adicione o Bloco de imagens para o editor. Esse é um bloco padrão que você encontrará na biblioteca de blocos.

Isso permitirá que você adicione uma imagem ao editor. Você pode fazer isso a partir de sua unidade local ou da biblioteca de mídia.

Vá para a barra de ferramentas e clique o Adicionar texto sobre a imagem característica.

Você terá a opção de escrever o texto desejado na imagem. Escreva como você quiser.

Depois que o texto for adicionado, você poderá alterar o alinhamento e a estilização. Espero que você possa fazer o resto sozinho.

Explore esta postagem em como alinhar o texto no WordPress.

Fechando!

Espero que você tenha gostado deste tutorial. Mas, antes de terminarmos, há vários pontos que queremos lembrar a você. Priorize a legibilidade ao adicionar texto sobre a imagem. Certifique-se de que as cores do texto e da imagem contrastem entre si para que o texto fique legível.

Em seguida, coloque o texto em uma posição adequada sobre a imagem para que ele não oculte nenhum elemento importante da imagem. Por fim, mantenha o texto curto e conciso. O excesso de texto pode sobrecarregar os leitores.

<p>The post How to Add Text on Top of an Image in WordPress first appeared on Tableberg.</p>

Por exemplo, se você tiver um site de portfólio, deverá exibir os logotipos das marcas com as quais trabalhou. O mesmo se aplica a muitos outros sites. O WordPress permite que você faça isso de várias maneiras fáceis e sem complicações.

Nesta postagem de tutorial, mostraremos os dois métodos mais fáceis de exibir logotipos no WordPress, com e sem um plug-in. Comece agora!

Método um: sem um plug-in (usando o bloco de colunas)

A coluna é um bloco padrão do editor do Gutenberg.

Etapa 01: Adicionar o bloco de colunas ao Editor

Adicionar Bloco de colunas para o editor, clicando no botão ícone de mais (+).

Etapa 02: Selecione um layout de coluna

Selecione um layout de coluna. Quanto mais colunas você selecionar, mais logotipos poderá adicionar. Vamos selecionar o layout 33/33/33.

Depois que o bloco for adicionado, você poderá aumentar ainda mais o número da coluna.

Para fazer isso, clique o Ícone de coluna na barra de ferramentas. Ir para o Guia Configurações. Então, venha para o Seção Colunas.

Você pode aumentar o número de colunasbarbeiro arrastando a escala ou digitando diretamente uma figura.

Etapa 03: Adicionar o bloco de imagem às colunas individualmente

Você pode adicionar todos os outros blocos do Gutenberg dentro das colunas. Vá para a seção primeira coluna e clique o ícone de mais (+).

Tipo de imagem na caixa de pesquisa. Quando o bloco aparecer, adicione-o à coluna.

Agora, carregue um logotipo do seu disco local ou da Biblioteca de mídia.

Você pode ver que adicionamos um logotipo ao bloco de colunas.

Etapa 04: Adicione logotipos às outras colunas, uma a uma

Da mesma forma, adicione logotipos às outras colunas do bloco.

Etapa 05: Estilizar o bloco de colunas

Para estilizar o bloco, ir para o Guia Estilos na barra lateral direita.

Rolando a guia, vir para Espaçamento entre blocos. Essa seção permite adicionar espaço entre os logotipos vertical e horizontalmente. Mas, nesse caso, é melhor adicionar espaços horizontalmente.

Então, adicionar uma borda ao redor de todo o bloco da coluna. Você pode alterar a cor e a largura da borda.

Para personalização de nível avançado, você precisa usar um plug-in de terceiros. Explicaremos o método a seguir com esse plug-in.

Método dois: usando um plug-in (Tableberg)

Tableberg é um plug-in versátil para criar tabelas, caixas de ícones, caixas de imagens, caixas de logotipos e muito mais. Com esse plug-in, você pode exibir logotipos com personalizações avançadas em seu site. Obtenha-o no banner blow.

Criar mesas bonitas
Com o Block Editor

Experimente gratuitamente

Obter um profissional

Depois de instalado, siga o esquema abaixo.

Etapa 01: Adicionar o bloco Tableberg ao Editor

O plug-in adiciona um bloco à biblioteca de blocos do Gutenberg chamado Tableberg. Adicione o bloco ao editor.

Você precisa definir as células da tabela para o número de logotipos que deseja exibir. Basta criar o número necessário de células, especificando o número de linhas e colunas.

Por exemplo, precisamos de oito células para exibir oito logotipos. Defina o número da coluna e da linha 4*2.

O número necessário de células é criado, como você pode ver.

Etapa 02: Comece a adicionar logotipos às células Tableberg

O Tableberg permite que você adicione vários blocos personalizados às células. Localizar e adicionar o bloco Image para uma célula.

Agora, carregar um logotipo, seja por meio de upload ou da biblioteca de mídia.

Adicione todos os outros logotipos ao restante das células Tableberg.

Etapa 03: Estilizar as células

Agora, ir para o guia estilos mantendo a tabela inteira selecionada. Você pode alterar a cor de fundo individualmente para todas as linhas e células. Mas, como não precisamos disso para o tutorial, deixaremos essa opção.

Venha para o Espaçamento entre células rolando a guia para baixo. Usando a opção nessa seção, é possível adicionar espaços entre as colunas do logotipo, tanto vertical quanto horizontalmente.

Borda do Come to Table. Na seção Inner Border (Borda interna), é possível alterar a cor e o raio da borda.

Assim, você pode dar uma visão estética às colunas do logotipo.

Conclusão

O Tableberg é um plugin multiuso interessante com o qual você pode criar vários designs incríveis para o seu site. Antes de sair, você pode explorar mais algumas postagens de tutoriais sobre o plugin.

• Como criar uma caixa de produto da Amazon no WordPress
• Como adicionar caixas de recursos no WordPress
• Como adicionar caixas de ícones no WordPress

<p>The post How to Showcase Logos in WordPress (With/out a Plugin) first appeared on Tableberg.</p>