Como adicionar várias colunas no WordPress sem usar um plugin

Você deseja adicionar conteúdo de várias colunas às suas postagens do WordPress?

As colunas podem ser usadas para criar Layouts atraentes para suas publicações e páginas.

A mídia impressa tradicional, como jornais e revistas, usa um layout de várias colunas desde o início da impressão. Seu objetivo era permitir usuários É mais fácil ler um texto menor enquanto utiliza o espaço disponível economicamente.

Se você ainda não criou um site ou blog no WordPress, convidamos você a consultar Como instalar um blog WordPress passos 7 então, Como encontrar, instalar e ativar um tema WordPress em seu blog

Layouts de coluna única são mais comumente usados ​​na Web. No entanto, grids Várias colunas permanecem úteis para destacar o conteúdo e facilitar a leitura e análise.

Neste tutorial, mostraremos como adicionar facilmente conteúdo com várias colunas às suas postagens do WordPress sem escrever nenhum código HTML.

Adicionando conteúdo de várias colunas no WordPress - A solução fácil

A criação de conteúdo de várias colunas, também chamado de conteúdo de grade no WordPress, agora é simples porque é um recurso padrão. o novo editor de blocos WordPress Gutenberg propõe um bloco de colunas.

Para adicionar um layout de várias colunas, você deve criar um novo artigo ou editar um novo. Uma vez na área de edição, clique no ícone " adicionar No topo para adicionar um bloco.

Então você tem que selecionar o bloco Colunas Na guia "Elementos do layout".

Você verá o ponteiro do mouse pular na coluna da esquerda e um espaço reservado para o texto aparecerá na coluna da direita.

Como você pode ver na imagem acima, o bloco Coluna parece antes de tudo uma área vazia. Se você mover o mouse para a esquerda, poderá ver a borda do bloco destacada.

Você também verá as configurações de bloco na coluna direita da tela.

Por padrão, o bloco de colunas adiciona duas colunas. Você pode aumentar o número de colunas que deseja adicionar nas configurações de bloco à direita. Isso permite adicionar até seis colunas em uma linha.

Basta clicar em uma coluna e começar a digitar para adicionar conteúdo. Você pode usar a tecla Tab do teclado para passar para a próxima coluna.

Adicionando conteúdo multimídia e outros às suas colunas

Além do conteúdo de texto, você também pode adicionar imagens e incorporar vídeos nas colunas do WordPress.

O bloco de colunas permite adicionar blocos dentro de cada coluna. Basta colocar o mouse em uma coluna e você notará o íconeAdicione um novo blocoDentro. Você também pode adicionar um bloco digitando o nome do bloco.

O bloco selecionado aparecerá na coluna. Você pode ir lá e adicionar conteúdo.

Para enviar - enviar - sua mídia, consulte nosso artigo em Como fazer o upload de sua mídia em massa no WordPress

Aqui está a aparência da sua nova coluna no tema WordPress padrão dos Vinte e Dezenove. Neste exemplo, usamos três colunas e a última coluna contém uma imagem.

Se você deseja adicionar apenas uma imagem e texto ao lado, também pode usar o bloco Mídia e texto Em vez de colunas. Este bloco foi projetado especificamente para exibir mídias, como imagens e vídeos, ao lado do texto.

Incluindo várias colunas no editor clássico de WordPress

Se você não atualizou o WordPress para Gutenberg e ainda usa oeditor clássicovocê precisa instalar um plug-in separado para criar um layout de grade de colunas.

Comece instalando e ativando o plugin Colunas de grade leve.

Para obter instruções detalhadas, siga nosso guia passo a passo sobre como instalar um plugin no WordPress.

Ao ativar, você pode criar uma nova mensagem ou abrir uma mensagem antiga para editar. Depois clique no botão Adicionar colunas Na barra de ferramentas do editor visual.

Agora você verá uma janela pop-up que permite adicionar sua primeira coluna. Você pode escolher a área que sua coluna pode cobrir em computadores, tablets e dispositivos móveis de maneira diferente.

Vá além descobrindo Como criar uma largura de página inteira no WordPress

Por exemplo, se você definir a porcentagem de grade da área de trabalho 50%, sua coluna cobrirá metade da linha.

Tem muitas opções para definir a largura da sua coluna, de 5% a 100% com um intervalo 5. Você pode escolher um clicando no menu suspenso.

Em seguida, você deve adicionar o conteúdo da sua coluna na área "Conteúdo" e clicar no botão "OK" para inseri-lo em sua publicação.

O plug-in irá gerar o código curto necessário com o seu conteúdo e adicioná-lo ao seu editor.

Descubra neste tutorial Como instalar e configurar o plugin WP Super Cache para melhorar o desempenho do seu blog.

Agora que sua primeira coluna foi adicionada, você pode repetir o processo para adicionar mais colunas. Para a última coluna, não esqueça de marcar a caixa 'Última coluna da linha.

Depois disso, você poderá salvar e visualizá-la. Aqui está o que parece no nosso site de teste dos Twenty Seventeen.

Se você também deseja encontrar temas do WordPress que podem ajudá-lo a criar colunas em suas páginas ou publicação, aqui estão os temas do WordPress 3 prêmio perfeito para esta tarefa.

1. TheGem

Existem muitos temas do WordPress que podem oferecer um layout do OnePage, mas nenhum pode oferecer a riqueza de opções e recursos disponíveis no tempem do WordPress TheGem.

Todos os elementos de design que você associa a um bom site do OnePage estão presentes neste tema do WordPress: um controle deslizante de tela cheia (que pode ser criado com o plug-in Revolution Slider que acompanha o tema do WordPress), uma escolha de seis estilos de cabeçalho e a capacidade de criar seções de largura total usando o plug-in Visual Composer incluído no pacote.

Além disso, possui várias opções de personalização para itens como fontes, cores e ícones. É uma coisa rara, mas também há detalhes que não gostamos no TheGem. Mas basicamente é um tema WordPress que irá atender você, é claro, dado o número de pontos positivos que ele tem. É um forte concorrente, o que facilitaria a criação de um site OnePage.

Descarregar | Demo |hospedagem na web

2. Estocolmo

Estocolmo é um tema WordPress projetado para ajudá-lo a criar o site de uma empresa de construção civil, empresa de engenharia civil ou qualquer empresa relacionada ao mundo da renovação de edifícios. Este modelo do WordPress é voltado para profissionais que se preocupam com a qualidade e os detalhes.

Vem com um painel de opções e um back-end fácil de usar, eles permitem que você gerencie facilmente seu conteúdo. Há sobre as demonstrações do 20 deste modelo, apresentando uma ampla gama de atividades nas quais esse tema do WordPress pode ser usado. E eles também podem servir de base para futuras customizações, para que seu site tenha uma aparência única.

Muito responsivo, é exibido perfeitamente em qualquer tipo de tela. Se durante a personalização ou instalação deste modelo, você encontrar dificuldades, a documentação completa incluída no pacote poderá servir como um guia. E se você ainda não pode, o suporte dedicado a esse tema WordPress permanece à sua disposição.

Descarregar | Demo |hospedagem na web

3. Júpiter

Júpiter é outro tema WordPress muito popular. Possui demos 25 que cobrem o 6 de nossas categorias - agência, criativo, educação, dieta, saúde e comércio eletrônico - e mais serão adicionados a ele em futuras atualizações. A maioria de seus layouts tem um design minimalista, com uma tipografia agradável.

Um dos principais pontos de venda de Júpiter é o Creative Header Customizer, que permite personalizar de forma rápida e fácil o design dos cabeçalhos do seu site. O Visual Composer, os controles deslizantes 3 (Layer, Revolution e iCarousel), os novos códigos de acesso 10, mais de ícones do 1800 e os tipos de postagem personalizados do 10 estão incluídos na entrega.

O tempo de carregamento da página também é excelente. Este é um ótimo produto e será difícil encontrar tantos temas do WordPress com suas características.

Descarregar | Demo |hospedagem na web

Outros recursos recomendados

Para ir mais longe na otimização do seu blog ou do seu site, também sugerimos que você consulte alguns links que o mergulharão no mundo de Gutenberg.

• Como preparar seu site para Gutenberg
• Como sei se o seu plugin é compatível com o Gutenberg?
• Will Gutenberg melhorará ou quebrará o WordPress?

Conclusão

É isso aí! É isso neste tutorial. Esperamos que este artigo tenha ajudado você a aprender como adicionar colunas às suas publicações e páginas do WordPress. Não hesite em compartilhe este tutorial com seus amigos em suas redes sociais.

Se você tiver sugestões ou comentários, eles serão bem-vindos. Mas se você é iniciante, convidamos você a consultar nosso Ressources.

...