Componentes Interativos: Full-page slider

A plataforma Ion oferece a capacidade de mover o conteúdo de uma página inteira pela tela à medida que os usuários passam por sua experiência usando o Full-page slider. Esse componente é ótimo para exibir seu conteúdo em um formato excitante e único, com dezenas de efeitos de transição para levar os visitantes de um slide para outro.

 

Vamos começar

Para começar, arraste o ícone do Full-page slider para qualquer caixa na sua página.

1-Jan-27-2021-04-48-09-79-PM

Seu Full-page slider incluirá duas seções por padrão, mas você pode adicionar quantas seções desejar! Para adicionar outra seção ao Full-page slider, basta arrastar o ícone Full-page Section para o Slider.

2-Jan-27-2021-04-48-02-49-PM

Cada seção do Slider inclui uma caixa que você pode usar como qualquer outra na sua página. Isso permite que você adicione grades responsivas para definir a estrutura da coluna, texto, imagens, formulários e até mesmo outros componentes interativos para suas Full-page Sections!

Subsections (subseções)

Você também pode adicionar subseções às Full-page Sections! As Subsections incentivam a sua criatividade com o Slider, pois permitem inserir conteúdo que rolará horizontalmente em determinada seção.

Para adicionar uma Subsection ao seu Slider, arraste o ícone de Full-page Silder Subsection para uma das Full-page Slider Sections.

3-Jan-27-2021-04-47-53-26-PM

O conteúdo publicado em uma única subseção será renderizado em um único slide horizontal. Para obter o efeito de rolagem horizontal, você desejará adicionar mais subseções às Full-Page Slider Sections.

Behaviors (comportamentos)

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

4-Jan-27-2021-04-47-44-66-PM

Styling and Transition Effects (efeitos de estilo e transição)

Ao editar Full-Page Slider, você verá opções de estilo e efeito de transição que incluem:

  • Scroll Type (tipo de rolagem)

  • Auto (automático) - o efeito Easing será visto quando os usuários rolarem pelas seções.

  • Native (nativo) - usa a rolagem nativa do navegador para visualizar as seções.

  • None (nenhum) - os usuários só conseguiriam visualizar outras seções clicando nos elementos com os comportamentos correspondentes definidos.
  • Section Navigation (navegação da seção) - quando marcada, mostrará pontos nos quais os usuários podem clicar para ir para as Full-Page Slider Sections correspondentes.

  • Quando ativada, você também terá a opção de colocar os pontos no lado esquerdo ou direito do Slider.

  • Subsection Navigation (navegação de subseção) - quando marcada, adiciona setas às subseções para os usuários visualizarem diferentes subseções. Se não ativada, os comportamentos precisam ser usados para navegar pelas subseções.

  • Transition Settings (configurações de transição)

  • Transition speed (velocidade de transição ou ms) - define a velocidade dos efeitos de transição (em milissegundos) ao passar de seção para seção no Full-Page Slider.

  • Easing (atenuação) - controla o efeito visto quando os visitantes navegam de seção para seção no Full-Page Slider.

5-Jan-27-2021-04-47-35-45-PM

Dicas e truques