Como criar uma página de blog com elementor (gratuito, sem necessidade de profissionais)

O Elementor grátis não pode listar seus posts O widget de posts, postagens de arquivo, título de postagem e o restante dos widgets de posts são todos Elementor Pro. Em uma instalação gratuita eles mostram no painel de widgets com um cadeado e nada mais Para construir uma página de blog sem pagar pelo Pro, instale o gratuito Adições Mestres plugin e use seu widget Blog Posts, que lista postagens em grade, lista ou alvenaria e funciona dentro do editor Elementor normal.

Este guia constrói um começo para terminar, com capturas de tela do Elementor 4.2.4 e Master Addons 3.2 em uma instalação gratuita Ele cobre as escolhas de layout, os filtros de consulta, as guias de filtro de categoria que a maioria dos tutoriais perde e as duas configurações que decidem se sua grade parece arrumada ou esfarrapada Se você preferir importar um layout acabado, comece com estes Modelos de blog Elementor.

Elementor free tem um blog ou um widget de postagens?

Não. Pesquise no painel de widgets “post” em uma instalação gratuita e é isso que volta.

Postagens de blog e Linha do tempo carregue o emblema roxo Master Addons e esteja pronto para arrastar Posts, Post Title, Post Excerpt, Archive Posts, Post Comments, Post Navigation e Post Info todos carregam um cadeado, que é Elementor anunciando Pro de dentro do plugin gratuito.

Então você tem quatro opções:

O resto deste guia usa o widget gratuito Master Addons Todo controle mostrado abaixo está no plugin gratuitoNada no widget Blog Posts está bloqueado.

O que você precisa antes de começar

• WordPress com elementar instalado. a versão gratuita está bem.
• O plugin gratuito Master Addons. Instalar notas estão aqui se os quiseres.
• Alguns posts publicados Seis ou mais torna o layout mais fácil de julgar.
• Uma imagem em destaque em cada postagem Uma postagem sem um deixa uma lacuna na grade e nenhuma configuração de layout corrige isso.

Como criar uma página de blog Elementor gratuitamente, passo a passo

Passo 1: Criar a página

Ir para Páginas → Adicionar Nova Página, título it Blog, em seguida, clique em Editar com o Elementor. Deixe a área de conteúdo do WordPress vazia Tudo acontece na tela Elementor.

Não defina esta página como a página de Postagens do WordPress em Configurações → Leitura Que entrega o URL ao seu tema e descarta o design do Elementor Há uma seção sobre a maneira certa de fazê-lo mais abaixo.

Passo 2: Adicionar o widget Blog Posts

Pesquise no painel de widgets blog e arrastar Postagens de blog na tela Ele renderiza suas últimas postagens imediatamente, para que você possa ver o que está mudando à medida que a altera.

Etapa 3: escolha um layout

Aberto Opções Display. Os controles aqui definem o formato da página.

Os dois controles mais importantes ficam no topo:

• Layout do blog: Clássico ou Cartões. Clássico coloca o texto no fundo da página Os cartões envolvem cada postagem em seu próprio painel.
• Tipo de blog: Layout de grade, Layout de lista ou Layout de alvenaria.

Abaixo deles, defina Número de Colunas. é um controle responsivo, então você pode dar ao desktop três colunas e ao móvel uma alternando o dispositivo na parte superior do editor. Três é o padrão seguro para um blog com imagens.

Mais dois que valem a pena definir agora. Título HTML Tag o padrão é H2, que é certo para um índice de blog, já que o título da página é H1 e cada título de postagem fica abaixo dele. E Fonte escolhe entre as Últimas Postagens e a Consulta Atual Deixe-a nas Últimas Postagens para uma página normal do blog; A Consulta Atual é para Modelos de arquivo, onde o widget deve seguir a categoria ou autor que está sendo visualizado em vez de suas próprias configurações.

Passo 4: Escolha um estilo de cartão ou lista

Defina o layout do blog para cartões e a Layout Cartões o controle aparece com sete designs.

Padrão, Sobreposição de conteúdo, Meta superior esquerdo, Cartões de alinhamento direito, Cartões de alinhamento central, BG de gradiente de alinhamento central e Cartão de banner A sobreposição de conteúdo e o cartão de banner colocam o texto sobre a imagem, então eles precisam de fotos com espaço neles Cartões de alinhamento padrão e direito são as escolhas mais seguras para um conjunto misto de imagens em destaque.

Mude o tipo de blog para lista e o controle do cartão será substituído por Tipo de layout de lista, com mais sete.

São 14 designs prontos no total, sete para grades e sete para listas, além dos três tipos de layout, então raramente é necessário estilizar um cartão do zero.

Passo 5: Defina o tamanho da miniatura e o efeito de hover

Aberto Configurações de miniaturas. Uma página irregular do blog geralmente é corrigida aqui.

Por padrão, o widget mantém cada imagem em destaque em sua própria proporção, de modo que uma foto de retrato em uma fileira de paisagens empurra esse cartão para baixo na página Vire Altura personalizada ligado e defina o mínimo e o máximo para o mesmo valor, em torno de 200 a 240 px, e cada miniatura será cortada na mesma caixa. Encaixe de miniatura set to Cover evita que a colheita esmague qualquer coisa.

Sob isso, Animação Hover usa animações próprias da Elementor, e Efeito Cor adiciona um dos dezesseis efeitos de sobreposição: zoom in e out, girar e zoom, slide, escala de cinza, desfoque, sépia, as duas combinações de desfoque, dois desbotamentos de opacidade, rubor, brilho e círculo. Formas de miniatura adiciona cinco quadros na parte superior: emoldurado, diagonal, com borda, com borda gradiente e quadrados.

Escolha um efeito e use-o em todos os lugares. Três diferentes em uma página são lidos como ruído.

Essas configurações afetam apenas as miniaturas de postagem no widget do blog. Para um efeito de foco em uma única imagem em outro lugar da página, use o Widget de efeitos de passagem de imagem.

Passo 6: Escolha qual meta mostrar

Aberto Configurações de postagens e desligue tudo o que o leitor não precisa.

Excerto Comprimento o padrão é 55 palavras, o que é longo para uma carta. Deixe cair para 15 a 25 para que a grade permaneça digitalizável e o clique vá para a postagem e não para o resumo. Ler Mais Texto é texto livre, então “Leia o guia” funciona assim como “Leia Mais”.

As alternâncias abaixo do título do post de controle, avatar do autor, nome do autor, data, categorias, tags e comentário contam independentemente Virando Exibir categorias? geralmente vale a pena, pois dá aos leitores uma segunda maneira de postagens relacionadas.

Passo 7: Filtre quais postagens aparecem

Aberto Configurações Avançadas. Esta é a seção de consulta.

• Filtrar por categoria, Filtrar por tag e Filtrar por autor restringir a consulta Cada um aceita vários valores.
• Postagens a serem excluídas deixa cair posts específicos pelo nome, que é como você mantém um anúncio fixado fora da grade principal.
• Contagem de postagem offset pula os primeiros N posts Defina um widget em destaque acima da grade para mostrar os três mais recentes, depois desloque a grade por três e nenhum post aparecerá duas vezes.
• Links na nova guia faz o que diz.

Passo 8: Publique e verifique o resultado

Clique em Publicar e abra a página em uma guia normal do navegador Aqui está a grade finalizada: três colunas, cartões, miniaturas uniformes, guias de categoria na parte superior.

O tempo total, depois de saber onde estão os controles, é inferior a dez minutos.

Adicionar guias de filtro de categoria à página do blog

As guias de filtro na parte superior dessa captura de tela são gratuitas e são a parte que as pessoas perdem. Os leitores podem restringir a grade por categoria sem sair da página.

Ligar Categoria Guias de filtro em Configurações avançadas Em seguida, escolha as categorias que deseja como guias no campo Filtrar por categoria As guias são construídas a partir dessa seleção, não a partir das categorias das postagens na página Deixe o campo vazio e você receberá uma única guia Tudo e nada mais, que parece quebrada, mas está funcionando conforme projetado.

Todo o texto renomeia a primeira guia e Alinhamento move a linha para a esquerda, centro ou direita. As guias de filtro e o carrossel são mutuamente exclusivos, portanto, se você ativar o carrossel, as guias param de renderizar.

Grade, lista ou alvenaria: qual layout usar

Grade é o padrão e combina com a maioria dos blogs Cartões iguais, de três em toda, digitalizáveis Use-o com uma altura de miniatura personalizada para que as linhas se alinhem.

Lista coloca uma postagem por linha com a miniatura ao lado do texto. Defina o número de colunas para 1 coluna quando você mudar para Lista ou obterá três itens da lista amontoados lado a lado.

List dá ao trecho espaço para respirar, por isso funciona para blogs de estilo ensaio onde o resumo está vendendo.

Maçonaria mantém as colunas, mas diminui a altura fixa da linha, de modo que as cartas são empilhadas por conteúdo e as lacunas se fecham.

A alvenaria é o único caso em que você deve deixar a Altura Personalizada desligada, já que as alturas irregulares são o que a fazem funcionar. Ela se adapta a blogs com foto e desmorona quando cada imagem em destaque tem o mesmo formato.

Existe uma quarta opção quando as datas importam mais do que as miniaturas A Widget de linha do tempo tem um tipo Post Timeline que coloca suas postagens em uma linha vertical na ordem das datas Ele usa os mesmos filtros de consulta que as Postagens do Blog, e precisa do Master Addons Pro.

Transforme a grade do blog em um carrossel

O mesmo widget funciona como um carrossel de postagens, que é o que você deseja em uma página inicial, e não na própria página do blog.

Interruptor Habilitar Carrossel? on e a seção Configurações do carrossel é aberta: reprodução automática e velocidade de reprodução automática, pausa no hover, slides para rolar por dispositivo, slide central, cursor de captura, modo livre de arrasto, loop e velocidade de animação O controle de layout também oferece um efeito de fluxo de cobertura com suas próprias configurações de rotação, estiramento, modificador e profundidade.

Observador deveria ser Sim se o carrossel estiver dentro de uma aba, um acordeão ou qualquer outra coisa escondida no carregamento da página, caso contrário ele se mede em largura zero e é renderizado como uma pilha.

Mostrando a data modificada em vez da data publicada

O widget Blog Posts pode ordenar por data modificada: set Ordem Por to Last Modified in Display Options e posts atualizados recentemente sobem ao topo Isso sozinho é muitas vezes o que as pessoas realmente querem, porque mantém o conteúdo atualizado visível.

Exibindo a data modificada como o texto visível é diferente O widget imprime a data publicada no cartão, enquanto o subjacente <time datetime> atributo carrega a data modificada Os motores de busca lêem o atributo, então suas datas atualizadas estão sendo publicadas mesmo quando o cartão diz o contrário, mas um leitor vê a data original.

Para mostrar a data modificada como texto você precisa das tags dinâmicas do Elementor Pro, onde a tag Post Date tem uma opção Modificada, usada dentro de um widget Pro Posts ou Loop Grid Não há equivalente gratuito do Elementor, porque as tags dinâmicas são um recurso Pro em primeiro lugar A alternativa no free é um pequeno trecho que filtra get_the_time para o seu modelo de blog.

Página do blog ou página de posts? configurá-lo corretamente

WordPress tem sua própria página de postagens, definida em Configurações → Leitura. A página que você acabou de construir é uma página normal e as duas se comportam de maneira diferente.

Se você atribuir sua página Elementor como a página Posts em Configurações → Leitura, o WordPress entrega a URL ao modelo de arquivo do tema e seu design Elementor é ignorado Essa é a única razão mais comum pela qual uma página de blog finalizada mostra a lista padrão do tema em seu lugar.

Duas maneiras de fazer isso corretamente:

• Mantenha-o uma página normal. Deixe Configurações → Lendo sozinho e adicione sua página do Blog ao menu em Aparência → Menus A página renderiza seu design Elementor, que é o que você deseja.
• Construir o arquivo real. Se você deseja que o próprio URL de arquivo do WordPress use seu design, crie um modelo de arquivo no Construtor de temas Master Addons e defina a Fonte do widget Blog Posts para a Consulta Atual, para que ele siga qualquer arquivo que esteja sendo visualizado.

Master Addons Blog Posts vs o widget Elementor Pro Posts

Elementor Pro ganha em tags dinâmicas, carregar-mais e rolagem infinita O widget gratuito Master Addons ganha em variedade de layout, efeitos de hover, guias de filtro e o carrossel embutido Se popups, formulários e construção de tema já estão puxando você em direção Pro, compre Pro. Se a página do blog é a única razão pela qual você estava considerando, isso cobre para nada, e o Licença Master Addons vale a pena dar uma olhada apenas se você quiser os widgets Pro em outro lugar.

Sete correções para um layout de blog que parece errado

1. Alturas de cartas esfarrapadas. Ative a Altura Personalizada nas Configurações de Miniatura e defina min e max para o mesmo valor Esta é a correção nove vezes em dez.
2. Um retângulo em branco na grade. Esse post não tem imagem em destaque Adicione um, mesmo um gráfico de marca simples.
3. Trechos engolindo o cartão. Drop Excerpt Comprimento de 55 a cerca de 20 palavras.
4. Três itens da lista lado a lado. Necessidades de layout de lista Número de colunas definidas como 1 coluna.
5. Filtrar guias mostrando apenas Todos. Escolha as categorias em Filtrar por categoria As guias vêm desse campo.
6. Tudo empilhado no celular em uma longa coluna. Isso geralmente é correto Verifique-o com o switcher do dispositivo e defina colunas móveis deliberadamente, em vez de deixá-lo ao acaso Nosso guia para Pontos de interrupção do elementor cobre o resto.
7. Página lenta do blog. Verifique o tamanho das suas imagens em destaque antes de culpar o widget Comprima-as primeiro; veja nosso resumo do otimizador de imagem e as notas sobre acelerando sites Elementor.

Perguntas frequentes

Leitura relacionada

• widget de postagens de blog, a página de recursos com cada configuração listada
• Documentação do elemento do blog
• Como criar um cabeçalho pegajoso no Elementor
• Como editar o rodapé no WordPress usando o Elementor
• Modelos de páginas do elementor, se preferir importar uma página pronta
• Complementos Master no WordPress.org