Crie páginas impactantes com colunas do WordPress: do iniciante ao profissional

As colunas do WordPress são blocos incríveis e flexíveis que ajudam você a escapar dos layouts usuais do site. Com eles, você pode tornar suas páginas atraentes como uma revista e seus visitantes se lembrarão do seu site por muito tempo. Mas como adicionar colunas no WordPress?

1. Se você estiver usando o editor padrão, basta acessar uma página e procurar o bloco de colunas.
2. Mas se você estiver usando PostX, adicione o bloco Row e, a partir dos layouts, escolha qualquer estilo de coluna e personalize-o com várias opções.

Você ainda está confuso? Não se preocupe; não importa se você é novo no WordPress ou tem experiência com ele; convidamos você a descobrir as maravilhas do uso de colunas. Então vamos ler até o final.

O que são colunas do WordPress?

No WordPress, o termo “colunas” refere-se a um bloco que permite exibir o conteúdo em um layout lado a lado, aprimorando o apelo visual e a legibilidade. Em palavras simples, as colunas são uma maneira prática e eficiente de organizar o conteúdo ou apresentar informações complexas nas postagens e páginas dos sites WordPress. Felizmente, existem vários métodos para adicionar colunas ao seu site WordPress, e o processo é direto.

O editor padrão do Gutenberg vem com um bloco de colunas. Mas se você quiser algumas opções avançadas de personalização, pode usar um plug-in como o PostX, que oferece blocos adicionais.

Método 1: Como adicionar colunas no WordPress usando o editor padrão

Vamos começar com o método fácil – o bloco de colunas padrão do WordPress.

Etapa 1: faça login e crie uma postagem/página

Na primeira etapa, faça login no painel do WordPress e localize o botão “+ Novo” na parte superior. Agora mova o cursor para o local desejado e, com base em sua preferência, adicione um Post ou uma Página.

Etapa 2: adicionar o bloco de colunas

Agora clique na opção Adicionar bloco ou no botão “+” e você verá uma caixa de pesquisa. Em seguida, na caixa de pesquisa, digite “Colunas” e você encontrará o ícone do bloco de colunas.

Etapa 3: escolha o número de colunas

Depois de adicionar o bloco de colunas, você será solicitado a escolher uma variação. Existem 6 variações, por exemplo, 100, 50/55/, 33/33/33, etc. Vamos continuar com as Colunas 50/50.

Etapa 4: adicionar itens às colunas

Nossa tarefa real de adicionar colunas do WordPress está concluída. Agora é hora de você personalizá-lo com base em suas necessidades.

Vamos considerar que precisamos adicionar 2 colunas para os menus Almoço e Jantar. Então, vamos adicioná-los.

1. Adicionar títulos e parágrafos à primeira coluna

Primeiro, vá para a primeira coluna e você notará um botão “+”. Passe o cursor lá e você verá um texto "Adicionar bloco".

Clique aqui e procure o bloco “Título”.

Agora, digite o que você precisa digitar para os títulos. Depois disso, basta pressionar “Enter” e um novo bloco será criado. Adicione o que você deseja escrever sob o título.

1. Adicionar estilo ao título

Agora você pode personalizá-lo para torná-lo atraente. Por exemplo, existem diferentes opções, como alterar a largura da coluna do WordPress, a cor do texto e a cor do plano de fundo. Por enquanto, adicionaremos uma cor de fundo. Para isso, vamos clicar no ícone Estilo.

Agora, na configuração do bloco, clique em “background” e você verá as opções de cores. Existem cores sólidas e gradientes. Estamos escolhendo o gradiente e selecionando a cor da grama elétrica.

Agora vamos fazer o mesmo para a segunda coluna para adicionar itens de jantar.

1. Adicionar cor de fundo geral

Nossa tarefa está quase concluída. Para um toque final, adicionaremos outra cor de fundo para toda a coluna. Para isso, precisamos selecionar ambas as colunas. Agora vá para o estilo, depois para o plano de fundo e selecione a cor.

Escolhemos a cor pálida do oceano. Agora vamos ver o resultado final.

Leia também: Vídeo de fundo do WordPress: adicione-o em 2 métodos diferentes

Métodos 2: Como adicionar colunas no WordPress usando PostX

O processo acima de incluir colunas no WordPress é bastante fácil, mas o resultado final pode não ser tão satisfatório. É porque há opções muito limitadas no editor padrão para personalizar as colunas.

Não se preocupe; nesse caso, o PostX pode ser seu salvador. O PostX também oferece colunas altamente personalizáveis ​​para WordPress. No segmento abaixo, aprenderemos como fazer isso, bem como um guia de personalização.

Mas antes de começarmos, se você não estiver usando PostX, verifique o guia vinculado e instale e ative o plug-in PostX.

Obtenha o PostX Pro para desbloquear todos os recursos interessantes e criar sites incríveis

Etapa 1: faça login e crie uma página/postagem

Assim como na etapa anterior, faça login no seu WordPress e procure o botão “+ Novo” na parte superior. Coloque o mouse lá e crie uma nova página/postagem. Ou, se quiser, pode editar qualquer postagem anterior. Depende da sua preferência.

Etapa 2: adicionar o bloco de linha

Nesta etapa, clique no botão “+” e você verá uma caixa de pesquisa. Agora, na caixa de pesquisa, digite “Linha” e você verá o ícone de bloco de linha. O nome do bloco é Row, mas é uma combinação dos blocos Row e Column.

Etapa 3: escolha um layout

Lá você encontrará 10 layouts predefinidos. Aqui, você será solicitado a escolher o número de colunas. Escolha qualquer um deles como sua preferência.

Agora, se quiser, você pode alterar o número da coluna e personalizar o layout. Existem 7 layouts diferentes. Você pode escolher qualquer um deles de acordo com suas necessidades.

Por enquanto, vamos ficar com o layout padrão. Vamos para a próxima etapa.

Etapa 4: personalizar a coluna

Nossas colunas já foram adicionadas. Agora teremos que personalizá-lo. Suponha que vamos mostrar 3 mouses para jogos em 3 colunas. Vamos ver como fazemos.

1. Adicione a imagem

Primeiro, clique no ícone “+” na primeira coluna e, na caixa de pesquisa, procure por “Imagem”

Agora clique na imagem e, em seguida, clique no botão Upload. (Se a imagem já foi adicionada à biblioteca de mídia, você pode clicar na biblioteca de mídia para adicioná-la à coluna). Agora escolha a imagem específica e clique em "Abrir".

1. Defina a dimensão da imagem

A imagem carregada pode não estar na dimensão adequada para o WordPress. Nesse caso, encontre a opção “dimensão da imagem” e preencha a caixa Largura e Altura com a dimensão da imagem adequada.

1. Adicionar título da imagem

Agora você terá que nomear a imagem. Para fazer isso, você terá que criar outro bloco. Clique no bloco de imagem e, em seguida, clique em entrar. Um novo bloco aparecerá então.

Agora digite o nome da imagem. Nossa primeira imagem é um mouse Razor V3.

1. Adicionar cor de fundo para a primeira coluna

Para torná-lo mais atraente, clique na primeira coluna e procure a opção “Background and Wrapper”.

Agora adicione cor sólida/gradiente de acordo com sua preferência.

1. Personalize a 2ª e 3ª Linha

Siga exatamente o mesmo processo e personalize a 2ª e 3ª linhas com imagens e títulos específicos.

1. Defina a largura máxima do conteúdo

Agora, a posição das imagens pode não estar alinhada adequadamente em relação ao plano de fundo. Nesse caso, você encontrará uma opção “Content Max-Width” e a alterará de acordo. Estamos mantendo 766 para obter um bom alinhamento.

1. Adicionar plano de fundo para o bloco de linha principal

Aqui está a etapa final. Para dar uma aparência final, adicionaremos um plano de fundo para a coluna da linha; para isso, selecione a coluna Row e procure por “Background and Wrapper”. Clique nele e escolha qualquer cor sólida/gradiente.

Finalmente, está feito. Agora vamos verificar a saída final.

Leia também: WordPress Shape Divider: Domine a arte de separar seções

Palavras Finais

Espero que agora você não tenha mais confusão sobre as colunas do WordPress. Já orientamos você sobre como adicionar blocos de colunas e personalizá-los no bloco de colunas padrão do WordPress e no bloco de linhas PostX. É hora de você praticar.

Então agora, não hesite em experimentar colunas e libere sua criatividade. Transforme seu site em uma obra-prima que não apenas cativa, mas também inspira seu público.

Obtenha o PostX Pro para desbloquear todos os recursos interessantes e criar sites incríveis