Editor do Wix Studio: adicionar e personalizar uma tabela

6 min de leitura
Você usa o CMS (sistema de gerenciamento de conteúdo) para gerenciar coleções e conjuntos de dados? Adicione uma tabela para mostrar um conjunto de dados em uma visualização conveniente. Do comportamento até a personalização do layout e do design, você pode adaptar a tabela para que ela combine perfeitamente com o site do seu cliente. 
Neste artigo, confira como:
Antes de começar:
Adicione e configure a coleção de conteúdo que você deseja exibir na tabela. 

Adicionar e configurar uma tabela

Adicione uma tabela ao site do seu cliente usando o painel Elementos. Existem várias tabelas predefinidas para você escolher, que você pode personalizar como preferir. Depois, no painel Inspetor, você pode então escolher o conjunto de dados que deseja exibir.

Para adicionar e configurar uma tabela:

  1. Clique em Elementos  no lado esquerdo do Editor.
  2. Clique em Ferramentas de layout.
  3. Clique em Tabelas.
  4. Arraste o design que você mais gostou para sua página.
  5. Conecte a tabela a uma coleção de conteúdo:
    1. Clique no ícone Conectar ao CMS  
    2. (No Inspetor) Escolha o conjunto de dados que deseja exibir na tabela. 
  6. Clique em Gerenciar tabela e configure as colunas da tabela:
    • Reordenar: clique no ícone Reordenar  ao lado da coluna relevante e arraste-a para cima ou para baixo.
    • Alterar nome da coluna: passe o mouse sobre a coluna relevante e clique no ícone Mais ações  e selecione Editar etiqueta. Insira o novo nome e clique em OK.
    • Excluir coluna: passe o mouse sobre a coluna relevante e clique no ícone Mais ações  e selecione Excluir.
    • Gerenciar conexões: clique em Gerenciar conexões para alterar qualquer uma das conexões do CMS. Em seguida, clique nos dropdowns relevantes em Conexões no painel Inspetor para editar as conexões e links. 
O painel Gerenciar tabela e as opções que aparecem ao clicar no ícone Mais ações ao lado de uma coluna

Personalizar as configurações da tabela

Otimize a funcionalidade da sua tabela no painel Configurações da tabela. Escolha o que é selecionado quando os visitantes clicam em uma célula da tabela, decida como os links são abertos e defina o formato de data como preferir. 

Para personalizar as configurações da tabela:

  1. Vá para o seu Editor.
  2. Selecione o elemento de tabela.
  3. Clique no ícone Configurações  e escolha entre as seguintes opções: 
    • Ao clicar selecione: escolha o que é selecionado na tabela quando os visitantes clicam em uma célula: NenhumaLinhas, ou Células.
    • Abrir links em: se você vincular itens, escolha se eles abrem em uma nova janela ou na janela atual. 
    • Formato da data: se você conectou um tipo de campo de data, escolha um formato no qual as datas são exibidas. 
Trabalhando com breakpoints:
Suas seleções no painel Configurações se aplicam a todos os breakpoints. 
Personalizando as configurações da tabela no Editor do Wix Studio

Fazer o design de uma tabela

Desde ajustar as cores de preenchimento e a opacidade até ajustar bordas, cantos e sombras, você tem controle total sobre a apresentação visual da sua tabela. Você também pode personalizar o estilo e a formatação do texto para uma aparência elegante. 

Para fazer o design de uma tabela:

  1. Vá para o seu Editor.
  2. Selecione a tabela relevante.
  3. Clique no ícone Abrir inspetor  no canto superior direito do Editor.
  4. Escolha o que você deseja personalizar:
    • Cor e opacidade: escolha a cor do background e a opacidade de diferentes partes da tabela (por exemplo: background do cabeçalho, background da linha, background da tabela).
    • Borda: defina a cor, o tamanho e a largura da borda da tabela, assim como os separadores.
    • Cantos: deixe os cantos da tabela mais arredondados ao definir o raio (em px). 
    • Sombra: aplique a sombra na cor, ângulo e opacidade de sua escolha. 
    • Texto: estilize e formate cada texto que aparece na tabela (por exemplo: Texto do cabeçalho, Texto da linha).
  5. (Opcional) Defina os links na tabela para mudar de cor ao passar o mouse: 
    1. Clique em Ao passar o mouse em Design.
    2. Clique na caixa de cores ao lado de Cor do link ao passar o mouse.
As opções de design disponíveis no painel Inspetor para o elemento de tabela, destacando as abas Normal e Ao passar o mouse

Ajustar o layout da tabela

Personalize o layout da sua tabela para que ela se adapte perfeitamente ao seu conteúdo. Personalize a altura da tabela, a altura da linha e a largura da coluna como preferir. Além disso, você pode optar por mostrar ou ocultar o cabeçalho da tabela, ajustar a direção da coluna e alinhar o texto para uma apresentação perfeita.

Para ajustar o layout da tabela:

  1. Vá para o seu Editor.
  2. Selecione a tabela relevante.
  3. Clique no ícone Layout .
  4. Escolha o que você deseja ajustar:
    • Altura da tabela: decida se a tabela deve ter uma altura personalizada definida 
    • Largura da coluna: defina a largura das colunas da tabela:
      • Igual: todas as colunas ocupam a mesma largura.
      • Personalizada: clique em Definir largura para definir a largura de cada coluna. Você pode usar as medidas px, porcentagem (%) ou Auto.
    • Mostrar cabeçalho: clique na alavanca para mostrar ou ocultar o cabeçalho da tabela (mostrando os títulos das colunas). Quando ativada, você também pode definir a Altura do cabeçalho.
    • Altura da linha: defina a altura da linha em pixels.
    • Direção: escolha se deseja exibir as colunas da esquerda para a direita ou da direita para a esquerda.
      Dica: a ordem das colunas é baseada na forma como elas estão organizadas no painel Gerenciar tabela.
    • Alinhamento: alinhe o texto da tabela à esquerda, ao centro ou à direita.
Trabalhando com breakpoints:
Suas seleções no painel Layout da tabela se aplicam a todos os breakpoints. 
O painel Layout da tabela no Editor do Wix Studio, clicando para definir uma largura personalizada para cada coluna da tabela

Esse artigo foi útil?

|