Como usar TablePress com elementor (Widget + Shortcode)

Principais conclusões

• TablePress funciona com Elementor de duas maneiras: um widget chamado TablePress table que TablePress 3.4 adiciona ao painel Elementor e o shortcode [tabela id=1 /] colocado no widget Shortcode.
• O widget de tabela TablePress no Elementor possui um menu suspenso Tabela e um campo de parâmetros de configuração e não possui guia Estilo.
• TablePress ativa a classificação, pesquisa e paginação de visitantes por padrão, com 10 linhas por página.
• A rolagem horizontal está desativada por padrão no TablePress, portanto, uma tabela de cinco colunas transborda em um telefone de 390 px até que você marque nas configurações da tabela.
• Para uma pequena tabela que deve ser editada e estilizada dentro do Elementor, um widget de tabela como Master Addons Dynamic Table é menos trabalhoso que o TablePress.

TablePress e Elementor trabalham juntos sem qualquer plugin de ponte Você constrói a tabela no TablePress, em seguida, colocá-lo em uma página Elementor com o widget de tabela TablePress ou com um shortcode A tabela mantém a sua classificação, pesquisa e paginação.

Este guia abrange ambos os métodos, estilo e a configuração que corrige tabelas largas em telefones Também diz quando um widget de mesa simples é a melhor escolha Tudo aqui foi testado com TablePress 3.4 e Elementor 4.3.

Passo 1: Crie ou importe a tabela no TablePress

A tabela em si é feita fora do Elementor, nas telas TablePress no painel do WordPress.

1. Instalar e ativar MesaPress dos Plugins, Adicionar Novo.
2. Aberto MesaPress no menu do painel.
3. Para digitar uma tabela, clique em Adicionar Novo, insira um nome, defina o número de linhas e colunas e preencha as células.
4. Para trazer uma planilha, clique em Importar, escolha Envio de arquivo, selecione o arquivo, mantenha Adicionar como nova tabela e clique Importar.
5. Observe o ID da tabela A primeira tabela é o ID 1.

TablePress importa arquivos Excel, CSV, HTML e JSON Nós importamos um CSV de seis linhas de taxas de envio, e chegou com a primeira linha já definida como o cabeçalho.

Passo 2: Adicione-o com o widget de tabela TablePress

TablePress registra seu próprio widget Elementor, portanto este método não precisa de shortcode.

1. Edite sua página com Elementor.
2. Pesquise no painel de widgets MesaPress table.
3. Arraste o widget para um contêiner.
4. Abrir o Tabela desligue e escolha sua mesa As tabelas são listadas por ID e nome.
5. Publicar a página.

O Avançado a seção suspensa contém um campo, Parâmetros de configuração. Ele aceita os mesmos parâmetros que você colocaria em um shortcode, para casos em que uma página deveria mostrar a tabela com opções diferentes.

Ou adicione-o com um shortcode

O shortcode faz o mesmo trabalho e funciona em qualquer lugar que os shortcodes façam.

1. Elementador de arrasto Código curto widget em um contêiner.
2. Tipo [table id=1 /], substituindo 1 pelo ID da sua mesa.
3. Clique Aplicar para carregar a antevisão.

Em nossa página de teste o widget e o shortcode imprimiram a mesma tabela Use o widget quando puder, porque escolher a partir de um dropdown evita erros de digitação no ID.

Classificação, pesquisa e paginação

Estes são ligados para cada nova tabela Você os altera por tabela, na caixa nomeada Recursos da tabela para visitantes do site na tela de edição da mesa.

Para uma tabela com seis linhas, pesquisa e paginação são desordem Desmarque-os e a tabela mostra como uma grade simples.

Estilizando uma tabela TablePress no Elementor

O widget de mesa TablePress não possui controles de estilo de mesa no Elementor, portanto a aparência é definida em três outros lugares.

• Opções Tabela na tela de edição da mesa: quais linhas são o cabeçalho e o rodapé, Cores alternadas da linha, Destaque do Row Hover, e um Aulas extras de CSS campo.
• Css personalizado para cores, fontes e bordas TablePress dá a cada tabela uma classe com base em seu ID, para que você possa segmentar uma tabela.
• A guia Avançado do widget em Elementor para margem, preenchimento e largura ao redor da mesa.

Um pequeno exemplo CSS que refaz o cabeçalho da tabela 1:

.tablepress-id-1 thead th {
  background: #101223;
  color: #ffffff;
}
.tablepress-id-1 tbody td {
  padding: 12px 16px;
}

Cole-o em Aparência, Personalize, CSS Adicional ou em qualquer caixa CSS personalizada que sua configuração tenha Elementor Pro tem um por elemento, e os Complementos Mestres Extensão CSS personalizada adiciona um também.

Conserte a mesa nos telefones

Em um telefone de 390 px de largura nossa tabela de cinco colunas passou pela borda direita da tela, e a última coluna não pôde ser lida.

1. Edite a tabela em TablePress.
2. Sob Recursos da tabela para visitantes do site, tique-taque Rolagem Horizontal.
3. Clique Salvar alterações e recarregue a página do seu telefone.

O TablePress também vende um recurso de Mesas Responsivas em seu plano Pro (US$ 89 por ano quando verificamos), com modos que empilham ou colapsam linhas em telas pequenas Outras maneiras de lidar com mesas largas estão em nosso guia para tabelas responsivas no Elementor.

Quando um widget de mesa é a melhor escolha

TablePress é construído para dados Para uma pequena tabela que realmente faz parte do design da página, ele adiciona etapas: uma segunda tela de administrador, CSS em outro lugar e um plugin para manter atualizado.

Só precisa de uma mesa pequena? O Widget de tabela dinâmica constrói-o no painel Elementor, com uma guia Estilo e linhas que empilham em telefones.

Tabela Dinâmica não tem classificação, pesquisa ou importação, então use TablePress para dados e o widget para tabelas de layout, como um horário ou uma folha de especificações As outras opções são comparadas em nosso Complemento de plug-ins de tabela Elementor.

Perguntas frequentes

Pensamentos finais

TablePress e Elementor se encaixam bem para tabelas de dados: importe o arquivo, solte o widget da tabela TablePress e lembre-se de ativar a rolagem horizontal para telefones O estilo leva um pouco de CSS porque o widget não tem guia Estilo.

Para tabelas curtas que devem parecer parte da página, Tabela Dinâmica mantém as células e o estilo dentro do Elementor.

Leitura relacionada

• Como criar uma tabela no Elementor (4 maneiras)
• Melhores plugins de índice para WordPress