Índice
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
- Como as colunas funcionavam no editor antigo
- Como fazer colunas no WordPress sem plugin (no editor de blocos)
- Configurações básicas do bloco de colunas
- Como trabalhar com o bloco de colunas do WordPress
- Como editar blocos aninhados
- Vantagens do bloco de colunas
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.
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.
Nas postagens do blog, você pode usar colunas para separar o conteúdo. Você pode colocar texto, marcadores ou imagens lado a lado.
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.
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.
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).
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.
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.
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.
É 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.
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.
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.
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.
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.
Como posso modificar a largura das colunas?
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