Componentes interativos: Flow

O componente Flow pode ser usado para mover conteúdo em uma área específica da sua página sem mudar de página. O componente Flow permite que você publique qualquer tipo de conteúdo que desejar e oferece a opção de adicionar quantas etapas forem necessárias. Além disso, é possível acrescentar mais opções de estilo para o indicador de progresso e efeitos de transição.

 

Vamos começar

Para começar a usar o componente, basta arrastar o ícone Flow para qualquer caixa na sua página. Uma vez instalado, você verá três etapas disponíveis para o componente Flow por padrão, com um indicador de progresso para mostrar aos visitantes em que etapa eles estão dentro do fluxo. Você pode usar as variáveis do Flow para ativar ou desativar essas etapas de navegação, configurar a reprodução automática para as etapas do Flow girarem, fazer um loop para permitir que o fluxo gire da última etapa para a primeira etapa (e vice-versa), corrigir a altura e fazer alterações caso você queira que a página role para o topo após cada mudança de etapa.

1-Jan-27-2021-04-45-24-33-PM

Para adicionar mais etapas ao componente Flow, basta arrastar o ícone Flow Step para o componente Flow.

2-Jan-27-2021-04-45-32-05-PM

Cada etapa do fluxo incluirá uma caixa, no qual você pode publicar qualquer tipo de conteúdo da guia Palette (ou seja, grades, caixas, imagens, outros componentes prontos etc.). Você também pode usar a variável de etapa de fluxo disponível para aplicar uma tag a essa etapa.

Behaviors (comportamentos)

Ao editar qualquer elemento clicável dentro do Flow, você verá a opção de definir um "comportamento". Os Behaviors permitem que você defina uma ação para determinado elemento no seu Flow. Por exemplo: se você deseja que um link ou uma imagem leve os usuários à próxima etapa quando clicado, você deve definir isso como um comportamento para aquele elemento. Para definir um comportamento, basta clicar no botão Behaviors ao editar seu conteúdo.

3-Jan-27-2021-04-45-39-53-PM

Micro-Theme Styling (estilo de microtema)

O estilo do seu componente Flow pode ser ajustado aplicando microtemas. Os microtemas de fluxo podem ser usados para ajustar a posição do seu indicador de progresso, efeitos de transição e o estilo do indicador de progresso. Os efeitos de transição podem ser definidos para todo o componente de Flow de uma vez, ou você pode definir uma transição diferente para cada etapa.

4-Jan-27-2021-04-45-47-26-PM

Microtemas também podem ser usados para controlar se o conteúdo vai da esquerda para a direita, para cima e para baixo ou se você simplesmente deseja que o conteúdo apareça gradualmente.

5-Jan-27-2021-04-45-54-89-PM