Como fazer colunas no WordPress sem plugin

Como fazer colunas no WordPress sem plugin

Organizar o conteúdo em colunas é muito fácil graças ao bloco de colunas do WordPress. Este bloco pertence aos blocos principais que podem ser usados em todos os temas do WP. O bloco de colunas pode ter até 6 colunas. Portanto, você pode ter 6 conteúdos diferentes lado a lado.

Hoje vamos mostrar como fazer colunas no WordPress sem plugin – usando o bloco Columns. Também trazemos um resumo de recursos mais recentes da versão WP 5.3 atualizar.

Neste tutorial você encontrará informações sobre:

Qual é a finalidade das colunas

As colunas no site podem ter várias aplicações. Em primeiro lugar, eles podem tornar o conteúdo bem organizado, mais legível e fácil de navegar. Ao organizar o conteúdo em colunas, você pode destacar informações ou parâmetros importantes.

Por exemplo, você pode usar o layout de várias colunas para apresentar seus serviços. Adicione uma imagem ilustrativa, descrição ou botão. É claro que você pode tornar a imagem clicável.

Layout de várias colunas com serviços
Layout de várias colunas com serviços

Da mesma forma que os serviços, você pode usar colunas no WordPress para mostrar produtos ou categorias de produtos. É ideal se você tiver um site de negócios simples.

Layout de várias colunas com produtos e categorias
Colunas usadas para mostrar produtos e categorias

Nas postagens do blog, você pode usar colunas para separar o conteúdo. Você pode colocar texto, marcadores ou imagens lado a lado.

Conteúdo separado usando colunas
Usando colunas para separar o conteúdo

Como as colunas funcionavam no editor antigo

Antes do WordPress 5+, se você quisesse criar conteúdo com várias colunas, precisava usar tabelas. Foi muito mais difícil do que no editor mais novo. Além disso, geralmente havia um problema com estilos e exibição de tabelas em dispositivos móveis. Como costumava funcionar?

Você teve várias opções sobre como criar colunas no site WordPress:

1. Insira manualmente o código HTML no editor de texto

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Essa abordagem foi usada principalmente por desenvolvedores, que podiam criar rapidamente tabelas ou colunas com base em seus requisitos. A desvantagem era que nem todos os temas do WordPress podiam lidar bem com as colunas. As tabelas geralmente não eram perfeitas e o usuário médio não conseguia resolver facilmente todos os problemas possíveis.

2. Permitir tabelas no editor do WordPress

Como o WordPress usava o editor TinyMCE, era possível permitir funções para editar tabelas. Se você estiver interessado em saber mais, você pode encontrar todos os detalhes neste fórum. Caso você faça o mesmo para nossos temas AIT, as tabelas funcionarão corretamente.

3. Usando o elemento Colunas em temas AIT

Se você usa um de nossos temas WordPress mais antigos, certamente conhece nosso elemento Columns. Este elemento pode ser usado para adicionar colunas dentro das páginas. É um elemento que pode ser encomendado, o que significa que você pode colocá-lo onde precisar. A vantagem é sua variabilidade dentro das páginas.

Elemento de colunas
Colunas de elementos ordenáveis - você pode usá-lo em qualquer tema AIT

4. Baixe o plug-in de terceiros para gerenciar tabelas

Outra solução de como fazer colunas em posts e páginas do WordPress foi baixar um dos plugins disponíveis para criação de tabelas. Esses plugins permitem adicionar colunas/tabelas com poucos cliques sem nenhuma codificação. Também foi possível usar isso por usuários menos experientes.

Como fazer colunas no WordPress sem plugin (no editor de blocos)

Graças ao novo editor de blocos, criar colunas tornou-se extremamente fácil. Se você ainda usa o WordPress antigo, agora é a hora certa de atualizar para a versão mais recente. Você poderá adicionar e gerenciar colunas de forma simples, em poucos cliques usando o bloco Colunas.

Este bloco é uma mudança bem-vinda para todos que desejam trabalhar com conteúdo multi-colunas, apresentar produtos ou escrever blogs e não têm experiência com programação.

Vamos dar uma olhada em como adicionar o bloco Columns e como criar colunas no WordPress sem plugin:

  • A primeira opção é clicar em “+” na barra superior e selecionar o bloco Colunas entre os blocos disponíveis.
  • A segunda opção é clicar em “+” em qualquer lugar dentro do editor.
Adicione colunas no WordPress clicando em “+”
Adicionando colunas no WordPress clicando em “+”
Adicionar bloco de colunas com barra “/”
Adicionando colunas no WordPress usando a barra “/”

Layouts predefinidos do bloco de colunas do WordPress (NOVO do WP 5.3)

A versão mais recente trouxe grandes melhorias nas configurações das colunas. Em primeiro lugar, existem estilos de layout padrão disponíveis. O que isso significa?

Os usuários podem escolher seu layout e estilo de alinhamento no processo de adição de um novo bloco à área de conteúdo. Layouts predefinidos podem ser muito úteis – especialmente para usuários que não possuem habilidades avançadas em WordPress. Este recurso representa como imaginamos a forma de fazer colunas no WordPress (sem plugin ou qualquer outro add-on).

Layouts predefinidos no bloco Colunas
Opções de layouts predefinidos

 

Se você não quiser escolher um layout predefinido no bloco de colunas do WordPress, basta ignorá-lo. Após pular esta etapa, o conteúdo será separado em 2 partes iguais/duas colunas individuais que podem ser editadas.

Bloco de colunas criadas
Bloco de colunas com 2 áreas padrão (colunas) que você pode editar

Colunas Bloquear configurações básicas

O próprio bloco de colunas do WordPress não possui muitas opções. Por que é assim, explicaremos mais adiante. Na barra superior, você pode alterar o alinhamento para largo ou largura total. Você pode alterar esse alinhamento se for compatível com seu tema ativo.

Barra de ferramentas superior do bloco Colunas
Barra de ferramentas superior com opções de alinhamento

A configuração mais importante do bloco Colunas é o número de colunas na barra lateral do inspetor no lado direito. Por padrão, existem 2 colunas, mas você pode aumentar esse número para 6. Você pode alterá-lo usando o mouse ou digitando um número. A aparência que você verá imediatamente após aumentar ou diminuir as colunas. O bloco se altera dinamicamente dependendo do controle deslizante.

Alteração do número de colunas
Mova com o controle deslizante para alterar o número de colunas conforme necessário

É muito prático porque você altera o número de colunas literalmente em segundos, sem nenhuma alteração difícil nas configurações ou codificação.

Da mesma forma que outros blocos no editor do WordPress, você pode inserir Classe CSS personalizada também no bloco Colunas.

Aplicador de blocos para um trabalho mais suave com blocos

O bloco de colunas é especial porque você pode criar vários blocos com ele. Até o lançamento de uma nova versão, era muito difícil trabalhar com blocos individuais. Quando você queria adicionar algum bloco, não sabia exatamente onde clicar. Graças ao Block appender (e sua diferenciação pela cor de fundo), é mais fácil inserir conteúdo na coluna apropriada.

Bloquear appender no bloco de colunas do WordPress
Bloquear appender com cor de fundo

Como trabalhar com o bloco de colunas do WordPress

A beleza do bloco Columns é que cada coluna pode aninhar outros blocos. Pode ser parágrafo, bloco de imagem ou bloco de botão. O número máximo de colunas é 6, portanto, você pode criar conteúdo de várias colunas conforme necessário. Como mencionado anteriormente, para apresentar produtos, você pode adicionar a imagem do produto, nome, preço e botão lado a lado.

Diferentes tipos de conteúdo em layout de várias colunas
Com o bloco Colunas você pode apresentar diferentes tipos de conteúdo lado a lado

Você também pode usar vários blocos de colunas um sob o outro para criar uma grade. Você pode usá-lo para apresentar seus serviços ou promoção de recursos importantes.

Efeito de grade do bloco de colunas
Efeito de grade de blocos de colunas colocados um abaixo do outro

Editando blocos aninhados

Como já mencionamos, você pode aninhar outros blocos dentro das colunas. Cada bloco aninhado tem todas as suas configurações disponíveis. Isso significa que, se você adicionar o bloco de imagem à coluna, poderá editá-lo exatamente da mesma maneira que no autônomo Bloco de imagem.

Editando o bloco de imagem como um bloco aninhado
Configurações disponíveis para o bloco de imagem aninhado no bloco de colunas

Conclusão: Vantagens do bloco de colunas

A liberação do editor de blocos do WordPress e a disponibilidade do uso de colunas em páginas e postagens simplificaram significativamente a maneira como os usuários podem trabalhar com o conteúdo. Graças ao bloqueio de colunas do WordPress, não é mais importante usar soluções de terceiros ou escrever código HTML. Adicionar ou excluir colunas é possível com poucos cliques. Tudo é muito intuitivo e rápido também para usuários menos técnicos.

Seu conteúdo no layout de várias colunas ficará bem alinhado na grade. Também ficará bem na versão responsiva imediatamente.

Estávamos trabalhando duro no novo tema WordPress Citadela, desenvolvido especialmente para o editor de blocos do WordPress. Saiba mais sobre o tema Citadela e os pacotes de layout disponíveis.

2 pensamentos sobre “How to make columns in WordPress without plugin

    1. Olá, David,

      obrigado por escrever. Você deve ativar o editor Gutenberg que oferece a opção de selecionar a coluna individual, na barra lateral de configurações (lado direito) você pode ajustar sua largura.

      Atenciosamente!
      Zlatko
      equipe AIT

Comentários estão fechados.