Wix Home Page
Entrar

Editor do Wix Studio: adicionar e personalizar uma tabela

6 min de leitura
Neste artigo
  • Adicionar e configurar uma tabela
  • Personalizar as configurações da tabela
  • Fazer o design de uma tabela
  • Ajustar o layout da tabela
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. 
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
O painel Gerenciar tabela e as opções que aparecem ao clicar no ícone Mais ações ao lado de uma coluna
Personalizando as configurações da tabela no Editor do Wix Studio
As opções de design disponíveis no painel Inspetor para o elemento de tabela, destacando as abas Normal e Ao passar o mouse
O painel Layout da tabela no Editor do Wix Studio, clicando para definir uma largura personalizada para cada coluna da tabela