Documentação do SeedProd

Documentação, Materiais de Referência e Tutoriais para SeedProd

Bloco de Grade de Downloads (Easy Digital Downloads)

O bloco Grade de Downloads permite exibir os produtos da sua loja Easy Digital Downloads em um layout de grade atraente diretamente em qualquer página do SeedProd. Este bloco oferece controle total sobre quais downloads são exibidos, como são filtrados e como cada cartão de produto é exibido.

Se você deseja destacar todos os seus produtos digitais, apresentar downloads específicos por ID, tag ou categoria, ou controlar exatamente quais detalhes do produto aparecem, o bloco Grade de Downloads facilita a criação de uma vitrine EDD polida sem escrever nenhum código.

Requisitos: O bloco Grade de Downloads está disponível no plano de licença Elite. Antes de começar, certifique-se de que o Easy Digital Downloads esteja instalado e ativo em seu site com pelo menos alguns produtos de download publicados.

Exemplo de bloco EDD Downloads Grid

Adicionando o Bloco de Grade de Downloads às Suas Páginas

Siga estas etapas para adicionar um bloco de Grade de Downloads à sua página SeedProd:

Etapa 1: Adicionar o Bloco

Em Blocos > Easy Digital Downloads, arraste e solte o bloco Grade de Downloads na seção desejada da sua página.

Arrastando o bloco Downloads Grid para uma página SeedProd

Etapa 2: Configurar as Definições de Conteúdo

Após adicionar, clique no bloco Grade de Downloads para abrir suas configurações. Na aba Conteúdo, configure como seus downloads são exibidos e quais produtos aparecem na grade.

Configurações do bloco Downloads Grid

Conteúdo:

  • Colunas: Defina o número de colunas usadas para exibir seus downloads na grade.
  • Paginação: Ative ou desative a paginação. Quando ativada, os downloads são divididos em várias páginas.
  • Número de Downloads: Defina o número máximo de downloads a serem exibidos. Use -1 para mostrar todos os downloads disponíveis.
Configurações de Conteúdo do Downloads Grid

Consulta:

  • IDs: Ative para escolher manualmente downloads específicos a serem exibidos, selecionando-os de uma lista de seus produtos publicados.
  • Tags: Ative para filtrar downloads por tag. Escolha se deseja Incluir ou Excluir downloads que correspondam às tags selecionadas.
  • Categorias: Ative para filtrar downloads por categoria. Escolha se deseja Incluir ou Excluir downloads nas categorias selecionadas.
  • Relação: Quando os filtros de Tags e Categorias estiverem ativos, defina se os filtros combinados usarão a lógica OU (corresponder a um ou outro) ou E (deve corresponder a ambos).
  • Preço: Ative para mostrar ou ocultar o preço do produto em cada cartão de download.
  • Resumo: Ative para mostrar ou ocultar a descrição curta em cada cartão de download.
  • Conteúdo Completo: Ative para mostrar ou ocultar a descrição completa do produto em cada cartão de download.
  • Botão Comprar: Ative para mostrar ou ocultar o botão de compra em cada cartão de download.
  • Miniaturas: Ative para mostrar ou ocultar a imagem do produto em cada cartão de download.
  • Ordenar por: Escolha como os downloads são classificados — por Data, ID, Aleatório ou Título. Observação: se a ordenação for definida como Aleatório, a paginação será desativada para evitar produtos repetidos em diferentes páginas.
  • Ordem: Defina a direção da classificação — ASC (ascendente) ou DESC (descendente).
Configurações de Consulta do Downloads Grid

Etapa 3: Personalizar o Design

Na aba Avançado, você pode estilizar todos os elementos do bloco Grade de Downloads para combinar com sua marca.

Estilos:

  • Alinhamento: Defina o alinhamento horizontal do conteúdo da grade — Esquerda, Centro ou Direita.
  • Tipografia do Título: Personalize a família da fonte, peso, tamanho, altura da linha, espaçamento entre letras e transformação de texto para o título do produto.
  • Cor do Título: Defina a cor do texto do título do produto.
  • Tipografia da Descrição: Personalize a tipografia para o texto da descrição ou resumo do produto.
  • Cor da Descrição: Defina a cor do texto da descrição.
  • Tipografia do Preço: Personalize a tipografia para o preço exibido.
  • Cor do Preço: Defina a cor do texto do preço.

Botão:

  • Estilo do Botão: Escolha entre os estilos de botão Flat, 2D, Vintage, Ghost ou Link.
  • Cor do Botão: Defina a cor de fundo do botão de compra.
  • Tipografia do Botão: Personalize as configurações de fonte para o texto do rótulo do botão.
  • Tamanho do Botão: Escolha entre Pequeno, Médio, Grande, Extra Grande ou 2X Grande.
  • Raio da Borda: Ajuste o arredondamento dos cantos do botão, de 0 a 100.

Imagem:

  • Sombra: Adicione uma sombra projetada às imagens do produto. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extra Grande, 2X Grande ou Sombra Projetada Inferior.
  • Borda da Imagem: Adicione uma borda ao redor das imagens do produto. Configure o Estilo da Borda (Sólida, Pontilhada ou Tracejada), Largura da Borda, Cor da Borda, Raio da Borda e Preenchimento de Espaço em Branco da Imagem.

Paginação:

  • Tipografia da Paginação: Personalize as configurações de fonte para os controles de paginação.
  • Cor da Página: Defina a cor do indicador da página atual na paginação.
  • Cor do Link: Defina a cor dos links de navegação da paginação.

Espaçamento:

  • Margem: Controle o espaçamento externo ao redor do seu bloco Grade de Downloads (Superior, Direita, Inferior, Esquerda).
  • Preenchimento: Ajuste o espaçamento interno dentro do seu bloco Grade de Downloads (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e celular.

Atributos:

  • ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco Grade de Downloads, criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por 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 no Desktop: Oculte o bloco Grade de Downloads em telas de desktop.
  • Ocultar no Tablet: Oculte o bloco Grade de Downloads em dispositivos tablet.
  • Ocultar no Celular: Oculte o bloco Grade de Downloads em dispositivos móveis.

Efeitos de Animação:

  • Animação de Entrada: Escolha um efeito de animação que é reproduzido quando o bloco Grade de Downloads entra na tela, como Bounce, Fade In, Zoom In, Rotate In e muitos outros.
Configurações Avançadas do Downloads Grid

Etapa 4: Salve Suas Alterações

Depois de terminar de configurar o bloco Downloads Grid e personalizar sua aparência, certifique-se de salvar seu trabalho.


Você adicionou com sucesso um bloco Downloads Grid à sua página! O bloco Downloads Grid é uma maneira poderosa de exibir seus produtos Easy Digital Downloads com controle total sobre layout, filtragem e estilo. Experimente diferentes contagens de colunas, filtros de consulta e opções de design para criar uma grade de produtos que gere conversões e corresponda à sua marca.

Artigos Relacionados