Área da Imagem:
Este bloco é ideal para páginas Sobre nós, landing pages e qualquer seção onde a construção de confiança e credibilidade seja importante. Você tem controle total sobre a forma da imagem, estilo do separador, aparência dos ícones sociais e o estilo tipográfico de cada elemento de texto — dando à sua seção de equipe um visual que corresponde à sua marca.
Adicionando o Bloco de Membro da Equipe às Suas Páginas
Siga estas etapas para adicionar um bloco de Membro da Equipe à sua página do SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Membro da Equipe na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Uma vez adicionado, clique no bloco Membro da Equipe para abrir suas configurações. Na aba Conteúdo, as configurações são organizadas em quatro seções.
Geral:
- Imagem: Carregue ou selecione a foto do membro da equipe. Defina a largura da imagem (em px ou %) e, opcionalmente, defina uma altura fixa. Insira o texto alternativo para descrever a imagem para acessibilidade.
- Posição da Imagem: Escolha onde a imagem aparece em relação ao texto — Superior, Esquerda ou Direita.
- Nome: Insira o nome do membro da equipe (padrão: “John Doe”). Escolha a tag HTML usada para renderizá-lo (H1–H6, div, span ou p), defina o alinhamento do texto e ajuste a margem inferior.
- Mostrar Cargo: Ative ou desative o cargo (Sim/Não). Quando ativado, insira o texto do cargo, defina seu alinhamento e ajuste a margem inferior.
- Mostrar Descrição: Ative ou desative a biografia ou descrição (Sim/Não). Quando ativado, insira o texto da descrição, defina seu alinhamento e ajuste a margem inferior.
Área da Imagem:
- Forma: Escolha a forma aplicada à foto do membro da equipe — Padrão, Arredondada, Círculo ou Personalizada (que habilita controles de raio de canto individuais).
- Margem Inferior da Imagem: Defina o espaçamento abaixo da imagem.
Separador:
- Separador: Ative ou desative uma linha decorativa (Sim/Não).
- Posição: Escolha onde a linha separadora aparece — Abaixo do Nome, Abaixo do Cargo ou Abaixo da Descrição.
- Largura: Defina a largura da linha separadora.
- Estilo: Escolha o estilo da linha — Sólido, Pontilhado ou Tracejado.
- Espessura: Defina a espessura da linha separadora em pixels.
- Cor: Escolha a cor da linha separadora.
- Alinhamento do Separador: Defina o alinhamento horizontal do separador — Esquerda, Centro ou Direita.
- Margem Inferior do Separador: Defina o espaçamento abaixo da linha separadora.
Ícones Sociais:
- Ícones Sociais: Ative ou desative os ícones de mídia social (Sim/Não).
- Itens de Ícone: Adicione, reordene e configure links sociais individuais. Para cada item, escolha um ícone, insira o título de exibição e insira o URL de destino. Use Adicionar Novo Item para adicionar ícones adicionais ou arraste os itens para reordená-los.
- Largura do Ícone: Defina o tamanho dos ícones sociais.
- Espaçamento do Ícone: Defina o espaçamento interno de cada botão de ícone.
- Formato: Escolha o formato dos contêineres dos ícones — Padrão, Arredondado, Círculo ou Personalizado.
- Alinhamento do Ícone Social: Defina o alinhamento horizontal da linha de ícones sociais — Esquerda, Centro ou Direita.
Passo 2a: Escolha um Estilo de Modelo
Na aba Templates, você pode aplicar um design predefinido ao seu bloco de Membro da Equipe. Três templates estão disponíveis: Efeito Listrado, Divisor e Fundo. Selecionar um template aplica instantaneamente sua estilização, que você pode personalizar ainda mais nas abas Conteúdo e Avançado.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência visual do seu bloco de Membro da Equipe.
Estilos:
- Tipografia do Nome: Defina a família da fonte, tamanho, peso, estilo, altura da linha, espaçamento entre letras e caixa de letras para o nome do membro da equipe.
- Tipografia da Designação: Defina as propriedades tipográficas para o texto do cargo.
- Tipografia da Descrição: Defina as propriedades tipográficas para o texto da biografia ou descrição.
- Cor do Nome: Defina a cor para o nome do membro da equipe.
- Cor da Designação: Defina a cor para o cargo.
- Cor da Descrição: Defina a cor para o texto da descrição.
- Sombra do Texto: Aplique uma sombra ao texto usando tamanhos predefinidos (Nenhum, Fio de Cabelo e predefinições maiores).
Espaçamento:
- Margem: Defina o espaçamento externo ao redor do bloco em todos os quatro lados, com controles independentes para desktop, tablet e celular.
- Preenchimento: Defina o espaçamento interno dentro do wrapper do bloco em todos os quatro lados, com controles por dispositivo.
Borda:
- Estilo da Borda: Escolha entre Nenhum, Sólido, Pontilhado ou Tracejado.
- Largura da Borda: Defina larguras individuais para as bordas superior, direita, inferior e esquerda.
- Cor da Borda: Escolha a cor da borda.
- Raio da Borda: Arredonde os cantos do bloco independentemente para cada canto, ou use o alternador de sincronização para aplicar um raio uniforme.
Fundo:
- Estilo do Fundo: Escolha cor Sólida, Gradiente (com tipo, ângulo, posição e duas paradas de cor) ou fundo de Imagem (com opções de posição, repetição, tamanho e anexo).
- Escurecimento do Fundo: Adicione uma sobreposição com opacidade ajustável sobre uma imagem de fundo para melhorar a legibilidade do texto.
Atributos:
- Classe Personalizada: Adicione uma ou mais classes CSS personalizadas ao wrapper do bloco para estilização direcionada.
- ID CSS: O SeedProd gera automaticamente um ID CSS exclusivo para este bloco. Você pode usá-lo para referenciar o bloco em CSS ou JavaScript personalizado.
- Atributos Personalizados: Adicione atributos HTML personalizados ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato chave|valor.
Visibilidade do Dispositivo:
- Ocultar no Desktop: Ative para ocultar o bloco quando visualizado em telas de desktop.
- Ocultar no Tablet: Ative para ocultar o bloco quando visualizado em telas de tablet.
- Ocultar no Celular: Ative para ocultar o bloco ao ser visualizado em telas de celular.
Efeitos de Animação:
- Efeito de Rolagem: Aplique uma animação acionada por rolagem ao bloco, incluindo opções de Rolagem Vertical e Rolagem Horizontal com controles de direção, velocidade e deslocamento de visualização.
- Efeito do Mouse: Aplique um efeito de paralaxe ao bloco, acionado pelo movimento do mouse.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Membro da Equipe e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Membro da Equipe à sua página! Uma seção de equipe bem projetada constrói credibilidade e ajuda os visitantes a se conectarem com as pessoas por trás da sua marca. Experimente formatos de imagem, estilos de separador e opções de fundo para criar uma vitrine de equipe que pareça polida e alinhada à marca.