Múltiplos carrosséis (sliders)

Se você quiser ter mais de um controle deslizante em sua landing page, use as instruções a seguir para implementá-los. Com este método, você também poderá adicionar um único controle deslizante à sua landing page.

Adicionar seções de controles deslizantes

1. Faça login em sua conta PageX e vá para o editor de sua landing page.

2. Crie uma nova seção para o seu controle deslizante – no lado esquerdo do editor, encontre o widget section (1), arraste e solte-o na área ativa da landing page.

Adicione uma classe à sua nova seção. Na barra de widgets à direita, vá para a seção Other na parte inferior e digite my-slider em Classes (2).

3. Arraste novos widgets Image e adicione imagens. Coloque uma imagem acima da outra.

Lembre-se de que as imagens no controle deslizante:

  • devem ser do mesmo tamanho;
  • seus tamanhos devem refletir o tamanho do controle deslizante;
  • serão exibidas no controle deslizante na ordem em que foram adicionadas ao editor;
  • você pode adicionar quantas fotos quiser.

4. Abaixo da seção criada anteriormente (seção do controle deslizante), solte outro widget section para criar uma seção de navegação.

5. Arraste dois widgets Icon para lá: um para alternar os controles deslizantes para a esquerda e outro para alternar os controles deslizantes para a direita. Solte-os no um local escolhido, clique neles, selecione Change e escolha seus ícones (de preferência setas).

6. Na barra de ferramentas do widget à direita, dê a eles as classes previous e next, respectivamente.

7. Publique sua landing page.

Você pode adicionar quantas seções de controle deslizante e seções de navegação desejar.

Adicionar código JavaScript

1. Vá para a guia JavaScript Code de sua landing page. Você pode entrar na guia direto do editor.

2. Crie um novo script. Nomeie-o e cole o código indicado abaixo no campo Content. Escolha a posição Body bottom na Main page.

3. Clique em Add para salvar o código.

4. Vá para a landing page publicada e verifique se os controles deslizantes são exibidos corretamente.

Você também pode verificar o método alternativo de criação de um carrossel (um por landing page).

Este artigo foi útil?

0 de 0 gostaram deste artigo