Seção da linha do tempo

Esta seção da linha do tempo permite que os usuários exibam os marcos e tarefas do projeto em uma sequência cronológica.

Isto é particularmente benéfico para destacar o progresso do projeto, ilustrar processos de candidatura, mostrar conquistas como prêmios e oferecer outras opções personalizáveis.

Ele fornece uma maneira estruturada e visualmente atraente de apresentar informações em formato de linha do tempo, melhorando a experiência e o envolvimento do usuário.

Adicionar seção à sua página

Uma seção pode ser adicionada a uma página. Você pode adicionar uma seção a uma página já existente ou crie uma nova página dentro do seu site.
Na sua página, Clique no ícone + azul para adicionar um Nova Seção para sua página.

Você vai agora ver o categorias de seção no lado esquerdo.
Clique no Timeline guia (1) onde você pode escolher layouts diferentes da seção da linha do tempo (2).
A seção agora será adicionada à página. Clique em Economize (3) botão para manter as alterações.

Adicionar e editar itens de lista

Adicionar item de lista

Depois de adicionar a seção:

Clique no Editar linha do tempo (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 Duplicar ou Excluir (3) os itens da lista.
Especifique um NEW Manchete (4) para a seção da linha do tempo.

Editar item da lista

Clique no item da lista que você deseja editar. Ele abrirá as opções de edição desse item específico da lista.

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.

Observação

Antes de adicionar a descrição, verifique esse artigo.

5. Ação ao clicar – Título e imagem

Você pode personalizar o comportamento de clique de itens individuais no Timeline 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 personalize o cartão de cada item individualmente na seção Linha do Tempo. Isso permite aplicar 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. Substituição de estilo de forma

Use a opção Substituir para atribuir uma forma diferente a cada imagem individualmente na seção Linha do tempo, dando a você maior controle sobre o estilo visual de cada item. Saiba Mais sobre a Shape Mask.

10. Salvar: Após fazer as personalizações, salve as alterações.

Itens da Lista de Sequência

Gerenciar elementos da seção Linha do tempo

A seção Linha do tempo 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 ter que excluir ou modificar os elementos em si.

Clique no Editar linha do tempo (1) botão.

Escolha o elementos (2) aba.
Após fazer as alterações, clique em Economize (3) botão.

Opções de seção

Mostrar manchete: Ativa ou desativa a visibilidade do título para a seção Linha do tempo.
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.

Alterar layout da seção

Clique no Editar linha do tempo botão para abrir o painel de edição de seção.
Escolha 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.

Opções de estilo

Clique em Editar lista de imagens botão.
Escolha o Estilo (1) aba.
Altere o estilo dos elementos da seção e Salvar (2) suas mudanças.

Você terá várias opções de estilo para a seção:

Opções de exibição
Ataques XDR
Tamanho do texto
Espaçamento
Título da Seção
Opções de estilo de linha do tempo
Opções de imagens
Máscara de forma
Opções de passagem de imagem
Borda da imagem
Opções de cartão
Opções de sombra
Botões e links

Opção de exibição

Especifique o Espaço entre linhas dos itens da lista.

Ataques XDR

Alinhar o texto horizontalmente na seção. Você pode configurá-los para alinhamento à esquerda, à direita ou ao centro.
Alinhar o conteúdo verticalmente na seção. 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.

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 Espaço abaixo do título da seção em px.
Especifique o Imagens do Espaço Acima dos itens da lista (em %).
Especifique o Espaço ao redor do divisor horizontalmente 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.
Colocou o Largura do título para definir a largura que o título da seção deve ter, começando com um mínimo de 50%.

Opções de estilo de linha do tempo

Ative isto se preferir que cada segundo item da seção esteja no Alternado (lado oposto.
Selecione os Direção dos itens.
Especifique o Largura da linha divisória para a seção.
Especifique o Linha de base (fundo) Cor do divisor.
Especifique o linha ativa (destacado) Cor para o divisor.

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.

Máscara de forma

Máscara de forma: Ative esta opção para aplicar uma máscara de forma à imagem na seção Linha do Tempo. Uma vez ativada, a forma selecionada recortará visualmente a imagem para essa forma.
Selecione a forma: Escolha entre várias formas predefinidas para aplicar à sua imagem. Isso permite que você estilize criativamente seu conteúdo exibindo a imagem em um formato único, como arredondado, diamante, gota, etc.

Notas

A opção Máscara de forma depende do layout – Pode não aparecer em layouts onde texto como título ou subtítulo é exibido sobre a imagem.
A configuração Stretch depende de vários fatores – incluindo as configurações de Tamanho da imagem, Alinhamento e Corte definidas na guia 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.
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.

Não consegue encontrar o que procura?

Entre em contato com um especialista da Pixpa.

Entre em contato