Modelos de blog Elementor: 10 layouts de páginas de blog e 5 modelos de postagem única

Projetar um blog no Elementor geralmente significa dois trabalhos: a página que lista suas postagens e o layout que cada postagem usa. Esta coleção cobre ambos. Existem 10 modelos de blog Elementor para a lista de postagens e 5 modelos de postagem única para os próprios artigos, e cada um vem como um arquivo JSON que você pode baixar, uma demonstração ao vivo na qual você pode clicar e um pequeno guia para configurá-lo.

Tudo aqui é gratuito para download Os layouts de página do blog cair em qualquer página Elementor Os layouts de postagem única precisa de um construtor de tema para aplicá-los aos seus posts, ea única seção de post abaixo mostra como fazer isso, inclusive com um construtor de tema que você já usa Se você quer páginas completas para o resto do seu site também, o Biblioteca de modelos de páginas do elementor possui mais de 200 deles no mesmo formato.

O que você obtém em cada download gratuito

Cada modelo é baixado como um pequeno arquivo zip. Descompacte primeiro: o Elementor precisa do .json arquivo dentro dele Você vai encontrar três coisas:

• a preview pasta com duas capturas de tela do design, desktop-1440.webp e mobile-390.webp, para que você possa verificar antes de importar qualquer coisa,
• o modelo em si, a .json arquivo com o nome do design (ma-blog-mosaic-masonry.json no exemplo acima), que é o arquivo que você importa para sua biblioteca de modelos Elementor,
• a readme.txt isso lista o que o modelo precisa e percorre uma importação básica, além de quaisquer configurações a serem alteradas posteriormente.

Todo o estilo de um modelo vive em um widget HTML na parte superior do design, com escopo para esse modelo Não há cores de tema ou fontes globais para transportar e nenhuma imagem incorporada ao arquivo, então o design parece o mesmo em seu site como faz em suas próprias postagens, imagens em destaque e categorias preenchem o conteúdo.

O que você precisa antes de importar

Os layouts das páginas do blog são construídos nos Master Addons Blog Posts widget, que é o que puxa seus últimos posts para a página Os layouts de postagem única usam os Master Addons Extensão de tags dinâmicas para preencher o título, imagem em destaque, conteúdo, autor e data de qualquer postagem que um visitante esteja lendo.

Você também precisa de algum lugar para executar o WordPress Se você está configurando um novo blog e ainda não tem hospedagem, Hostinger é o que apontamos para as pessoas para um primeiro site WordPress.

10 modelos de página de blog Elementor gratuitos para baixar

Estes são layouts para a página que lista suas postagens Cada um usa um layout diferente de Blog Posts e uma estrutura de página diferente, de uma lista de leitura de uma coluna a uma parede de fotos em alvenaria.

1. sinal: grade da revista com um post em destaque

Uma primeira página da revista Seu mais novo post é executado como um banner de largura total com o título definido sobre a foto, e os próximos seis sentam-se em uma grade de cartão de três colunas abaixo dele Ele se adapta a sites de notícias, revistas e qualquer blog que publica com frequência.

A grade pula o primeiro post, então a história em destaque nunca aparece duas vezes Se você alterar quantos posts o banner mostra, altere o deslocamento da grade para corresponder.

2. coluna: lista editorial de uma coluna

Uma lista de leitura para escritores Cada post recebe uma pequena miniatura à esquerda, a data e categoria acima de uma grande manchete serifada, e uma primeira linha de duas linhas A página tem 820 px de largura, o que mantém as linhas em um comprimento confortável Funciona bem para boletins informativos, ensaios e blogs pessoais.

Mosaico 3.: parede da foto da alvenaria

Uma parede de alvenaria de três colunas para blogs liderados por imagens As fotos ficam em escala de cinza até você pairar, e cada manchete fica em um pequeno cartão branco que se sobrepõe à imagem Os blogs de comida, viagens e fotografia aproveitam ao máximo.

A alvenaria só cambaleia quando suas imagens em destaque vêm em formas diferentes Se cada foto é a mesma cultura, a parede parece uma grade regular.

Quiosque 4.: cubo da categoria com as guias do filtro

Uma grade de cartões com guias de categoria na parte superior, para que os leitores possam restringir a página a um tópico sem sair. Cada cartão carrega um crachá de data na foto e um rótulo de categoria abaixo dele. Escolha-o se publicar em vários assuntos.

As guias vêm da configuração Filtrar por categoria do widget, não das categorias que suas postagens usam. Após importar, abra o widget Blog Posts, vá para Configurações avançadas e escolha suas próprias categorias lá. Se você deixá-lo vazio, obterá uma única guia “All”.

5. marquise: carrossel em destaque

Um banner rotativo de quatro posts em destaque na parte superior, com reprodução automática e setas, em seguida, duas colunas de cartões cujo texto se levanta sobre a imagem Ele funciona como uma página de blog ou como a seção de posts de uma página inicial.

Há um segundo widget HTML de uma linha diretamente acima do carrossel Ele mantém o resto da página dentro de seu contêiner, então deixe-o no lugar.

Folha larga 6.: blog clássico com barra lateral

O layout que a maioria das pessoas imagina quando diz “blog page” Um feed de postagens horizontais corre pela esquerda, e uma barra lateral pegajosa à direita contém uma caixa de pesquisa, postagens recentes, links de tópicos e um cartão de inscrição A caixa de pesquisa é o widget Master Addons Search.

Os links de tópicos são espaços reservados Aponte cada um em uma de suas páginas de categoria, e aponte o botão de inscrição em seu formulário de inscrição.

7. meia-noite: blog de cartão escuro

Um layout de cartão escuro de duas colunas com cartões estilo vidro, um brilho suave atrás do cabeçalho e uma cor de destaque da casa da moeda Foi feito para blogs de produtos, desenvolvedores e agências, e para changelogs que desejam parecer parte do produto.

A página define seu próprio fundo escuro, por isso funciona mesmo em um tema claro Se o seu tema adicionar um cabeçalho e rodapé claro ao redor, defina o layout da página para Elementor Canvas.

8. livro-razão: lista de base de conhecimento

Um layout compacto do centro de ajuda: uma barra de pesquisa, guias de tópicos sublinhados e, em seguida, uma pequena linha por artigo com um botão Ler à direita. Use-o para documentação, notas de versão ou uma biblioteca de recursos, onde os leitores digitalizam uma lista de títulos para encontrar o que precisam.

Assim como o Quiosque, as guias vêm de Filtrar por categoria, portanto, escolha suas próprias categorias após importar.

9. geada: linhas de recursos de largura total

Um post por linha Cada um recebe uma imagem ampla de 430 px com um cartão de legenda branco levantado sobre o canto inferior esquerdo Ele dá a cada história um slot de largura total, que se adapta a estúdios, portfólios e escrita de forma longa, onde você publica com menos frequência e cada peça merece o espaço.

10. Simples: mínimo de duas colunas

Um índice de duas colunas silencioso e centrado em um fundo de papel macio Cada cartão mostra uma foto 4:3, uma data e um título serifado, sem bordas, botões ou rótulos de categoria É aquele que escolhe quando seu tema já é mínimo e o blog deve combiná-lo.

Como criar uma página de blog com um modelo Elementor

Os modelos de páginas do blog funcionam em qualquer página do Elementor Os passos são os mesmos para todos os dez.

1. Baixe o zip e descompacte-o no seu computador Elementor importa o .json arquivo; a .zip só importa quando a opção Activar as Carregamentos de Ficheiros Não Filtrados estiver ligada em Elementor > Configurações > Avançado.
2. No seu painel, vá para Modelos > Modelos salvos e clique em Importar modelos.
3. Escolha o .json ficheiro e clique em Importar Agora O modelo aparece na sua lista de modelos guardados.
4. Crie uma nova página, chame-a de Blog (ou o que quiser) e abra-a com o Elementor.
5. Clique no ícone da pasta, abra a guia Meus modelos e clique em Inserir ao lado do modelo.
6. Publique a página e adicione-a ao seu menu.

Se você não importou um modelo Elementor antes, o guia para importar modelos de Elementor caminha por cada uma dessas telas Uma vez que você tenha feito o design seu, você pode salve a página como modelo e exporte-a como JSON para reutilizá-lo em outro site.

Não configure como WordPress “Posts page”

O WordPress tem uma opção de página de Posts em Configurações > Leitura Deixe-a vazia para a página que você acabou de construir Quando uma página é definida como a página de Posts, o WordPress substitui-a pelo arquivo do seu próprio tema, e o design do Elementor nunca mostra Publique o modelo como uma página normal e vincule-o a partir do seu menu em nosso tutorial sobre como fazer crie uma página de blog com Elementor explica o porquê com mais detalhes.

Configurações que valem a pena verificar após a importação

• Postagens por página e pedido ao vivo nas Opções de Exibição do widget Postagens do Blog Cada modelo é enviado com entre 4 e 10 postagens por widget.
• Quiosque e livro-razão precisam de suas próprias categorias em Filtrar por categoria antes que suas guias façam sentido.
• O número de colunas deve permanecer em 1 coluna nos layouts da lista (coluna, folha larga, livro-razão e gelo), ou a lista se transforma em uma grade.

A ligar a paginação

Você não verá números de página sob as postagens em nossas demos ao vivo Nós trocamos a paginação de propósito, para manter cada demonstração em uma tela de postagens Em seu próprio site você pode ativá-la em alguns cliques, e estilizá-la para combinar com o modelo que você escolheu.

1. Clique no widget Blog Posts e fique na guia Conteúdo.
2. Em Opções de exibição, alterne Paginação para Sim. Posts por página define quantas postagens aparecem em cada página.
3. Altere o texto da próxima página e o texto da página anterior se desejar rótulos diferentes e escolha um alinhamento.

Para alterar a aparência dos números de página, abra a guia Estilo e expanda a seção Paginação Você obtém tipografia, cores separadas para a página normal, hover e ativa, além de borda, raio, preenchimento e espaçamento Na captura de tela abaixo, a página ativa usa o acento de ferrugem do sinal e as outras são brancas com uma borda fina, de modo que os números se misturam com os cartões.

No Signal e Marquee, ligue a paginação apenas para o segundo widget Blog Posts, a grade sob os posts em destaque O banner em destaque e o carrossel no topo são feitos para permanecer o mesmo em todas as páginas, então deixe a paginação desligada para eles.

Fazendo suas páginas de categoria corresponderem

Um modelo de página de blog estiliza a página em que se senta Seus arquivos de categoria, tag e autor são páginas separadas, e eles mantêm o design de arquivo do seu tema, a menos que você o substitua Para dar a eles o mesmo visual, construa um modelo de arquivo em um construtor de temas, insira o mesmo design e defina o widget Blog Posts Source to Current Query para que ele siga qualquer categoria que esteja sendo visualizada guia de modelos de arquivo cobre o lado do Master Addons Theme Builder disso.

5 modelos de postagem única Elementor gratuitos

Estes controlam o que um leitor vê quando abre um dos seus posts Cada campo é preenchido com Tags Dinâmicas, então um modelo estiliza cada artigo no site As demos ao vivo abaixo são preenchidas com um exemplo de artigo para que você possa vê-los com conteúdo real; o download contém a versão dinâmica que puxa seus próprios posts.

Como os campos são Tags Dinâmicas, que vêm com o plugin gratuito Master Addons, importar um modelo leva cerca de um minuto Não se preocupe se parecer meio vazio logo após a importação, com caixas cinza onde o título, a imagem e o artigo devem estar (como a captura de tela acima) O modelo não mostra nada até que tenha um post real para ler, então você precisa de pelo menos um post publicado com um título, uma imagem em destaque e algum conteúdo Depois de aplicá-lo em seu construtor de temas, cada post em seu blog muda para o novo design automaticamente As etapas estão dentro Como criar um único modelo de postagem no Elementor, logo após os cinco designs.

11. Fólio: editorial clássico

O artigo de revista confiável Uma linha de categoria, um título serifado, um standfirst e uma assinatura com a foto do autor sentam-se acima de uma imagem de destaque ampla Abaixo dele vem um “Neste artigo” caixa de conteúdo, o post em uma coluna de leitura de 748 px, um cartão de autor e três posts relacionados A caixa de conteúdo é o Master Addons Widget de índice.

12. Imersivo: herói de sangramento total

A imagem em destaque preenche a maior parte da tela com o título, categoria e byline sobre ele O artigo, em seguida, senta-se em um painel branco levantado sobre a foto, com botões de compartilhamento que ficam ao lado do texto enquanto você rola Uma faixa de assinatura escura e dois posts relacionados fecham a página Use-a para recursos e histórias com fotografia forte.

Os botões de compartilhamento constroem seus links X, Facebook e LinkedIn a partir do endereço da página quando ele é carregado, e o quarto botão copia o link Nenhum script de terceiros está envolvido.

13. Manual: tutorial pegajoso da barra lateral

Um layout de documentação sem imagem em destaque Um emblema de categoria e uma data de “updated” ficam acima de um título limpo, e um trilho de conteúdo pegajoso à esquerda destaca a seção que você está lendo Blocos de código, código em linha e caixas de chamada são estilizados para escrita técnica A página termina com um “Este artigo foi útil? linha de” e uma pequena lista do que ler a seguir.

14. Silencioso: ensaio de texto primeiro

Nenhuma imagem: um título serifado, um standfirst cinza, um drop cap e uma coluna de 660 px definida em uma face serifada As citações de pull são centradas e itálico Após o artigo há um pequeno autor sign-off, um cartão de assinatura e uma lista somente de texto de leitura adicional Ele se adequa a ensaios, artigos de opinião e boletins informativos que vivem na web.

15. Casefile: estudo de caso visual

Construído para agências e estúdios que publicam seus trabalhos como posts A manchete fica à esquerda e um cartão de fatos do projeto à direita, seguido por uma imagem de capa larga, o write-up, uma galeria de três colunas, um call to action e mais dois estudos de caso.

O cartão de fatos lê três campos personalizados em cada postagem: client, year e service. A galeria mostra as imagens anexadas ao post, o que significa as carregadas de dentro do editor desse post O readme explica ambos.

Como criar um único modelo de postagem no Elementor

Um único modelo de post só faz sentido dentro de um construtor de temas Caiu em uma página comum, as Tags Dinâmicas mostrariam o próprio título da página e uma imagem vazia, porque uma página não é um post Um construtor de temas é o que diz ao WordPress para usar seu design sempre que um visitante abre um post.

Com o Master Addons Theme Builder

Foi assim que os cinco modelos foram construídos e testados O tipo de modelo Único nos Master Addons Construtor Tema faz parte de Master Addons Pro.

1. Importar o .json ficheiro em Modelos > Modelos guardados, da mesma forma que um modelo de página de blog.
2. Vá para Complementos Mestres > Construtor de Tema, clique em Adicionar Novo e escolha Único como o tipo de modelo.
3. Edite o novo modelo com o Elementor, abra o ícone da pasta, vá para Meus Modelos e insira o design.
4. Defina a condição de exibição como Incluir > Singular > Post. Para usar um layout apenas para um tipo de conteúdo, como estudos de caso, escolha essas postagens na condição em vez de todas as postagens.
5. Salve e abra qualquer postagem em seu site para verificá-lo.

O documentação de modelo único mostra cada uma dessas telas e o Guia construtor tema Elementor explica como os outros tipos de modelo (cabeçalho, rodapé, arquivo e muito mais) se encaixam.

Com Elementor Pro ou outro construtor de temas

Se você já usa o Theme Builder do Elementor Pro, ou outro construtor de temas que permite projetar o layout de postagem única no Elementor, você também pode usar esses modelos lá. Crie um novo modelo de postagem única em seu construtor, insira o design dos meus modelos e defina-o para aplicar às suas postagens.

Mantenha os Complementos Mestres instalados e ativos Os campos de título, imagem, conteúdo e autor vêm dos Complementos Mestres Tags Dinâmicas, e a caixa de conteúdo e postagens relacionadas vêm de widgets Master Addons Sem o plugin, essas partes estariam vazias Testamos os modelos no Master Addons Theme Builder; se algo parecer em outro construtor, as notas do readme são o primeiro lugar a verificar.

Dois detalhes para deixar no lugar

• O widget do corpo do artigo em Folio, Immersive, Manual, Quiet e Casefile carrega uma classe CSS chamada entry-content. O widget Índice procura títulos dentro desse elemento, portanto, remover a classe esvazia a caixa de conteúdo.
• O widget HTML na parte superior de cada modelo contém a folha de estilo e, no Fólio e no Manual, um pequeno script que preenche a lista de conteúdo se o widget ainda não o tiver feito. Edite os estilos lá, mas não exclua o widget.

Personalizando cores e fontes

Cada modelo mantém suas cores em um punhado de variáveis CSS na parte superior de sua folha de estilo: tinta para títulos, corpo para texto de parágrafo, silenciado para datas e acento para links e rótulos Abra o widget HTML, altere esses valores e todo o design segue As fontes são definidas na mesma folha de estilo, portanto, trocar a Georgia pela serifa da sua marca é uma mudança de uma linha.

Se preferir trabalhar seção por seção, a mesma abordagem passa pela nossa modelos de seção de Elementor grátis, que combinam bem com esses layouts de blog quando você está construindo o resto do site.

Solução de problemas

Conteúdo Inválido Em Arquivo” ao importar

Você está carregando o zip em si, ou um arquivo que não é uma exportação Elementor Descompacte o download e importar o .json arquivo.

A página do blog está vazia

O widget Blog Posts precisa de postagens publicadas com imagens em destaque No Quiosque e no Livro-razão, uma grade vazia geralmente significa Filtrar por categoria ainda aponta para categorias que não existem no seu site Abra o widget e escolha o seu próprio.

O design parece diferente da demonstração

Seu tema pode estar adicionando seu próprio cabeçalho, rodapé ou largura de página ao redor do modelo Defina o layout da página para Elementor Canvas ou Elementor Full Width nas configurações da página.

O modelo de postagem única não está sendo exibido em minhas postagens

Verifique três coisas no seu construtor de temas O tipo de modelo deve ser Único, a condição de exibição deve incluir suas postagens e apenas um modelo Único deve corresponder aos mesmos posts No Master Addons Theme Builder, quando dois modelos ativos coincidem, o mais novo limpa seu plugin de cache após salvar também ajuda.

O carrossel desaba dentro de abas ou acordeão

Os swipers medem sua largura quando a página carrega Se você mover o carrossel do Marquee em uma guia oculta ou painel de acordeão, defina Observador como Sim em suas Configurações de carrossel.

Perguntas frequentes

Escolha um layout e construa seu blog

Comece com o modelo de blog Elementor que corresponde à forma como você publica: Signal ou Marquee se você postar com frequência e quiser uma primeira página, Coluna ou Silêncio se as palavras mais importam, Mosaic ou Frost se as fotos o fizerem, e Ledger ou Manual para documentação Baixe o JSON, importe-o e aponte-o para seus próprios posts.

Quando o blog termina, as mesmas etapas de importação funcionam para todas as outras páginas do seu site, desde a página inicial até o formulário de contato.

Os links “Get hosting” neste post são links de referência Se você comprar hospedagem através de um, poderemos ganhar uma comissão sem nenhum custo extra para você.