Esse componente não é compatível com anúncios HTML para AMP, anúncios em vídeo nem com anúncios gráficos.
Como escolher a galeria certa
O Google Web Designer tem três componentes de galeria diferentes:
- A Galeria 360º mostra imagens de todos os lados de um objeto, permitindo que você deslize-o para frente e para trás. A Galeria 360° não exibe grupos nem elementos de navegação.
- A Galeria deslizante tem uma aparência simples e plana e permite que você movimente imagens ou grupos no sentido vertical ou horizontal.
- A Galeria carrossel é semelhante à Galeria deslizante, mas ainda oferece tridimensionalidade às imagens vizinhas, como se elas estivessem em uma tela giratória.
- A Galeria com transição oferece uma variedade de efeitos de animação quando você alterna de uma imagem para outra.
Como usar a Galeria deslizante:
-
Abra o painel Componentes e a pasta Galerias.
-
Arraste o componente Galeria deslizante para o cenário.
-
Na seção de propriedades do componente Galeria deslizante do painel Propriedades, escolha um nome para o componente.
-
Adicione um conjunto de imagens ou de grupos. Use grupos para exibir elementos diferentes de imagens ou para mostrar vários elementos em um único frame.
- Para adicionar imagens, use um dos seguintes métodos:
-
Na seção de propriedades do componente Galeria deslizante no painel Propriedades, adicione URLs para suas imagens no campo Imagens, separados por vírgulas.
-
Na seção de propriedades do componente Galeria deslizante no painel Propriedades, clique no botão Selecionar imagens da galeria . Clique no botão Escolher arquivos para procurar arquivos de imagem ou arrastá-los diretamente para a caixa de diálogo.
-
-
Para adicionar grupos à galeria:
- Na seção de propriedades do componente Galeria deslizante no painel Propriedades, adicione uma lista de nomes de grupos no campo Grupos, separados por vírgula.
- Para adicionar imagens, use um dos seguintes métodos:
-
Como opção, ajuste as propriedades do componente, descritas abaixo.
Uso de grupos na Galeria deslizante
A Galeria deslizante pode exibir conjuntos de imagens ou de grupos. Com os grupos, você pode usar recursos que não são imagens (como vídeos) ou vários recursos em um único frame da galeria (como imagens com legendas).
Quando você estiver usando vídeos ou outros recursos interativos, selecione Desativar o deslize no painel "Propriedades". Isso permite que o usuário interaja com os controles de vídeo. Você pode usar o componente Navegação da galeria para permitir que o usuário navegue entre os frames da galeria.
Para criar uma galeria que mostre uma combinação de imagens e grupos, primeiro é necessário converter as imagens que você quer usar em grupos.
Além disso, é possível exibir vários elementos dinâmicos na galeria usando grupos.
Para reordenar ou remover imagens na galeria:
- Na seção de propriedades do componente Galeria deslizante no painel Propriedades, clique no botão Selecionar imagens da galeria .
- Arraste uma imagem para a nova posição a fim de mudar a ordem ou passe o cursor sobre ela e clique no botão Excluir para remover a imagem da galeria.
- Clique em OK.
Propriedades
Propriedade | Descrição |
---|---|
Nome | Define o nome da Galeria deslizante. |
Imagens | Permite selecionar as imagens para uso na galeria. Pode ser vinculado a dados dinâmicos. |
Grupos | É uma lista de grupos delimitados por vírgulas para serem usados na galeria. Pode ser vinculado a dados dinâmicos. |
Transição | O tempo de transição entre imagens em milésimos de segundo. |
Frame inicial | Indica o número da imagem que você quer exibir inicialmente. |
Exibir frames | O número de frames que são exibidos na galeria por vez. |
Deslizar frames | O número de frames que avançam a cada movimento. |
Reprodução automática | Se esta opção for marcada, as imagens na galeria serão reproduzidas automaticamente. |
Incluir navegação | Se esta opção for marcada, serão incluídos ícones de navegação para se mover na galeria. |
Usar miniaturas | Quando a opção "Incluir navegação" está marcada, exibe imagens de miniaturas para navegação no lugar de ícones. |
Cor de destaque | Define a cor de destaque para a imagem de navegação. |
Dimensionamento | Determina como as imagens de tamanhos diferentes são exibidas em um frame de tamanho fixo:
|
Direção | Determina se a imagem move-se horizontal ou verticalmente na galeria. |
Propriedades avançadas
Para exibir as propriedades avançadas, clique no ícone de expansão de Propriedades avançadas no painel de propriedades do componente.
Propriedade avançada | Descrição |
---|---|
Equidistância do frame | A distância entre as imagens. |
Largura do frame | A largura (em pixels) do frame da imagem na galeria. |
Altura do frame | A altura (em pixels) do frame da imagem na galeria. |
Duração da reprodução automática | A duração (em milésimos de segundo) de execução da galeria, do primeiro ao último frame. Esse tempo é dividido igualmente entre cada imagem, a menos que um Intervalo da etapa de reprodução automática seja escolhido. |
Intervalo da etapa de reprodução automática | A duração (em milésimos de segundo) da exibição de cada imagem quando a Reprodução automática é ativada. As imagens são reproduzidas com esta duração até que a duração total da reprodução automática seja atingida, alternando entre as imagens várias vezes se necessário. |
URLs de saída | É uma lista de URLs, separados por vírgulas, que corresponde a cada frame na galeria. Pode ser vinculado a dados dinâmicos. |
Desativar o deslize | Uma caixa de seleção que permite a você desativar a navegação de deslize para a galeria. Isso permite ao usuário interagir com elementos no frame sem que a interação altere o frame acidentalmente. Quando essa opção é marcada, é possível usar a propriedade "Incluir navegação" ou o componente Navegação da galeria para alterar os frames. |
Pausar mídia ao sair do frame | Quando selecionada, pausa o áudio ou o vídeo em reprodução no frame atual sempre que esse frame é alterado. Isso evita que algum conteúdo indesejado seja reproduzido em segundo plano. |
Retomar mídia ao entrar no frame | Quando selecionada, inicia qualquer áudio ou vídeo pausado no frame seguinte sempre que esse frame se torna ativo. |
Eventos e ações
Eventos enviados pelo componente Galeria deslizanteÉ possível acionar outras ações com base nos seguintes eventos do componente Galeria deslizante:
Evento | Descrição |
---|---|
Primeira interação | Enviado quando o usuário interage com a galeria pela primeira vez. |
Todos os frames visualizados | Enviado quando cada frame da galeria já foi exibido pelo menos uma vez. |
Imagens carregadas | Enviado quando todos os frames da galeria são carregados. |
Reprodução automática finalizada | Enviado quando a reprodução automática é encerrada por algum motivo. |
Frame exibido | Enviado quando cada novo frame é exibido completamente. |
Frame ativado | Enviado quando uma alteração de frame é iniciada. |
Frame reproduzido automaticamente | Enviado quando um frame é exibido automaticamente durante a reprodução automática. |
Toque do frame | Enviado quando o frame recebe um clique. |
Extremidade esquerda | Enviado quando a galeria atinge a extremidade esquerda depois de ser deslizada. |
Extremidade direita | Enviado quando a galeria atinge a extremidade direita depois de ser deslizada. |
Colocar o mouse sobre um frame | Enviado quando o mouse entra no frame. |
Afastar o mouse de um frame | Enviado quando o mouse sai do frame. |
Rastrear início | Enviado quando a ação de arrastar com o mouse ou por toque é iniciada. |
Rastreamento | O componente registra os dados de local X e Y associados à ação de arrastar com o mouse ou por toque. |
Término da faixa | Enviado quando a ação de arrastar com o mouse ou por toque é interrompida. |
Para selecionar um desses eventos na caixa de diálogo Evento, defina o componente Galeria deslizante como o destino.
As seguintes ações do componente Galeria deslizante podem ser acionadas em resposta a outros eventos:
Ação | Opções de configuração |
---|---|
Ir para o frame |
|
Alternar uma vez |
|
Interromper a rotação | none ("nenhum") |
Ir adiante | none ("nenhum") |
Voltar | nenhum |
Ao selecionar uma dessas ações na caixa de diálogo Evento, defina o componente Galeria deslizante como o destinatário.
Saiba como configurar eventos.
Visualizar
No cenário, a Galeria deslizante exibe somente o frame inicial para dar uma ideia de como o componente será exibido. Para ver o componente completamente renderizado em ação, visualize o documento no navegador que você preferir clicando no botão Visualizar no canto superior direito.