Como já dissemos várias vezes em muitas de nossas publicações no blog, Tableberg é um plug-in versátil. Não se trata apenas de um plug-in de criação de tabelas; você também pode usá-lo para projetos de web design multiuso. Por exemplo, caixas de recursos, seções de chamada para ação, infográficos, processos passo a passo e muito mais.
Nesta postagem de tutorial, mostraremos como mostrar as etapas do processo no WordPress para que você possa apresentar guias passo a passo aos seus visitantes da Web. Comece agora!
- Etapa 01: Adicionar o bloco Tableberg ao Editor
- Etapa 02: Definir cor de fundo para linhas individuais
- Etapa 03: Liste os números das etapas do processo
- Etapa 04: Escreva os títulos das etapas e suas descrições
- Etapa 05: Adicionar imagens às respectivas células
- Etapa 06: Adicione suas informações de contato
- Etapa 07: Personalizar a borda da tabela
- Etapa 08: Visualizar as etapas do processo
- Conclusão
Etapa 01: Adicionar o bloco Tableberg ao Editor
O plug-in Tableberg adiciona um bloco chamado Tableberg à biblioteca de blocos. Adicione-o ao editor clicando no botão ícone de mais (+).
Defina o número de linhas e colunas que você precisa para mostrar o processo. Para este tutorial, vamos definir 3*9 para colunas e linhas.
A tabela está pronta. Em seguida, adicionaremos conteúdo às suas linhas e colunas para mostrar as etapas do processo.
Etapa 02: Definir cor de fundo para linhas individuais
O Tableberg permite que você defina a cor da linha individualmente. Para fazer isso, selecionar uma linha e vá para o guia estilos. Em seguida, clique em [PRO] Cor de fundo da linha. Espero que você possa fazer o resto.
Você pode ver que definimos cores diferentes para as linhas individualmente. Como a coloração e a estilização de todos os outros elementos dependerão do plano de fundo, definimos as cores das linhas com antecedência.
Etapa 03: Liste os números das etapas do processo
Liste os números das etapas que você cobrirá no processo. Faça a texto em negrito, alinhá-los de forma centralizada, definir a cor do textoe aumentar seu tamanho.
Etapa 04: Escreva os títulos das etapas e suas descrições
Agora, comece a escrever os títulos e as descrições das etapas em cada coluna. Você pode usar dois blocos de parágrafo, um para o título e outro para a descrição. Em seguida, defina a cor do texto como branco.
Você pode aumentar um pouco o tamanho do texto do título em relação ao texto da descrição para facilitar a distinção entre eles.
Etapa 05: Adicionar imagens às respectivas células
A última coluna é reservada para adicionar imagens. Vamos adicionar imagens às células da coluna respectiva às linhas da tabela.
Portanto, adicione o bloco de imagem clicando no botão ícone de mais (+) para a respectiva célula. É possível carregar imagens, seja da unidade local ou da biblioteca de mídia.
Você pode ver que adicionamos uma imagem à célula. Você pode aumentar o tamanho da imagem arrastando o ícone circular e mantendo-o pressionado simultaneamente.
Da mesma forma, complete a adição de imagens a todas as outras células da última coluna, mantendo-as relevantes para o conteúdo.
Etapa 06: Adicione suas informações de contato
Da mesma forma, usando o bloco de parágrafos, adicione informações de contato para que os visitantes e usuários possam entrar em contato com você para obter ajuda.
Agora, adicione o Bloco de lista com estilo para a última linha da tabela.
Selecione um ícone que represente o site. Ao lado do ícone, escreva o endereço de seu site.
Etapa 07: Personalizar a borda da tabela
O Tableberg permite remover, colorir e modificar a largura da borda interna e externa da tabela. Ao configurar essas opções adequadamente, você pode embelezar ainda mais sua tabela.
Ir para o Guia Estilos. Role a guia para baixo e chegue à seção Seção de fronteira. No tutorial de hoje, removemos as bordas externas e das colunas, exceto a borda da linha. Definimos a cor branca e a largura de 1 px para as bordas da linha.
Etapa 08: Visualizar as etapas do processo
Acesse a página de visualização. Veja se seu design aparece perfeitamente. Exibimos a maior parte da imagem que pode ser vista na tela abaixo.
Conclusão
O Tableberg é um plug-in de criação de tabelas versátil, interessante e promissor. Além de tabelas, é possível criar várias seções da Web incríveis com o plug-in. Por exemplo, você pode explorar como adicionar caixas de recursos no WordPress.
Faremos mais postagens no blog mostrando coisas e designs mais extraordinários que você pode criar com o plug-in. Portanto, fique conosco e continue explorando nossos blogs para aumentar sua base de conhecimento.
