Como adicionar imagem de fundo a uma tabela no WordPress (3 etapas fáceis)

Se você estiver procurando uma resposta para a pergunta "como adicionar imagem de fundo a uma tabela no WordPress", não encontrará uma resposta direta. Além disso, não há uma opção direta para adicionar qualquer imagem.

Mas se você for criativo o suficiente, poderá fazer isso facilmente com a ajuda de outros blocos principais fornecidos no WordPress. Hoje, mostrarei a você como adicionar uma imagem de fundo a uma tabela no WordPress em três etapas.

Por que você deseja adicionar uma imagem de fundo a uma tabela no WordPress

A adição de uma imagem de fundo a uma tabela no WordPress pode servir a vários propósitos, dependendo dos seus objetivos de design e do conteúdo que você está apresentando.

Aqui estão alguns motivos comuns pelos quais você pode considerar essa opção:

  • Aprimorar o apelo visual: Uma imagem de fundo pode fazer com que uma tabela simples pareça mais envolvente e visualmente atraente. Ela acrescenta uma camada de criatividade e pode ajudar seu conteúdo a se destacar, especialmente se a tabela fizer parte de uma página de destino ou de uma publicação visualmente rica.
  • Consistência da marca: Se o seu site segue um tema de design ou uma marca específica (cores, padrões ou imagens), uma imagem de fundo na tabela pode ajudar a manter a consistência.
  • Apresentação criativa: As imagens de fundo são úteis para tabelas que exibem conteúdo criativo ou não técnico, como linhas do tempo de eventos, catálogos de produtos ou mostruários de portfólio. Elas podem elevar a tabela de puramente funcional para uma parte integral do design.

Agora, vamos para nossa parte principal.

Como adicionar imagem de fundo a uma tabela no WordPress

No tutorial de hoje, usaremos o Tableberg. Se você não sabe, O Tableberg é um plug-in de tabela somente para o Gutenberg que permite criar tabelas bonitas e responsivas no Gutenberg.

Ele permite que você adicione iimagens, classificações por estrelas, botões, fitas, HTML personalizado, texto, listas estilizadas, etc., para criar uma tabela funcional e dançante no editor de blocos do Gutenberg. Além disso, ele tem recursos avançados, como mesclar e dividir células, definir a altura e a largura das células, cabeçalho fixo etc. Novamente, você pode usar modelos de tabela para começar rapidamente.

Criar mesas bonitas
Com o Block Editor

Etapa 1: Crie um grupo primeiro

Como o bloco Tableberg e Core table do WordPress não permite que você adicione uma imagem de fundo, usaremos o Bloco de grupos e Bloco de cobertura.

Antes de criar uma tabela, crie primeiro um grupo.

Vá até sua postagem e insira o Group Block primeiro. Para inserir o bloco de grupo, clique no ícone "+"Ícone (Adicionar ícone de bloco) no editor (1) e digite "Grupo" na caixa de pesquisa (2). Clique em "Grupo" para inseri-lo no editor(3).

Agora, selecione o primeiro layout.

Pressione o botão Botão Adicionar bloco dentro do bloco Group (1). Tipo "Capa" dentro da caixa de pesquisa (2) e selecionar o Bloco de cobertura (3).

Selecione a opção para fazer upload de sua imagem.

Depois de inserir sua imagem, exclua o bloco de título dentro do bloco de capa.

Etapa 2: Crie sua tabela Tablberg

Agora, criar sua tabela dentro do bloco Cover. Vou clicar no botão "+"Ícone (Adicionar ícone de bloco) no editor (1) e digite "Tableberg" na caixa de pesquisa (2). Agora, vou clicar em "Tableberg" para inseri-lo no editor(3).

Vou inserir um modelo de tabela da Tablberg (1) para começar rapidamente e alterar meus dados de acordo.

Agora, escolherei um da biblioteca de modelos.

Veja a aparência abaixo.

Etapa 3: Personalizar o Cover Block

Agora, você deve personalizar a imagem de capa para que qualquer pessoa possa entender facilmente os dados da sua tabela. Selecione a Cubra o bloco simplesmente clicando fora da tabela. Navegue até a seção Configurações (1) > Block (2) > Styles (3).

Alterar o Opacidade da sobreposição de acordo com suas necessidades (1).

Altere a Margem e o Preenchimento para "Nenhum(1). Embora você possa ver que a margem e o preenchimento estão definidos como nenhum, é preciso fazer isso novamente. Caso contrário, essa imagem permanecerá fora da tabela. (N.B. É opcional se você está de acordo com a etapa anterior.)

A demonstração do plano de fundo da tabela está abaixo.


Considerações finais!

Adicionar uma imagem de fundo a uma tabela no WordPress não é apenas uma questão de estética - trata-se de melhorar a experiência do usuário e manter o site visualmente coeso.

Espero que esta postagem tenha sido útil para você. Agora, adicione um fundo de tabela à sua tabela e combine-o com o design do seu site.

Diga-me o que achou na seção de comentários abaixo. Além disso, não hesite em fazer perguntas relacionadas ao tutorial. Terei prazer em ajudá-lo. Se achar útil, compartilhe esta publicação com seus amigos nas mídias sociais.

Leia mais!



A equipe do Tableberg