Landing Page
Home – Landing Page – Listagem
Manual de Uso: LISTAGEM
A Dobra Listagem é projetada para exibir conteúdos organizados de forma visual e estruturada, permitindo a inclusão de múltiplos itens, com suporte a diferentes layouts e colunas. É ideal para destacar serviços, produtos, benefícios ou qualquer outra informação relevante.
Campos e Funcionalidades
Tipo: Switcher (ativar/desativar).
Descrição: Permite habilitar ou desabilitar a exibição da seção “Listagem”.
Dica de configuração: Ative a seção apenas quando todo o conteúdo estiver configurado adequadamente.
Tipo: Seleção (dropdown).
Descrição: Escolha entre diferentes modelos de layout para a listagem. Os modelos são organizados por número de colunas (2, 3 ou 4) e disposição dos elementos.
Opções disponíveis:
– Modelos com Imagem Superior – Carrossel
– Modelos com Imagem Superior – 2 Colunas
– Modelos com Imagem Superior – 3 Colunas
– Modelos com Imagem Superior – 4 Colunas
– Modelos com Ícone Superior – Carrossel
– Modelos com Ícone Superior – 2 Colunas
– Modelos com Ícone Superior – 3 Colunas
– Modelos com Ícone Superior – 4 Colunas
Dica de configuração: Escolha o modelo de acordo com a quantidade de itens e o design desejado para a seção.
Tipo: Upload de mídia (imagem).
Descrição: Adiciona uma imagem de fundo para a seção.
Dimensões sugeridas: 1920x1280px.
Formato recomendado: WEBP (prioritário), JPG ou PNG.
Dica de configuração: Utilize imagens de alta qualidade e alinhadas à identidade visual da página.
Tipo: Seleção de cor (color picker).
Descrição: Define a cor de fundo principal da seção.
Formato de cor: Código hexadecimal.
Ferramenta recomendada: Para gerar o código hexadecimal, utilize o Image Color Picker.
Tipo: Seleção de cor (color picker).
Descrição: Configura uma cor de fundo complementar ou adicional.
Formato de cor: Código hexadecimal.
Tipo: Seleção de cor (color picker).
Descrição: Define a cor do título principal.
Formato de cor: Código hexadecimal.
Tipo: Seleção de cor (color picker).
Descrição: Configura a cor da descrição principal.
Formato de cor: Código hexadecimal.
Tipo: Campo de texto.
Descrição: Insere o título principal da seção.
Exemplo de uso: “Nossos Serviços”.
Tipo: Editor de texto.
Descrição: Insere um texto descritivo para complementar o título principal.
Dica de configuração: Use este campo para apresentar uma visão geral dos itens listados.
Tipo: Seleção de cor (color picker).
Descrição: Define a cor de fundo da descrição dos itens.
Tipo: Seleção de cor (color picker).
Descrição: Configura a cor de fundo auxiliar para os itens.
Tipo: Seleção de cor (color picker).
Descrição: Define a cor dos títulos dos itens.
Tipo: Seleção de cor (color picker).
Descrição: Configura a cor do texto da descrição dos itens.
Os itens da listagem são configurados como um grupo de repetição, permitindo:
– Adicionar novos itens: Clique em “Adicionar” para incluir novos elementos.
– Copiar um item existente: Economize tempo copiando um item existente e editando suas informações.
– Reordenar itens: Arraste e solte os blocos para reorganizar a ordem dos itens na listagem.
A. Imagem
Tipo: Upload de mídia (imagem).
Descrição: Adiciona uma imagem representativa para o item.
Dimensões sugeridas: 600x600px, 600x400px
Formato recomendado: WEBP, JPG ou PNG.
B. Título
Tipo: Campo de texto.
Descrição: Insere o título do item.
C. Descrição
Tipo: Campo de texto.
Descrição: Adiciona uma descrição complementar ao título do item.
Tipo: Campo de texto.
Descrição: Define o texto exibido no botão de ação.
Exemplo de uso: “Ver Todos” ou “Saiba Mais”.
Tipo: Campo de texto (URL).
Descrição: Configura o link de destino para o botão de ação da seção.
Formato esperado: URL completa ou âncoras internas (ex.: #lista).
Dicas de Configuração
Atenção ao Grupo de Repetição:
– Utilize a função de cópia para agilizar a criação de itens similares.
– Reorganize os itens facilmente arrastando-os para cima ou para baixo.
Harmonia Visual:
– Certifique-se de que as cores do título, descrição e fundos estejam alinhadas com o tema da página.
Escolha do Modelo:
– Use modelos com mais colunas (3 ou 4) para exibir muitos itens de forma compacta.
– Prefira o carrossel se o objetivo for destacar cada item individualmente em rotação.