Como criar uma lista de postagens no site Elementor usando o widget Happy Smart Post List

Publicados: 2021-07-16

Uma página de blog ou lista de postagens bem projetada ajuda a atrair a atenção dos usuários rapidamente. É por isso que sua lista de postagens precisa ser bonita e fácil de navegar.

Criar uma lista de postagens no seu site Elementor não é mais difícil.

Agora você pode criar com eficiência uma bela lista de postagens de blog usando o widget 'Lista de postagens inteligentes' do Happy Addons Pro. Este widget de postagem avançado vem com várias opções de personalização e demos pré-projetadas para que você possa exibir os artigos do seu site de uma maneira mais decente, com facilidade!

Vamos ver como esse widget legal funciona.

Como usar o widget de lista de postagem inteligente do HappyAddons seguindo 3 etapas fáceis

Nesta parte, mostraremos como usar o widget Happy Addons' Smart Post List no seu site Elementor para criar uma página de blog maravilhosa.

Pré-requisitos:

Para usar o widget impressionante, você precisa dos seguintes plugins em seu site:

  • Elementor (Gratuito)
  • Complementos felizes (grátis)
  • Happy Addons Pro

Se você é um novato, verifique este guia - Como usar o Elementor para construir seu site com facilidade.

Primeiro passo: adicione o widget de lista de postagens inteligentes à sua página da Web

Primeiro, encontre e selecione o widget ' Lista de postagens inteligentes ' no menu do lado esquerdo. Em seguida, arraste e solte-o na área selecionada.

Add Smart Post List Widget

Segunda etapa: definir e personalizar o conteúdo da postagem

Depois de adicionar o widget, é hora de definir e personalizar o conteúdo da postagem em seu próprio estilo. Na seção Conteúdo , você obterá todas as configurações necessárias. Aqui estão as configurações que você encontrará –

  • Esquema
  • Barra superior
  • Postagem em destaque
  • Listar postagem
  • Consulta
  • Link do wrapper
Smart Post List Widget Content

Vamos explorar cada configuração de conteúdo uma por uma.

Esquema

Aqui em Content->Layout , você terá 4 configurações diferentes. Tal como.

  1. Coluna: Usando a Coluna, você pode definir o número de colunas da seção de postagem. Existem 3 colunas disponíveis na lista suspensa Coluna 1, Coluna 2 e Coluna 3. Você pode usar com base em sua necessidade. Aqui, usamos três colunas.
  2. Show Top Bar: De acordo com sua necessidade, você também pode ativar e desativar o Show To Bar.
  3. Primeira postagem em destaque: se você não quiser mostrar a primeira postagem como uma postagem em destaque, poderá desativar a opção Primeira postagem em destaque.
  4. Coluna de postagem em destaque : Com a configuração, você pode definir a coluna de postagem em destaque. Há duas colunas disponíveis na lista suspensa Coluna 1 e Coluna 2 .

Aqui, decidimos exibir nossa postagem em destaque em 2 colunas, por isso selecionamos a opção Coluna 2 . E agora nosso post de lista mostrará a lista em uma única coluna como na imagem abaixo.

Content Layout Settings

Barra superior

Depois de ativar o Top Bar, você obterá todas as configurações essenciais do Top Bar aqui. Para deixar seu Top Bar mais deslumbrante você pode usar essas opções.

  • Título: você pode escrever o título da barra superior, como artigos em alta, postagens recentes, postagens populares, escolha do editor e muito mais.
  • Title Tag: Capaz de selecionar o Tag H1-H6 e Div do Título.
  • Navegação: Você também pode ativar e desativar a navegação.
  • Mostrar filtro: se você não quiser mostrar a opção de filtro, pode desativá-la aqui.
  • Estilo do Filtro: Você também pode definir o Estilo do Filtro em duas formas diferentes Inline e Dropdown .
  • Termos do filtro : Mesmo você pode adicionar os termos do filtro.

Aqui, selecionamos o estilo de filtro embutido e publicamos categorias como nossos termos de filtro.

Content Top Bar Settings

Nota: Os termos são itens em uma taxonomia. As taxonomias disponíveis são Categorias, Tags, Formatos e taxonomias personalizadas. Selecione termos para itens de filtro selecionados. Por padrão, ele mostrará toda a taxonomia nos tipos de postagem selecionados nas configurações de consulta.

Postagem em destaque

Existem muitas configurações fáceis de usar que o ajudarão muito a personalizar as configurações do Post em Destaque. Eles estão.

  • Estilo: no elemento de estilo, você pode definir seu estilo de conteúdo de duas maneiras diferentes, Content Inside e Content Outside . Se você selecionar o estilo Conteúdo Externo, o conteúdo do seu post aparecerá abaixo da imagem do recurso. Aqui, selecionamos Content Inside como o estilo.
  • Tamanho da imagem: Aqui, você pode definir o tamanho da imagem em destaque.
  • Crachá: Você pode ativar e desativar o crachá de postagem.
  • Taxonomia de Crachás: Você também pode selecionar a Taxonomia de Crachás como Tags e Categorias .
  • Título: Você pode desativar o título da postagem em destaque. Title Tag: Com base na sua necessidade, você pode definir a Title Tag.
  • Meta Ativa: também defina os elementos Meta Ativa da sua postagem, como Data, Autor, Comentários , etc.
  • Ícone do autor: você pode adicionar o ícone do autor aqui.
  • Ícone de data: você pode adicionar o ícone de data.
  • Ícone de comentário: Também pode adicionar o ícone de comentário.
  • Excerpt Length: Você pode definir o Excerpt Length.
  • Alinhamento : Você também pode definir o conteúdo correto Alinhamento Superior, Médio e Inferior .
Content Featured Post Settings

Listar postagem

Assim como as configurações de postagem em destaque, você também pode definir o conteúdo da postagem de lista . Estas são as opções disponíveis para personalizar o Post da Lista.

  • Etiqueta de título
  • Imagem
  • Tamanho da imagem
  • Meta Ativa
  • Ícone do autor
  • Ícone de data
  • Alinhamento
Content List Post Settings

Consulta

Nesta seção, você pode adicionar a lista de postagens usando Query . Aqui estão as opções que ajudarão você a definir a consulta de postagem correta.

  • Tipo de postagem: você pode escolher um tipo de postagem entre os três tipos, como postagens, páginas e seleção manual .
  • INCLUIR E EXCLUIR: Você pode INCLUIR E EXCLUIR a postagem de acordo com sua escolha. Incluir por: aqui, incluímos todas as postagens por autor .
  • Autores: Você também pode adicionar o nome do autor.
  • Data: você pode escolher diferentes postagens datadas com base em sua necessidade, como Dia Passado, Semana Passada, Mês Passado, Trimestre Passado, Ano Passado e Personalizado .
  • Ordenar por: você pode exibir as postagens Ordenar por autor, Contagem de comentários, Data, ID, Ordem de menu, Aleatório e Título .
  • Ordem: Você também pode selecionar Ordem como ASC & DESC . Ignore Sticky Posts: Se desejar, você pode ignorar o Sticky Post clicando no seletor Ligar e Desligar .
  • Imagem em destaque : você também pode ativar e desativar a imagem em destaque da sua postagem.
Content Query Settings

Terceiro passo: estilizar a lista de postagens

Com estilo, você terá todas as configurações de estilo necessárias para personalizar a lista de postagens. Você pode facilmente passar por todas as opções e projetá-las do seu jeito. Aqui estão as configurações que ajudarão você a redesenhar a lista de postagens do Elementor.

  • Esquema
  • Barra superior
  • Título da barra superior
  • Filtro da barra superior
  • Navegação na barra superior
  • Postagem em destaque
  • Distintivo
  • Listar postagem
Style the post list

Confira a prévia atual da nossa lista de posts.

Smart Post List Preview

Bônus: experimente os recursos de cópia ao vivo para usar modelos pré-projetados da lista de postagem inteligente

O 'Smart Post List' é pro widgets de Happy Addons. Em nossa versão pro, você terá um recurso exclusivo chamado ' Live Copy '. Com esse recurso avançado, você copia facilmente qualquer um dos nossos designs pré-fabricados e pode colá-los no site da Elementor. Consequentemente, você pode economizar um tempo valioso e obter alguns designs impressionantes criados por nosso designer especializado.

Vamos usar o design pré-fabricado da lista de posts do Happy Addons.

Copie a demonstração

Para fazer isso, você precisa ir para a página de demonstração do widget Smart Post List. Aqui, você terá 10 demonstrações incríveis da lista de postagens. Basta escolher um design adequado com base em sua necessidade.

Em seguida, clique no botão Live Copy para copiar a demonstração. Aqui, copiamos a demonstração do Design 2 .

Live Copy Smart Post List Demo

Ative o recurso de cópia ao vivo e cole a demonstração copiada

Depois de copiar o design de demonstração, você deve acessar o editor Elementor em seu back-end. Aqui, você precisa adicionar uma nova seção para colar a demonstração.

Add New Section

Então você precisa habilitar o recurso de cópia ao vivo na seção recém-criada. Para ativar o recurso, você pode seguir os guias abaixo.

  • Primeiro, clique na seção Editar
  • Em segundo lugar, vá para a seção Avançado e clique em Recursos felizes
  • Terceiro, habilite o recurso de cópia ao vivo
Enable Live Copy Feature

Por fim, clique com o botão direito do mouse na seção Editar e clique no botão X Paste ou Live Paste para colar a demonstração.

X Paste
Confira a documentação completa dos recursos de cópia ao vivo!

Visualização Final A Nova Lista de Postagens Inteligentes

Depois de fazer todas as tarefas, a visualização final da demonstração do Live Copy aparecerá mais ou menos assim.

Live Copy Demo Final Preview

Você também poderá personalizar a nova demonstração de cópia ao vivo em seu próprio estilo.

É isso! Agora, você sabe como usar o widget e criar uma lista de postagens impressionante para o seu site.

Confira a documentação completa do Smart Post List Widget!

Pronto para usar o widget de lista de postagens inteligentes para criar sua lista de postagens?

Neste blog, mostramos como você pode criar uma lista de postagens impressionante em seu site Elementor usando o widget Lista de postagens inteligentes do Happy Addons. Também abordamos como os recursos de cópia dinâmica podem economizar seu valioso tempo. E alguns possíveis motivos para usar o widget de lista de postagens no site da Elementor.

Se você gostou deste guia prático, compartilhe-o em seu canal social. Vai ajudar os outros a aprender. E não se esqueça de subscrever a nossa newsletter. É grátis!