Landing Page

HomeLanding Page – Portfólio

Manual de Uso: PORTFÓLIO

A Dobra Portfólio é uma seção versátil projetada para exibir conteúdos organizados, como trabalhos realizados, produtos, serviços, ou qualquer outra informação relevante. Apesar do nome “Portfólio”, o uso da seção é flexível, permitindo personalizações para diferentes contextos.

Campos e Funcionalidades

01. Ativar Seção

Tipo: Switcher (ativar/desativar).

Descrição: Permite ativar ou desativar a exibição da seção “Portfólio”.

Dica de configuração: Ative apenas se o conteúdo estiver configurado corretamente.

02. Modelos

Tipo: Seleção (dropdown).

Descrição: Define o layout da seção.

Opções disponíveis:
– Modelo 01 – 02 Colunas
– Modelo 02 – 03 Colunas
– Modelo 03 – 04 Colunas

Dica de configuração: Escolha o modelo de acordo com a quantidade de itens e o design desejado para a página.

03. Cor de Fundo

Tipo: Seleção de cor (color picker).

Descrição: Configura a cor de fundo da seção.

Formato de cor: Código hexadecimal.

Ferramenta recomendada: Utilize o Image Color Picker para escolher as cores adequadas.

04. Cor do Título

Tipo: Seleção de cor (color picker).

Descrição: Define a cor de fundo da seção.

Formato de cor: Código hexadecimal.

Ferramenta recomendada: Para gerar o código hexadecimal, utilize o Image Color Picker.

05. Cor da Descrição

Tipo: Seleção de cor (color picker).

Descrição: Configura a cor do texto descritivo da seção.

Formato de cor: Código hexadecimal.

06. Título

Tipo: Campo de texto.

Descrição: Insere o título principal da seção.

Exemplo de uso: “Nossos Projetos” ou “Cases de Sucesso”.

07. Descrição

Tipo: Editor de texto.

Descrição: Insira um texto descritivo que complementa o título.

Dica de configuração: Use este campo para introduzir brevemente os itens que serão listados.

08. Cor do Fundo do Item

Tipo: Seleção de cor (color picker).

Descrição: Configura a cor de fundo dos itens listados.

Formato de cor: Código hexadecimal.

09. Cor do Título Item

Tipo: Seleção de cor (color picker).

Descrição: Define a cor do título exibido em cada item da listagem.

Formato de cor: Código hexadecimal.

10. Cor da Descrição Item

Tipo: Seleção de cor (color picker).

Descrição: Configura a cor da descrição exibida em cada item da listagem.

Formato de cor: Código hexadecimal.

11. Item (Grupo de Repetição)

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.

Exemplo de uso: “Projeto A”, “Produto X”, etc.

C. Descrição

Tipo: Campo de texto.

Descrição: Insere uma descrição complementar para o item.

Dica de configuração: Use este espaço para fornecer informações adicionais sobre o item, como detalhes do projeto ou características do produto.

12. Texto Botão

Tipo: Campo de texto.

Descrição: Define o texto exibido no botão de ação.

Exemplo de uso: “Ver Todos” ou “Saiba Mais”.

13. Link Botão

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.: #10).

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.