O bloco Posts permite que você exiba uma coleção de posts em uma única página, dando a você 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 combine com o design do seu site.
O bloco suporta uma poderosa filtragem de consultas por tipo de postagem, categoria, tag e autor, e oferece opções de layout avançadas, incluindo Grade, Alvenaria e Carrossel. Você também pode controlar quais informações da postagem são exibidas — imagens em destaque, títulos, metadados, trechos, emblemas e links para ler mais — tudo a partir de um único painel de configurações.
Adicionando o bloco de publicações às suas páginas
Siga estas etapas para adicionar um bloco de publicações à sua página SeedProd:
Passo 1: Adicione o bloco
Em Blocos > Avançado, arraste e solte o bloco Publicações na seção desejada da sua página.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Posts para abrir suas configurações. A guia Configurações está organizada em duas seções: Consulta de posts e Layout.
Consulta de publicações:
- Tipo de consulta: escolha como as publicações são recuperadas. O padrão usa os parâmetros de consulta existentes da página, o personalizado permite filtrar por tipo de publicação, categoria, tag e autor, e o manual permite inserir uma string de consulta WP_Query bruta para controle total.
- Pesquisar por tipo de publicação: ative para filtrar os resultados por um ou mais tipos de publicação. Selecione os tipos de publicação a incluir no menu suspenso (disponível quando Personalizado está selecionado).
- Pesquisar por categoria: ative para filtrar os resultados por uma ou mais categorias. Selecione as categorias a incluir no menu suspenso.
- Pesquisar por tag(s): Ative para filtrar os resultados por uma ou mais tags. Selecione as tags a incluir no menu suspenso.
- Pesquisa por autor(es): ative para filtrar os resultados por um ou mais autores. Selecione os autores a incluir no menu suspenso.
- Ordenar por: escolha o campo usado para classificar os resultados — Data, Data da última modificação, Título, Número 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 estiver selecionado), por exemplo:
post_type=post&posts_per_page=3&order=desc.
Layout:
- Pele: Escolha o design geral do cartão postal — Clássico (lista/grade padrão), Cartão (cartão em caixa com imagem na parte superior), Criativo (imagem com área de conteúdo sobreposta) ou Mínimo (layout limpo e leve).
- Layout: escolha como as publicações serão organizadas — Grade (colunas uniformes), Alvenaria (colunas de altura variável) ou Carrossel (apresentação de slides com rolagem horizontal). As opções do carrossel incluem Slides para mostrar (1–10), alternância de reprodução automática, velocidade de reprodução automática, posição de navegação (superior/inferior), estilo de navegação (setas e pontos/setas/pontos) e cor de navegação.
- Colunas: defina o número de colunas a exibir (layouts Grid e Masonry).
- Paginação: ative para adicionar links de paginação abaixo das postagens.
- Número por página: defina quantas publicações serão exibidas 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–500 px) e, para skins criativas e minimalistas, 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 de título — H1 a H6, div, span ou p.
- Mostrar metadados: ative para exibir os metadados da publicação. Os botões individuais permitem mostrar/ocultar a data de modificação, o autor, a data, a hora e a contagem de comentários. Defina um caractere separador para aparecer entre os itens de metadados.
- Mostrar trecho: ative para exibir o trecho de cada postagem. Quando ativado, defina o comprimento do trecho (número de palavras).
- Mostrar Mais: Ative para exibir um link “Mais” abaixo do trecho. Quando ativado, personalize o texto “Mais”.
- Emblema: ative para exibir um emblema de rótulo de taxonomia em cada postagem (disponível para skins Card e Creative). Quando ativado, escolha a taxonomia do emblema — categoria ou tags.
- Avatar: Ative para exibir o avatar do autor (apenas para o tema Card).
Etapa 3: Personalizar o design
Na guia Avançado, você pode ajustar o estilo visual de cada elemento do seu bloco Postagens. As configurações estão organizadas nas seguintes seções:
Publicação:
- Preenchimento do cartão postal: defina o espaçamento interno ao redor do conteúdo dentro de cada cartão postal (superior, direito, inferior, esquerdo).
- Cor de fundo da publicação: defina a cor de fundo para cada cartão postal individual.
- Sombra do cartão postal: adicione um efeito de sombra ao redor de cada cartão postal — escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extragrande, 2X Grande ou uma sombra personalizada.
- Espaço inferior: defina o espaçamento vertical entre os cartões postais de 0 a 100 px.
Texto:
- Tipografia do título: defina a família, o tamanho, a espessura e o estilo da fonte para os títulos das publicações (suporta configurações por dispositivo).
- Cor do título: defina a cor do texto do título da publicação.
- Tipografia do texto meta: defina a tipografia para as informações meta da publicação (por dispositivo).
- Cor do texto meta: defina a cor do texto meta.
- Tipografia do trecho: defina a tipografia para o trecho da publicação (por dispositivo).
- Cor do trecho: defina a cor do texto do trecho.
- Tipografia do texto “Leia mais”: defina a tipografia do link “Leia mais” (por dispositivo).
- Cor do texto “Leia mais”: defina a cor do link “Leia mais”.
- Tipografia de paginação: defina a tipografia para 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 500 px (exibida quando as imagens em destaque estão ativadas).
- Sombra: Adicione um efeito de sombra à imagem em destaque — escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extra Grande, 2X Grande ou Sombra Inferior.
- Margem da imagem: defina o espaçamento ao redor da imagem em destaque (superior, direito, inferior, esquerdo).
- Borda da imagem: defina o estilo da borda da imagem (sólida, pontilhada, tracejada), cor, largura e raio dos cantos (incluindo o raio por canto: canto superior direito, canto superior esquerdo, canto inferior direito, canto inferior esquerdo).
- Preenchimento do espaço em branco da imagem: Adicione preenchimento interno ao redor da imagem em destaque.
Fronteira:
- Raio da borda: defina o arredondamento dos cantos de cada cartão postal de 0 a 100 px.
- Estilo da borda: defina o estilo da borda para cada cartão postal — Sólida, Pontilhada ou Tracejada.
- Cor da borda: defina a cor da borda de cada cartão postal.
- Largura da borda: defina a largura da borda por lado (superior, direito, inferior, esquerdo).
Área de conteúdo:
- Preenchimento do conteúdo: defina o preenchimento interno da área de conteúdo do texto em cada cartão postal (superior, direito, inferior, esquerdo).
- Cor de fundo do conteúdo: defina a cor de fundo da área de conteúdo dentro de cada cartão postal.
- Sombra do conteúdo: adicione uma sombra à área de conteúdo — escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extragrande, 2X 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 dos emblemas:
- Preenchimento da taxonomia: defina o preenchimento interno do rótulo do emblema (superior, direito, inferior, esquerdo).
- Raio da borda: defina o arredondamento dos cantos do crachá por canto (canto superior direito, canto superior esquerdo, canto inferior direito, canto inferior esquerdo).
- Cor de fundo: defina a cor de fundo do emblema da taxonomia.
- Cor: defina a cor do texto do rótulo do selo de taxonomia.
- Tipografia da taxonomia: defina a família, o tamanho e o estilo da fonte para o texto do emblema (por dispositivo).
- Espaçamento inferior: defina o espaçamento abaixo do emblema de 0 a 100 px.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco de publicações (superior, direito, inferior, esquerdo). Suporta configurações por dispositivo para desktop, tablet e celular.
- Preenchimento: ajuste o espaçamento interno do seu bloco de publicações (superior, direito, inferior, esquerdo). Suporta configurações por dispositivo.
Atributos:
- CSS ID: Exibe o identificador único gerado automaticamente para o seu bloco Posts. Esse ID é criado automaticamente pelo SeedProd para personalização de estilo ou segmentação 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 na área de trabalho: oculte o bloco de publicações nas telas da área de trabalho.
- Ocultar no tablet: Oculte o bloco Publicações em dispositivos tablet.
- Ocultar no celular: oculte o bloco Publicações 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 Postagens é exibido. As opções incluem Saltar, Aparecer gradualmente, Ampliar, Girar e muito mais.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Posts e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de publicações à sua página! Use-o para exibir seu conteúdo de forma elegante, com um layout visualmente atraente e organizado que incentive os leitores a explorar mais o seu site. Experimente diferentes skins, layouts e configurações de consulta para criar um feed de publicações que combine perfeitamente com sua marca e estratégia de conteúdo.