Tabela Dinâmica
Tabelas de preços, gráficos de recursos de diretórios de equipe, dados de recursos são a espinha dorsal de boas decisões Mas uma tabela HTML padrão grita “spreadsheet,” não “solução.” Master Addons Dynamic Table Element transforma informações estruturadas em uma experiência projetada Construa qualquer tabela do zero diretamente no editor Elementor Defina seus cabeçalhos, preencha o corpo com texto, imagens, ícones ou até mesmo conteúdo dinâmico de suas postagens Em seguida, aplique o estilo profissional em todos os níveis: o cabeçalho, cada linha, células individuais Crie clareza, destaque o que importa e faça de seus dados algo que as pessoas realmente desejam ler.
Construtor de mesa visual de arrastar e soltar
Esqueça os códigos de acesso complexos Construa toda a estrutura da sua tabela numa interface visual intuitiva Comece por definir as suas colunas Table Head (como “Feature,”Price,”Plan”) Em seguida, adicione e gerencie linhas no Table Body tal como uma folha de cálculo Precisa de outra linha Clique em Adicionar Item Quer mesclar células? use os controlos Column Span e Row Span para layouts complexos Você vê a sua tabela a formar-se em tempo real à medida que a constrói, tornando o processo rápido, preciso e totalmente visual.
- Configuração Intuitiva do Cabeçalho: Adicione e rotule colunas de cabeçalho diretamente no editor para definir a estrutura da sua tabela.
- Gerenciamento de linha ao vivo: adicione, exclua e reordene linhas de corpo dinamicamente com o botão Adicionar item.
- Poder de fusão de células: crie grupos de cabeçalhos ou destaque as células-chave usando as opções Column Span e Row Span.
Cabeçalho separado e controle de estilo corporal
Uma grande tabela guia o olho Faça sua linha de cabeçalho se destacar como o guia claro para os dados abaixo Estilize o Cabeçalho da Tabela de forma totalmente independente Dê-lhe uma cor de fundo ousada, cor de texto distinta e tipografia forte Ajuste o preenchimento da célula interna para torná-lo espaçoso e fácil de ler Isso cria hierarquia visual imediata, ajudando os usuários a digitalizar e entender seus dados em segundos As linhas do corpo obtêm seu próprio conjunto separado de controles de estilo para um contraste perfeito.
- Estilo de cabeçalho independente: Aplique cor de fundo, cor de texto e tipografia exclusivas apenas na linha de cabeçalho.
- Controle de preenchimento de células: defina preenchimento de células internas personalizado para células de cabeçalho para melhorar a legibilidade e o design.
- Estilo específico do corpo: Estile as linhas do corpo da tabela com seu próprio fundo, cor de texto e alinhamento.
Conteúdo da célula: texto, ícones, imagem e dados dinâmicos
Cada célula pode contar uma história mais rica Além de texto simples, insira Imagens ou escolha Ícones da biblioteca para criar marcas de verificação de recursos visuais (✓) ou indicadores de status Mais poderosamente, conecte sua tabela ao conteúdo do site ao vivo usando Tags Dinâmicas Automaticamente puxe dados como Títulos de postagem, Campos personalizados, valores ACF ou informações do usuário Crie uma tabela de comparação de produtos, um diretório de funcionários ou uma programação de eventos que atualize automaticamente verdadeiramente dinâmica.
- Conteúdo multiformato: escolha texto, imagem ou ícone para qualquer célula corporal.
- Personalização de ícones: ícones de estilo com tamanho, cor e preenchimento próprios dentro da célula.
- Integração de tags dinâmicas: Preencha células automaticamente usando fontes de dados dinâmicas (por exemplo, post meta, nome do autor, campos personalizados).
- Alinhamento flexível: controle o alinhamento horizontal e vertical do conteúdo dentro de cada célula para um layout polido.
Estilo de mesa global e efeitos profissionais
Amarre a tabela inteira junto com as configurações globais de design Ative as linhas de Tabela Listrada para uma aparência clássica e fácil de digitalizar e escolha a cor da linha alternada Controle o Tipo, Largura e Cor da Fronteira geral para toda a grade da tabela Defina o Preenchimento de Célula Interna universal para espaçamento consistente Adicione um Tipo de Fundo (cor, gradiente) a todo o contêiner da mesa Esses toques globais garantem que sua mesa pareça um elemento coeso e construído especificamente, não uma coleção de células individuais.
- Listras de zebra: ligue a mesa listrada e escolha uma cor para linhas alternadas para melhorar drasticamente a legibilidade.
- Estilo de borda: defina o tipo de borda, a espessura e a cor das linhas de grade de toda a mesa.
- Design de contêiner: adicione um plano de fundo e controle o preenchimento e a margem geral da tabela.
- Espaçamento consistente: Aplique o preenchimento global de células internas para garantir um espaçamento uniforme e confortável em todas as células.
Perguntas frequentes para tabela dinâmica
Posso conectar esta tabela aos meus tipos de postagem personalizados ou campos personalizados avançados (ACF)?
Sim, você pode! através do recurso Tags dinâmicas disponível no seletor de conteúdo de células do corpo Ao editar uma célula, clique no ícone do banco de dados para abrir o painel de tags dinâmicas Você pode então selecionar entre fontes como “Post Title,”Custom Fields,” “ACF Field,” e muito mais para preencher a tabela com dados ao vivo de suas postagens, produtos ou qualquer tipo de postagem personalizado.
A tabela responde em dispositivos móveis?
Absolutamente. a tabela foi projetada para ser responsiva Em telas muito pequenas, você pode querer ativar um contêiner de rolagem horizontal no Elementor ou simplificar o número de colunas O estilo (padding, tamanhos de fonte) se adaptará, e você pode ajustar as configurações especificamente para visualização móvel usando o modo de edição responsiva do Elementor.
Posso criar uma tabela de preços com uma coluna "destacada" usando este elemento?
Definitivamente. Você criaria uma coluna para cada nível de precificação Para destacar uma coluna (como o plano “Popular”), você pode usar o recurso Column Span em uma célula de cabeçalho para um emblema e, em seguida, aplicar uma cor de fundo diferente a todas as células dessa coluna específica adicionando uma classe CSS personalizada ou usando opções individuais de estilo de célula, se disponíveis em configurações avançadas.
O que acontece se EU adicionar um texto muito longo em uma célula?
Você controla o comportamento Você pode definir uma Largura Personalizada para a coluna controlar a expansão O texto irá envolver dentro da célula com base em suas configurações de Tipografia e Preenchimento Para conteúdo longo, certifique-se de ter altura de linha adequada (controlada por preenchimento vertical) para manter a legibilidade.
Como isso se compara a apenas usar um widget HTML ou um plugin de tabela?
Este elemento dá-lhe o controle de design visual dentro Elementor Ao contrário de um widget HTML básico, você não precisa escrever qualquer código para estilo bordas, cores, ou alinhamento Em comparação com muitos plugins de tabela, ele se integra perfeitamente com fluxo de trabalho e sistema de estilo do Elementor, oferecendo uma experiência de design mais unificada e eficiente sem inchar seu site com outro plugin autônomo.
Posso classificar ou filtrar os dados da tabela dinamicamente?
Este elemento é principalmente para tabelas de exibição estáticas ou preenchidas dinamicamente Ele não inclui funções integradas de classificação, filtragem ou pesquisa front-end, como um plugin de tabela de dados faria Para esses recursos interativos avançados, você precisaria de uma solução dedicada Este elemento é perfeito para apresentar informações fixas, como preços, especificações ou cronogramas em um formato lindamente projetado.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
