As equipes são muito importantes para o sucesso de qualquer organização. Eles reúnem indivíduos com diversas habilidades, conhecimentos e perspectivas, criando um ambiente dinâmico onde os objetivos podem ser alcançados.
Usando a seção Equipe do Pixpa, você pode exibir os perfis e fotos dos membros da sua equipe, juntamente com suas respectivas funções e responsabilidades
Neste artigo:
Adicionar seção de equipe à página
- Para adicionar uma seção, você precisa adicionar uma página para o seu site primeiro.
- Na sua página, Clique no ícone + azul para adicionar um Nova Seção.
- Você vai agora ver o categorias de seção no lado esquerdo.
- Percorra o Time (1) e clique nele. Agora uma tela aparecerá permitindo que você escolha layouts diferentes da Seção de Equipe (2).
- Escolha qualquer layout de seção e clique nele para adicioná-lo à sua página.
Adicionar e editar itens de lista
Adicionar um item de lista
- Clique em Editar equipes (1) botão para abrir o painel de itens da lista.
- Clique no Adicionar item (2) botão para adicionar um novo item de lista.
- Você pode optar por Dduplicar ou excluir (3) os itens da lista.
Editar item da lista
Clique no item da lista que você deseja editar. Ele abrirá as opções de edição de itens de lista específicos.
A partir daqui, você pode:
- Carregar/Remover Imagem Primária e Secundária (1)
Você pode carregar um Imagem secundária juntamente com a Imagem Primária para cada item da lista. Quando um usuário passa o mouse sobre o item, a imagem secundária será exibida, substituindo a imagem primária. Além disso, você pode definir o Cor de destaque da imagem, que será exibido ao passar o mouse sobre a imagem. - Adicionar uma Título (2), Subtítulo (3), e Descrição (4) do item da lista.
- Você pode não encontrar a opção de legenda e descrição em determinados itens da lista, dependendo do layout que escolher.
Antes de adicionar a descrição, verifique esse artigo.
5. Ação no clique
Você pode personalizar o comportamento de clique de itens individuais no Time seção. Abaixo estão as opções disponíveis:
- Ir para um link
Selecionar esta opção abre o Criador de links, permitindo que você adicione um hyperlink a este item. O link pode direcionar os usuários para outra página dentro do seu site ou para uma URL externa. Saiba mais sobre Criador de links. - Abrir na caixa de luz
Esta opção exibe o item em uma forma ampliada L visualizar quando clicado. Neste modo, o Legenda e Descrição associado ao item não aparecerá na visualização em grade, mas ficará visível no modo Lightbox. - Nenhuma Ação
Selecione esta opção para tornar o item não clicável. Quando selecionado, clicar no item não acionará nenhuma ação.
6. Abrir link em nova janela: Defina o Link para abrir em um nova aba ou na mesma aba. Isso só ficará visível quando Ir para um link opção é selecionada em Ação no clique menu.
7. Botões e links: Adicione qualquer tipo de de vidrio para o item da lista. Você pode adicionar um Botão/Link de imagem/Ícone social/Link de texto. Saiba Mais.
8. Substituição de estilo de cartão
Você pode substituir as configurações globais de estilo de cartão na seção Configurações de estilo e personalizar o cartão de cada item individualmente na seção Lista de Imagens. Isso permite que você aplique estilos exclusivos a diferentes itens da lista para melhor personalização.
Saiba Mais sobre a opção Cartões na seção dinâmica.
9. Salvar: Após fazer as personalizações, salve as alterações.
Para personalizar os cartões para cada item separadamente, você deve primeiro habilitar o Card opção nas Configurações de estilo.
Itens da lista de sequenciamento
Você pode alterar facilmente a sequência dos itens da lista, Arrastando e Soltando -os Veja o sequenciamento da Lista de Itens do Teams em ação:
Gerenciar Elementos da Seção de Equipe
A seção Equipe inclui uma Aba Elementos que permite que você gerencie a visibilidade de vários elementos dentro da seção com facilidade.
Usando interruptores de alternância simples, você pode habilitar ou desabilitar elementos específicos sem precisar excluir ou modificar os próprios elementos.
- Clique no elementos (1) aba.
- Após fazer as alterações, clique em Economize (2) botão.
Opções de seção
- Mostrar manchete: Ativa ou desativa a visibilidade do título para a seção Equipe.
- Mostrar botões: Controle se os botões são exibidos no nível da seção.
Opções de itens
- Mostrar imagem: Alterne a visibilidade das imagens.
- Mostrar título: Controle se o título é exibido.
- Mostrar legenda: Habilitar ou desabilitar legendas.
- Mostre a descrição: Gerencie a visibilidade das descrições dos itens.
- Mostrar botões: Decida se os botões para itens individuais devem ser exibidos.
Layout da seção
-
- Clique no Editar equipes botão para abrir o painel de edição de seção e escolher o traçado aba.
-
- A partir daqui, você pode alterar facilmente o layout da seção, mesmo depois de adicioná-la à página.
Ao alterar o layout, você verá os layouts relacionados à seção na parte superior.
Além disso, você também tem a opção de escolher um layout em outras seções da seção Mais layouts encabeçando.
Seção de equipes de estilo
Você pode personalizar diferentes aspectos da seção Teams usando várias opções de estilo. Para navegar até as opções de estilo, clique no botão Editar equipes (1) botão.
- Escolha o Sessão de Fotos (2) aba.
- Após fazer as personalizações, Economize (3) as mudanças.
Você terá várias opções de estilo para a seção:
- Opções de exibição
- Display para celular
- Ataques XDR
- Tamanho do texto
- Espaçamento
- Título da Seção
- Opções de imagens
- Máscara de forma
- Opções de passagem de imagem
- Borda da imagem
- Cartões
- Shadow
- Botões e links
Opções de exibição
- Escolha Mostrar itens in linhas e colunas / carrossel / vitrine
- Se você escolheu o Linhas e colunas opção, os itens da lista serão organizados em linhas e colunas. Nesse caso, você precisa especificar o número de linhas e colunas.
- Se você escolheu o carrossel opção, os itens da lista serão apresentados como uma apresentação de slides. Saiba mais.
-
Apresente oferece um layout elegante e interativo em estilo carrossel para exibir suas imagens uma de cada vez, com transições e efeitos suaves. Este layout adiciona uma experiência moderna e imersiva ao seu site. Saiba Mais.
- Colocou o Numero de colunas para a lista de imagens. Você pode escolher de 1 a 10 colunas.
- Especifique o Espaço Entre Colunas dos itens da lista.
- Especifique o Espaço entre linhas dos itens da lista.
Se a opção Carrossel for selecionada na Etapa 1, você verá as seguintes opções adicionais:
- Ativar rolagem suave: Permite a rolagem contínua de itens dentro do carrossel para uma experiência perfeita e visualmente atraente.
- Deslizamento automático: Gira automaticamente os slides sem interação do usuário.
- Mostrar progresso da reprodução automática: Exibe um indicador de progresso enquanto a reprodução automática está ativa para melhor visibilidade.
- Atraso de reprodução automática: Define o intervalo de tempo entre cada transição de slide quando a reprodução automática está ativada.
- Loop de carrossel: Permite o loop contínuo de slides, para que o carrossel reinicie perfeitamente após o último slide.
- Controles do carrossel: Escolha o Controles de navegação. Você pode escolher entre Sem controles, Setas – Centro inferior/Centro superior direito/Inferior direito, Chevron, Pontos e Rolagem horizontal.
- Bordas desbotadas: Aplique um efeito de desbotamento sutil às bordas do carrossel. Ele aprimora a experiência do usuário ao mesclar imagens suavemente conforme elas entram ou saem da visualização.
Se a opção Showcase for selecionada na Etapa 1, você verá as seguintes opções adicionais:
- Efeitos: Escolha entre cinco efeitos de animação: Fade, Flip, Cards, Coverflow (Inclinado) ou Coverflow (Plano) para controlar a transição das imagens.
- Habilitar rolagem suave: Permite a rolagem contínua de itens dentro do Showcase para uma experiência fluida e visualmente atraente.
- Deslize automático: Transição automática entre imagens sem intervenção do usuário.
- Mostrar progresso da reprodução automática: Exibe um indicador de progresso enquanto a reprodução automática está ativa para melhor visibilidade.
- Atraso de reprodução automática: Defina o tempo entre os slides quando a reprodução automática estiver ativa. Você pode escolher qualquer valor entre 1 e 10 segundos.
- Loop de carrossel: Habilite isso para fazer o carrossel repetir infinitamente, permitindo a reprodução contínua.
- Controles do carrossel: A configuração Controles do carrossel permite que você escolha como os usuários navegam pelos slides, com opções como setas (centro inferior, canto superior direito, canto inferior direito), pontos ou nenhum controle.
Display para celular
- Defina o número de Colunas da grade para dispositivos móveis. Você pode configurá-lo para no máximo 3 colunas.
- Definir o Espaçamento entre grades (em pixels).
Layout de coluna específico do dispositivo com base nas configurações do Studio:
Ataques XDR
- Alinhar a imagem horizontalmente na seção Equipe. Você pode configurá-los para alinhamento à esquerda, à direita ou ao centro.
- Alinhar o texto horizontalmente na seção Equipe. Você pode configurá-los para alinhamento à esquerda, à direita ou ao centro.
- Alinhar o conteúdo verticalmente na Lista de Equipes. Você pode configurá-los para alinhamento superior, centralizado e inferior.
- Escolha o Ordem do conteúdo ou seja, as imagens dos itens da lista a serem exibidos primeiro ou o texto associado.
Título da Seção
- Alinhar horizontalmente o texto do título da seção. Você pode defini-lo como Esquerda, Centro e Direita.
- Habilitar/Desabilitar o Divisor entre o título da seção e o conteúdo da seção.
- Colocou o espessura do divisor (em pixels).
- Especifique o Cor Divisória do seletor de cores.
- Escolher Estilo Divisor da lista suspensa.
Tamanho do texto
- Clique no Alterar Estilo do Texto botão para visitar o Design seção e gerencie seus tamanhos e estilos de fonte.
- Colocou o Título estilo de fonte para os itens de lista da seção.
- Colocou o Legenda estilo de fonte para os itens de lista da seção.
- Definir o padrão Descrição estilo de fonte para os itens de lista da seção.
- Ative esta opção para animar quaisquer números presente no Título e Legenda campos. Quando ativada, os valores numéricos aparecerão com uma animação de contagem dinâmica, tornando-os visualmente mais atraentes.
Espaçamento
- Especifique o Largura da imagem para itens de lista.
- Especifique o Largura do conteúdo para os itens da lista.
- Especifique o Espaço abaixo do título da seção em px.
- Especifique o Espaço abaixo das imagens dos itens da lista (em %).
- Especifique o Espaço abaixo dos títulos dos itens da lista (em %).
- Especifique o Espaço abaixo das legendas dos itens da lista (em %).
Título da Seção
- Alinhar horizontalmente o texto do título da seção. Você pode defini-lo como Esquerda, Centro e Direita.
- Habilitar/Desabilitar o Divisor entre o título da seção e o conteúdo da seção.
- Colocou o espessura do divisor (em pixels).
- Especifique o Cor Divisória do seletor de cores.
- Escolher Estilo Divisor da lista suspensa.
Imagens
- Escolha o Icolheita de mago para os itens da lista. Você pode definir as imagens como Quadrado, Círculo, Horizontal, Retrato e Original.
- Escolha ter um raio de canto comum ou raio de canto diferente para cada lado dos itens da lista e defina um número (em px) para o Craio próximo das imagens dos itens da lista. Saiba mais.
Com o raio de canto campo, você pode criar diferentes formas de imagens de itens de lista. Caso você especifique 500 px aqui, as imagens serão exibidas em forma de círculo.
- Caso tenha escolhido cantos divididos, você pode definir diferentes raios de canto para cada canto.
Máscara de forma
- Máscara de forma: Ative esta opção para aplicar uma máscara de forma às imagens na seção Equipes. Uma vez ativada, a forma selecionada recortará visualmente a imagem para esse formato.
- Selecione a forma: Escolha entre várias formas predefinidas para aplicar às suas imagens. Isso permite que você estilize criativamente seu conteúdo exibindo imagens em formas únicas, como arredondado, diamante, gota, etc.
- Esticam: Habilite esta opção para esticar a forma selecionada para melhor se ajustar ao contêiner de imagem. Isso garante que a forma preencha o espaço disponível proporcionalmente, aprimorando o alinhamento visual em diferentes tamanhos de tela.
- A opção Stretch depende do layout – Pode não aparecer em certos layouts. Em layouts onde texto como título ou subtítulo é exibido sobre a imagem, o a opção de máscara de forma inteira pode não estar disponível.
- A configuração Stretch depende de vários fatores - Incluindo tamanho da imagem, alinhamento e configurações de corte definido na aba Estilo.
- Se o corte da imagem estiver definido como Original, as dimensões reais da imagem determinarão se ela será esticada verticalmente ou horizontalmente.
Passe o mouse sobre a imagem
- Escolha o Cor do foco da imagem para ser o cor de destaque ou ser especificada. Se você escolheu o cor de destaquee especifique o opacidade. Você pode especificar a cor de destaque para cada item de Editar item painel.
- Se você escolheu o especifique a cor opção, em seguida, defina o Sobreposição de cor e opacidade.
- Colocou o Sobreposição de cor do texto que aparece no hover.
- Escolha Animar as imagens dos itens da lista ao passar o mouse clicando em Sim. Verifique esse recurso em uma página ao vivo.
- Escolha um Estilo de Animação para imagens quando o cursor passa sobre elas.
- Escolha se você deseja permitir o transição de imagens em foco ou não.
- Selecione um Estilo de transição para transição de hover. As opções disponíveis são Fade e Flip.
Borda da imagem
- Ativar/desativar borda em torno das imagens alternando o botão de alternância.
- Escolha ter um fronteira comum em todos os lados das imagens ou você pode especificar o fronteiras separadamente para cada lado.
- Especifique o largura da fronteira. Se estiver definido como 0, a borda não aparecerá. Você também tem a opção de definir a largura da borda individualmente para cada lado da imagem.
- Selecione os Cor da margem do seletor de cores.
- Selecione um preferido Estilo da Borda da lista suspensa.
- Determinar o largura da borda para celular dispositivos, alinhando-o com a largura escolhida para desktop.
Cartões
- Veja como para gerenciar cartões.
Shadow
- Ecrã – Escolha mostrar a sombra atrás dos itens da lista sempre ou apenas ao passar o mouse.
- Sessão de Fotos – Escolha entre as predefinições existentes ou crie uma sombra personalizada.
Caso tenha escolhido a opção Personalizado, então visite este Gerador de sombra de caixa para criar uma sombra personalizada. Por fim, copie e cole o sombra de caixa CSS. - Caso você tenha escolhido a opção de presets, então Escolha estilos de sombra da lista suspensa.
Botões e links
- Veja como para gerenciar o estilo de Botões e links.
