O Bloco de Posts permite exibir uma coleção de posts em uma única página, dando controle total sobre como seu conteúdo é consultado, organizado e exibido. Escolha entre várias skins, layouts e opções de exibição para criar um feed de posts que corresponda ao design do seu site.
O bloco suporta filtragem poderosa de consultas por tipo de post, categoria, tag e autor, e oferece opções ricas de layout, incluindo Grade, Alvenaria e Carrossel. Você também pode controlar quais informações do post são exibidas — imagens em destaque, títulos, metadados, resumos, badges e links de "leia mais" — tudo a partir de um único painel de configurações.
Adicionando o Bloco de Posts às Suas Páginas
Siga estas etapas para adicionar um bloco de Posts à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Blocos > Avançado, arraste e solte o bloco Posts na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionar, clique no bloco de Posts para abrir suas configurações. A aba Configurações está organizada em duas seções: Consulta de Posts e Layout.
Consulta de Posts:
- Tipo de Consulta: Escolha como os posts são recuperados. Padrão usa os parâmetros de consulta existentes da página, Personalizado permite filtrar por tipo de post, categoria, tag e autor, e Manual permite inserir uma string de consulta WP_Query bruta para controle total.
- Consultar por Tipo de Post: Ative para filtrar resultados por um ou mais tipos de post. Selecione os tipos de post a serem incluídos no menu suspenso (disponível quando Personalizado é selecionado).
- Consultar por Categoria: Ative para filtrar resultados por uma ou mais categorias. Selecione as categorias a serem incluídas no menu suspenso.
- Consultar por Tag(s): Ative para filtrar resultados por uma ou mais tags. Selecione as tags a serem incluídas no menu suspenso.
- Consultar por Autor(es): Ative para filtrar resultados por um ou mais autores. Selecione os autores a serem incluídos no menu suspenso.
- Ordenar por: Escolha o campo usado para classificar os resultados — Data, Data da Última Modificação, Título, Contagem de Comentários ou Ordem do Menu.
- Ordem: Defina a direção da classificação — ASC (mais antigo/A-Z primeiro) ou DESC (mais recente/Z-A primeiro).
- Parâmetros de Consulta: Insira uma string WP_Query manual (disponível quando Manual é selecionado), por exemplo:
post_type=post&posts_per_page=3&order=desc.
Layout:
- Skin: Escolha o design geral do card do post — Clássico (lista/grade padrão), Card (card em caixa com imagem no topo), Criativo (imagem com área de conteúdo sobreposta) ou Minimalista (layout limpo e leve).
- Layout: Escolha como as postagens são organizadas — Grid (colunas uniformes), Masonry (colunas de altura variável) ou Carousel (slideshow com rolagem horizontal). As opções do Carousel incluem Slides a Mostrar (1–10), alternância de Reprodução Automática, Velocidade de Reprodução Automática, posição da Navegação (Superior/Inferior), estilo da Navegação (Setas e Pontos/Setas/Pontos) e Cor da Navegação.
- Colunas: Defina o número de colunas a serem exibidas (layouts Grid e Masonry).
- Paginação: Ative para adicionar links de paginação abaixo das postagens.
- Número por Página: Defina quantas postagens exibir por página (disponível quando o tipo de consulta Personalizado ou Manual é selecionado).
- Mostrar Imagem em Destaque: Ative para exibir a imagem em destaque de cada postagem. Quando ativado, você também pode definir a Altura da Imagem (0–500px) e, para os estilos Criativo e Minimalista, a Posição da Imagem (Esquerda ou Direita).
- Mostrar Título: Ative para exibir o título de cada postagem. Quando ativado, escolha a Tag do Título — H1 a H6, div, span ou p.
- Mostrar Metadados: Ative para exibir os metadados da postagem. Alternâncias individuais permitem mostrar/ocultar Data de Modificação, Autor, Data, Hora e Contagem de Comentários. Defina um caractere Separador para aparecer entre os itens de metadados.
- Mostrar Resumo: Ative para exibir o resumo de cada postagem. Quando ativado, defina o Comprimento do Resumo (número de palavras).
- Mostrar Leia Mais: Ative para exibir um link "leia mais" abaixo do resumo. Quando ativado, personalize o Texto Leia Mais.
- Badge: Ative para exibir um badge de taxonomia em cada postagem (disponível para os estilos Card e Criativo). Quando ativado, escolha a Taxonomia do Badge — Categoria ou Tags.
- Avatar: Ative para exibir o avatar do autor (apenas estilo Card).
Etapa 3: Personalizar o Design
Na aba Avançado, você pode ajustar a estilização visual de cada elemento do seu bloco de Postagens. As configurações são organizadas nas seguintes seções:
Postagem:
- Espaçamento Interno da Postagem: Defina o espaçamento interno ao redor do conteúdo dentro de cada card de postagem (Superior, Direita, Inferior, Esquerda).
- Cor de Fundo da Postagem: Defina a cor de fundo para cada card de postagem individual.
- Sombra da Postagem: Adicione um efeito de sombra ao redor de cada card de postagem — escolha entre Nenhuma, Fina, Pequena, Média, Grande, X Grande, 2X Grande ou uma sombra personalizada.
- Espaço Inferior: Defina o espaçamento vertical entre os cards de postagem de 0 a 100px.
Texto:
- Tipografia do Título: Defina a família da fonte, tamanho, peso e estilo para os títulos das postagens (suporta configurações por dispositivo).
- Cor do Título: Defina a cor do texto do título da postagem.
- Tipografia do Texto dos Metadados: Defina a tipografia para as informações de metadados da postagem (por dispositivo).
- Cor do Texto dos Metadados: Defina a cor do texto dos metadados.
- Tipografia do Resumo: Defina a tipografia para o resumo da postagem (por dispositivo).
- Cor do Resumo: Defina a cor do texto do resumo.
- Tipografia do Texto "Leia Mais": Defina a tipografia para o link "Leia Mais" (por dispositivo).
- Cor do Texto "Leia Mais": Defina a cor do link "Leia Mais".
- Tipografia da Paginação: Defina a tipografia para os links de paginação (por dispositivo).
- Cor da Paginação: Defina a cor do texto do link de paginação.
Imagem:
- Altura da Imagem: Defina a altura das imagens em destaque de 0 a 500px (exibido quando as imagens em destaque estão ativadas).
- Sombra: Adicione um efeito de sombra à imagem em destaque — escolha entre Nenhuma, Fio de Cabelo, Pequena, Média, Grande, X Grande, XX Grande ou Sombra de Queda Inferior.
- Margem da Imagem: Defina o espaçamento ao redor da imagem em destaque (Superior, Direita, Inferior, Esquerda).
- Borda da Imagem: Defina o estilo da borda da imagem (Sólida, Pontilhada, Tracejada), cor, largura e raio do canto (incluindo raio por canto: Superior Direita, Superior Esquerda, Inferior Direita, Inferior Esquerda).
- Preenchimento de Espaço em Branco na Imagem: Adicione preenchimento interno ao redor da imagem em destaque.
Borda:
- Raio da Borda: Defina o arredondamento dos cantos de cada card de postagem de 0 a 100px.
- Estilo da Borda: Defina o estilo da borda para cada card de postagem — Sólida, Pontilhada ou Tracejada.
- Cor da Borda: Defina a cor da borda de cada card de postagem.
- Largura da Borda: Defina a largura da borda por lado (Superior, Direita, Inferior, Esquerda).
Área de Conteúdo:
- Preenchimento do Conteúdo: Defina o preenchimento interno da área de texto dentro de cada card de postagem (Superior, Direita, Inferior, Esquerda).
- Cor de Fundo do Conteúdo: Defina a cor de fundo da área de conteúdo dentro de cada card de postagem.
- Sombra do Conteúdo: Adicione uma sombra à área de conteúdo — escolha entre Nenhuma, Fio de Cabelo, Pequena, Média, Grande, X Grande, XX Grande ou uma sombra personalizada.
- Borda da Área de Conteúdo: Defina o estilo da borda da área de conteúdo (Sólida, Pontilhada, Tracejada), cor, largura por lado e raio da borda.
Taxonomia do Selo:
- Preenchimento da Taxonomia: Defina o preenchimento interno do rótulo do selo (Superior, Direita, Inferior, Esquerda).
- Raio da Borda: Defina o arredondamento dos cantos do selo por canto (Superior Direita, Superior Esquerda, Inferior Direita, Inferior Esquerda).
- Cor de Fundo: Defina a cor de fundo do selo da taxonomia.
- Cor: Defina a cor do texto do rótulo do selo da taxonomia.
- Tipografia da Taxonomia: Defina a família da fonte, tamanho e estilo do texto do selo (por dispositivo).
- Espaçamento Inferior: Defina o espaçamento abaixo do selo de 0 a 100px.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Postagens (Superior, Direita, Inferior, Esquerda). Suporta configurações por dispositivo para desktop, tablet e celular.
- Preenchimento: Ajuste o espaçamento interno do seu bloco de Postagens (Superior, Direita, Inferior, Esquerda). Suporta configurações por dispositivo.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Posts. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação de JavaScript.
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor.
Visibilidade do Dispositivo:
- Ocultar em Desktop: Oculta o bloco de Posts em telas de desktop.
- Ocultar em Tablet: Oculta o bloco de Posts em dispositivos tablet.
- Ocultar em Celular: Oculta o bloco de Posts em dispositivos móveis.
Efeitos de Animação:
- Animação de Entrada: Escolha entre vários efeitos de animação que são reproduzidos quando o bloco de Posts entra na tela. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitas outras.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Posts e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Posts à sua página! Use-o para exibir elegantemente seu conteúdo em um layout visualmente envolvente e organizado que incentiva os leitores a explorar mais do seu site. Experimente diferentes skins, layouts e configurações de consulta para criar um feed de posts que corresponda perfeitamente à sua marca e estratégia de conteúdo.