Media - Slider

Abra a página, o bloco ou o bloco dinâmico em que deseja colocar o controle deslizante e expanda a seção Content.

No painel Page Builder, expanda Media e arraste um espaço reservado Slider para uma linha, coluna ou guia no estágio.

No exemplo a seguir, a cor de fundo da linha é amarela (#fffd16).

{width="600" modal="regular"}

O contêiner do controle deslizante é exibido no palco com um único slide vazio.

Clique no contêiner de controle deslizante para exibir o editor de texto e inserir conteúdo para o primeiro slide.

Você também pode incluir conteúdo de banner mais complexo usando as configurações de Conteúdo.

Clique no ponto de navegação na parte inferior do controle deslizante para exibir a caixa de ferramentas para o slide individual e escolha o ícone Configurações ( {width="20"} ).

Os controles deslizantes têm duas caixas de ferramentas. Certifique-se de usar a caixa de ferramentas de slide na parte inferior.

Conclua as configurações, conforme necessário, de acordo com as seguintes seções:

• Appearance
• Background
• Content
• Search Engine Optimization
• Advanced

Quando terminar, clique em Save para aplicar as configurações e retornar ao espaço de trabalho Page Builder.

Clique no ponto de navegação abaixo do slide para exibir a caixa de ferramentas e escolha o ícone Duplicar ( {width="20"} ).

{width="500" modal="regular"}

Clique no ponto de navegação do novo slide e, para exibir a caixa de ferramentas, escolha o ícone Configurações ( {width="20"} ).

Modifique as configurações, conforme necessário, de acordo com as seguintes seções:

• Appearance
• Background
• Content
• Advanced

Quando terminar, clique em Save para aplicar as configurações e retornar ao espaço de trabalho Page Builder.

Passe o mouse sobre o contêiner de controle deslizante na parte superior para exibir a caixa de ferramentas e escolha o ícone Adicionar ( {width="20"} ).

{width="500" modal="regular"}

Um novo slide em branco com seu próprio ponto de navegação e caixa de ferramentas é adicionado ao controle deslizante e exibido no palco.

{width="500" modal="regular"}

Clique no ponto de navegação do novo slide e, para exibir a caixa de ferramentas, escolha o ícone Configurações ( {width="20"} ).

Modifique as configurações, conforme necessário, de acordo com as seguintes seções:

• Appearance
• Background
• Content
• Advanced

Quando terminar, clique em Save no canto superior direito para fechar a página Edit Slide.

Crie o widget que você deseja ver em um slide.

Abra a página, o bloco ou o bloco dinâmico em que deseja colocar o controle deslizante e expanda a seção Content.

No painel Page Builder, expanda Media e arraste um espaço reservado Slider para uma linha, coluna ou guia no estágio.

Clique no contêiner de controle deslizante para exibir a barra de ferramentas do editor de texto e clique no ícone Inserir widget ( {width="20"} ).

Selecione o Widget Type necessário.

Especifique as configurações, que são diferentes dependendo do tipo de widget

{width="600" modal="regular"}

Quando terminar, clique em Insert Widget no canto superior direito.

Modifique as outras configurações conforme necessário.

Quando terminar, clique em Save no canto superior direito.

{width="600" modal="regular"}

Altere a exibição do controle deslizante no palco e visualize o slide que deseja alterar.

Na caixa de ferramentas de slide individual, escolha o ícone Configurações ( {width="20"} ) e conclua as configurações, conforme necessário, de acordo com as seções a seguir.

No canto superior direito, clique em Save para aplicar as configurações e retornar ao espaço de trabalho Page Builder.

Escolha um dos seguintes tipos de posicionamento de slide:

{width="600" modal="regular"}

Insira o Slide Name.

Ao trabalhar no modo de edição, o nome do slide aparece como uma dica de ferramenta acima do ponto de navegação. O nome do slide não está visível da loja.

{width="500" modal="regular"}

Insira o Minimum Height para o slide.

A altura mínima pode ser um número com qualquer unidade CSS válida (como 100px, 50%, 50em, 100vh) ou um cálculo (como 100vh - 237px).

Por exemplo, você pode definir a altura mínima do slide para cobrir a altura total da página, em seguida, usar imagens e vídeos de fundo para opções de design atraentes.

Clique no espaço reservado ou no texto existente e insira o novo texto que deseja exibir no slide.

A barra de ferramentas do editor é exibida acima da caixa de texto.

Use a barra de ferramentas do editor para inserir e formatar texto, bem como inserir elementos, como links, imagens e widgets.

{width="500" modal="regular"}

Clique no ponto de navegação na parte inferior do controle deslizante para exibir a caixa de ferramentas para o slide individual e escolha o ícone Configurações ( {width="20"} ).

Na seção Content, digite o Message Text ​que você deseja que apareça com o slide.

Role para baixo até a seção Content ​e use o editor Message Text ​para inserir e formatar o texto do banner.

Você também pode inserir elementos, como links de texto, imagens e widgets.

Formate o texto conforme necessário usando a barra de ferramentas do editor.

O primeiro slide deste exemplo tem uma imagem de plano de fundo, mas nenhum texto de mensagem. O texto Buy 3 Get 1 Free acima do controle deslizante está em um contêiner de Texto (adicionado posteriormente).

Se necessário, especifique um Link para o slide.

O link é a página de destino exibida quando o cliente clica na área do slide. Você pode usar um dos três tipos de link:

• URL - Links para uma URL relativa ou totalmente qualificada.

• Product - Identifica a página de destino com base no nome do produto ou SKU. Procure o produto por nome com base em um nome parcial ou completo. Escolha o produto na lista de resultados da pesquisa.

  {width="600" modal="regular"}

• Category - Identifica a página de destino como uma categoria ou subcategoria específica na árvore de categorias. Procure a categoria com base em um nome parcial ou completo. Escolha a categoria na seção expandida da árvore exibida.

  {width="600" modal="regular"}

• Page - Identifica a página de destino como uma página de conteúdo específica. Procure a página com base em um nome parcial ou completo. Escolha a página na lista de resultados da pesquisa.

  {width="600" modal="regular"}

A partir da versão 2.4.1, o Page Builder não oferece mais suporte à vinculação do slide e dos links dentro do texto aninhado devido a problemas com a exibição na loja. Se você estiver usando um link em _Message Text_, não poderá configurar a opção _Link_. Se preferir usar um único link para todo o slide, é possível remover todos os links do texto. {width="300"}

Se quiser impedir que o visitante saia do armazenamento, marque a caixa de seleção Open in new tab. Quando a caixa de seleção é desmarcada, o destino vinculado é aberto na mesma guia do navegador, o que pode efetivamente afastar o visitante da loja.

Se necessário, adicione um botão para solicitar que os clientes sigam o link.

A posição Aparência do slide coloca um único link ou botão abaixo do texto. Complete as propriedades do link ou botão que deseja adicionar.

{width="600" modal="regular"}

• Defina Show Button como um dos seguintes:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Opção	Descrição
  Always	Um botão sempre aparece no slide.
  On Hover	Um botão é exibido no slide somente ao passar o mouse.
  Never Show	Um botão nunca aparece no slide.

• Digite o Button Text a ser exibido no botão.

• Defina Button Type como um dos seguintes:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Opção	Descrição
  Primary	Aplica o estilo de botão primário da folha de estilos atual.
  Secondary	Aplica o estilo de botão secundário da folha de estilos atual, se aplicável.
  Link	Cria um hiperlink em vez de um botão.

  O estilo do botão do tema atual determina o formato do botão. Normalmente, um botão principal tem uma cor de fundo mais proeminente do que um botão secundário.

Defina Show Overlay como um dos seguintes:

Você pode usar uma sobreposição para aplicar uma cor de plano de fundo à área de conteúdo ativa definida pela configuração Aparência. A imagem de plano de fundo do slide permanece visível durante toda a largura do slide.

{width="600" modal="regular"}

Se você optar por mostrar uma sobreposição, defina o Overlay Color:

• Clique na amostra Sem cor e escolha uma amostra.
• No campo Color, digite um nome de cor válido ou um valor hexadecimal.

{width="600" modal="regular"}

Para controlar o posicionamento horizontal do conteúdo adicionado ao slide, escolha a Alignment:

Defina o estilo Border que é aplicado aos quatro lados do slide:

Se você definir um estilo de borda diferente de None, conclua as opções de exibição de borda:

{width="600" modal="regular"}

(Opcional) Especifique os nomes de CSS classes da folha de estilos atual para aplicar ao slide.

Separe vários nomes de classe com um espaço.

Insira valores, em pixels, para que Margins and Padding especifique as margens externas e o preenchimento interno do slide.

Insira cada valor correspondente no diagrama do slide.

No painel Page Builder, expanda Elements e arraste um espaço reservado para Texto para uma linha, coluna ou conjunto de guias no estágio.

Conforme você arrasta, uma linha de guia vermelha marca o ponto de inserção acima do controle deslizante.

{width="600" modal="regular"}

Use o editor para formatar o texto conforme necessário.

{width="500" modal="regular"}

Passe o mouse sobre o contêiner do controle deslizante para mostrar a caixa de ferramentas principal e escolha o ícone Configurações ( {width="20"} ).

{width="500" modal="regular"}

Insira o Minimum Height para o slide.

A altura mínima pode ser um número com qualquer unidade CSS válida (como 100px, 50%, 50em, 100vh) ou um cálculo (como 100vh - 237px).

Por exemplo, é possível definir a altura mínima de um controle deslizante para alongar a altura total da página, fornecendo opções atraentes para imagens e vídeos de fundo de página inteira.

{width="400"}

Se desejar que o controle deslizante comece quando a página for carregada, defina Autoplay como Yes e defina Autoplay Speed como o número de milissegundos no atraso entre os slides.

Por padrão, a velocidade é definida como 4000 ms, que é de quatro segundos. Se você definir a reprodução automática como No, o primeiro slide aparecerá por padrão e o cliente deverá clicar na navegação do slide (pontos ou setas) para exibir o próximo slide em sequência.

{width="600" modal="regular"}

Para facilitar a transição de um slide para o próximo, defina Fade como Yes.

Com o fade, os slides parecem permanecer no lugar, mas o conteúdo muda facilmente de um para outro. Sem esmaecer, você verá o movimento horizontal de um slide para o próximo.

{width="600" modal="regular"}

Para fazer com que a apresentação de slides se repita indefinidamente enquanto a página estiver aberta, defina Infinite Loop como Yes.

Para escolher o tipo de controles de navegação para o controle deslizante, faça o seguinte:

• Para incluir as setas Avançar e Anterior nos lados esquerdo e direito de cada slide, defina Show Arrows como Yes.

• Para incluir um conjunto de pontos de navegação abaixo do controle deslizante, defina Show Dots como Yes.

{width="600" modal="regular"}

Conclua as configurações do controle deslizante Avançado conforme necessário.

Quando terminar, clique em Save para aplicar as configurações e retornar ao espaço de trabalho Page Builder.

Para controlar o posicionamento dos slides dentro do contêiner de controle deslizante pai, escolha a Alignment:

Defina o estilo Border que é aplicado aos quatro lados do contêiner de controle deslizante:

Se você definir um estilo de borda diferente de None, conclua as opções de exibição de borda:

(Opcional) Especifique os nomes de CSS classes da folha de estilos atual para aplicar ao contêiner de controle deslizante.

Separe vários nomes de classe com um espaço.

Insira valores, em pixels, para que Margins and Padding determine as margens externas e o preenchimento interno do contêiner de controle deslizante.

Insira os valores correspondentes no diagrama.

Abra a página onde você incluiu o controle deslizante, defina Enable Page como Yes.

No canto superior direito, clique na seta Save e escolha Save & Close.

Localize a página na grade Páginas e selecione View na coluna Action.

{width="600" modal="regular"}

Ao visualizar o controle deslizante, redimensione a janela para que você possa ver como ela aparece em um dispositivo móvel.

{width="400" modal="regular"}