Ir para o conteúdo principal

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

Divi: o tema WordPress mais fácil de usar

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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

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. Sua finalidade era permitir usuários mais fácil de ler um texto menor ao usar o espaço disponível economicamente.

Se você ainda não criou um site ou blog no WordPress, nós o convidamos a consultar Como instalar um blog WordPress em etapas 7 então, Como pesquisar, 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 a análise.

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

Adicionando conteúdo multi-coluna no WordPress - A solução fácil

Criar 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 bloco 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 Na parte superior para adicionar um bloco.

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

Você verá o ponteiro do mouse saltar 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 em primeiro lugar ser uma área vazia. Se você mover o mouse para a esquerda, poderá ver a borda do bloco destacado.

Você também verá as configurações de bloqueio na coluna da 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 bloqueio à direita. Isso permite que você adicione 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 no teclado para passar para a próxima coluna.

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

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

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

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

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Para fazer o upload - upload - de sua mídia, confira nosso artigo sobre Como carregar sua mídia em massa no WordPress

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

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

Adicionando 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 plugin separado para criar um layout de grade de colunas.

Comece instalando e ativando o plugin Colunas de grade leve.

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

Quando você ativa, você pode criar uma nova mensagem ou abrir uma mensagem antiga para editá-la. Então clique no botão Adicionar colunas Na barra de ferramentas do editor visual.

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

Vá mais longe descobrindo Como criar uma página de largura total no WordPress

Por exemplo, se você definir a porcentagem da 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 de sua coluna na área "Conteúdo" e, em seguida, clicar no botão "OK" para inseri-lo em sua publicação.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

O plug-in gerará o shortcode necessário com o seu conteúdo e o adicionará 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 sua visualização e visualizá-la. Aqui está o que parece no nosso site de vinte e dezessete testes.

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

1. TheGem

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

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

Além disso, ele 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 em 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.

Download | Demonstração |Web Hosting

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 WordPress é voltado para profissionais que se preocupam com qualidade e detalhes.

Estocolmo-temas-wordpress-multiuso versátil-criar-site-internet

Vem com um painel de opções e um back-end user-friendly, eles permitem que você gerencie facilmente o seu conteúdo. Existem demonstrações sobre o 20 deste template apresentando uma ampla gama de atividades nas quais este tema WordPress pode ser usado. E estes também podem servir como base para futuras personalizaçõ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 pode servir como um guia. E se você ainda não pode, suporte dedicado a este tema WordPress continua à sua disposição.

Download | Demonstração |Web Hosting

3. Júpiter

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

Jupiter-theme-wordpress-multiuso versátil-criar-site-internet

Um dos principais pontos de venda da Jupiter é o Creative Header Customizer, que permite personalizar rápida e facilmente o design dos cabeçalhos do seu site. Compositor Visual, sliders 3 (camada, revolução e iCarousel) 10 novos códigos de acesso, mais de ícones e tipos de locais personalizados 1800 10 estão todos incluídos na entrega.

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

Download | Demonstração |Web Hosting

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.

Conclusão

É isso! É isso para este 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ê é um novato, nós convidamos você a consultar o nosso Ressources.

...

Este artigo contém comentários 18
  1. Oi, eu tenho esse plug-in ... mas não funciona bem, acontece:

    Eu crio duas colunas, uma menor para a foto, outra maior para o texto, então o texto é apenas 2 linhas, não na altura total da coluna, uma vez salvo o texto JUMP sob a foto, em vez de fique acano, veja que desaparece uma coluna ... ..
    O que estou fazendo? por que isso acontece, há outro plg-in melhor e mais simples do que isso aqui?
    Obrigado, eu ficaria muito grato pela ajuda!

    1. Olá Irina

      Tente ativar o tema padrão do WordPress, se tudo funcionar bem, então é porque o problema vem do seu tema atual do WordPress.

      Verifique também se você fez atualizações de plugins.

      1. Eu copiar texto e colá julgado por um CTRL + V, sem sucesso. O menu de contexto com o botão direito não oferece colar.
        Eu não encontrei alternativa para redigitar tudo ...

        1. Desculpe pelo atraso na resposta.
          Pode garantir que o clique direito do mouse sobre um outro elemento da página, o menu de contexto é exibido? Se for esse o caso, então provavelmente um problema de JavaScript no alojamento.
          Se você estiver no Google Chrome, vá para a página em que está tendo problemas, clique em "F12" (uma janela será aberta ou será anexada à página) e escolha a guia "Console" . Faça um screenshot desta aba e eu lhe direi se houver algum problema.

          1. Bom Dia,
            Merci pour votre réponse.
            Meu site é hospedado por gratuito, é possível que haja um problema de javascript.
            Você pode me dizer como você passar imagem que eu fiz?
            cordialmente

          2. Queremos Mireille mas o tipo de serviço que você precisa é, infelizmente, pagar e nós convidamos você a entrar em contato com nossa equipe técnica blogpascher.com

          3. Como eu instalei uma versão flange de graça, eu acho que o problema vem.
            Vou tentar instalar uma versão diferente ...

      2. Copiei um texto e eu tentei colocá-lo em uma coluna no plugin. Incapazes ou com o atalho de teclado CTRL + V, ou no menu de contexto de clique direito que não oferecem esse recurso.
        Existe alguma alternativa para redigitar tudo?

  2. Olá eu ter instalado colunas wp avançados.
    mas quando eu olhar para a página que eu apresentar um quadrado branco no canto superior esquerdo de cada coluna? você pode me ajudar. obrigado

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
10 ações
ação8
chilrear1
Enregistrer1
Whatsapp