O bloco Lista de Preços permite criar uma lista visualmente atraente de itens acompanhada de descrições e preços. Seja para apresentar o cardápio de um restaurante, pacotes de serviços ou ofertas de produtos, esse bloco oferece uma maneira flexível e sofisticada 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é-concebidos para começar rapidamente.
Adicionando o bloco Lista de preços às suas páginas
Siga estas etapas para adicionar um bloco de Lista de Preços à sua página SeedProd:
Passo 1: Adicione 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
Depois de adicioná-lo, clique no bloco Lista de preços para abrir suas configurações. A guia Conteúdo está organizada em três seções: Itens da lista de preços, Layout e Área de imagem.
Itens da lista de preços:
- Lista de itens: cada item da lista de preços aparece como uma linha que pode ser arrastada. 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: Digite o nome do item como ele aparecerá na lista.
- Descrição: Insira uma descrição para o item. Suporta formatação básica de rich text, incluindo negrito, itálico, sublinhado e links.
- Preço: Insira o preço exibido para o item (por exemplo, $20).
- Oferecer desconto?: Ative para mostrar um preço com desconto ao lado do preço original. Quando ativado, insira o campo Preço real — este se tornará o preço original riscado, enquanto o campo Preço mostrará o valor com desconto.
- Imagem: Carregue ou selecione uma imagem para exibir junto com este item ou insira uma URL de imagem diretamente no campo Image Src.
- Texto alternativo: insira um texto alternativo descritivo para a imagem do item para acessibilidade e SEO.
- Link: insira uma 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 à lista de preços.
Layout:
- Posição da imagem: defina onde as imagens dos itens aparecem em relação ao conteúdo do texto — Superior, Esquerda, Direita ou Nenhuma (nenhuma imagem exibida).
- Posição do preço: escolha onde o preço aparece — à direita do título (o preço aparece na mesma linha que o título, separado pela linha separadora do título e do preço) ou abaixo do título e da 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 preço do título: 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 do texto se alinham verticalmente em cada linha — Superior, Central ou Inferior. Disponível quando a posição da imagem não estiver definida como Superior.
- Caixa Link completo: ative para tornar toda a linha 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:
- Forma: escolha a forma aplicada a todas as imagens dos itens — Padrão (quadrado), Arredondado (ligeiramente arredondado), Círculo (totalmente circular) ou Personalizado (defina seu próprio raio de borda por canto).
- Largura: Defina a largura da área da imagem entre 1 e 300 px.
- Raio da borda da imagem: Quando a forma estiver definida como Personalizada, defina o raio do canto individualmente para cada canto (canto superior esquerdo, canto superior direito, canto inferior direito, canto inferior esquerdo).
Etapa 2a: Escolha um estilo de modelo
Na guia Modelos, você pode selecionar modelos de layout pré-concebidos para configurar rapidamente a aparência da sua Lista de Preços.
- Modelos disponíveis: escolha entre três modelos — Modelo com layout à esquerda (imagem à esquerda), Modelo com layout à direita (imagem à direita) e Modelo sem imagem (apenas texto e preço, sem imagens). Ao clicar em um modelo, suas configurações de layout e espaçamento são aplicadas instantaneamente.
Etapa 3: Personalizar o design
Na guia Avançado, você pode ajustar a tipografia, as cores, as bordas e o fundo do seu bloco Lista de preços.
Estilos:
- Tipografia do título: defina a família, o tamanho, a espessura e o estilo da fonte para todos os títulos dos itens.
- Descrição Tipografia: Defina a tipografia para todo o texto da descrição do item.
- Tipografia dos preços: defina a tipografia para todo o texto dos preços dos itens.
- Cor do título: defina a cor do texto do título do item.
- Descrição Cor: 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, Fina, Pequena, Média, Grande, Extra Grande ou 2X Grande.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do bloco Lista de preços (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre o bloco e os elementos ao redor na página.
- Preenchimento: ajuste o espaçamento interno do bloco Lista de preços (superior, direito, inferior, esquerdo). Isso cria um espaço entre o conteúdo da lista e as bordas do bloco.
Fronteira:
- 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, direito, inferior, esquerdo).
- Raio da borda: defina o arredondamento dos cantos do bloco.
Contexto:
- Cor de fundo: defina uma cor de fundo sólida para todo o bloco Lista de preços.
- Imagem de fundo: carregue ou selecione uma imagem de fundo para o bloco, com opções de posição, tamanho e comportamento de repetição.
Atributos:
- CSS ID: Exibe o identificador único gerado automaticamente para o seu bloco Lista de Preços. Este ID é criado automaticamente pelo SeedProd para personalização de estilo ou segmentação 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 na área de trabalho: oculte o bloco Lista de preços nas telas da área de trabalho.
- Ocultar no tablet: oculte o bloco Lista de preços em dispositivos tablet.
- Ocultar no celular: oculte o bloco Lista de preços em dispositivos móveis.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Lista de preços e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Lista de preços à sua página! Use-o para criar listagens atraentes e informativas que facilitem aos visitantes navegar pelas suas ofertas, comparar preços e agir. Experimente diferentes layouts, formatos de imagem e estilos de modelo para criar uma lista de preços que se adapte perfeitamente à sua marca.