Você gostaria de adicionar uma grade de preços em Elementor ?
Se você usar o seu site da Web para vender seus serviços ou produtos, é fundamental exibir os planos de preços que você oferece. Elementor, o plug-in de construtor de página do WordPress mais popular, vem com um widget tabela de preços que você pode usar para adicionar sem esforço uma grade de preços a uma página ou modelo. Neste artigo, mostraremos como usar este widget.
Leia também: Como criar uma imagem arredondada no Elementor
O widget Tabela de Preços está disponível apenas em Elementor. Pro Então para poder usar você precisa usar Elementor Pró. Neste artigo, adicionaremos diretamente o widget Tabela de Preços à área de edição.
Existem duas opções para adicionar uma grade de preços a uma página ou modelo do Elementor. Primeiro, você pode usar um modelo de bloco predefinido. Em segundo lugar, você mesmo pode criar a mesa. Do zero.
Adicione a grade de preços de um modelo predefinido
A Elementor tem cerca de 14 designs de blocos de grade de preços para você escolher. Novamente, você precisa usar o Elementor Pro para usar os modelos, pois a grade de preços está disponível apenas no Elementor Pro. Para usar um modelo de bloco de grade de preços, clique no ícone da pasta na caixa de edição para abrir a biblioteca de modelos.
Na biblioteca de modelos que aparece, clique na guia blocos e nas categorias selecione Preços no menu suspenso para filtrar os modelos. Selecione um modelo de sua preferência e clique no botão INSERIR para importá-lo para o editor Elementor.
Você pode então ir para o painel esquerdo para alterar o conteúdo padrão das grades.
Adicionar grade de preços do zero
Se você tiver seu próprio conceito de design para a grade de preços que deseja adicionar, criar as tabelas do zero é uma ótima ideia. Para facilitar o seu trabalho, você pode criar uma mesa. Quando terminar, você pode copiá-lo e personalizar o conteúdo das tabelas duplicadas. Isso vai economizar muito tempo.
Veja também: Como criar uma seção de membro da equipe com Elementor
Comece adicionando uma nova seção e selecione uma estrutura de coluna de acordo com o número de tabelas que você deseja criar e arraste o widget tabela de preços para uma das colunas.
Vá para o painel esquerdo para alterar o conteúdo padrão. Você pode editar o conteúdo na guia Contente. Existem 5 blocos de parâmetros que você pode abrir para editar: Cabeçalho, Preços, Recursos, Rodapé e Faixa de Opções.
- cabeçalho
Você pode abrir este bloco para modificar o conteúdo do cabeçalho da tabela. Você pode mudar o título imediatamente Título e a descrição imediatamente Descrição. O ideal é usar a seção de cabeçalho da tabela para adicionar o nome do pacote.
- Preços
Você pode abrir este bloco para alterar o preço do pacote. Você pode ativar a opção Venda se o pacote estiver à venda. Se você tem conhecimento sobre os campos personalizados do WordPress, também pode adicionar preços dinâmicos clicando no ícone do banco de dados dados no campo Preço.
- Funcionalidades
Você pode abrir este bloco para adicionar os recursos que deseja oferecer no pacote. Por padrão, você tem três recursos. Você pode abrir uma entidade para editá-la. Para adicionar um novo recurso, você pode apenas clicar no botão ADICIONE UM ELEMENTO.
Leia também: 7 maneiras criativas de usar o Elementor Popup Builder
Por padrão, cada recurso possui um ícone de lista de verificação. Para alterar o ícone, basta clicar no ícone. Para removê-lo, basta clicar no ícone da lixeira.
- Rodapé
O rodapé é a seção onde você pode adicionar um link e um botão de call to action. Você também pode adicionar informações adicionais a esta seção.
- fita
Você pode adicionar uma tag de venda algo como "VENDA", "ESPECIAL", "OFERTA QUENTE" à sua mesa. Se você quiser adicionar uma tag de venda, ou qualquer tag que você quiser, você pode abrir o bloco Ruban e ative a opção Exibição. Você pode adicionar sua etiqueta favorita no campo Título e definir a posição na opção Posição.
Personalização de grade
Para personalizar os componentes do rótulo, você pode alternar para a guia estilo no painel esquerdo. Você também verá cinco blocos de configuração nesta guia.
- cabeçalho : Você pode abrir este bloco para personalizar a seção de cabeçalho da tabela. Você pode definir coisas como fundo do cabeçalho, tipografia (família da fonte, tamanho da fonte, estilo da fonte) do título e da descrição, bem como a cor do texto do título e da descrição.
- Preços: Você pode abrir este bloco para personalizar a seção de preços. Você pode definir coisas como cor de fundo, tipografia, cor do texto, símbolo de moeda e posição, etc.
- Funcionalidades : Você pode abrir este bloco para personalizar a seção de entidades. Você pode definir coisas como plano de fundo, cor do texto, tipografia, alinhamento, separador ativado / desativado, etc.
- Rodapé : Você pode abrir este bloco para personalizar a seção de rodapé. Você pode definir elementos como o fundo, o tamanho do botão, a cor do botão, a tipografia do texto do botão, etc.
- Fita: Este bloco só aparecerá se você ativar a opção fita sob a guia Contente. Você pode abrir este bloco para personalizar a faixa de opções, como cor, cor do texto e tipografia.
Depois de concluir a primeira tabela, você pode copiá-la para outras colunas e, em seguida, substituir o conteúdo, dependendo da funcionalidade que deseja fornecer em cada tabela / plano. Para copiar a tabela, clique com o botão direito na alça do widget e selecione Copiar, em seguida, clique com o botão direito na coluna em que deseja colá-la e selecione colar.
No final
O Elementor Pro vem com um widget Tabela de preços para permitir que você adicione facilmente uma grade de preços a uma página ou modelo. Alguns complementos - como Complementos felizes, Complementos essenciais e JandElements - também tem os mesmos widgets com opções de estilo diferentes.
Obtenha o Elementor Pro agora !!!
Conclusão
Aqui está ! É isso neste artigo que mostra como adicionar uma grade de preços no Elementor. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
