Compartilhar via

Criar e personalizar uma galeria de cartões no Power Pages

Uma galeria de cartões é um controle de dados que exibe dados de uma tabela e visualização em cartões. É possível usar o estúdio de design ou o código do Liquid para adicionar, estilizar e configurar uma galeria de cartões em sites do Power Pages.

Para adicionar uma galeria de cartões com o estúdio de design:

  1. Abre o design studio para editar o conteúdo e os componentes do site.

    Dica

    Também é possível adicionar uma galeria de cartões usando código.

  2. Acesse o espaço de trabalho Páginas.

  3. Selecione a página que deseja editar.

  4. Selecione a seção na qual você deseja adicionar a galeria de cartões.

  5. Passe o mouse sobre qualquer área de tela editável e selecione o ícone da Galeria de cartões do painel do componente.

    Uma captura de tela do componente da galeria de cartões com o botão de design da Galeria de cartões exibido no canto superior esquerdo.

Escolher um layout

Selecione o botão Design da galeria de cartões para escolher qualquer um dos quatro layouts disponíveis.

Uma captura de tela das opções de design da galeria de cartões no estúdio de design. O botão de design da galeria de cartões, localizado no canto superior esquerdo do componente, é enfatizado e as opções de design são exibidas em uma janela na frente do componente.

Também é possível escolher entre galerias de cartões existentes, se estiverem disponíveis.

Configurar o fonte de dados da sua galeria de cartões

Para configurar a fonte de dados da sua galeria de cartões:

  1. Selecione o botão de design da Galeria de cartões e escolha Dados.

    Uma captura de tela das opções de design da Galeria de cartões para Dados no estúdio de design.

  2. Selecione uma tabela existente no campo de pesquisa Fonte de dados.

  3. Selecione uma exibição correspondente na lista suspensa Exibir.

  4. Para cada elemento da galeria de cartões (imagem, título, descrição, botão, hiperlink de texto), escolha a opção Selecionar dados para associá-lo a uma coluna de exibição.

    Observação

    Para elementos de botão e hiperlink, você precisa definir duas configurações: nome e url. Ambas as configurações devem ser vinculadas a uma coluna de exibição.

Desative a opção de alternância ao lado de qualquer elemento que você não queira incluir.

Você pode reorganizar a posição de cada elemento selecionando o ícone à esquerda do botão de alternância e arrastando o elemento para a posição desejada.

Tipos de colunas compatíveis

Cada elemento oferece suporte a tipos de dados específicos.

Tipos de colunas compatíveis

Cada elemento oferece suporte a tipos de dados específicos.

Elemento Tipo(s) de dados
Tĩtulo Texto (linha única de texto)
o Telefone
Número Inteiro
Decimal
Pesquisar
Somente data
Data e hora
Description Rich Text
Área de Texto (várias linhas de texto)
o Telefone
Número Inteiro
Decimal
Somente data
Data e hora
Image Arquivo - Imagem
Button Rótulo do botão:
  • Texto (linha única de texto)
  • Trecho de conteúdo

URL do Botão:
  • URL
  • página da Web
Hiperlink de Texto Rótulo do hiperlink de texto:
  • Texto (linha única de texto)
  • Trecho de conteúdo

URL do hiperlink de texto:
  • URL
  • página da Web
Texto personalizado Texto (linha única de texto)

Você pode criar o estilo de sua galeria de cartões configurando propriedades de estilo no nível da galeria, do cartão e do elemento.

Filtro de pesquisa

Ative/desative a alternância Habilitar pesquisa para adicionar ou remover a filtragem de pesquisa.

Depois de configurar sua galeria de cartões, você poderá ver a versão preliminar em tela com dados de exemplo.

Observação

Você deve definir permissões de tabela para permitir que os visitantes do site visualizem e interajam com sua galeria de cartões.

Você também pode usar o Liquid para editar sua galeria de cartões.

Para adicionar uma nova galeria de cartões sem nenhuma configuração ou associação de dados, use a seguinte marca do Liquid:

{% codecomponent name:Pages.CardGallery %}

Para adicionar uma galeria de cartões existente, use a marca do Liquid e substitua {your card gallery id} pela ID da galeria de cartões existente:

{% codecomponent name:Pages.CardGallery id: '{your card gallery id}' %}