Como criar uma lista de preços em WordPress com Elementor

Uma lista de preços é um documento ou tabela que detalha os custos de produtos, serviços ou pacotes oferecidos por uma empresa. Fornece aos clientes uma compreensão clara dos preços e pode incluir vários níveis com custos correspondentes. Ao ajudar os potenciais compradores a decidir se desejam comprar, reduz as consultas relacionadas a preços à equipe de suporte e melhora a experiência geral do usuário.

Uma lista de preços abrangente é essencial para qualquer site que venda produtos ou serviços hoje. Por exemplo, comércio eletrônico, restaurantes, empresas de software, agências de serviços, etc. Neste artigo, abordaremos um guia claro sobre como criar uma lista de preços em WordPress com Elementor.

Também descreveremos os principais recursos que uma lista de preços inteligente deve ter para aumentar as conversões. Então, vamos direto ao post sem mais delongas.

Principais recursos de uma lista de preços de alta conversão

Existem vários recursos principais de um preço para garantir que ele tenha alta conversão. Caso contrário, pode não ser possível obter conversões máximas, por mais bonito que seja esteticamente o design. Portanto, antes de mergulhar no tutorial, vamos dar uma olhada rápida nos principais recursos de uma lista de preços de alta conversão.

• Clareza e Simplicidade

Uma ótima lista de preços é fácil de ler e entender. Organize-o com títulos claros, layout lógico e descrições concisas. Isso permitirá que os clientes encontrem rapidamente o que procuram.

• Valor destacado

Em vez de apenas listar os preços, destaque o valor dos seus produtos ou serviços. Descreva os benefícios que explicam por que os clientes deveriam gastar em seus produtos.

• Marca Consistente

Certifique-se de que o design, as fontes e as cores da lista de preços estejam perfeitamente alinhados com a marca geral do site. Isso pode reforçar a confiança e o profissionalismo.

• Transparência

Explique claramente se há algum custo adicional, como impostos ou taxas de envio. Cobranças ocultas podem levar ao abandono do carrinho e prejudicar a confiança.

• Elementos visuais cativantes

Adicione elementos como divisórias, bordas e formas que tornem a lista de preços visualmente atraente. Mas também certifique-se de não sobrecarregar a lista de preços com gráficos desnecessários que distraem os usuários.

• Design compatível com dispositivos móveis

Como muitos usuários hoje navegam em sites a partir de seus telefones, sua lista de preços deve ser responsiva. Certifique-se de que tenha a mesma aparência e funcione perfeitamente em dispositivos móveis.

Como criar uma lista de preços em WordPress com Elementor

Criar listas de preços do zero no Elementor pode ser demorado. HappyAddons é um complemento poderoso para o Elementor. Ele oferece um widget de menu de preços rico em recursos, por meio do qual você pode criar facilmente listas de preços impressionantes em seu site WordPress.

Nesta seção do artigo, explicaremos como criar uma lista de preços cativante no WordPress usando este widget Elementor. Mas para isso, certifique-se de que os seguintes plugins estejam instalados em seu site.

• Elementor
• HappyAddons
• HappyAddons Pro

Depois de instalados e ativados em seu site, comece a seguir o tutorial explicado abaixo. Criaremos algo como a imagem anexada abaixo.

Comece!

Passo 01: Crie um Layout com Coluna(s)

Usando a estrutura de colunas adequada, crie um layout para a lista de preços. Clique no ícone de adição (+) na tela. Escolha uma estrutura de coluna de sua preferência. Em seguida, personalize sua largura.

Etapa 02: arraste e solte o widget do menu de preços no Elementor Canvas

Encontre o widget Menu Preço . Arraste e solte-o na estrutura de colunas que você criou há pouco.

Uma lista de preços padrão aparecerá com dois itens.

Etapa 03: Selecione um estilo de lista de preços

Expanda a seção Predefinições na guia Conteúdo . Você verá dez estilos de lista de preços prontos. Clique no estilo que você gosta. Você verá que o design da sua lista de preços padrão na tela mudou.

Assim, explore todos os estilos e fique com aquele que você finalmente acha perfeito.

Para este tutorial, selecionaremos o Design 4 .

Passo 04: Adicione mais itens à lista de preços

Para adicionar mais itens à lista de preços, expanda a seção Menu Preço . Em seguida, clique no botão + Adicionar item .

# Adicione informações do produto

Isso adicionará uma nova guia na seção Menu Preço. Preencha-o com o nome do produto, descrição, preço e informações essenciais. Você verá as novas informações adicionadas à tela em tempo real.

Elementor agora é alimentado por IA. Assim, você pode usar seu recurso de IA para selecionar títulos, descrições de produtos maravilhosos e muito mais para cativar os usuários. Aqui está um guia sobre como usar o Elementor AI.

# Adicionar preço do produto

Role a guia para baixo e você verá a opção de adicionar o preço do produto. Preencha ambos os campos (preço antigo e preço atual) ou deixe o campo de preço antigo intacto. Mas preencher o antigo campo de preço pode agregar valor de marketing.

# Adicionar imagem do produto (opcional)

O widget do menu de preços permite adicionar uma imagem para cada item. Ao clicar nesta opção de imagem, você pode fazer upload e adicionar uma imagem adequada para apresentar graficamente seu produto/item na lista.

Você pode ver que adicionamos uma imagem ao lado do item do widget do menu de preços usando a opção.

Agora, expanda as outras guias e adicione imagens adequadas para seus itens de produto. Você pode ver que adicionamos imagens às outras guias.

Da mesma forma, você pode adicionar quantos itens quiser à lista de preços.

Etapa 05: definir as configurações do widget do menu de preços

Expanda a seção Configurações . Você terá opções para personalizar a tag HTML do título, resolução da imagem, posição da imagem, alinhamento do conteúdo, separador de preço do título e contador de itens.

Dê uma olhada no que você pode fazer com essas opções na lista de preços.

• Tag HTML de título – Defina o tipo de título (h1, h2, h3, h4, h5 ou h6) para o título do produto.
• Resolução de imagem – Exiba imagens de produtos como miniaturas, médias, grandes ou qualquer outra coisa.
• Posição da imagem – Mostra as imagens à direita, esquerda ou superior.
• Posição de Preço – Permite colocar o preço do produto ao lado dos títulos ou na parte inferior.
• Alinhamento de conteúdo – Organize seu conteúdo de texto à esquerda, à direita ou centralmente.
• Separador de preço de título – Adicione um formato de separador entre os títulos e preços dos produtos.
• Contador de itens – exibe o valor numérico da lista para cada item da lista.

Como adicionar capturas de tela para cada opção tornaria o tutorial muito longo, tudo é explicado em um breve videoclipe abaixo.

Etapa 06: Explore as outras seções na guia Conteúdo

A guia Conteúdo tem várias outras opções. Mas não achamos que haja necessidade de explorá-los mais a fundo, porque a maioria deles é muito simples e você pode entendê-los sozinho.

Entre eles, o Happy Mouse Cursor é bastante especial. Ele permite que você exiba um cursor personalizado enquanto passa o mouse sobre um elemento específico da web. Já cobrimos uma postagem detalhada no blog sobre esse recurso.

Aqui está um guia detalhado sobre como adicionar efeitos de foco do cursor no Elementor.

Etapa 07: estilizar o widget do menu de preços

Vá para a guia Estilos . Você terá várias opções na guia para personalizar o espaçamento entre os itens, título, preço, imagens e descrição. Confira como fazer.

# Personalize o espaçamento dos itens

Expanda a seção Caixa de menu . As duas primeiras opções são Espaçamento de itens . Refere-se à distância entre os itens da lista.

Por padrão, seu valor é 20. Reduzimos para 10 para um melhor design da lista.

A próxima opção é Padding . Ele permite ajustar os espaços entre os elementos em todos os lados (superior, direito, inferior e esquerdo) do widget. Se não for necessário, você pode deixar a opção de preenchimento como está.

# Adicionar cor de fundo

Você pode adicionar cor de fundo à seção da lista de preços de duas maneiras – fundo da seção e fundo do widget . Você deve conhecer os dois lados para poder embelezar sutilmente a seção.

Para adicionar uma cor ao plano de fundo da seção , selecione a seção inteira clicando no ícone de seis pontos . Em seguida, expanda a seção Plano de fundo na guia Estilos .

Clique no tipo de plano de fundo para ativar a opção de cor. Por fim, selecione uma cor de sua preferência para a seção.

Para adicionar uma cor de fundo ao widget , selecione o widget clicando no ícone de lápis nele.

Em seguida, vá para a guia Estilos . Clique no ícone do pincel próximo ao tipo de plano de fundo na caixa de menu . Por fim, escolha uma cor que você adora para a lista de preços.

# Estilize os títulos da lista de preços

Expanda a seção Título . Você terá opções para personalizar a tipografia do título, cor, cor de foco, margem, tipo de borda, espaço, sombra de caixa e separador .

Esta postagem do blog será muito longa se explicarmos cada opção de personalização. Então, neste pequeno videoclipe explicamos como você pode estilizar os títulos da lista de preços.

# Estilize os preços

Expandir a seção Preço permitirá que você personalize a cor e a tipografia do preço do widget (preços antigos e atuais).

# Estilizar imagens

Da mesma forma, expanda a seção Imagem . Você pode personalizar a largura, altura, espaço, sombra da caixa, tipo de borda, borda com, cor da borda e raio da borda .

# Estilize a descrição

Por último, você precisa estilizar a descrição do item na lista de preços. Para fazer isso, expanda a seção Descrição . Personalize a tipografia e a cor .

Por padrão, a descrição é esbranquiçada. Mas agora você pode ver na imagem abaixo que a tornamos preta.

Assim, você pode estilizar com precisão todo o widget do menu de preços, ou seja, sua lista de preços.

Etapa 08: Torne a lista de preços responsiva a dispositivos móveis

Como uma porcentagem considerável de visitantes de qualquer site vem de dispositivos móveis, você deve otimizar perfeitamente a lista de preços para tamanhos de tela de celulares e tablets para não perder nenhum tráfego e leads em potencial.

Clique na opção Modo responsivo na parte inferior do painel Elementor. Você verá as diferentes opções de tamanho na parte superior da tela do Elementor.

Ao clicar nessas opções, você pode alternar para diferentes tamanhos de tela para verificar como a lista de preços é exibida nelas.

Se você deseja personalizar a lista de preços para a tela de um dispositivo específico, comece selecionando o tamanho de tela desejado. Em seguida, faça as customizações necessárias. Suas modificações serão salvas exclusivamente para essa tela.

Nota: Não exclua nenhum elemento. Porque se você excluir um elemento, ele será excluído de todas as telas, não apenas de um dispositivo específico.

Etapa 09: Limite a largura do layout da lista de preços (opcional)

Por padrão, qualquer widget Elementor é exibido em toda a tela, incluindo o widget Menu Preço. Mas para uma melhor apresentação, você pode diminuir sua largura.

Para fazer isso, vá para a guia Avançado . Na seção Layout, vá para a opção Margem . Defina valores nas caixas direita e esquerda. Você verá as mudanças imediatamente.

Assim, faça o mesmo para outros tamanhos de tela, conforme mostrado na etapa acima.

Etapa 10: visualize a lista de preços no frontend

Vá para a página de visualização. Verifique se a lista de preços fica bem em todos os tamanhos de tela alterando a largura do seu navegador. Você pode ver que parece bastante no nosso videoclipe anexado abaixo.

Você pode publicar a lista de preços assim que todas as configurações e personalizações forem concluídas.

Conclusão

Portanto, criar uma lista de preços em WordPress com Elementor é uma forma bastante simples e fácil de exibir seus produtos e ofertas em um formato limpo e organizado. Porém, antes de terminarmos, queremos esclarecer uma coisa que muitos usuários ainda ficam confusos – as diferenças entre a tabela de preços e a tabela de preços.

Embora as tabelas de preços sejam projetadas para mostrar ou comparar diferentes pacotes de preços, as listas de preços se concentram em apresentar itens individuais com seus respectivos preços. Você pode explorar os tutoriais a seguir para aprender mais sobre como criar tabelas usando Elementor.

• Como criar uma tabela de preços no Elementor
• Como criar uma tabela de comparação com Elementor