O bloco Lista de Preços permite criar uma lista visualmente atraente de itens acompanhados de descrições e preços. Seja para exibir o cardápio de um restaurante, pacotes de serviços ou ofertas de produtos, este bloco oferece uma maneira flexível e polida de apresentar seus itens.
Cada item da lista pode incluir um título, descrição, preço, preço com desconto opcional, imagem e um link. Você pode controlar o layout geral, a posição da imagem, o alinhamento do preço e escolher entre modelos pré-projetados para começar rapidamente.
Adicionando o Bloco Lista de Preços às Suas Páginas
Siga estas etapas para adicionar um bloco Lista de Preços à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Lista de Preços na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionar, clique no bloco Lista de Preços para abrir suas configurações. A aba Conteúdo é organizada em três seções: Itens da Lista de Preços, Layout e Área da Imagem.
Itens da Lista de Preços:
- Lista de itens: Cada item da lista de preços aparece como uma linha arrastável. Arraste os itens para reordená-los. Passe o mouse sobre um item para revelar os botões de duplicar e excluir. Clique no título de um item para expandir suas configurações individuais.
- Título: Insira o nome do item como ele aparecerá na lista.
- Descrição: Insira uma descrição para o item. Suporta formatação básica de texto rico, incluindo negrito, itálico, sublinhado e links.
- Preço: Insira o preço exibido para o item (por exemplo, R$ 20).
- Oferecendo Desconto?: Ative para mostrar um preço com desconto ao lado do original. Quando ativado, insira o campo Preço Real — este se torna o preço original riscado, enquanto o campo Preço mostra o valor com desconto.
- Imagem: Envie ou selecione uma imagem para exibir ao lado deste item, ou insira um URL de imagem diretamente no campo URL da Imagem.
- Texto Alternativo: Insira um texto alternativo descritivo para a imagem do item para acessibilidade e SEO.
- Link: Insira um URL para tornar este item clicável. Funciona em conjunto com a configuração Caixa de Link Completo na seção Layout.
- Adicionar Novo Item: Clique no botão na parte inferior da lista de itens para adicionar uma nova entrada de lista de preços.
Layout:
- Posição da Imagem: Defina onde as imagens dos itens aparecem em relação ao conteúdo de texto — Superior, Esquerda, Direita ou Nenhuma (sem imagem exibida).
- Posição do Preço: Escolha onde o preço aparece — Direita do Título (o preço aparece na mesma linha do título, separado pela linha separadora de título-preço) ou Abaixo do Título e Descrição (o preço aparece após o texto da descrição). Observação: esta opção não está disponível quando a Posição da Imagem está definida como Superior.
- Separador de Título e Preço: Escolha o estilo da linha divisória entre o título do item e o preço quando a Posição do Preço estiver definida como Direita do Título — Sólida, Pontilhada, Tracejada ou Nenhuma.
- Alinhamento Geral: Defina o alinhamento horizontal de todos os itens — Esquerda, Centro ou Direita.
- Alinhamento Vertical: Defina como a imagem e o conteúdo de texto se alinham verticalmente dentro de cada linha — Superior, Centralizado ou Inferior. Disponível quando a Posição da Imagem não está definida como Superior.
- Caixa de Link Completa: Ative para tornar a linha inteira do item clicável usando o URL do Link definido para cada item, em vez de apenas o título do item.
Área da Imagem:
- Formato: Escolha o formato aplicado a todas as imagens dos itens — Padrão (quadrado), Arredondado (leve arredondamento), Círculo (totalmente circular) ou Personalizado (defina seu próprio raio de borda por canto).
- Largura: Defina a largura da área da imagem de 1 a 300px.
- Raio da Borda da Imagem: Quando o Formato estiver definido como Personalizado, defina o raio do canto individualmente para cada canto (Superior Esquerdo, Superior Direito, Inferior Direito, Inferior Esquerdo).
Passo 2a: Escolha um Estilo de Modelo
Na aba Modelos, você pode selecionar modelos de layout pré-projetados para configurar rapidamente a aparência do seu Lista de Preços.
- Modelos disponíveis: Escolha entre 3 modelos — Modelo de Layout Esquerdo (imagem à esquerda), Modelo de Layout Direito (imagem à direita) e Modelo Sem Imagem (apenas texto e preço, sem imagens). Clicar em um modelo aplica instantaneamente suas configurações de layout e espaçamento.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode ajustar a tipografia, cores, bordas e fundo do seu bloco de Lista de Preços.
Estilos:
- Tipografia do Título: Defina a família da fonte, tamanho, peso e estilo para todos os títulos dos itens.
- Tipografia da Descrição: Defina a tipografia para todo o texto da descrição dos itens.
- Tipografia do Preço: Defina a tipografia para todo o texto do preço dos itens.
- Cor do Título: Defina a cor do texto do título do item.
- Cor da Descrição: Defina a cor do texto da descrição do item.
- Cor do Preço: Defina a cor do texto do preço do item.
- Cor do Desconto: Defina a cor do preço original riscado exibido quando um desconto é ativado em um item.
- Sombra do Texto: Adicione um efeito de sombra ao texto — escolha entre Nenhuma, Fio de Cabelo, Pequena, Média, Grande, X Grande ou 2X Grande.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Lista de Preços (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o bloco e os elementos ao redor na página.
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de Lista de Preços (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o conteúdo da lista e as bordas do bloco.
Borda:
- Estilo da Borda: Defina o estilo da borda do bloco — Sólida, Pontilhada ou Tracejada.
- Cor da Borda: Defina a cor da borda do bloco.
- Largura da Borda: Defina a espessura da borda por lado (Superior, Direita, Inferior, Esquerda).
- Raio da Borda: Defina o arredondamento dos cantos do bloco.
Fundo:
- Cor de Fundo: Defina uma cor de fundo sólida para todo o bloco de Lista de Preços.
- Imagem de Fundo: Envie ou selecione uma imagem de fundo para o bloco, com opções de posição, tamanho e comportamento de repetição.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Lista de Preços. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação de JavaScript.
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor.
Visibilidade do Dispositivo:
- Ocultar em Desktop: Oculte o bloco de Lista de Preços em telas de desktop.
- Ocultar em Tablet: Oculte o bloco de Lista de Preços em dispositivos tablet.
- Ocultar em Celular: Oculte o bloco de Lista de Preços em dispositivos móveis.
Etapa 4: Salve Suas Alterações
Depois de configurar o bloco de Lista de Preços e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Lista de Preços à sua página! Use-o para criar listagens atraentes e informativas que facilitam aos visitantes a navegação em suas ofertas, a comparação de preços e a tomada de ação. Experimente diferentes layouts, formatos de imagem e estilos de modelo para criar uma lista de preços que se adapte perfeitamente à sua marca.