Media - Slider

Use o tipo de conteúdo Controle Deslizante para adicionar uma apresentação de slides de imagens ao Page Builder estágio. Você pode fazer upload de novas imagens ou escolher imagens existentes na galeria ou no catálogo de produtos. Um controle deslizante pode ser configurado para ser reproduzido automaticamente ou ser controlado manualmente com botões de navegação. Para associar o controle deslizante a uma promoção específica, consulte Bloco Dinâmico.

Controle deslizante de mídia na loja

NOTE
Se você estiver fazendo alterações significativas no conteúdo de Page Builder, é recomendável aumentar o Tempo de Vida da Sessão de Administrador para evitar que a sessão atinja o tempo limite enquanto você trabalha.

Toolboxes

Ao trabalhar com o tipo de conteúdo Controle deslizante, você adiciona e edita slides individuais e o contêiner do controle deslizante que contém um ou mais slides. Cada slide tem sua própria caixa de ferramentas que você usa para criar slides no estágio Page Builder.

Caixa de ferramentas de slide individual

Caixa de ferramentas de slide individual

Ferramenta
Ícone
Descrição
Mover
Ícone Mover {width="25"}
Move o slide para outra posição no controle deslizante.
(rótulo)
Slide #
Identifica o número do slide atual.
Configurações
Ícone de configurações {width="25"}
Abre a página Edit Slide, na qual você pode alterar as propriedades do slide atual.
Duplicar
Ícone duplicado {width="25"}
Faz uma cópia do slide atual.
Remover
Ícone Remover {width="25"}
Exclui o slide atual do controle deslizante.

Caixa de ferramentas do controle deslizante

Ferramenta
Ícone
Descrição
Mover
Ícone Mover {width="25"}
Move o controle deslizante para outra posição no palco.
(rótulo)
Slider
Identifica o contêiner do controle deslizante.
Configurações
Ícone de configurações {width="25"}
Abre a página Edit Slider, na qual você pode alterar as propriedades do vídeo e do container.
Ocultar
Ícone Ocultar {width="25"}
Oculta o controle deslizante atual.
Mostrar
Mostrar ícone {width="25"}
Mostra a barra oculta.
Duplicar
Ícone duplicado {width="25"}
Faz uma cópia do controle deslizante.
Remover
Ícone Remover {width="25"}
Exclui o controle deslizante do estágio.
NOTE
Os elementos ocultos são armazenados no banco de dados e invisíveis para os clientes. No entanto, esses elementos são visíveis para mecanismos de pesquisa e outros bots que rastreiam seu site. Eles também são retornados como parte do conteúdo, se solicitado por meio de uma chamada de API com um atributo de invisibilidade, a menos que você os remova do estágio.

Adicionar um slide individual

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

  2. 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).

    Arrastando o controle deslizante para o estágio {width="600" modal="regular"}

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

  3. 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.

  4. 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 ( Í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.

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

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

Adicionar mais slides

As seções a seguir descrevem uma série de etapas para começar com um slide individual e criar um controle deslizante responsivo que apresenta e vincula a produtos específicos. Se você ainda não tiver um slide individual, siga as instruções anteriores para adicionar um slide individual ao palco.

Para adicionar slides, use um dos métodos a seguir ou uma combinação deles:

Método 1: duplicar um slide existente

Você pode economizar tempo duplicando um slide que já foi configurado com as configurações necessárias.

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

    Duplicando um slide {width="500" modal="regular"}

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

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

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

Método 2: adicionar um novo slide em branco

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

    Adicionando um slide em branco {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.

    Novo slide com a caixa de ferramentas {width="500" modal="regular"}

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

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

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

Adicionar widget em um slide

Você pode adicionar qualquer tipo de widgets ao seu slide em um estágio Page Builder usando estas etapas:

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

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

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

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

  5. Selecione o Widget Type necessário.

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

    Exemplo de inserção de widget no slide {width="600" modal="regular"}

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

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

  9. Quando terminar, clique em Save no canto superior direito.

    Exemplo de widget inserido no slide {width="600" modal="regular"}

Exibir cada slide

Para exibir cada slide no palco, clique no próximo ponto abaixo do slide exibido no momento.

Controle deslizante concluído

O slide no exemplo anterior tem uma imagem de plano de fundo, uma imagem móvel transparente e uma imagem integrada que foi adicionada do editor de texto. Essa técnica funciona bem em dispositivos móveis, desativando a imagem de fundo e exibindo apenas a imagem integrada menor. O slide do produto neste exemplo tem as seguintes configurações adicionais:

Opção
Exemplo de configuração
Appearance
Collage Right
Background Color
#ffffff (Branco)
Background Image
A imagem deste slide foi salva na página do produto e carregada na galeria.
Mobile Background Image
A imagem de plano de fundo móvel é uma imagem transparente com 10 pixels quadrados. Usar uma imagem em branco para dispositivos móveis substitui efetivamente a imagem de plano de fundo padrão por uma imagem invisível.
Background Size
Auto
Message Text
Minerva LumaTech™ V-Tee (Alinhar ao centro) com imagem inserida dimensionada em 40% (Alinhar ao centro)
Link
Product
Show Button
Always
Button Text
Buy Now
Show Overlay
Never Show
Alignment
Center (para alinhar o botão)
Border
Solid
Border Color
#000000 (Preto)
Border Width
1 px

Alterar configurações de slide individuais

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

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

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

Appearance

  1. Escolha um dos seguintes tipos de posicionamento de slide:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Tipo Descrição
    Poster Centraliza o conteúdo do slide no contêiner do controle deslizante. A sobreposição, se usada, estende a largura total do controle deslizante.
    Collage Left Coloca o conteúdo do slide em uma área definida no lado esquerdo do contêiner do controle deslizante. A sobreposição, se usada, cobre somente a área definida.
    Collage Center Coloca o conteúdo do slide em uma área definida centralizada no container do controle deslizante. A sobreposição, se usada, cobre somente a área definida.
    Collage Right Coloca o conteúdo do slide em uma área definida no lado direito do contêiner do controle deslizante. A sobreposição, se usada, cobre somente a área definida.

    Posicionamento do slide {width="600" modal="regular"}

  2. 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.

    Nome do slide na navegação {width="500" modal="regular"}

  3. 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.

    note note
    NOTE
    Quando o slide está definido com a altura total da página (100vh), o controle deslizante que contém o slide também estende a altura total da página para acomodar a altura do slide.

Background

Há muitas opções para definir a exibição do plano de fundo de um slide. É possível aplicar uma cor simples ou uma imagem de plano de fundo e gerenciar efeitos mais sofisticados.

Background Color

Especifique a cor do plano de fundo escolhendo uma amostra, clicando no seletor de cores ou inserindo um nome de cor válido ou um valor hexadecimal equivalente. Essa configuração determina a cor do plano de fundo da linha. Também é possível ajustar a opacidade da cor.

Nenhuma cor (padrão)

Você pode definir o valor de uma das três formas a seguir:

  • Um nome de cor predefinido, como White
  • O valor de cor hexadecimal da cor, como #ffffff
  • O valor rgba da cor, com porcentagem de opacidade, como rgba(255, 255, 255, 0.75)

Se quiser escolher uma cor, clique na amostra à esquerda da caixa Sem cor.

Escolhendo uma amostra de cor

Se você clicar na caixa de cores para abrir o seletor de cores novamente, a caixa abaixo do controle deslizante mostrará os valores atuais de vermelho, verde, azul e alfa (rgba). O último número indica a porcentagem de opacidade atual como um decimal. Você pode usar o controle deslizante para ajustar a opacidade ou inserir o valor decimal desejado.

Definindo a opacidade da cor do plano de fundo

NOTE
Page Builder também oferece suporte a uma camada de transparência, ou a um canal alfa, em imagens de plano de fundo que podem ser usadas para criar planos de fundo com vários graus de opacidade.

Background Type

Um tipo de plano de fundo pode ser uma imagem ou um vídeo. O Page Builder assume o padrão Image e mostra várias configurações de imagem. Se você selecionar Video, o Page Builder trocará as configurações da imagem pelas configurações do vídeo. Ambas as configurações de tipo de plano de fundo são descritas nas seções a seguir.

Tipo de plano de fundo

Configurações de tipo de imagem

Se você definir o Background Type ​como Image, use as seguintes configurações para definir a exibição da imagem de fundo.

Banner com imagem de plano de fundo

  • Background Image - Se necessário, use as ferramentas fornecidas para escolher uma imagem de plano de fundo a ser aplicada ao banner:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Ferramenta Descrição
    Upload Faz upload de um arquivo de imagem de seu computador local para a galeria e o aplica como a imagem de fundo para o banner.
    Select from Gallery Solicita que você escolha uma imagem existente da galeria como imagem de fundo para o banner.
    Ícone de câmera {width="25"} Permite que você arraste a imagem para o bloco da câmera ou navegue até a imagem no seu sistema de arquivos local.
  • Background Mobile Image - Se necessário, use as mesmas ferramentas para escolher uma imagem de plano de fundo diferente para ser usada para exibição em dispositivos móveis.

  • Background Size - Escolha como a imagem de plano de fundo é dimensionada em relação à largura do banner:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opção Descrição
    Cover A imagem de fundo cobre a largura total do banner.
    Contain A imagem de fundo é limitada à largura da área de conteúdo.
    Auto Aplica o tamanho da folha de estilos atual.

    Tamanho do plano de fundo {width="400"}

  • Background Position - Escolha como a imagem do plano de fundo será ancorada em relação ao banner:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Ponto de ancoragem Position
    Top Esquerda / Centro / Direita
    Center Esquerda / Centro / Direita
    Bottom Esquerda / Centro / Direita

    O ponto de ancoragem se parece com um pino de pressão que anexa a imagem ao banner na posição de fundo especificada.

  • Background Repeat - Se quiser repetir a imagem de fundo para preencher o espaço, altere esta configuração Yes.

Configurações de tipo de vídeo

Se você definir o Tipo de Plano de Fundo como Video, use as configurações a seguir para definir a exibição da imagem de plano de fundo.

  • Video URL - Digite uma URL de vídeo válida. Os URLs válidos do vídeo podem ser links para:

    • Vídeos do YouTube: https://youtu.be/CoDhMRUUjeI
    • Vídeos do Vimeo: https://vimeo.com/190156113
    • Arquivos de vídeo válidos (.mp4 é recomendado): https://myvideos.com/spiral.mp4

    URL do vídeo de fundo {width="500"}

  • Overlay Color - Selecione uma cor para aplicar um tom transparente ao vídeo.

  • Infinite Loop - Defina como No para reproduzir o vídeo uma vez e parar. Quando essa opção é definida como Yes (padrão), o vídeo se repete em um loop infinito.

  • Lazy Load - Defina como No para fazer com que o vídeo seja carregado com a página, mesmo quando não estiver visível. Quando essa opção está definida como Yes (padrão), o vídeo é carregado da origem somente quando visível na tela.

  • Play Only When Visible - Defina como No para fazer com que o vídeo comece a ser reproduzido imediatamente após ser carregado, independentemente de estar visível ou não. Quando essa opção está definida como Yes (padrão), o vídeo começa a ser reproduzido somente quando está visível.

  • Fallback Image - Se necessário, especifique uma imagem a ser exibida na tela antes do carregamento do vídeo e se ele não for carregado por algum motivo.

Content

Você pode modificar o conteúdo do slide diretamente no palco ou quando estiver alterando as configurações. As configurações fornecem recursos de conteúdo mais complexos, como links de slides e botões, e sobreposições. A posição do conteúdo reflete a configuração de posicionamento Aparência.

Conteúdo simples no palco

  1. 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.

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

    Preparo com texto formatado {width="500" modal="regular"}

Conteúdo complexo nas configurações

  1. 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 ( Ícone Configurações {width="20"} ).

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

  3. 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.

  4. 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).

  5. 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.

      Escolhendo um produto para vincular {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.

      Escolhendo uma categoria para vincular {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.

      Escolhendo uma página para vincular {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. Configuração de link bloqueada {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.

  6. 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.

    Aparência do slide - colagem à direita {width="600" modal="regular"}

    note note
    NOTE
    Você também pode usar vários botões ou links adicionando um bloco ao banner. Para evitar conflitos, mantenha todos os links ou botões no bloco separado e não adicione um link ou botão diretamente ao banner.
    • 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.

  7. Defina Show Overlay como um dos seguintes:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opção Descrição
    Always A sobreposição está sempre visível.
    On Hover A sobreposição aparece somente ao passar o mouse.
    Never Show A sobreposição não está visível.

    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.

    Configurações de sobreposição de slides {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.

    Cor de sobreposição do slide {width="600" modal="regular"}

Search Engine Optimization seo

O texto dessas configurações está visível para mecanismos de pesquisa e melhora a forma como a página é indexada.

  • Para Alternative Text, insira uma descrição de texto alt para que as ferramentas de acessibilidade digital sejam exibidas.

    O uso do texto alternativo é uma prática recomendada de acessibilidade e é exigido por lei em alguns locais. No HTML, o atributo alt é um subconjunto da marca image: <image title="tooltip" alt="description" src="image.jpg">.

  • Para Title Attribute, insira o texto a ser exibido como uma dica de ferramenta ao passar o mouse.

    Como prática recomendada, escolha um título descritivo e rico em palavras-chave para melhorar a forma como a imagem é indexada por mecanismos de pesquisa. No HTML, o atributo title é um subconjunto da marca image: <image title="tooltip" alt="description" src="image.jpg">.

Advanced

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

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Opção Descrição
    Default Aplica a configuração padrão de alinhamento especificada na folha de estilos do tema atual.
    Left Alinha o conteúdo na borda esquerda do slide, permitindo qualquer preenchimento especificado.
    Center Alinha o conteúdo no centro do slide, permitindo qualquer preenchimento especificado.
    Right Alinha o conteúdo ao longo da borda direita do slide, com permissão para qualquer preenchimento especificado.
  2. Defina o estilo Border que é aplicado aos quatro lados do slide:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Opção Descrição
    Default Aplica o estilo de borda padrão especificado pela folha de estilos associada.
    None Não fornece nenhuma indicação visível das bordas do slide.
    Dotted A borda do contêiner aparece como uma linha pontilhada.
    Dashed A borda do contêiner aparece como uma linha tracejada.
    Solid A borda do contêiner aparece como uma linha sólida.
    Double A borda do contêiner aparece como uma linha dupla.
    Groove A borda do contêiner é exibida como uma linha com ranhura.
    Ridge A borda do contêiner aparece como uma linha estriada.
    Inset A borda do contêiner aparece como uma linha interna.
    Outset A borda do contêiner aparece como uma linha de saída.
  3. Se você definir um estilo de borda diferente de None, conclua as opções de exibição de borda:

    Cor da Borda {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opção Descrição
    Border Color Especifique a cor escolhendo uma amostra, clicando no seletor de cores ou inserindo um nome de cor válido ou um valor hexadecimal equivalente.
    Border Width Insira o número de pixels para a largura da linha de borda.
    Border Radius Insira o número de pixels para definir o tamanho do raio usado para arredondar cada canto da borda.
  4. (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.

  5. 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.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Área de contêiner Descrição
    Margins A quantidade de espaço em branco aplicada à borda externa de todos os lados do slide.
    Padding A quantidade de espaço em branco aplicada à borda interna de todos os lados do slide.

Adicionar um título de controle deslizante

Se quiser um título acima do controle deslizante, basta adicionar um [Tipo de conteúdo de texto] acima dele. Em seguida, formate o texto conforme necessário.

  1. 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.

    Arrastando um espaço reservado para texto acima de um controle deslizante {width="600" modal="regular"}

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

    Editando o texto do título do controle deslizante {width="500" modal="regular"}

Alterar configurações do controle deslizante

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

    Caixa de ferramentas do controle deslizante {width="500" modal="regular"}

  2. 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.

    Altura mínima do controle deslizante {width="400"}

  3. 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.

    Configurações de reprodução automática do controle deslizante {width="600" modal="regular"}

  4. 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.

    Configurações de desaparecimento de controle deslizante e loop infinito {width="600" modal="regular"}

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

  6. 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.

    Setas e pontos da apresentação de slides {width="600" modal="regular"}

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

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

Avançado - controle deslizante slider-advanced

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

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Opção Descrição
    Default Aplica a configuração padrão de alinhamento especificada na folha de estilos do tema atual.
    Left Alinha os slides ao longo da borda esquerda do contêiner do controle deslizante, permitindo qualquer preenchimento especificado.
    Center Alinha os slides no centro do contêiner do controle deslizante, permitindo qualquer preenchimento especificado.
    Right Alinha os slides ao longo da borda direita do contêiner do controle deslizante, com permissão para qualquer preenchimento especificado.
  2. Defina o estilo Border que é aplicado aos quatro lados do contêiner de controle deslizante:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Opção Descrição
    Default Aplica o estilo de borda padrão especificado pela folha de estilos associada.
    None Não fornece nenhuma indicação visível das bordas do contêiner.
    Dotted A borda do contêiner aparece como uma linha pontilhada.
    Dashed A borda do contêiner aparece como uma linha tracejada.
    Solid A borda do contêiner aparece como uma linha sólida.
    Double A borda do contêiner aparece como uma linha dupla.
    Groove A borda do contêiner é exibida como uma linha com ranhura.
    Ridge A borda do contêiner aparece como uma linha estriada.
    Inset A borda do contêiner aparece como uma linha interna.
    Outset A borda do contêiner aparece como uma linha de saída.
  3. Se você definir um estilo de borda diferente de None, conclua as opções de exibição de borda:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opção Descrição
    Border Color Especifique a cor escolhendo uma amostra, clicando no seletor de cores ou inserindo um nome de cor válido ou um valor hexadecimal equivalente.
    Border Width Insira o número de pixels para a largura da linha de borda.
    Border Radius Insira o número de pixels para definir o tamanho do raio usado para arredondar cada canto da borda.
  4. (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.

  5. 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.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Área de contêiner Descrição
    Margins A quantidade de espaço em branco aplicada à borda externa de todos os lados do container.
    Padding A quantidade de espaço em branco aplicada à borda interna de todos os lados do contêiner.

Teste o controle deslizante

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

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

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

    Visualização do controle deslizante - modo de exibição padrão {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.

    Visualização do controle deslizante - exibição móvel {width="400" modal="regular"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d