Ao cobrir análises de produtos, tabelas de comparação, tutoriais, histórias de viagens, infográficos, conteúdo educacional etc., talvez você precise colocar textos e imagens lado a lado. Há várias maneiras de fazer isso no WordPress.
Neste artigo, mostraremos a você várias maneiras eficazes de colocar texto e imagem lado a lado no WordPress. Portanto, fique conosco até o fim. Você realmente aprenderá algo interessante.
Método 1: Usando o bloco de mídia e texto
Mídia e texto é um bloco padrão do editor de blocos do Gutenberg. Com esse bloco, você pode colocar texto e imagens lado a lado sem depender de nenhuma ferramenta de terceiros.
Etapa 01: Adicione a mídia e o texto ao editor
Clique no botão ícone de mais (+) no editor. Tipo Mídia e texto na barra de pesquisa. Adicione o bloco ao editor.
Etapa 02: Adicionar/carregar uma imagem no bloco
Você pode adicionar uma imagem fazendo upload da unidade local, da biblioteca de mídia ou da imagem em destaque. Escolha a opção de sua preferência.
Você pode ver que a imagem foi adicionada ao bloco.
Etapa 03: Adicionar texto ao bloco de mídia e texto
Escreva o texto desejado na coluna direita do bloco. Você pode personalizar a cor do texto, o alinhamento e muito mais, se desejar.
Etapa 04: Alternar a posição do texto e do arquivo de mídia
O bloco permite alternar a posição dos arquivos de texto e de mídia clicando nas respectivas opções na barra de ferramentas.
Método 2: Usando o bloco Columns
O Colunas também é um bloco padrão do editor. É um dos blocos mais usados na criação de conteúdo do WordPress.
Etapa 01: Adicionar o bloco Columns ao Editor
Você pode exibir texto e imagem lado a lado adicionando a tag Parágrafo e Blocos de imagem separadamente nos blocos de colunas.
Portanto, adicionar o bloco Columns primeiro para o editor.
Selecione um layout de duas colunas.
Etapa 02: Adicionar o bloco de imagem ao bloco de colunas
É melhor exibi-los à esquerda. Portanto, adicionar o bloco Image para a coluna da esquerda.
Aqui, novamente, adicione a imagem desejada, seja da unidade local, da biblioteca de mídia ou por meio de um URL.
Você pode ver que a imagem foi adicionada ao bloco.
Etapa 03: Adicionar texto ao bloco Cloumns
Adicione o Bloco de parágrafos para a coluna da direita. Isso permitirá que você adicione texto.
Você pode ver que o texto foi adicionado à coluna.
Em seguida, você pode personalizar o bloco de colunas, inclusive a imagem e o texto nele contidos.
Método 3: Usando o bloco Tableberg
Tableberg é um maravilhoso plug-in de criação de tabelas que permite que você crie várias partes para o seu site. Esse plug-in também permite que você coloque texto e imagens lado a lado. Faça o download do plug-in clicando nos botões anexados ao banner abaixo.
Criar mesas bonitas
Com o Block Editor
Comece a seguir o tutorial agora.
Etapa 01: Adicionar o bloco Tableberg ao Editor
Esse plug-in adiciona um bloco chamado Tableberg à biblioteca de blocos do Gutenberg. Adicionar o bloco Tableberg para o editor.
Selecione o número de colunas e linhas de que você precisa para o layout. Selecionaremos 2*1.
Você pode ver que as colunas e as linhas estão prontas.
Etapa 02: Adicionar uma imagem a uma célula da tabela
O Tableberg permite adicionar vários blocos personalizados às suas células. Ao clicar no ícone ícone de mais (+), encontrar e adicionar o bloco Image para uma de suas células.
Carregue a imagem para a unidade local ou adicione uma da sua biblioteca de mídia.
Adicionamos uma imagem, que você pode ver abaixo.
Etapa 03: Adicionar texto à tabela
Basta adicionar texto à coluna da direita usando o bloco de parágrafos.
Etapa 04: Modificar a borda do Tableberg
Você pode tornar essa seção mais atraente removendo ou colonizando a borda da tabela. Ir para o Guia Estilos.
Borda do Come to Table rolando a guia para baixo. Você terá opções para remover ou colorir a borda da tabela nessas opções.
Assim, é possível criar seções da Web para colocar texto e imagem lado a lado no WordPress.
Método 4: Usando o bloco Sliderberg
Deseja exibir texto e imagens lado a lado em um controle deslizante interativo? O Sliderberg permite que você faça exatamente isso, usando o conhecido bloco Media & Text, com total flexibilidade. Veja como configurá-lo em apenas alguns minutos:
Etapa 1: Instalar e ativar o plug-in Sliderberg
Primeiro, vá para Plugins → Adicionar novo no painel do WordPress, procure por "Sliderberg" e clique em Instalar agora. Em seguida, ative o plug-in.
Etapa 2: Inserir o bloco do Sliderberg
Edite sua postagem ou página. Clique no botão + procure por "Sliderberg" e insira o bloco Sliderberg onde deseja que o controle deslizante apareça.
Etapa 3: Selecione o tipo "Blocks Slider" (controle deslizante de blocos)
Quando solicitado, escolha a opção Controle deslizante de blocos opção. Isso permite que você adicione qualquer bloco do Gutenberg dentro de cada slide.
Etapa 4: Escolha uma cor de fundo para o controle deslizante
Escolha uma cor de fundo para o controle deslizante que combine com o estilo do seu site ou mantenha-o transparente para obter uma aparência limpa.
Etapa 5: Adicione o bloco "Media & Text" dentro do controle deslizante
Dentro de seu primeiro slide, clique no botão + e insira o botão Mídia e texto bloco.
Etapa 6: Adicionar imagem e texto ao controle deslizante
Use o bloco Media & Text para carregar sua imagem (lado esquerdo) e adicionar seu texto (lado direito). Você pode usar títulos, parágrafos, botões ou qualquer outro bloco que precisar.
Etapa 7: Adicionar ou duplicar slides
Deseja mais slides? Clique aqui Adicionar slide para criar um novo, ou Duplicar slide para copiar um layout existente.
Etapa 8: Personalize o controle deslizante e publique
Ajuste as configurações do controle deslizante (animação, reprodução automática, setas de navegação etc.) de acordo com sua preferência. Quando estiver pronto, clique em Publicar para entrar no ar!
Agora você tem um controle deslizante suave e responsivo que mostra texto e imagem lado a lado, perfeito para apresentações de equipes, produtos, depoimentos e muito mais.
Dica profissional: Você pode usar qualquer dentro de seus slides do Sliderberg - não apenas Mídia e Texto! Seja criativo com botões, ícones, colunas ou até mesmo blocos de terceiros.
Conclusão
De fato, você pode aproveitar os blocos padrão do Gutenberg para criar e projetar seus posts e páginas da Web. Mas, como eles não têm muitos recursos avançados, você geralmente precisa de plug-ins de blocos adicionais que vêm com muitos recursos interessantes.
O Tableberg é um plugin interessante que você pode usar nesse caso. O Ultimate Blocks é outro excelente plug-in de blocos que você deve considerar. Explore as versões gratuitas desses dois plug-ins clicando nos botões anexados abaixo.
Leia também:
